[FE] Add modal-footer to pipeline security tab vulnerabilities modal

Why are we doing this work

NOTE: This issue is dependent on #300753 (closed) and the description is written assuming that it is already merged.

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 #337488 (closed)
Part 3 👈 This issue
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

  • TBD
Edited by Lindsay Kerr