Fix vulnerability list clearing when already-selected filter is clicked

Changelog: fixed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/83243
EE: true

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue

@@ -180,11 +180,11 @@ export default {
       }
     },
     sort(newSort, oldSort) {
-      // Clear out the vulnerabilities so that the skeleton loader is shown.
-      this.vulnerabilities = [];
       // Anything that changes the querystring will also trigger this watcher (because sort is
       // recomputed), so we need to check that the sort has changed before we reset the paging.
       if (newSort.sortBy !== oldSort.sortBy || newSort.sortDesc !== oldSort.sortDesc) {
+        // Clear out the vulnerabilities so that the skeleton loader is shown.
+        this.vulnerabilities = [];
         this.resetPaging();
       }
     },

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

@@ -63,7 +63,7 @@ export const generateVulnerabilities = () => [
     severity: 'critical',
     state: 'DISMISSED',
     reportType: 'SAST',
-    resolvedOnDefaultBranch: true,
+    resolvedOnDefaultBranch: false,
     location: {
       image:
         'registry.gitlab.com/groulot/container-scanning-test/main:5f21de6956aee99ddb68ae49498662d9872f50ff',
@@ -77,17 +77,39 @@ export const generateVulnerabilities = () => [
       vendor: 'GitLab',
     },
     issueLinks: {
-      nodes: [{ id: 'issue-1', issue: { id: 'issue-1', iid: 15 } }],
+      nodes: [
+        {
+          id: 'issue-1',
+          issue: {
+            id: 'issue-1',
+            iid: 15,
+            webUrl: 'url',
+            webPath: 'path',
+            title: 'title',
+            state: 'state',
+            resolvedOnDefaultBranch: true,
+          },
+        },
+      ],
     },
     externalIssueLinks: {
-      nodes: [{ id: 'issue-1', issue: { iid: 15, externalTracker: 'jira' } }],
+      nodes: [
+        {
+          id: 'issue-1',
+          issue: { iid: 15, externalTracker: 'jira', resolvedOnDefaultBranch: true },
+        },
+      ],
     },
+    vulnerabilityPath: 'path',
+    userNotesCount: 1,
     __typename: 'Vulnerability',
   },
   {
     id: 'id_1',
     detectedAt: '2020-07-22T19:31:24Z',
+    resolvedOnDefaultBranch: false,
     hasSolutions: false,
+    issueLinks: [],
     identifiers: [
       {
         externalType: 'gemnasium',
@@ -108,15 +130,16 @@ export const generateVulnerabilities = () => [
       id: 'project-2',
       nameWithNamespace: 'Administrator / Vulnerability reports',
     },
-    scanner: {
-      id: 'scanner-2',
-      vendor: 'GitLab',
-    },
+    scanner: { id: 'scanner-2', vendor: 'GitLab' },
+    vulnerabilityPath: '#',
+    userNotesCount: 0,
     __typename: 'Vulnerability',
   },
   {
     id: 'id_2',
     detectedAt: '2020-08-22T20:00:12Z',
+    resolvedOnDefaultBranch: false,
+    issueLinks: [],
     identifiers: [],
     title: 'Vulnerability 2',
     severity: 'high',
@@ -133,11 +156,18 @@ export const generateVulnerabilities = () => [
       id: 'scanner-3',
       vendor: 'My Custom Scanner',
     },
+    vulnerabilityPath: 'path',
+    userNotesCount: 2,
     __typename: 'Vulnerability',
   },
   {
     id: 'id_3',
     title: 'Vulnerability 3',
+    detectedAt: new Date(),
+    resolvedOnDefaultBranch: true,
+    issueLinks: [],
+    identifiers: [],
+    reportType: '',
     severity: 'high',
     state: 'DETECTED',
     location: {
@@ -147,7 +177,9 @@ export const generateVulnerabilities = () => [
       id: 'project-4',
       nameWithNamespace: 'Mixed Vulnerabilities / Rails App',
     },
-    scanner: {},
+    scanner: { id: 'scanner-3', vendor: '' },
+    vulnerabilityPath: 'path',
+    userNotesCount: 3,
     __typename: 'Vulnerability',
   },
   {
@@ -155,12 +187,19 @@ export const generateVulnerabilities = () => [
     title: 'Vulnerability 4',
     severity: 'critical',
     state: 'DISMISSED',
+    detectedAt: new Date(),
+    resolvedOnDefaultBranch: true,
+    issueLinks: [],
+    identifiers: [],
+    reportType: 'DAST',
     location: {},
     project: {
       id: 'project-5',
       nameWithNamespace: 'Administrator / Security reports',
     },
-    scanner: {},
+    scanner: { id: 'scanner-4', vendor: 'GitLab' },
+    vulnerabilityPath: 'path',
+    userNotesCount: 4,
     __typename: 'Vulnerability',
   },
   {
@@ -168,6 +207,11 @@ export const generateVulnerabilities = () => [
     title: 'Vulnerability 5',
     severity: 'high',
     state: 'DETECTED',
+    detectedAt: new Date(),
+    resolvedOnDefaultBranch: false,
+    issueLinks: [],
+    identifiers: [],
+    reportType: 'DEPENDENCY_SCANNING',
     location: {
       path: '/v1/trees',
     },
@@ -175,7 +219,9 @@ export const generateVulnerabilities = () => [
       id: 'project-6',
       nameWithNamespace: 'Administrator / Security reports',
     },
-    scanner: {},
+    scanner: { id: 'scanner-5', vendor: 'GitLab' },
+    vulnerabilityPath: 'path',
+    userNotesCount: 5,
     __typename: 'Vulnerability',
   },
 ];

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js

@@ -11,6 +11,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { FIELDS } from 'ee/security_dashboard/components/shared/vulnerability_report/constants';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import { vulnerabilities } from '../../mock_data';
 
 jest.mock('~/flash');
 
@@ -29,8 +30,9 @@ const createVulnerabilitiesRequestHandler = ({ hasNextPage }) =>
     data: {
       group: {
         id: 'group-1',
+        __typename: 'Group',
         vulnerabilities: {
-          nodes: [],
+          nodes: vulnerabilities,
           pageInfo: {
             __typename: 'PageInfo',
             startCursor: 'abc',
@@ -240,22 +242,26 @@ describe('Vulnerability list GraphQL component', () => {
       );
     });
 
-    it('will reset paging if the sort has changed', async () => {
+    it('will reset paging and the vulnerability list if the sort has changed', async () => {
       createWrapper();
+      await waitForPromises();
       router.push({ query: { after: 'abc' } });
-
       findVulnerabilityList().vm.$emit('update:sort', SORT_OBJECT);
       await nextTick();
+
       expect(router.currentRoute.query.after).toBeUndefined();
+      expect(findVulnerabilityList().props('vulnerabilities')).toHaveLength(0);
     });
 
     it('will not reset paging when the page changes but sorting has not', async () => {
       router.push({ query: SORT_OBJECT });
       createWrapper();
+      await waitForPromises();
       router.push({ query: { ...router.currentRoute.query, after: 'abc' } });
       await nextTick();
 
       expect(router.currentRoute.query.after).toBe('abc');
+      expect(findVulnerabilityList().props('vulnerabilities')).toHaveLength(vulnerabilities.length);
     });
   });