Merge branch '229645-pipeline-extra-identifiers' into 'master'

Add extra identifier count to pipeline sec tab

See merge request gitlab-org/gitlab!37654

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

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading } from '@gitlab/ui';
+import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
@@ -15,6 +15,7 @@ export default {
     GlDeprecatedButton,
     GlFormCheckbox,
     GlSkeletonLoading,
+    GlSprintf,
     Icon,
     SeverityBadge,
     VulnerabilityActionButtons,
@@ -64,9 +65,16 @@ export default {
       const path = this.vulnerability.create_vulnerability_feedback_issue_path;
       return Boolean(path) && !this.hasIssue;
     },
+    extraIdentifierCount() {
+      const { identifiers } = this.vulnerability;
+      return identifiers?.length - 1;
+    },
     isSelected() {
       return Boolean(this.selectedVulnerabilities[this.vulnerability.id]);
     },
+    shouldShowExtraIdentifierCount() {
+      return this.extraIdentifierCount > 0;
+    },
     useConvertReportType() {
       return convertReportType(this.vulnerability.report_type);
     },
@@ -148,12 +156,18 @@ export default {
 
     <div class="table-section gl-white-space-normal section-15">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Identifier') }}</div>
-      <div
-        class="table-mobile-content gl-text-overflow-ellipsis gl-overflow-hidden"
-        :title="vulnerabilityIdentifier"
-      >
+      <div class="table-mobile-content">
+        <div class="gl-text-overflow-ellipsis gl-overflow-hidden" :title="vulnerabilityIdentifier">
           {{ vulnerabilityIdentifier }}
         </div>
+        <div v-if="shouldShowExtraIdentifierCount" class="gl-text-gray-500">
+          <gl-sprintf :message="__('+ %{count} more')">
+            <template #count>
+              {{ extraIdentifierCount }}
+            </template>
+          </gl-sprintf>
+        </div>
+      </div>
     </div>
 
     <div class="table-section section-15">

ee/changelogs/unreleased/229645-pipeline-extra-identifiers.yml

+---
+title: Add extra identifier count to pipeline sec tab
+merge_request: 37654
+author:
+type: changed

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

@@ -5,6 +5,7 @@ import createStore from 'ee/security_dashboard/store';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import mockDataVulnerabilities from '../store/modules/vulnerabilities/data/mock_data_vulnerabilities';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import { trimText } from 'helpers/text_helper';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -82,8 +83,10 @@ describe('Security Dashboard Table Row', () => {
       ).toContain(vulnerability.severity);
     });
 
-    it('should render the identifier name', () => {
-      expect(findContent(2).text()).toContain(vulnerability.identifiers[0].name);
+    it('should render the identifier cell', () => {
+      const { identifiers } = vulnerability;
+      expect(findContent(2).text()).toContain(identifiers[0].name);
+      expect(trimText(findContent(2).text())).toContain(`${identifiers.length - 1} more`);
     });
 
     it('should render the report type', () => {
@@ -239,4 +242,17 @@ describe('Security Dashboard Table Row', () => {
       });
     });
   });
+
+  describe('with less than two identifiers', () => {
+    const vulnerability = mockDataVulnerabilities[1];
+
+    beforeEach(() => {
+      createComponent(shallowMount, { props: { vulnerability } });
+    });
+
+    it('should render the identifier cell', () => {
+      const { identifiers } = vulnerability;
+      expect(findContent(2).text()).toBe(identifiers[0].name);
+    });
+  });
 });