Extract VulnerabilityDetail functional component

Now that the details are rendered explicitly, the markup had a lot of
duplication. This abstracts that duplication into a functional
component.

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

+<script>
+export default {
+  name: 'VulnerabilityDetail',
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template functional>
+  <div class="d-sm-flex my-sm-2 my-4">
+    <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ props.label }}:</label>
+    <div class="col-sm-10 pl-0 text-secondary">
+      <slot></slot>
+    </div>
+  </div>
+</template>

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

@@ -5,6 +5,7 @@ import SafeLink from 'ee/vue_shared/components/safe_link.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import SeverityBadge from './severity_badge.vue';
 import getFileLocation from '../store/utils/get_file_location';
+import VulnerabilityDetail from './vulnerability_detail.vue';
 
 export default {
   name: 'VulnerabilityDetails2',
@@ -13,6 +14,7 @@ export default {
     Icon,
     SafeLink,
     SeverityBadge,
+    VulnerabilityDetail,
   },
   props: {
     vulnerability: {
@@ -78,40 +80,26 @@ export default {
 
 <template>
   <div class="border-white mb-0 px-3">
-    <div v-if="vulnerability.description" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Description') }}:</label
+    <vulnerability-detail
+      v-if="vulnerability.description"
+      :label="s__('Vulnerability|Description')"
     >
-      <div class="col-sm-10 pl-0 text-secondary">
       <gl-friendly-wrap :text="vulnerability.description" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="vulnerability.project" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Project') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="vulnerability.project" :label="s__('Vulnerability|Project')">
       <safe-link class="js-link-project" :href="vulnerability.project.full_path" target="_blank">
         <gl-friendly-wrap :text="vulnerability.project.full_name" />
       </safe-link>
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="url" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0">{{ __('URL') }}:</label>
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="url" :label="__('URL')">
       <safe-link class="js-link-url" :href="url" target="_blank">
         <gl-friendly-wrap :text="url" />
       </safe-link>
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="file" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|File') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="file" :label="s__('Vulnerability|File')">
       <safe-link
         v-if="vulnerability.blob_path"
         class="js-link-file"
@@ -121,14 +109,9 @@ export default {
         <gl-friendly-wrap :text="file" />
       </safe-link>
       <gl-friendly-wrap v-else :text="file" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="identifiers" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Identifiers') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="identifiers" :label="s__('Vulnerability|Identifiers')">
       <span v-for="(identifier, i) in identifiers" :key="i">
         <safe-link
           v-if="identifier.url"
@@ -142,88 +125,46 @@ export default {
         <span v-else> {{ identifier.name }} </span>
         <span v-if="hasMoreValues(i, identifiers)">,&nbsp;</span>
       </span>
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="vulnerability.severity" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Severity') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="vulnerability.severity" :label="s__('Vulnerability|Severity')">
       <severity-badge :severity="vulnerability.severity" class="d-inline" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="vulnerability.report_type" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Report Type') }}:</label
+    <vulnerability-detail
+      v-if="vulnerability.report_type"
+      :label="s__('Vulnerability|Report Type')"
     >
-      <div class="col-sm-10 pl-0 text-secondary">
       <gl-friendly-wrap :text="vulnerability.report_type" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="className" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Class') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="className" :label="s__('Vulnerability|Class')">
       <gl-friendly-wrap :text="className" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="methodName" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Method') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="methodName" :label="s__('Vulnerability|Method')">
       <gl-friendly-wrap :text="methodName" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="image" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Image') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="image" :label="s__('Vulnerability|Image')">
       <gl-friendly-wrap :text="image" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="namespace" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Namespace') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="namespace" :label="s__('Vulnerability|Namespace')">
       <gl-friendly-wrap :text="namespace" />
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="links" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Links') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
+    <vulnerability-detail v-if="links" :label="s__('Vulnerability|Links')">
       <span v-for="(link, i) in links" :key="i">
-          <safe-link
-            class="js-link-links"
-            :href="link.url"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        <safe-link class="js-link-links" :href="link.url" target="_blank" rel="noopener noreferrer">
           {{ link.value || link.url }}
         </safe-link>
         <span v-if="hasMoreValues(i, links)">,&nbsp;</span>
       </span>
-      </div>
-    </div>
+    </vulnerability-detail>
 
-    <div v-if="instances" class="d-sm-flex my-sm-2 my-4">
-      <label class="col-sm-2 text-sm-right font-weight-bold pl-0"
-        >{{ s__('Vulnerability|Instances') }}:</label
-      >
-      <div class="col-sm-10 pl-0 text-secondary">
-        <div v-if="instances" class="info-well">
+    <vulnerability-detail v-if="instances" :label="s__('Vulnerability|Instances')">
+      <div class="info-well">
         <ul class="report-block-list">
           <li v-for="(instance, i) in instances" :key="i" class="report-block-list-issue">
             <div class="report-block-list-icon append-right-5 failed">
@@ -255,7 +196,6 @@ export default {
           </li>
         </ul>
       </div>
-      </div>
-    </div>
+    </vulnerability-detail>
   </div>
 </template>

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/vulnerability_detail_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VulnerabilityDetail component renders the label prop and default slot 1`] = `
+<div
+  class="d-sm-flex my-sm-2 my-4"
+>
+  <label
+    class="col-sm-2 text-sm-right font-weight-bold pl-0"
+  >
+    foo:
+  </label>
+   
+  <div
+    class="col-sm-10 pl-0 text-secondary"
+  >
+    <p>
+      bar
+    </p>
+  </div>
+</div>
+`;

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_detail_spec.js

+import { shallowMount } from '@vue/test-utils';
+import VulnerabilityDetail from 'ee/vue_shared/security_reports/components/vulnerability_detail.vue';
+
+describe('VulnerabilityDetail component', () => {
+  let wrapper;
+
+  const factory = ({ propsData, defaultSlot }) => {
+    wrapper = shallowMount(VulnerabilityDetail, {
+      propsData,
+      slots: {
+        default: defaultSlot,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the label prop and default slot', () => {
+    factory({ propsData: { label: 'foo' }, defaultSlot: '<p>bar</p>' });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});