Skip to content

[FE] Add dependency drawer UI on the Vulnerability Details page

Design: https://gitlab.com/gitlab-org/gitlab/-/issues/519625+

Requirement:

  • if the dependency is transitive there will be a badge/link/button that identify it
  • the user will be able to click on a link/button and a drawer will show with the dependency graphs
  • applies to the vulnerability detail page

🏗️ Proposed Workflow

If dependency is transitive:

  1. Within the "Location" section > below the file link
  2. Display the "dependency path" button
  3. On click → opens the dependency paths drawer

If dependency is not transitive:

  1. Do not display "dependency path" button

ℹ️ Current Workflow

  1. If a vulnerable package exists:
    • Under the "Evidence" section
    • It displays the package name + version

Ex:

Has dependency No dependency
image image

Ex: response to display "Evidence" > "Vulnerable Package"

{
  "details": {
    "vulnerablePackage": {
      "name": "Vulnerable Package",
      "type": "text",
      "value": "webpack-dev-middleware:6.1.1"
    }
  }
}

Ex: response to display "Location"

{
  "location": {
    "file": "yarn.lock",
    "blobPath": "/gitlab-org/gitlab-ui/-/blob/b6818ded034f30adf77f37cb7cce014b10b13694/yarn.lock",
    "dependency": { "package": { "name": "webpack-dev-middleware" }, "version": "6.1.1"}
  }
}
Edited by Samantha Ming