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

Show count of extra identifiers in project dash

See merge request gitlab-org/gitlab!37256

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

 <script>
 import { difference } from 'lodash';
 import { s__, __, sprintf } from '~/locale';
-import { GlFormCheckbox, GlLink, GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import { GlFormCheckbox, GlLink, GlSkeletonLoading, GlSprintf, GlTable } from '@gitlab/ui';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/empty_states/filters_produced_no_results.vue';
@@ -25,6 +25,7 @@ export default {
     GlFormCheckbox,
     GlLink,
     GlSkeletonLoading,
+    GlSprintf,
     GlTable,
     IssueLink,
     LocalStorageSync,
@@ -195,6 +196,9 @@ export default {
     deselectAllVulnerabilities() {
       this.selectedVulnerabilities = {};
     },
+    extraIdentifierCount(identifiers) {
+      return identifiers?.length - 1;
+    },
     primaryIdentifier(identifiers) {
       return getPrimaryIdentifier(identifiers, 'externalType');
     },
@@ -210,6 +214,9 @@ export default {
         return acc;
       }, {});
     },
+    shouldShowExtraIdentifierCount(identifiers) {
+      return identifiers?.length > 1;
+    },
     shouldShowVulnerabilityPath(item) {
       return Boolean(item.location.image || item.location.file);
     },
@@ -333,9 +340,20 @@ export default {
       </template>
 
       <template #cell(identifier)="{ item }">
-        <span data-testid="vulnerability-identifier">
+        <div data-testid="vulnerability-identifier">
           {{ primaryIdentifier(item.identifiers) }}
-        </span>
+        </div>
+        <div
+          v-if="shouldShowExtraIdentifierCount(item.identifiers)"
+          data-testid="vulnerability-more-identifiers"
+          class="gl-text-gray-500"
+        >
+          <gl-sprintf :message="__('+ %{count} more')">
+            <template #count>
+              {{ extraIdentifierCount(item.identifiers) }}
+            </template>
+          </gl-sprintf>
+        </div>
       </template>
 
       <template #cell(reportType)="{ item }">

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

+---
+title: Show count of extra identifiers in project dashboard
+merge_request: 37256
+author:
+type: changed

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

@@ -51,6 +51,7 @@ export const generateVulnerabilities = () => [
   },
   {
     id: 'id_2',
+    identifiers: [],
     title: 'Vulnerability 2',
     severity: 'high',
     state: 'opened',

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

@@ -11,6 +11,7 @@ import VulnerabilityList, {
 import FiltersProducedNoResults from 'ee/security_dashboard/components/empty_states/filters_produced_no_results.vue';
 import DashboardHasNoVulnerabilities from 'ee/security_dashboard/components/empty_states/dashboard_has_no_vulnerabilities.vue';
 import { generateVulnerabilities, vulnerabilities } from './mock_data';
+import { trimText } from 'helpers/text_helper';
 
 describe('Vulnerability list component', () => {
   useLocalStorageSpy();
@@ -163,9 +164,12 @@ describe('Vulnerability list component', () => {
       expect(cellText).not.toContain('(line: ');
     });
 
-    it('should not display the vulnerability identifier', () => {
-      const cell = findDataCell('vulnerability-identifier');
-      expect(cell.exists()).toBe(false);
+    it('should not display the vulnerability identifier cell', () => {
+      const identifier = findDataCell('vulnerability-identifier');
+      expect(identifier.exists()).toBe(false);
+
+      const extraIdentifierCount = findDataCell('vulnerability-more-identifiers');
+      expect(extraIdentifierCount.exists()).toBe(false);
     });
 
     it('should not display the vulnerability report type', () => {
@@ -208,11 +212,18 @@ describe('Vulnerability list component', () => {
       expect(cellText).toEqual(location.file);
     });
 
-    it('should correctly render the identifier', () => {
-      const cells = findDataCells('vulnerability-identifier');
+    it('should correctly render the identifier cell', () => {
+      const identifiers = findDataCells('vulnerability-identifier');
+      const extraIdentifierCounts = findDataCells('vulnerability-more-identifiers');
+
+      const firstIdentifiers = newVulnerabilities[0].identifiers;
+      expect(identifiers.at(0).text()).toBe(firstIdentifiers[0].name);
+      expect(trimText(extraIdentifierCounts.at(0).text())).toContain(
+        `${firstIdentifiers.length - 1} more`,
+      );
 
-      expect(cells.at(0).text()).toBe(newVulnerabilities[0].identifiers[0].name);
-      expect(cells.at(1).text()).toBe(newVulnerabilities[1].identifiers[0].name);
+      expect(identifiers.at(1).text()).toBe(newVulnerabilities[1].identifiers[0].name);
+      expect(extraIdentifierCounts).toHaveLength(1);
     });
 
     it('should display the vulnerability report type', () => {