Skip to content

[FE] Display vulnerability modal instead of linking to standalone page in the pipeline security dashboard

Why are we doing this work

Recently, with !61536 (merged) we started using the vulnerability_list.vue component in the Pipeline Security Dashboard. This list is backed by GraphQL and was already used in the Project, Group and Instance. Those dashboards list vulnerabilities, whereas the pipeline dashboard display the findings. Briefly, a vulnerability is a finding that is found in the default branch, therefore they have standalone pages. The vulnerability list currently links all items to their standalone pages but with this issue we'll extend this behaviour for the pipeline security dashboard and open a modal instead.

It should look this when implemented:

pipeline-modal

Steps to reproduce:

  1. Fork a repository (such as https://gitlab.com/gitlab-examples/security/security-reports/)
  2. Run the pipeline
  3. Enable the feature flag: :pipeline_security_dashboard_graphql
  4. Go to Project > CI/CD > Pipelines > Your Pipeline > Security Tab

Relevant links

Implementation plan

  • frontend ee/app/assets/javascripts/security_dashboard/components/vulnerability_list.vue will have to open a modal when a finding title is clicked. The current implementation can be found in ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue (check for the issue-modal). We'll have to mount that component when isPipeline is true in the vulnerability_list.vue component.
  • frontend Implement tests.
Edited by Lindsay Kerr