[MR Widget Eng] Security

This issue captures the work around the core implementation - that is having a refactored widget that contains the basic functionality. Missing parts will be tracked in the parent epic: &7881 (closed)

Designs

Resources

• Related UX Issue
• Figma Design Specifications
• Merge request reports framework

Implementation plan

• Iteration 1

Build levels 1 & 2. In this iteration, we are building the MR widget's first and second levels:

Levels 1 & 2

Due to some current restrictions in the MR widget extension API, and for the sake of shipping smaller changes, we will be focusing on the top-level summaries:

• The primary widget wrapper.
  • Fetches the vulnerability report. In the first iteration, we are fetching the full report right off the bat and using it for both the collapsed and expanded states.
  • Supports a loading state with the label Security scanning is loading.
  • Once the query resolves, shows the proper status icon.
    • Non-ultimate:
      • The label becomes Security scans have run.
      • One action button shows some info about the MR widget.
      • The other button toggles a dropdown to download individual reports.
    • Ultimate:
      • The label becomes a colored report's summary.
      • If the report is out-of-date, it's mentioned below the summary.
      • If some job failed, it's mentioned below the summary.
      • If there are no detected vulns., the label states it.
  • Shows a link to the full report.
• Individual scanner sections.
  • A colored vulnerability summary for each section.
  • An info button that toggles a information tooltip about the scanner.

• Iteration 2

Build level 3. Once #341047 (closed) and #346590 (closed) are addressed, we should be able to implement the third and last level that lists detected vulnerabilities in Ultimate.

Levels 3

• Iteration 3

Remove obsolete code.

Telemetry

#343128 (closed)