Clarify security report findings in merge request widget

Problem:

In the merge request security report widget UI: findings are displayed with x icon, which means they are newly detected and √ icon, which means the finding was fixed.

This is confusing since 1) it’s unclear what x means, as it’s not explicit in the UI with notes/key, 2) the x/√ is used to denote denied/allowed licenses in the license compliance widget.

Context: #12896 (closed) will remove this section, therefore the icons will be irrelevant. If that issue is further delayed, this is an MVC alternative for the interim.

Solution ideation

• Remove x and √ icons
• Apply explicit headers to clarify the findings
• Replace x (new) => New (header)
• √ (fixed) => "Fixed" (header)

Implementation

Outline

• For each report within grouped_security_reports_app.vue:
  • Switch from <issues-list> to use a <smart-virtual-list> (to ensure rendering performance in case of large lists)
  • Within the list display headers for new and resolved items and corresponding items (using <report-item) underneath
  • Set :show-report-section-status-icon="showReportSectionStatusIcon" prop on <report-item>s to false - this prevents the default status icons from displaying

Tests

• Add tests to ensure the correct headers and items are being rendered (currently this is not covered)

Documentation

• Update screenshots for each report time: https://docs.gitlab.com/ee/user/application_security/#security-scanning-tools