[FE] Add comment-history entries to pipeline security tab vulnerabilities modal
Why are we doing this work
Previously, the pipeline security tab used a Vuex version of the vulnerability list. When an item was clicked on the list, a modal pops up that shows details about the vulnerability:
![]() |
Now that we've switched to the GraphQL version of the vulnerability list, we need to show the same modal using the ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue component:
![]() |
Here's a screenshot that visually divides the modal into three parts. This is just a suggestion that we could follow in order to deliver this task iterately:
Relevant links
Issue Breakdown
| Part 1 | #300755 (closed) |
| Part 2 |
|
| Part 3 | #337487 (closed) |
| Part 4 | #337873 (closed) |
Other
| Epic | &4969 (closed) |
| Design issue | #227105 (closed) |
| Backend issue | #298760 (closed) |
Non-functional requirements
-
Documentation: screenshots need to be updated and text modified if necessary -
Testing: tests need to be updated
Implementation plan
-
frontend Show the modal using the vulnerability_details.vuecomponent when an item in the vulnerability list is clicked. Remove all the logic insideee/app/assets/javascripts/vue_shared/security_reports/components/modal.vueand mount thevulnerability_details.vuecomponent in the modal. -
frontend Mount the history_entry.vuecomponent below thevulnerability_details.vue -
frontend Rewrite the logic to handle the buttons at the bottom of the modal in GraphQL.
Edited by Lindsay Kerr


