diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/filters/tool_filter.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/tool_filter.vue new file mode 100644 index 0000000000000000000000000000000000000000..88946486417fb44fb1a9ae89919f57d00feea3df --- /dev/null +++ b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/tool_filter.vue @@ -0,0 +1,9 @@ +<template> + <p> + <!-- This is a temporary placeholder. + In this next issue, this will be replaced with a proper dropdown UI + https://gitlab.com/gitlab-org/gitlab/-/issues/368249 --> + <!-- eslint-disable @gitlab/vue-require-i18n-strings --> + Tool dropdown Placeholder + </p> +</template> diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js index 2c23995f15003697e4615c5f9e487c004cf021e7..f1912296a9fc3142c19c3163d84b1d3899be758f 100644 --- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js +++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/constants.js @@ -100,3 +100,5 @@ export const REPORT_TYPE_PRESETS = { DEVELOPMENT: Object.keys(REPORT_TYPES_WITH_MANUALLY_ADDED).map((type) => type.toUpperCase()), OPERATIONAL: [REPORT_TYPE_CLUSTER_IMAGE_SCANNING.toUpperCase()], }; + +export const FILTER_NAME_TOOL = FIELDS.TOOL.label; diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue index 788f217a01caf5f83ebf16dc5a8758c34f76d9e2..6031b5516ff7f31f5be9846a6d83b0829b1d7ae4 100644 --- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue +++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue @@ -1,22 +1,26 @@ <script> import { debounce, cloneDeep, isEqual } from 'lodash'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import ActivityFilter from '../filters/activity_filter.vue'; import ProjectFilter from '../filters/project_filter.vue'; import ScannerFilter from '../filters/scanner_filter.vue'; import SimpleFilter from '../filters/simple_filter.vue'; import ClusterFilter from '../filters/cluster_filter.vue'; -import { FILTERS } from './constants'; +import ToolFilter from '../filters/tool_filter.vue'; +import { FILTERS, FILTER_NAME_TOOL } from './constants'; const { ACTIVITY, TOOL_VENDOR, PROJECT, CLUSTER } = FILTERS; export default { components: { + ToolFilter, SimpleFilter, ScannerFilter, ActivityFilter, ProjectFilter, ClusterFilter, }, + mixins: [glFeatureFlagsMixin()], props: { filters: { type: Array, @@ -37,6 +41,9 @@ export default { }, methods: { getComponentType(filter) { + if (this.glFeatures.refactorVulnerabilityToolFilter && filter.name === FILTER_NAME_TOOL) { + return ToolFilter; + } switch (filter) { case TOOL_VENDOR: return ScannerFilter; diff --git a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_filters_spec.js b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_filters_spec.js index 5f8a337d48b0bb222a7412afab0b33e367ff1e8b..60c8633820473fbc9780647d20d2b4044258a206 100644 --- a/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_filters_spec.js +++ b/ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_filters_spec.js @@ -4,6 +4,7 @@ import VulnerabilityFilters from 'ee/security_dashboard/components/shared/vulner import ProjectFilter from 'ee/security_dashboard/components/shared/filters/project_filter.vue'; import ScannerFilter from 'ee/security_dashboard/components/shared/filters/scanner_filter.vue'; import SimpleFilter from 'ee/security_dashboard/components/shared/filters/simple_filter.vue'; +import ToolFilter from 'ee/security_dashboard/components/shared/filters/tool_filter.vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { FILTERS } from 'ee/security_dashboard/components/shared/vulnerability_report/constants'; @@ -12,9 +13,14 @@ const { ACTIVITY, CLUSTER, PROJECT, SEVERITY, STATUS, TOOL_SIMPLE, TOOL_VENDOR } describe('Vulnerability filters component', () => { let wrapper; - const createWrapper = ({ filters }) => { + const createWrapper = ({ filters, refactorVulnerabilityToolFilter = true }) => { wrapper = shallowMountExtended(VulnerabilityFilters, { propsData: { filters }, + provide: { + glFeatures: { + refactorVulnerabilityToolFilter, + }, + }, }); }; @@ -37,12 +43,24 @@ describe('Vulnerability filters component', () => { ${'project'} | ${[PROJECT]} | ${ProjectFilter} ${'severity'} | ${[SEVERITY]} | ${SimpleFilter} ${'status'} | ${[STATUS]} | ${SimpleFilter} - ${'tool_simple'} | ${[TOOL_SIMPLE]} | ${SimpleFilter} - ${'tool_vendor'} | ${[TOOL_VENDOR]} | ${ScannerFilter} + ${'tool_simple'} | ${[TOOL_SIMPLE]} | ${ToolFilter} + ${'tool_vendor'} | ${[TOOL_VENDOR]} | ${ToolFilter} ${'cluster'} | ${[CLUSTER]} | ${ClusterFilter} `(`shows the expected component for filter '$name'`, ({ filters, expectedComponent }) => { createWrapper({ filters }); expect(wrapper.findComponent(expectedComponent).exists()).toBe(true); }); + + describe('when the "refactorVulnerabilityToolFilter" feature flag is disabled', () => { + it.each` + name | filters | expectedComponent + ${'tool_simple'} | ${[TOOL_SIMPLE]} | ${SimpleFilter} + ${'tool_vendor'} | ${[TOOL_VENDOR]} | ${ScannerFilter} + `(`shows the expected component for filter '$name'`, ({ filters, expectedComponent }) => { + createWrapper({ filters, refactorVulnerabilityToolFilter: false }); + + expect(wrapper.findComponent(expectedComponent).exists()).toBe(true); + }); + }); });