Merge branch '230381-fix-empty-badge' into 'master'

Hide issues badge when there are no issues

See merge request gitlab-org/gitlab!44663

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

@@ -436,7 +436,7 @@ export default {
 
       <template #cell(activity)="{ item }">
         <div class="gl-display-flex gl-justify-content-end">
-          <issues-badge :issues="issues(item)" />
+          <issues-badge v-if="issues(item).length > 0" :issues="issues(item)" />
           <remediated-badge v-if="item.resolvedOnDefaultBranch" class="gl-ml-3" />
         </div>
       </template>

ee/changelogs/unreleased/230381-fix-empty-badge.yml

+---
+title: Hide issues badge when there are no issues
+merge_request: 44663
+author:
+type: fixed

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

@@ -27,6 +27,9 @@ export const generateVulnerabilities = () => [
     scanner: {
       vendor: 'GitLab',
     },
+    issueLinks: {
+      nodes: [{ issue: { iid: 15 } }],
+    },
   },
   {
     id: 'id_1',

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

@@ -46,7 +46,7 @@ describe('Vulnerability list component', () => {
   const findRows = () => wrapper.findAll('tbody tr');
   const findRow = (index = 0) => findRows().at(index);
   const findRowById = id => wrapper.find(`tbody tr[data-pk="${id}"`);
-  const findIssuesBadge = () => wrapper.find(IssuesBadge);
+  const findIssuesBadge = (index = 0) => wrapper.findAll(IssuesBadge).at(index);
   const findRemediatedBadge = () => wrapper.find(RemediatedBadge);
   const findSecurityScannerAlert = () => wrapper.find(SecurityScannerAlert);
   const findDismissalButton = () => findSecurityScannerAlert().find('button[aria-label="Dismiss"]');
@@ -92,8 +92,12 @@ describe('Vulnerability list component', () => {
       expect(cell.text()).toBe(newVulnerabilities[0].title);
     });
 
-    it('should display the issues badge', () => {
-      expect(findIssuesBadge().exists()).toBe(true);
+    it('should display the issues badge for the first item', () => {
+      expect(findIssuesBadge(0).exists()).toBe(true);
+    });
+
+    it('should not display the issues badge for the second item', () => {
+      expect(() => findIssuesBadge(1)).toThrow();
     });
 
     it('should display the remediated badge', () => {