Refactor to use shared functions and clean up

- use same data model as Header Vue app
- clean up HTML
- pass props more efficiently
- update test to be cleaner

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

 import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import HeaderApp from 'ee/vulnerabilities/components/app.vue';
 import FooterApp from 'ee/vulnerabilities/components/footer.vue';
 
@@ -10,17 +9,17 @@ function createFooterApp() {
     return false;
   }
 
-  const { solution, vulnerabilityFeedbackHelpPath, vulnerabilityState } = el.dataset;
-  const hasMr = parseBoolean(el.dataset.hasMr);
-  const remediation = JSON.parse(el.dataset.remediation);
+  const { vulnerabilityFeedbackHelpPath, hasMr } = el.dataset;
+  const vulnerability = JSON.parse(el.dataset.vulnerabilityJson);
   const finding = JSON.parse(el.dataset.finding);
+  const remediation = finding.remediations[0];
   const hasDownload = Boolean(
-    vulnerabilityState !== 'resolved' && remediation?.diff?.length && !hasMr,
+    vulnerability.state !== 'resolved' && remediation?.diff?.length && !hasMr,
   );
 
   const props = {
-    solutionCard: {
-      solution,
+    solutionInfo: {
+      solution: finding.solution,
       remediation,
       hasDownload,
       hasMr,

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

@@ -15,14 +15,14 @@ export default {
       type: Object,
       required: true,
     },
-    solutionCard: {
+    solutionInfo: {
       type: Object,
       required: true,
     },
   },
   computed: {
     hasSolution() {
-      return this.solutionCard.solution && this.solutionCard.hasRemediation;
+      return this.solutionInfo.solution || this.solutionInfo.hasRemediation;
     },
   },
 };
@@ -30,16 +30,11 @@ export default {
 <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"
-      />
+      <solution-card v-bind="solutionInfo" />
+    </li>
+    <li>
+      <hr />
     </li>
-    <hr />
     <li v-if="feedback" class="note card my-4 border-bottom">
       <div class="card-body">
         <issue-note :feedback="feedback" :project="project" />

ee/app/helpers/vulnerabilities_helper.rb

@@ -8,7 +8,10 @@ module VulnerabilitiesHelper
       vulnerability_json: vulnerability.to_json,
       project_fingerprint: vulnerability.finding.project_fingerprint,
       create_issue_url: create_vulnerability_feedback_issue_path(vulnerability.finding.project),
-      pipeline_json: vulnerability_pipeline_data(pipeline).to_json
+      pipeline_json: vulnerability_pipeline_data(pipeline).to_json,
+      finding: Vulnerabilities::OccurrenceSerializer.new({}).represent(@vulnerability.finding).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"),
     }
   end
 

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

@@ -38,9 +38,4 @@
               %li
                 %a{ :href=>identifier.url, target: "_blank", rel: 'noopener noreferrer' }= identifier.name
 
-#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"),
-  finding: Vulnerabilities::OccurrenceSerializer.new({}).represent(@vulnerability.finding).to_json } }
+#js-vulnerability-footer{ data: vulnerability_data(@vulnerability, @pipeline) }

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -2,12 +2,13 @@ import { shallowMount } from '@vue/test-utils';
 import VulnerabilityFooter from 'ee/vulnerabilities/components/footer.vue';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
 import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
+import { TEST_HOST } from 'helpers/test_constants';
 
 describe('Vulnerability Footer', () => {
   let wrapper;
 
   const minimumProps = {
-    solutionCard: {
+    solutionInfo: {
       hasDownload: false,
       hasMr: false,
       hasRemediation: false,
@@ -23,7 +24,7 @@ describe('Vulnerability Footer', () => {
     },
   };
 
-  const solutionCardProp = {
+  const solutionInfoProp = {
     hasDownload: true,
     hasMr: false,
     hasRemediation: true,
@@ -42,7 +43,7 @@ describe('Vulnerability Footer', () => {
     feedback_type: 'issue',
     id: 36,
     issue_iid: 22,
-    issue_url: 'http://gitlab.aturinske:3000/root/security-reports/-/issues/22',
+    issue_url: `${TEST_HOST}/root/security-reports/-/issues/22`,
     project_fingerprint: 'f7319ea35fc016e754e9549dd89b338aea4c72cc',
     project_id: 19,
   };
@@ -59,25 +60,25 @@ describe('Vulnerability Footer', () => {
 
   describe('solution card', () => {
     it('does show solution card when there is one', () => {
-      createWrapper({ ...minimumProps, solutionCard: solutionCardProp });
-      expect(wrapper.find(SolutionCard).exists()).toBe(true);
+      createWrapper({ ...minimumProps, solutionInfo: solutionInfoProp });
+      expect(wrapper.contains(SolutionCard)).toBe(true);
     });
 
     it('does not show solution card when there is not one', () => {
       createWrapper();
-      expect(wrapper.find(SolutionCard).exists()).toBe(false);
+      expect(wrapper.contains(SolutionCard)).toBe(false);
     });
   });
 
   describe('issue history', () => {
     it('does show issue history when there is one', () => {
       createWrapper({ ...minimumProps, feedback: feedbackProps });
-      expect(wrapper.find(IssueNote).exists()).toBe(true);
+      expect(wrapper.contains(IssueNote)).toBe(true);
     });
 
     it('does not show issue history when there is not one', () => {
       createWrapper();
-      expect(wrapper.find(IssueNote).exists()).toBe(false);
+      expect(wrapper.contains(IssueNote)).toBe(false);
     });
   });
 });