[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:
- Within the "Location" section > below the file link
- Display the "dependency path" button
- On click → opens the dependency paths drawer
If dependency is not transitive:
- Do not display "dependency path" button
ℹ️ Current Workflow
- If a vulnerable package exists:
- Under the "Evidence" section
- It displays the package name + version
Ex:
- Has dependency: https://gitlab.com/gitlab-org/gitlab-ui/-/security/vulnerabilities/112113262
- No dependency: https://gitlab.com/gitlab-org/gitlab-ui/-/security/vulnerabilities/124088511
| Has dependency | No dependency |
|---|---|
![]() |
![]() |
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

