Fix duplicate request on vulnerability report page load

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

@@ -40,7 +40,7 @@ export default {
   },
   data() {
     return {
-      filters: {},
+      filters: null,
       projects: [],
     };
   },

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

@@ -18,7 +18,7 @@ export default {
     filters: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
   },
   data() {
@@ -48,6 +48,9 @@ export default {
       error() {
         this.errorLoadingVulnerabilities = true;
       },
+      skip() {
+        return !this.filters;
+      },
     },
   },
   computed: {

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

@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      filters: {},
+      filters: null,
       projects: [],
     };
   },

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

@@ -18,7 +18,7 @@ export default {
     filters: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
   },
   data() {
@@ -59,6 +59,9 @@ export default {
       error() {
         this.errorLoadingVulnerabilities = true;
       },
+      skip() {
+        return !this.filters;
+      },
     },
   },
   watch: {

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

@@ -41,7 +41,7 @@ export default {
     const shouldShowAutoFixUserCallout =
       this.glFeatures.securityAutoFix && !Cookies.get('auto_fix_user_callout_dismissed');
     return {
-      filters: {},
+      filters: null,
       shouldShowAutoFixUserCallout,
     };
   },

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

@@ -28,7 +28,7 @@ export default {
     filters: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
   },
   data() {
@@ -60,6 +60,9 @@ export default {
       error() {
         this.errorLoadingVulnerabilities = true;
       },
+      skip() {
+        return !this.filters;
+      },
     },
     securityScanners: {
       query: securityScannersQuery,

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

@@ -22,7 +22,7 @@ export default {
     filters: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
   },
   data() {
@@ -64,6 +64,9 @@ export default {
       error() {
         this.queryError = true;
       },
+      skip() {
+        return !this.filters;
+      },
     },
   },
 };

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

@@ -71,7 +71,11 @@ describe('First Class Group Dashboard Component', () => {
   describe('when has projects', () => {
     beforeEach(() => {
       wrapper = createWrapper({
-        data: () => ({ projects: [{ id: 1, name: 'GitLab Org' }], projectsWereFetched: true }),
+        data: () => ({
+          projects: [{ id: 1, name: 'GitLab Org' }],
+          projectsWereFetched: true,
+          filters: {},
+        }),
       });
     });
 

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

-import { GlAlert, GlTable, GlEmptyState, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import FirstClassGroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerabilities.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { generateVulnerabilities } from './mock_data';
 
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
 describe('First Class Group Dashboard Vulnerabilities Component', () => {
   let wrapper;
   const apolloMock = {
@@ -22,13 +28,15 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
     expect(findLoadingIcon().exists()).toBe(nextPage);
   };
 
-  const createWrapper = ({ $apollo = apolloMock, stubs } = {}) => {
+  const createWrapper = ({ $apollo = apolloMock } = {}) => {
     return shallowMount(FirstClassGroupVulnerabilities, {
-      stubs,
       mocks: {
         $apollo,
         fetchNextPage: () => {},
       },
+      propsData: {
+        filters: {},
+      },
       provide: {
         groupFullPath,
         hasVulnerabilities: true,
@@ -61,9 +69,6 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
         $apollo: {
           queries: { vulnerabilities: { loading: false } },
         },
-        stubs: {
-          GlAlert,
-        },
       });
 
       wrapper.setData({
@@ -98,11 +103,6 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
         $apollo: {
           queries: { vulnerabilities: { loading: false } },
         },
-        stubs: {
-          VulnerabilityList,
-          GlTable,
-          GlEmptyState,
-        },
       });
 
       wrapper.setData({
@@ -207,4 +207,38 @@ describe('First Class Group Dashboard Vulnerabilities Component', () => {
       expectLoadingState({ initial: true });
     });
   });
+
+  describe('filters prop', () => {
+    const mockQuery = jest.fn().mockResolvedValue({
+      data: {
+        group: {
+          vulnerabilities: {
+            nodes: [],
+            pageInfo: { startCursor: '', endCursor: '' },
+          },
+        },
+      },
+    });
+
+    const createWrapperWithApollo = ({ query, filters }) => {
+      wrapper = shallowMount(FirstClassGroupVulnerabilities, {
+        localVue,
+        apolloProvider: createMockApollo([[vulnerabilitiesQuery, query]]),
+        propsData: { filters },
+        provide: { groupFullPath: 'path' },
+      });
+    };
+
+    it('does not run the query when filters is null', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: null });
+
+      expect(mockQuery).not.toHaveBeenCalled();
+    });
+
+    it('runs query when filters is an object', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: {} });
+
+      expect(mockQuery).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -57,9 +57,7 @@ describe('First Class Instance Dashboard Component', () => {
     });
 
     it('should render the vulnerabilities', () => {
-      expect(findInstanceVulnerabilities().props()).toEqual({
-        filters: {},
-      });
+      expect(findInstanceVulnerabilities().exists()).toBe(true);
     });
 
     it('should show the survey banner', () => {

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

-import { GlAlert, GlTable, GlEmptyState, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerabilities.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { generateVulnerabilities } from './mock_data';
 
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
 describe('First Class Instance Dashboard Vulnerabilities Component', () => {
   let wrapper;
 
@@ -17,9 +23,8 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
     expect(findLoadingIcon().exists()).toBe(nextPage);
   };
 
-  const createWrapper = ({ stubs, loading = false, data } = {}) => {
+  const createWrapper = ({ loading = false, data } = {}) => {
     return shallowMount(FirstClassInstanceVulnerabilities, {
-      stubs,
       mocks: {
         $apollo: {
           queries: { vulnerabilities: { loading } },
@@ -27,6 +32,9 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
         fetchNextPage: () => {},
       },
       data,
+      propsData: {
+        filters: {},
+      },
       provide: {
         hasVulnerabilities: true,
         hasJiraVulnerabilitiesIntegrationEnabled: false,
@@ -36,7 +44,6 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when the query is loading', () => {
@@ -52,9 +59,6 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
   describe('when the query returned an error status', () => {
     beforeEach(() => {
       wrapper = createWrapper({
-        stubs: {
-          GlAlert,
-        },
         data: () => ({ errorLoadingVulnerabilities: true }),
       });
     });
@@ -83,11 +87,6 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
 
     beforeEach(() => {
       wrapper = createWrapper({
-        stubs: {
-          VulnerabilityList,
-          GlTable,
-          GlEmptyState,
-        },
         data: () => ({ vulnerabilities }),
       });
     });
@@ -194,4 +193,35 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
       expectLoadingState({ initial: true });
     });
   });
+
+  describe('filters prop', () => {
+    const mockQuery = jest.fn().mockResolvedValue({
+      data: {
+        vulnerabilities: {
+          nodes: [],
+          pageInfo: { startCursor: '', endCursor: '' },
+        },
+      },
+    });
+
+    const createWrapperWithApollo = ({ query, filters }) => {
+      wrapper = shallowMount(FirstClassInstanceVulnerabilities, {
+        localVue,
+        apolloProvider: createMockApollo([[vulnerabilitiesQuery, query]]),
+        propsData: { filters },
+      });
+    };
+
+    it('does not run the query when filters is null', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: null });
+
+      expect(mockQuery).not.toHaveBeenCalled();
+    });
+
+    it('runs query when filters is an object', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: {} });
+
+      expect(mockQuery).toHaveBeenCalled();
+    });
+  });
 });

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

 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import ProjectVulnerabilitiesApp from 'ee/security_dashboard/components/project_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/vulnerability_list.vue';
+import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { generateVulnerabilities } from './mock_data';
 
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
 describe('Vulnerabilities app component', () => {
   let wrapper;
   const apolloMock = {
@@ -180,4 +186,38 @@ describe('Vulnerabilities app component', () => {
       expect(findVulnerabilityList().props().securityScanners).toEqual(securityScanners);
     });
   });
+
+  describe('filters prop', () => {
+    const mockQuery = jest.fn().mockResolvedValue({
+      data: {
+        project: {
+          vulnerabilities: {
+            nodes: [],
+            pageInfo: { startCursor: '', endCursor: '' },
+          },
+        },
+      },
+    });
+
+    const createWrapperWithApollo = ({ query, filters }) => {
+      wrapper = shallowMount(ProjectVulnerabilitiesApp, {
+        localVue,
+        apolloProvider: createMockApollo([[vulnerabilitiesQuery, query]]),
+        propsData: { filters },
+        provide: { groupFullPath: 'path' },
+      });
+    };
+
+    it('does not run the query when filters is null', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: null });
+
+      expect(mockQuery).not.toHaveBeenCalled();
+    });
+
+    it('runs query when filters is an object', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: {} });
+
+      expect(mockQuery).toHaveBeenCalled();
+    });
+  });
 });

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

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
 import VulnerabilityCountList from 'ee/security_dashboard/components/vulnerability_count_list.vue';
 import VulnerabilityCountListLayout from 'ee/security_dashboard/components/vulnerability_count_list_layout.vue';
+import countQuery from 'ee/security_dashboard/graphql/queries/vulnerability_severities_count.query.graphql';
 import eventHub from 'ee/security_dashboard/utils/event_hub';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Vulnerabilities count list component', () => {
   let wrapper;
@@ -98,4 +104,28 @@ describe('Vulnerabilities count list component', () => {
       expect(findVulnerabilityLayout().props('showError')).toBe(true);
     });
   });
+
+  describe('filters prop', () => {
+    const mockQuery = jest.fn().mockResolvedValue(null);
+
+    const createWrapperWithApollo = ({ query, filters }) => {
+      wrapper = shallowMount(VulnerabilityCountList, {
+        localVue,
+        apolloProvider: createMockApollo([[countQuery, query]]),
+        propsData: { scope: 'project', filters },
+      });
+    };
+
+    it('does not run the query when filters is null', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: null });
+
+      expect(mockQuery).not.toHaveBeenCalled();
+    });
+
+    it('runs query when filters is an object', () => {
+      createWrapperWithApollo({ query: mockQuery, filters: {} });
+
+      expect(mockQuery).toHaveBeenCalled();
+    });
+  });
 });