Add issue creation history to vulnerability page

- create new footer component to encaspulate all footer
  components for vulnerability page
- pass up vulnerability finding for footer
- move conditional showing of solution card into
  footer component
- update styling to put break between solution card
  and history

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/show/index.js

 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
 import HeaderApp from 'ee/vulnerabilities/components/app.vue';
+import FooterApp from 'ee/vulnerabilities/components/footer.vue';
 
-function createSolutionCardApp() {
-  const el = document.getElementById('js-vulnerability-solution');
+function createFooterApp() {
+  const el = document.getElementById('js-vulnerability-footer');
 
   if (!el) {
     return false;
@@ -13,11 +13,13 @@ function createSolutionCardApp() {
   const { solution, vulnerabilityFeedbackHelpPath, vulnerabilityState } = el.dataset;
   const hasMr = parseBoolean(el.dataset.hasMr);
   const remediation = JSON.parse(el.dataset.remediation);
+  const finding = JSON.parse(el.dataset.finding);
   const hasDownload = Boolean(
     vulnerabilityState !== 'resolved' && remediation?.diff?.length && !hasMr,
   );
 
   const props = {
+    solutionCard: {
       solution,
       remediation,
       hasDownload,
@@ -25,12 +27,18 @@ function createSolutionCardApp() {
       hasRemediation: Boolean(remediation),
       vulnerabilityFeedbackHelpPath,
       isStandaloneVulnerability: true,
+    },
+    feedback: finding.issue_feedback,
+    project: {
+      url: finding.project.full_path,
+      value: finding.project.full_name,
+    },
   };
 
   return new Vue({
     el,
     render: h =>
-      h(SolutionCard, {
+      h(FooterApp, {
         props,
       }),
   });
@@ -60,5 +68,5 @@ function createHeaderApp() {
 
 window.addEventListener('DOMContentLoaded', () => {
   createHeaderApp();
-  createSolutionCardApp();
+  createFooterApp();
 });

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

+<script>
+import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
+import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
+
+export default {
+  name: 'VulnerabilityFooter',
+  components: { IssueNote, SolutionCard },
+  props: {
+    feedback: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    project: {
+      type: Object,
+      required: true,
+    },
+    solutionCard: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    hasSolution() {
+      return this.solutionCard.solution && this.solutionCard.hasRemediation;
+    },
+  },
+};
+</script>
+<template>
+  <ul class="notes">
+    <li v-if="hasSolution" class="note">
+      <solution-card
+        :solution="solutionCard.solution"
+        :remediation="solutionCard.remediation"
+        :has-mr="solutionCard.hasMr"
+        :has-remediation="solutionCard.hasRemediation"
+        :has-download="solutionCard.hasDownload"
+        :vulnerability-feedback-help-path="solutionCard.vulnerabilityFeedbackHelpPath"
+      />
+    </li>
+    <hr />
+    <li v-if="feedback" class="note card my-4 border-bottom">
+      <div class="card-body">
+        <issue-note :feedback="feedback" :project="project" />
+      </div>
+    </li>
+  </ul>
+</template>

ee/app/views/projects/security/vulnerabilities/show.html.haml

@@ -7,7 +7,7 @@
 #js-vulnerability-management-app{ data: vulnerability_data(@vulnerability, @pipeline) }
 
 .issue-details.issuable-details
-  .detail-page-description.content-block
+  .detail-page-description
     %h2.title= @vulnerability.title
     .description
       .md
@@ -37,9 +37,10 @@
             - @vulnerability.finding.identifiers.each do |identifier|
               %li
                 %a{ :href=>identifier.url, target: "_blank", rel: 'noopener noreferrer' }= identifier.name
-        - if @vulnerability.finding.solution || @vulnerability.finding.remediations
-          #js-vulnerability-solution{ data: { vulnerability_state: @vulnerability.state,
+
+#js-vulnerability-footer{ data: { vulnerability_state: @vulnerability.state,
   solution: @vulnerability.finding.solution,
   remediation: @vulnerability.finding.remediations&.first.to_json,
   has_mr: !!@vulnerability.finding.merge_request_feedback.try(:merge_request_iid),
-            vulnerability_feedback_help_path: help_page_path("user/application_security/index", anchor: "interacting-with-the-vulnerabilities") } }
+  vulnerability_feedback_help_path: help_page_path("user/application_security/index", anchor: "interacting-with-the-vulnerabilities"),
+  finding: Vulnerabilities::OccurrenceSerializer.new({}).represent(@vulnerability.finding).to_json } }