Merge branch '332727-use-standard-filter-for-vulnerability-reports' into 'master'

Use standard filter for scanner filter on non-project level vuln report

See merge request gitlab-org/gitlab!63940

ee/app/assets/javascripts/security_dashboard/components/pipeline/filters.vue

 <script>
 import { GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { severityFilter, pipelineScannerFilter } from 'ee/security_dashboard/helpers';
+import { severityFilter, standardScannerFilter } from 'ee/security_dashboard/helpers';
 import { DISMISSAL_STATES } from 'ee/security_dashboard/store/modules/filters/constants';
 import { s__ } from '~/locale';
 import StandardFilter from '../shared/filters/standard_filter.vue';
@@ -16,7 +16,7 @@ export default {
   },
   data() {
     return {
-      filterConfigs: [severityFilter, pipelineScannerFilter],
+      filterConfigs: [severityFilter, standardScannerFilter],
     };
   },
   computed: {

ee/app/assets/javascripts/security_dashboard/components/shared/filters/filters_layout.vue

@@ -3,7 +3,8 @@ import { debounce } from 'lodash';
 import {
   stateFilter,
   severityFilter,
-  scannerFilter,
+  vendorScannerFilter,
+  standardScannerFilter,
   activityFilter,
   getProjectFilter,
 } from 'ee/security_dashboard/helpers';
@@ -25,6 +26,9 @@ export default {
     };
   },
   computed: {
+    isProjectDashboard() {
+      return this.dashboardType === DASHBOARD_TYPES.PROJECT;
+    },
     isPipeline() {
       return this.dashboardType === DASHBOARD_TYPES.PIPELINE;
     },
@@ -46,7 +50,8 @@ export default {
       this.$emit('filterChange', this.filterQuery);
     }),
   },
-  scannerFilter,
+  vendorScannerFilter,
+  standardScannerFilter,
   activityFilter,
 };
 </script>
@@ -62,7 +67,19 @@ export default {
       :data-testid="filter.id"
       @filter-changed="updateFilterQuery"
     />
-    <scanner-filter :filter="$options.scannerFilter" @filter-changed="updateFilterQuery" />
+
+    <scanner-filter
+      v-if="isProjectDashboard"
+      :filter="$options.vendorScannerFilter"
+      @filter-changed="updateFilterQuery"
+    />
+    <standard-filter
+      v-else
+      :filter="$options.standardScannerFilter"
+      :data-testid="$options.standardScannerFilter.id"
+      @filter-changed="updateFilterQuery"
+    />
+
     <activity-filter
       v-if="!isPipeline"
       :filter="$options.activityFilter"

ee/app/assets/javascripts/security_dashboard/helpers.js

@@ -43,7 +43,10 @@ export const createScannerOption = (vendor, reportType) => {
   };
 };
 
-export const pipelineScannerFilter = {
+// This is used on the pipeline security tab, group-level report, and instance-level report. It's
+// used by the scanner filter that shows a flat list of scan types (DAST, SAST, etc) with no vendor
+// grouping.
+export const standardScannerFilter = {
   name: s__('SecurityReports|Scanner'),
   id: 'reportType',
   options: parseOptions(REPORT_TYPES),
@@ -51,7 +54,9 @@ export const pipelineScannerFilter = {
   defaultOptions: [],
 };
 
-export const scannerFilter = {
+// This is used on the project-level report. It's used by the scanner filter that shows a list of
+// scan types (DAST, SAST, etc) that's grouped by vendor.
+export const vendorScannerFilter = {
   name: s__('SecurityReports|Scanner'),
   id: 'scanner',
   options: Object.keys(REPORT_TYPES).map((x) => createScannerOption(DEFAULT_SCANNER, x)),

ee/spec/frontend/security_dashboard/components/pipeline/filters_spec.js

@@ -2,7 +2,7 @@ import { GlToggle } from '@gitlab/ui';
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import Filters from 'ee/security_dashboard/components/pipeline/filters.vue';
-import { pipelineScannerFilter } from 'ee/security_dashboard/helpers';
+import { standardScannerFilter } from 'ee/security_dashboard/helpers';
 import createStore from 'ee/security_dashboard/store';
 import state from 'ee/security_dashboard/store/modules/filters/state';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -75,8 +75,8 @@ describe('Filter component', () => {
       // scanner filter item.
       mock.mockClear();
 
-      const filterId = pipelineScannerFilter.id;
-      const optionId = pipelineScannerFilter.options[2].id;
+      const filterId = standardScannerFilter.id;
+      const optionId = standardScannerFilter.options[2].id;
       const option = wrapper.findByTestId(`${filterId}:${optionId}`);
       option.vm.$emit('click');
       await wrapper.vm.$nextTick();

ee/spec/frontend/security_dashboard/components/shared/filters/filters_layout_spec.js

@@ -3,7 +3,7 @@ import ActivityFilter from 'ee/security_dashboard/components/shared/filters/acti
 import Filters from 'ee/security_dashboard/components/shared/filters/filters_layout.vue';
 import ScannerFilter from 'ee/security_dashboard/components/shared/filters/scanner_filter.vue';
 import StandardFilter from 'ee/security_dashboard/components/shared/filters/standard_filter.vue';
-import { getProjectFilter } from 'ee/security_dashboard/helpers';
+import { getProjectFilter, standardScannerFilter } from 'ee/security_dashboard/helpers';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
@@ -16,7 +16,8 @@ describe('First class vulnerability filters component', () => {
   ];
 
   const findStandardFilters = () => wrapper.findAllComponents(StandardFilter);
-  const findScannerFilter = () => wrapper.findComponent(ScannerFilter);
+  const findStandardScannerFilter = () => wrapper.findByTestId(standardScannerFilter.id);
+  const findVendorScannerFilter = () => wrapper.findComponent(ScannerFilter);
   const findActivityFilter = () => wrapper.findComponent(ActivityFilter);
   const findProjectFilter = () => wrapper.findByTestId(getProjectFilter([]).id);
 
@@ -34,7 +35,6 @@ describe('First class vulnerability filters component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('on render without project filter', () => {
@@ -44,7 +44,6 @@ describe('First class vulnerability filters component', () => {
 
     it('should render the default filters', () => {
       expect(findStandardFilters()).toHaveLength(2);
-      expect(findScannerFilter().exists()).toBe(true);
       expect(findActivityFilter().exists()).toBe(true);
       expect(findProjectFilter().exists()).toBe(false);
     });
@@ -83,4 +82,19 @@ describe('First class vulnerability filters component', () => {
       expect(findActivityFilter().exists()).toBe(false);
     });
   });
+
+  describe('scanner filter', () => {
+    it.each`
+      type          | dashboardType
+      ${'vendor'}   | ${DASHBOARD_TYPES.PROJECT}
+      ${'standard'} | ${DASHBOARD_TYPES.GROUP}
+      ${'standard'} | ${DASHBOARD_TYPES.INSTANCE}
+      ${'standard'} | ${DASHBOARD_TYPES.PIPELINE}
+    `('shows the $type scanner filter on the $dashboardType report', ({ type, dashboardType }) => {
+      wrapper = createComponent({ provide: { dashboardType } });
+
+      expect(findStandardScannerFilter().exists()).toBe(type === 'standard');
+      expect(findVendorScannerFilter().exists()).toBe(type === 'vendor');
+    });
+  });
 });

ee/spec/frontend/security_dashboard/components/shared/filters/scanner_filter_spec.js

@@ -5,7 +5,7 @@ import VueRouter from 'vue-router';
 import FilterItem from 'ee/security_dashboard/components/shared/filters/filter_item.vue';
 import ScannerFilter from 'ee/security_dashboard/components/shared/filters/scanner_filter.vue';
 import { DEFAULT_SCANNER, SCANNER_ID_PREFIX } from 'ee/security_dashboard/constants';
-import { scannerFilter } from 'ee/security_dashboard/helpers';
+import { vendorScannerFilter } from 'ee/security_dashboard/helpers';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -40,7 +40,7 @@ describe('Scanner Filter component', () => {
   let filter;
 
   const createWrapper = ({ scanners = customScanners } = {}) => {
-    filter = cloneDeep(scannerFilter);
+    filter = cloneDeep(vendorScannerFilter);
 
     wrapper = shallowMount(ScannerFilter, {
       localVue,
@@ -122,7 +122,7 @@ describe('Scanner Filter component', () => {
 
     it('emits filter-changed event with expected data for selected options', async () => {
       const ids = ['GitLab.SAST', 'Custom.SAST', 'GitLab.API_FUZZING', 'GitLab.COVERAGE_FUZZING'];
-      router.replace({ query: { [scannerFilter.id]: ids } });
+      router.replace({ query: { [vendorScannerFilter.id]: ids } });
       const selectedScanners = customScanners.filter((x) =>
         ids.includes(`${x.vendor}.${x.report_type}`),
       );