Merge branch '330248-scanner-filter-header' into 'master'

Hide scanner filter vendor header when there's only the default vendor

See merge request gitlab-org/gitlab!63596

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

@@ -82,6 +82,9 @@ export default {
 
       return { scannerId: ids };
     },
+    hasCustomVendor() {
+      return Object.keys(this.groups).length > 1;
+    },
   },
   methods: {
     toggleGroup(groupName) {
@@ -112,9 +115,10 @@ export default {
     />
 
     <template v-for="[groupName, groupOptions] in Object.entries(groups)">
-      <gl-dropdown-divider :key="`${groupName}:divider`" />
+      <gl-dropdown-divider v-if="hasCustomVendor" :key="`${groupName}:divider`" />
 
       <gl-dropdown-item
+        v-if="hasCustomVendor"
         :key="`${groupName}:header`"
         :data-testid="`${groupName}Header`"
         @click.native.capture.stop="toggleGroup(groupName)"

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

-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { sampleSize, cloneDeep } from 'lodash';
 import VueRouter from 'vue-router';
@@ -17,7 +17,7 @@ const createScannerConfig = (vendor, reportType, id) => ({
   id,
 });
 
-const scanners = [
+const defaultScanners = [
   createScannerConfig(DEFAULT_SCANNER, 'DEPENDENCY_SCANNING', 1),
   createScannerConfig(DEFAULT_SCANNER, 'DEPENDENCY_SCANNING', 2),
   createScannerConfig(DEFAULT_SCANNER, 'SAST', 3),
@@ -26,6 +26,10 @@ const scanners = [
   createScannerConfig(DEFAULT_SCANNER, 'CONTAINER_SCANNING', 6),
   createScannerConfig(DEFAULT_SCANNER, 'DAST', 7),
   createScannerConfig(DEFAULT_SCANNER, 'DAST', 8),
+];
+
+const customScanners = [
+  ...defaultScanners,
   createScannerConfig('Custom', 'SAST', 9),
   createScannerConfig('Custom', 'SAST', 10),
   createScannerConfig('Custom', 'DAST', 11),
@@ -35,7 +39,7 @@ describe('Scanner Filter component', () => {
   let wrapper;
   let filter;
 
-  const createWrapper = () => {
+  const createWrapper = ({ scanners = customScanners } = {}) => {
     filter = cloneDeep(scannerFilter);
 
     wrapper = shallowMount(ScannerFilter, {
@@ -46,6 +50,9 @@ describe('Scanner Filter component', () => {
     });
   };
 
+  const getTestIds = (selector) =>
+    wrapper.findAll(selector).wrappers.map((x) => x.attributes('data-testid'));
+
   afterEach(() => {
     wrapper.destroy();
     // Clear out the querystring if one exists, it persists between tests.
@@ -54,10 +61,21 @@ describe('Scanner Filter component', () => {
     }
   });
 
+  describe('default scanners only', () => {
+    it('shows the dropdown items with no headers or dividers', () => {
+      createWrapper({ scanners: defaultScanners });
+      const options = getTestIds(FilterItem);
+      const expectedOptions = ['all', ...filter.options.map((x) => x.id)];
+
+      expect(options).toEqual(expectedOptions);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownItem).exists()).toBe(false);
+    });
+  });
+
+  describe('default and custom scanners', () => {
     it('shows the correct dropdown items', () => {
       createWrapper();
-    const getTestIds = (selector) =>
-      wrapper.findAll(selector).wrappers.map((x) => x.attributes('data-testid'));
 
       const options = getTestIds(FilterItem);
       const expectedOptions = [
@@ -105,7 +123,9 @@ 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 } });
-    const selectedScanners = scanners.filter((x) => ids.includes(`${x.vendor}.${x.report_type}`));
+      const selectedScanners = customScanners.filter((x) =>
+        ids.includes(`${x.vendor}.${x.report_type}`),
+      );
       createWrapper();
       await wrapper.vm.$nextTick();
 
@@ -117,4 +137,5 @@ describe('Scanner Filter component', () => {
         ]),
       });
     });
+  });
 });