Add identifiers column to pipeline security tab

- create utility method to find primary identifier out of array of
  identifiers
- add tests

doc/user/application_security/security_dashboard/index.md

@@ -45,7 +45,7 @@ At the pipeline level, the Security section displays the vulnerabilities present
 
 Visit the page for any pipeline which has run any of the [supported reports](#supported-reports). Click the **Security** tab to view the Security findings.
 
-![Pipeline Security Dashboard](img/pipeline_security_dashboard_v12_6.png)
+![Pipeline Security Dashboard](img/pipeline_security_dashboard_v13_2.png)
 
 NOTE: **Note:**
 A pipeline consists of multiple jobs, including SAST and DAST scanning. If any job fails to finish for any reason, the security dashboard will not show SAST scanner output. For example, if the SAST job finishes but the DAST job fails, the security dashboard will not show SAST results. The analyzer will output an [exit code](../../../development/integrations/secure.md#exit-code) on failure.

doc/user/project/import/gemnasium.md

@@ -105,7 +105,7 @@ back to both GitLab and GitHub when completed.
 
 1. The result of the job will be visible directly from the pipeline view:
 
-   ![Security Dashboard](../../application_security/security_dashboard/img/pipeline_security_dashboard_v12_6.png)
+   ![Security Dashboard](../../application_security/security_dashboard/img/pipeline_security_dashboard_v13_2.png)
 
 NOTE: **Note:**
 If you don't commit very often to your project, you may want to use

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue

@@ -77,6 +77,9 @@ export default {
       <div class="table-section flex-grow-1" role="rowheader">
         {{ s__('Reports|Vulnerability') }}
       </div>
+      <div class="table-section section-15" role="rowheader">
+        {{ s__('Reports|Identifier') }}
+      </div>
       <div class="table-section section-20" role="rowheader"></div>
     </div>
 

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

@@ -6,6 +6,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
 import VulnerabilityIssueLink from './vulnerability_issue_link.vue';
 import { DASHBOARD_TYPES } from '../store/constants';
+import getPrimaryIdentifier from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
 
 export default {
   name: 'SecurityDashboardTableRow',
@@ -36,6 +37,9 @@ export default {
     severity() {
       return this.vulnerability.severity || ' ';
     },
+    vulnerabilityIdentifier() {
+      return getPrimaryIdentifier(this.vulnerability.identifiers);
+    },
     vulnerabilityNamespace() {
       const { project, location } = this.vulnerability;
       if (this.dashboardType === DASHBOARD_TYPES.GROUP) {
@@ -135,6 +139,13 @@ export default {
       </div>
     </div>
 
+    <div class="table-section section-15">
+      <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Identifier') }}</div>
+      <div class="table-mobile-content">
+        {{ vulnerabilityIdentifier }}
+      </div>
+    </div>
+
     <div class="table-section section-20">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Actions') }}</div>
       <div class="table-mobile-content action-buttons d-flex justify-content-end">

ee/app/assets/javascripts/security_dashboard/store/constants.js

@@ -30,3 +30,5 @@ export const UNSCANNED_PROJECTS_DATE_RANGES = [
   { description: s__('UnscannedProjects|30 or more days'), fromDay: 30, toDay: 60 },
   { description: s__('UnscannedProjects|60 or more days'), fromDay: 60, toDay: Infinity },
 ];
+
+export const PRIMARY_IDENTIFIER_TYPE = 'cve';

ee/app/assets/javascripts/vue_shared/security_reports/store/utils/get_primary_identifier.js

+import { PRIMARY_IDENTIFIER_TYPE } from 'ee/security_dashboard/store/constants';
+/**
+ * Finds the name of the primary identifier or returns the name of the first identifier
+ *
+ * @param {Array} identifiers all available identifiers
+ * @returns {String} the primary identifier's name
+ */
+const getPrimaryIdentifier = (identifiers = []) => {
+  const identifier = identifiers.find(value => value.external_type === PRIMARY_IDENTIFIER_TYPE);
+  return identifier?.name || identifiers[0]?.name || '';
+};
+
+export default getPrimaryIdentifier;

ee/changelogs/unreleased/210327-pipeline-identifier-column.yml

+---
+title: Add identifiers column to pipeline security tab
+merge_request: 35284
+author:
+type: changed

ee/spec/frontend/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -74,16 +74,20 @@ describe('Security Dashboard Table Row', () => {
         findContent(0)
           .text()
           .toLowerCase(),
-      ).toContain(wrapper.props().vulnerability.severity);
+      ).toContain(vulnerability.severity);
+    });
+
+    it('should render the identifier name', () => {
+      expect(findContent(2).text()).toContain(vulnerability.identifiers[0].name);
     });
 
     describe('the project name', () => {
       it('should render the name', () => {
-        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.name);
+        expect(findContent(1).text()).toContain(vulnerability.name);
       });
 
       it('should render the project namespace', () => {
-        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.location.file);
+        expect(findContent(1).text()).toContain(vulnerability.location.file);
       });
 
       it('should fire the openModal action when clicked', () => {
@@ -108,7 +112,7 @@ describe('Security Dashboard Table Row', () => {
       });
 
       it('should contain project name as the namespace', () => {
-        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.project.full_name);
+        expect(findContent(1).text()).toContain(vulnerability.project.full_name);
       });
     });
 
@@ -121,7 +125,7 @@ describe('Security Dashboard Table Row', () => {
       });
 
       it('should contain container image as the namespace', () => {
-        expect(findContent(1).text()).toContain(wrapper.props().vulnerability.location.image);
+        expect(findContent(1).text()).toContain(vulnerability.location.image);
       });
     });
   });

ee/spec/frontend/vue_shared/security_reports/store/utils_spec.js

@@ -13,6 +13,7 @@ import {
   MEDIUM,
   LOW,
 } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
+import getPrimaryIdentifiers from 'ee/vue_shared/security_reports/store/utils/get_primary_identifier';
 
 describe('security reports utils', () => {
   describe('findIssueIndex', () => {
@@ -81,6 +82,22 @@ describe('security reports utils', () => {
     });
   });
 
+  describe('getPrimaryIdentifier', () => {
+    const identifiers = [
+      { external_type: 'cve', name: 'CVE-1337' },
+      { external_type: 'gemnaisum', name: 'GEMNASIUM-1337' },
+    ];
+    it('should return the `cve` identifier if a `cve` identifier does exist', () => {
+      expect(getPrimaryIdentifiers(identifiers)).toBe(identifiers[0].name);
+    });
+    it('should return the first identifier if a `cve` identifier does not exist', () => {
+      expect(getPrimaryIdentifiers([identifiers[1]])).toBe(identifiers[1].name);
+    });
+    it('should return an empty string if identifiers is empty', () => {
+      expect(getPrimaryIdentifiers()).toBe('');
+    });
+  });
+
   describe('groupedTextBuilder', () => {
     const critical = 2;
     const high = 4;

locale/gitlab.pot

@@ -19150,6 +19150,9 @@ msgstr ""
 msgid "Reports|Failure"
 msgstr ""
 
+msgid "Reports|Identifier"
+msgstr ""
+
 msgid "Reports|Metrics reports are loading"
 msgstr ""