Skip to content

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 Screen_Shot_2022-07-29_at_4.25.02_PM Screen_Shot_2022-08-01_at_10.33.41_AM
Vulnerability modal Screen_Shot_2022-07-29_at_4.24.50_PM Screen_Shot_2022-08-01_at_10.34.33_AM

How to set up and validate locally

To verify the vulnerability details page

  1. 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.
  2. Navigate to the flagged vulnerability's details page at /<group>/<project>/-/security/vulnerabilities/<id>.

To verify the modal

  1. Make sure you have the :pipeline_security_dashboard_graphql feature flag enabled:

    echo "Feature.enable(:pipeline_security_dashboard_graphql)" | rails c
  2. Short-circuit the alert's rendering condition by applying the following patch (copy the block and run pbpaste | git apply in your gitlab/ 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() {
  3. 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.

Related to #368932 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports

Loading