Improve false positive alert UX
What does this MR do and why?
Improve false positive alert UX
This improves how the false positive alert looks in the feature-flagged vulnerability modal and the vulnerability details page:
- It is moved out of the Markdown-styled container to not inherit unwanted styles.
- Some bottom margin is added to space out the information.
Screenshots or screen recordings
Before | After | |
---|---|---|
Vulnerability details page | ||
Vulnerability modal |
How to set up and validate locally
To verify the vulnerability details page
-
You'll need a vulnerability to be flagged as a false positive, which can be done by running the following commands in the Rails console:
vuln = Vulnerability.find(<id>) # replace `<id>` with the ID of the vulnerability you want to mark as a false positive. flag = Vulnerabilities::Flag.new(finding: vuln.finding, origin: "", description: "This is a false positive") flag.save
- Hint: The vulnerability ID is at the end of the URL when looking at a vulnerability details page.
-
Navigate to the flagged vulnerability's details page at
/<group>/<project>/-/security/vulnerabilities/<id>
.
To verify the modal
-
Make sure you have the
:pipeline_security_dashboard_graphql
feature flag enabled:echo "Feature.enable(:pipeline_security_dashboard_graphql)" | rails c
-
Short-circuit the alert's rendering condition by applying the following patch (copy the block and run
pbpaste | git apply
in yourgitlab/
directory):diff --git a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue index 4fb36f5dddb..51e916ac7c1 100644 --- a/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue +++ b/ee/app/assets/javascripts/vulnerabilities/components/vulnerability_details.vue @@ -72,6 +72,7 @@ export default { return (this.location.blobPath || '') + (this.lineNumber ? `#L${this.lineNumber}` : ''); }, isFalsePositive() { + return true; return Boolean(this.vulnerability.falsePositive); }, lineNumber() {
-
Click on any vulnerability in a pipeline's Security tab.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #368932 (closed)