Clickable file and line number links on Vulnerability Report

Release notes

Many of GitLab's security scanners output a file and line number where a potential vulnerability is detected. Users can see this information in the form of a clickable link when viewing a vulnerability's details. The link will take the user directly to the file and line number inside the repository for the default branch. This same information is also displayed on the Vulnerability Report. However, the file names were not clickable, requiring that you open a vulnerability's details page to access the link.

This enhancement brings the convenience of linked filenames to the Vulnerability Report. From a Project, Group, or Security Center Vulnerability Report, you can go directly to the affected file and line number from any vulnerability reported from a scanner which outputs this information. Because you no longer need to first open each vulnerability record, it is much faster to do things like open multiple referenced lines of code in separate tabs for speedy triage.

https://docs.gitlab.com/ee/user/application_security/vulnerability_report/

Further Details

On the security dashboard, the file path and line number of a vulnerability is shown as monospaced text:

However, this is just plain text. To actually view the file with the correct line number, the user needs to click on the vulnerability to view its details, then click on the link in the details view:

This is an extra step that's annoying when dealing with multiple vulnerabilities. We should make the following changes:

1. Make the monospaced text on the vulnerability list a link as well.

2. Change the file/path/file.ext (line: 83) text to file/path/file.ext:83 to match how it's shown in other places, i.e. the details view as shown in the second screenshot above.

Implementation Plan

backend #267521 (closed)

1. GraphQL: Add blobPath (suggesting the name because maybe having it match the field on the vulnerability details page makes sense?) field to VulnerabilityLocation types

frontend (weight: 2)

1. Within vulnerability.fragment.graphql
   • add blobPath to VulnerabilityLocation inline fragments
2. Within vulnerability_list.vue
   • Remove class="monospace" from div that wraps the vulnerability path item
   • Wrap the gl-truncate instance that displays the item.location in a gl-link with the href set to the item.blobPath
   • Update createLocationString to display ${file}:${startLine}
3. Update / add specs