[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:

Peek_2021-02-02_00-02

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:

ksnip_20210202-001548

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:

Screen_Shot_2021-08-03_at_4.12.39_pm

Relevant links

Issue Breakdown

Part 1 #300755 (closed)
Part 2 👈 This issue
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.vue component when an item in the vulnerability list is clicked. Remove all the logic inside ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue and mount the vulnerability_details.vue component in the modal.
  • frontend Mount the history_entry.vue component below the vulnerability_details.vue
  • frontend Rewrite the logic to handle the buttons at the bottom of the modal in GraphQL.
Edited by Lindsay Kerr