Colorize Severity - Redesign of MR grouped vulnerbility text
Problem to solve
Taken from #204176 (closed)
@tlavi conducted SAST research with participants which revealed that users are confused by a job failing or succeeding and the relationship to vulnerabilities being found within it. For example, it's confusing if a job succeeds even though there are vulnerabilities found within. See the video of the research readout here and the slides here.
This issue split from #204176 (closed) and #216140 (closed) to colorize text shown in the mockup below.
Proposal
The current way we generate the report text is a bit cumbersome and any changes to it would be tricky.
We're probably better off rewriting it using <gl-sprintf />
and some nicer logic.
The text in the screenshot reads: Security scanning found 2 critical and 1 high severity vulnerabilities out of 162
.
We'd need to catch all the other cases though.
(note small text update to include new
before each count # per #216140 (comment 371116562))
Documentation
TBD
Availability & Testing
The unit tests for the text generator will need updating and/or any other tests that rely on them working. Don't just delete them and write new ones as this will help us ensure we've caught all the edge cases.
What does success look like, and how can we measure that?
Success looks like the screenshot without any issues with edge cases.
Implementation plan
-
Add summary
slot tosummary_row.vue
that defaults to the existingsummary
prop -
Add success-text
,loading-text
anderror-text
slots toReportSection
component- It turns out this already exists!
-
Update the grouped*Text
getters (or the underlyinggroupedTextBuilder
) to add placeholders for the different severities, (e.g.,%{criticalStart/End}
for use byGlSprintf
-
Use new summary
slot ingrouped_security_reports_app.vue
for each report type, passing the results of thegrouped*Text
getters intoGlSprintf
. -
Add new
after each count # as follow up to #216140 (comment 371116562)