Design │ MVC │ Inline findings in the MR
In Q2 of 2021, Code Quality released inline annotations on diffs (in MRs) and SAST and Secret Detection would like to utilize the same functionality.
Problem to solve
As a developer, I want to see detected security vulnerabilities in the context of my code so that I can triage them (in addition to code quality issues) in the same place and without disrupting my workflow.
As a security engineer, I want to encourage developers on my team to triage their own vulnerabilities so that we can shift left and empower them to prioritize application security without adding additional time or effort to their workflow.
Intended users
User experience goals
-
The user should be able to view detected SAST and Secret Detection vulnerabilities inline in the MR: webIDE, the single file editor, and eventually, the VSCode plugin, and the repo view.
-
The user should be able to triage vulnerability findings faster than than the current experience (going into each vulnerability in the MR security widget, opening the vulnerability details, opening the linked file, and then triaging there, or going to the Vulnerability Report under the Security & Compliance section (which is primarily used by security roles rather than developers.))
-
The code author should feel more responsible for triaging findings when they can see that their code directly introduced the finding (as opposed to the current list of vulnerabilities, some of which wasn't introduced by them directly).
-
The code author should feel empowered to engage with security findings their code may introduce, and subsequently, take action on the findings in order to keep the application safe.
User flow
TBD
Design Proposal
Utilize and expand the functionality that currently exists for Code Quality inline findings.
To Do
-
Competitive analysis (Mural) (%13.11) -
Design explorations & collect initial feedback (%13.12) -
Solution validation: V1 Design (internal) (%14.0 ) (1) -
Incorporate feedback, design iterations (%14.1) -
Solution validation: V2 Designs (internal) (%14.1) (1) -
Incorporate feedback, design iterations (%14.4) (2)(see #322689 (comment 690728093)) -
Internal feedback (%14.5) -
Solution validation (Usertesting.com)(see Solution validation: inline alerts in the MR) (%14.5) -
Communicate research insights in Dovetail and share out -
Internal feedback and iterations (%14.7) -
Communicate findings and design proposal in a video walkthrough, share with UX and Secure (%14.8) -
Design complete; notify PMs and engineers (%14.8)
Then move on to defining the framework in &5972 and post-MVC iterations in #342364.
Design proposal
See design section
Hover
TBD - originally, I proposed a tooltip, but in this MR, the Code Quality tooltip was changed to a popover. We want consistency between Code Quality and security findings, so either both have to be tooltips, both have to be popovers, or the tooltip has to be changed to accommodate more formatting options (see Richer tooltips).
Research Insights
Solution Validation V1
Contextual feedback on designs, participant quotes, and more: https://app.mural.co/invitation/mural/gitlab2474/1623695111802?sender=rlippert4870&key=7213e7f9-6eff-451c-8fe7-a80276d4134e
Solution Validation V2
https://dovetailapp.com/projects/3USNZ4MNLlhYwtp7d0bI6E/insights/present
Permissions and Security
TBD
Documentation
TBD
Availability & Testing
Need to consider how to show both code quality and security findings (potentially on the same line) without overwhelming the user
Available Tier
Ultimate
What does success look like, and how can we measure that?
Solution validation testing
Is this a cross-stage feature?
Collaborate with Create team
Links / references
(1) Solution validation issue (2) Reconsider the UX of interacting with Vulnerabilities in the MR