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 to summary_row.vue that defaults to the existing summary prop
• Add success-text, loading-text and error-text slots to ReportSection component
  • It turns out this already exists!
• Update the grouped*Text getters (or the underlying groupedTextBuilder) to add placeholders for the different severities, (e.g., %{criticalStart/End} for use by GlSprintf
• Use new summary slot in grouped_security_reports_app.vue for each report type, passing the results of the grouped*Text getters into GlSprintf.
• Add new after each count # as follow up to #216140 (comment 371116562)