Use gl-friendly-wrap in test_suite_table
Overview
In !37249 (merged) we added a wrap class to the JUnit report table in order to display the entire suite name and class name in the table, as opposed to truncating it. An improvement to our approach would be to use the <gl-friendly-wrap>
element instead of performing the change in CSS directly.
As a frontend engineer, we should use the <gl-friendly-wrap>
component to ensure consistency across the code base and allow us to universally apply changes to word-wrap as opposed to requiring engineers to look for all occurrences of word-wrap when a change is desired.
Proposal
As discussed here we should use the <gl-friendly-wrap>
component in the table rows for the JUnit test report. We should tell the component that it is preferable to wrap on the following symbols: ::
, #
, .
, _
, -
, /
, \
Context
-
@pslaughter started a discussion: suggestion (non-blocking): You'll notice in the screenshots that the text is wrapped at some non-ideal places:
This is actually a problem we've run into before and solved with a cool
<gl-friendly-wrap>
component kudos to @pgascouvaillancourt! Let's create a follow up to use that component here so we can present a friendlier wrapping😄 I'll create this issue
👀