Render a solution in a standalone vulnerability

- Reuse SolutionCard component to show a solution on the standalone
vulnerability page

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';
+
+window.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-vulnerability-solution');
+
+  if (!el) {
+    return false;
+  }
+
+  const { solution, vulnerabilityFeedbackHelpPath, vulnerabilityState } = el.dataset;
+  const hasMr = parseBoolean(el.dataset.hasMr);
+  const remediation = JSON.parse(el.dataset.remediation);
+  const hasDownload = Boolean(
+    vulnerabilityState !== 'resolved' && remediation?.diff?.length && !hasMr,
+  );
+
+  const props = {
+    solution,
+    remediation,
+    hasDownload,
+    hasMr,
+    hasRemediation: Boolean(remediation),
+    vulnerabilityFeedbackHelpPath,
+    isStandaloneVulnerability: true,
+  };
+
+  return new Vue({
+    el,
+    render: h =>
+      h(SolutionCard, {
+        props,
+      }),
+  });
+});

ee/app/assets/javascripts/vue_shared/security_reports/components/solution_card.vue

@@ -36,6 +36,11 @@ export default {
       default: '',
       required: false,
     },
+    isStandaloneVulnerability: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     solutionText() {
@@ -68,11 +73,16 @@ export default {
 <template>
   <div class="card my-4">
     <div v-if="solutionText" class="card-body d-flex align-items-center">
-      <div class="col-2 d-flex align-items-center pl-0">
-        <div class="circle-icon-container" aria-hidden="true"><icon name="bulb" /></div>
+      <div
+        class="col-auto d-flex align-items-center pl-0"
+        :class="{ 'col-md-2': !isStandaloneVulnerability }"
+      >
+        <div class="circle-icon-container pr-3" aria-hidden="true"><icon name="bulb" /></div>
         <strong class="text-right flex-grow-1">{{ s__('ciReport|Solution') }}:</strong>
       </div>
-      <span class="col-10 flex-shrink-1 pl-0">{{ solutionText }}</span>
+      <span class="flex-shrink-1 pl-0" :class="{ 'col-md-10': !isStandaloneVulnerability }">{{
+        solutionText
+      }}</span>
     </div>
     <template v-if="showMsg">
       <div class="card-footer" :class="{ 'border-0': !solutionText }">

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

@@ -48,3 +48,9 @@
             - @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,
+            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") } }

ee/spec/controllers/projects/security/vulnerabilities_controller_spec.rb

@@ -105,6 +105,12 @@ describe Projects::Security::VulnerabilitiesController do
 
         expect(response.body).to have_css("#js-pipeline-created")
       end
+
+      it 'renders the solution card' do
+        show_vulnerability
+
+        expect(response.body).to have_css("#js-vulnerability-solution")
+      end
     end
 
     context "when there's no attached pipeline" do
@@ -115,6 +121,12 @@ describe Projects::Security::VulnerabilitiesController do
 
         expect(response.body).to have_css("#js-vulnerability-created")
       end
+
+      it 'renders the solution card' do
+        show_vulnerability
+
+        expect(response.body).to have_css("#js-vulnerability-solution")
+      end
     end
 
     context 'when the feature flag is disabled' do