Add generic report to pipeline vulnerability modal

This commit adds the generic-reports section to the vulnerability details
modal on the pipeline security tab.

Changelog: added

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

 <script>
 import { GlFriendlyWrap, GlLink, GlBadge } from '@gitlab/ui';
 import { REPORT_TYPES } from 'ee/security_dashboard/store/constants';
+import GenericReportSection from 'ee/vulnerabilities/components/generic_report/report_section.vue';
 import { SUPPORTING_MESSAGE_TYPES } from 'ee/vulnerabilities/constants';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__, sprintf } from '~/locale';
@@ -12,7 +13,15 @@ import VulnerabilityDetail from './vulnerability_detail.vue';
 
 export default {
   name: 'VulnerabilityDetails',
-  components: { CodeBlock, GlFriendlyWrap, SeverityBadge, VulnerabilityDetail, GlLink, GlBadge },
+  components: {
+    CodeBlock,
+    GenericReportSection,
+    GlFriendlyWrap,
+    SeverityBadge,
+    VulnerabilityDetail,
+    GlLink,
+    GlBadge,
+  },
   props: { vulnerability: { type: Object, required: true } },
   computed: {
     url() {
@@ -281,5 +290,10 @@ export default {
         <span v-if="hasMoreValues(i, assets)">,&nbsp;</span>
       </span>
     </vulnerability-detail>
+    <generic-report-section
+      v-if="vulnerability.details"
+      class="gl-mt-4"
+      :details="vulnerability.details"
+    />
   </div>
 </template>

ee/app/assets/stylesheets/components/generic_vulnerability_report.scss

+.generic-report-container {
+  @include gl-display-grid;
+
+  grid-template-columns: max-content auto;
+}
+
+.generic-report-row {
+  display: contents;
+
+  &:last-child .generic-report-column {
+    @include gl-border-b-0;
+  }
+}
+
+.generic-report-column {
+  @include gl-px-3;
+  @include gl-py-5;
+  @include gl-border-b-1;
+  @include gl-border-b-solid;
+  @include gl-border-gray-100;
+
+  &:first-child {
+    max-width: 15rem;
+  }
+}
+
+.generic-report-list {
+  margin-bottom: 0 !important;
+
+  li {
+    @include gl-ml-0;
+    @include gl-list-style-none;
+  }
+
+  &.generic-report-list-nested li {
+    @include gl-ml-5;
+    list-style-type: disc;
+  }
+}
+
+.generic-report-named-list {
+  @include gl-display-grid;
+  grid-template-columns: max-content auto;
+  margin: 0 !important;
+
+  > .generic-report-named-list-item {
+    display: contents;
+  }
+}
+
+.generic-report-named-list-item {
+  @include gl-list-style-none;
+  margin: 0 !important;
+
+  .generic-report-named-list-label,
+  .generic-report-named-list-value {
+    @include gl-m-0;
+    @include gl-display-flex;
+    @include gl-pr-5;
+    @include gl-py-3;
+    @include gl-border-b-1;
+    @include gl-border-b-solid;
+    @include gl-border-gray-100;
+  }
+
+  &:first-child {
+    > .generic-report-named-list-label,
+    > .generic-report-named-list-value {
+      @include gl-pt-0;
+    }
+  }
+
+  &:last-child {
+    > .generic-report-named-list-label,
+    > .generic-report-named-list-value {
+      @include gl-pb-0;
+      @include gl-border-b-0;
+    }
+  }
+}

ee/app/assets/stylesheets/page_bundles/pipeline.scss

 @import '../../../../../app/assets/stylesheets/page_bundles/pipeline';
+@import '../components/generic_vulnerability_report';
 
 /**
  * Cross-project pipelines (applied conditionally to pipeline graph)

ee/app/assets/stylesheets/page_bundles/security_dashboard.scss

 @import 'page_bundles/mixins_and_variables_and_functions';
+@import '../components/generic_vulnerability_report';
 
 $security-filter-height: 90px;
 $selection-summary-height: 66px;
@@ -119,84 +120,3 @@ $selection-summary-with-error-height: 118px;
     @include sticky-top-positioning($security-filter-height + $selection-summary-with-error-height);
   }
 }
-
-.generic-report-container {
-  @include gl-display-grid;
-
-  grid-template-columns: max-content auto;
-}
-
-.generic-report-row {
-  display: contents;
-
-  &:last-child .generic-report-column {
-    @include gl-border-b-0;
-  }
-}
-
-.generic-report-column {
-  @include gl-px-3;
-  @include gl-py-5;
-  @include gl-border-b-1;
-  @include gl-border-b-solid;
-  @include gl-border-gray-100;
-
-  &:first-child {
-    max-width: 15rem;
-  }
-}
-
-.generic-report-list {
-  margin-bottom: 0 !important;
-
-  li {
-    @include gl-ml-0;
-    @include gl-list-style-none;
-  }
-
-  &.generic-report-list-nested li {
-    @include gl-ml-5;
-    list-style-type: disc;
-  }
-}
-
-.generic-report-named-list {
-  @include gl-display-grid;
-  grid-template-columns: max-content auto;
-  margin: 0 !important;
-
-  > .generic-report-named-list-item {
-    display: contents;
-  }
-}
-
-.generic-report-named-list-item {
-  @include gl-list-style-none;
-  margin: 0 !important;
-
-  .generic-report-named-list-label,
-  .generic-report-named-list-value {
-    @include gl-m-0;
-    @include gl-display-flex;
-    @include gl-pr-5;
-    @include gl-py-3;
-    @include gl-border-b-1;
-    @include gl-border-b-solid;
-    @include gl-border-gray-100;
-  }
-
-  &:first-child {
-    > .generic-report-named-list-label,
-    > .generic-report-named-list-value {
-      @include gl-pt-0;
-    }
-  }
-
-  &:last-child {
-    > .generic-report-named-list-label,
-    > .generic-report-named-list-value {
-      @include gl-pb-0;
-      @include gl-border-b-0;
-    }
-  }
-}

ee/changelogs/unreleased/326028-fe-render-generic-report-data-on-pipeline-security-report-modal.yml

+---
+title: Add generic report section to pipeline vulnerability-detail modal
+merge_request: 61851
+author:
+type: added

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

@@ -195,5 +195,7 @@ key2: value2
   </vulnerability-detail-stub>
    
   <!---->
+   
+  <!---->
 </div>
 `;

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

@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash';
 import { EMPTY_BODY_MESSAGE } from 'ee/vue_shared/security_reports/components/constants';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import VulnerabilityDetails from 'ee/vue_shared/security_reports/components/vulnerability_details.vue';
+import GenericReportSection from 'ee/vulnerabilities/components/generic_report/report_section.vue';
 import { SUPPORTING_MESSAGE_TYPES } from 'ee/vulnerabilities/constants';
 import { TEST_HOST } from 'helpers/test_constants';
 
@@ -39,6 +40,7 @@ describe('VulnerabilityDetails component', () => {
   const findCrashState = () => wrapper.find({ ref: 'crashState' });
   const findCrashType = () => wrapper.find({ ref: 'crashType' });
   const findStacktraceSnippet = () => wrapper.find({ ref: 'stacktraceSnippet' });
+  const findGenericReportSection = () => wrapper.findComponent(GenericReportSection);
 
   const USER_NOT_FOUND_MESSAGE = '{"message":"User not found."}';
 
@@ -336,6 +338,36 @@ describe('VulnerabilityDetails component', () => {
     });
   });
 
+  describe('generic report section', () => {
+    describe('with vulnerability details data', () => {
+      const details = { reportEntry: { type: 'foo', value: 'bar' } };
+
+      beforeEach(() => {
+        const vulnerability = makeVulnerability({ details });
+        componentFactory(vulnerability);
+      });
+
+      it('renders the generic report section', () => {
+        expect(findGenericReportSection().exists()).toBe(true);
+      });
+
+      it('passes the details data as a prop to the generic report section', () => {
+        expect(findGenericReportSection().props('details')).toBe(details);
+      });
+    });
+
+    describe('without vulnerability details data', () => {
+      beforeEach(() => {
+        const vulnerability = makeVulnerability({ details: null });
+        componentFactory(vulnerability);
+      });
+
+      it('does not render the generic report section', () => {
+        expect(findGenericReportSection().exists()).toBe(false);
+      });
+    });
+  });
+
   describe('pin test', () => {
     const factory = (vulnFinding) => {
       wrapper = shallowMount(VulnerabilityDetails, {