Use vendor scanner filter on new project-level vulnerability report

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js

@@ -13,6 +13,7 @@ import { REPORT_TYPE_CLUSTER_IMAGE_SCANNING } from '~/vue_shared/security_report
 export const REPORT_TAB = {
   DEVELOPMENT: 'DEVELOPMENT',
   OPERATIONAL: 'OPERATIONAL',
+  DEVELOPMENT_PROJECT: 'DEVELOPMENT_PROJECT',
 };
 
 export const FIELDS = {
@@ -93,6 +94,7 @@ export const FIELD_PRESETS = {
 };
 
 export const FILTER_PRESETS = {
+  DEVELOPMENT_PROJECT: [FILTERS.STATUS, FILTERS.SEVERITY, FILTERS.TOOL_VENDOR, FILTERS.ACTIVITY],
   DEVELOPMENT: [FILTERS.STATUS, FILTERS.SEVERITY, FILTERS.TOOL_SIMPLE, FILTERS.ACTIVITY],
   OPERATIONAL: [FILTERS.STATUS, FILTERS.SEVERITY, FILTERS.ACTIVITY],
 };

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

 <script>
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import VulnerabilityCounts from './vulnerability_counts.vue';
 import VulnerabilityListGraphql from './vulnerability_list_graphql.vue';
 import VulnerabilityFilters from './vulnerability_filters.vue';
@@ -17,7 +18,7 @@ export default {
     VulnerabilityListGraphql,
     VulnerabilityFilters,
   },
-  inject: ['canAdminVulnerability'],
+  inject: ['dashboardType', 'canAdminVulnerability'],
   props: {
     type: {
       type: String,
@@ -40,7 +41,16 @@ export default {
   },
   computed: {
     filtersToShow() {
-      return [...FILTER_PRESETS[this.type], ...(this.showProjectFilter ? [FILTERS.PROJECT] : [])];
+      // Special case for project-level development tab, it needs to show the new vendor scanner
+      // filter instead of the old simple filter. This is a temporary workaround until this issue is
+      // addressed: https://gitlab.com/gitlab-org/gitlab/-/issues/332727 after which all report
+      // levels will use the new vendor scanner filter and this check can be removed.
+      const type =
+        this.type === REPORT_TAB.DEVELOPMENT && this.dashboardType === DASHBOARD_TYPES.PROJECT
+          ? REPORT_TAB.DEVELOPMENT_PROJECT
+          : this.type;
+
+      return [...FILTER_PRESETS[type], ...(this.showProjectFilter ? [FILTERS.PROJECT] : [])];
     },
     fieldsToShow() {
       return [

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

@@ -5,9 +5,11 @@ import VulnerabilityReport from 'ee/security_dashboard/components/shared/vulnera
 import VulnerabilityCounts from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_counts.vue';
 import VulnerabilityFilters from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue';
 import projectVulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities.query.graphql';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import {
   FIELD_PRESETS,
   FIELDS,
+  FILTER_PRESETS,
   REPORT_TAB,
   REPORT_TYPE_PRESETS,
 } from 'ee/security_dashboard/components/shared/vulnerability_report/constants';
@@ -19,6 +21,7 @@ describe('Vulnerability report component', () => {
     type = REPORT_TAB.DEVELOPMENT,
     showProjectFilter = false,
     canAdminVulnerability = false,
+    dashboardType = DASHBOARD_TYPES.GROUP,
   } = {}) => {
     wrapper = shallowMount(VulnerabilityReport, {
       propsData: {
@@ -27,6 +30,7 @@ describe('Vulnerability report component', () => {
         showProjectFilter,
       },
       provide: {
+        dashboardType,
         canAdminVulnerability,
       },
     });
@@ -70,6 +74,20 @@ describe('Vulnerability report component', () => {
         REPORT_TYPE_PRESETS.OPERATIONAL,
       );
     });
+
+    it.each`
+      dashboardType               | type                      | expectedFilters
+      ${DASHBOARD_TYPES.GROUP}    | ${REPORT_TAB.DEVELOPMENT} | ${FILTER_PRESETS.DEVELOPMENT}
+      ${DASHBOARD_TYPES.INSTANCE} | ${REPORT_TAB.OPERATIONAL} | ${FILTER_PRESETS.OPERATIONAL}
+      ${DASHBOARD_TYPES.PROJECT}  | ${REPORT_TAB.DEVELOPMENT} | ${FILTER_PRESETS.DEVELOPMENT_PROJECT}
+    `(
+      'shows the expected filter for the $type $dashboardType report',
+      ({ dashboardType, type, expectedFilters }) => {
+        createWrapper({ dashboardType, type });
+
+        expect(findVulnerabilityFilters().props('filters')).toEqual(expectedFilters);
+      },
+    );
   });
 
   describe('vulnerability list GraphQL component', () => {