Design: MR Security Report MVC

Problem to solve

Identified from the baseline recommendations (gitlab-design#479 (closed)) We've uncovered that the current experience of using the vulnerability list is far from optimal.

Problem statement:

How might we create a workflow that simplifies the remediation process and is inclusive to all users no matter their security ability?

User information:

JTBD: When committing changes to my project, I want to be made aware if I am adding risk through vulnerable code, so that I know my changes can be merged without increasing the risk of my application.

Personas:

• Persona: Software developer Primary
• Persona: Software developer as MR Reviewers Secondary
• Persona: Security Analyst Secondary

Goals

1. Improve the usability of security features in the MR.
2. Improve the experience of interacting with vulnerabilities in the MR.

---

Proposal

Now

1. Move the list of vulnerabilities from its current position to a new tab (in tabs section) in the MR.
2. Add vulnerability count to tab badge
3. Remove Report sections from the list so that there is only one list.
4. Add pagination to the list with more than 20 vulns
5. Account for new vulnerability status switcher in modal
6. Light UI adjustment to MR Security overview area to display scanning status. (nothing new introduced)

Next (in future issues)

• Update vuln list UI to match dashboards
• Add filtering to list
• UI updates to security overview section of MR

Designs:

In Design Tab

Link to designs in figma

old designs

MR Wireframe	MR Design

Widget details:

Widget

Adds the ability to...	Removes the ability to...
View vulnerability counts by severity	View the pipeline report
View findings in dedicated tab	Expand the Security section
	See fixed and new vulnerabilities via icon designation
	See report summary text (X new, X dismissed, X fixed

List details:

List

• Users may filter on; Severity, Confidence, and Report type
• The list will be paginated.
• When no new vulnerabilities are detected the security tab will be disabled and show a 0 value in the badge. The security area will not be actionable in this state.

🔍 🖍 📐 Design Specs

---

Permissions and Security

No changes to existing permissions.

What does success look like, and how can we measure that?

Unknown at this time.

The Q3 baseline score will increase as a result of this change.

Links / references

---

Tasks:

• Explore and define MVC solution
• Identify areas for opportunity beyond the MVC
  • Create validation issues for new features and ideas
• Gather feedback on design direction and proposal
• Finalize MVC mocks and experience
• Consider edge-cases and empty states
• finalize description with design deliverables
• Post design specs