From 09664d3d491159cc70689fd03e4d4910e2cca4ea Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Sun, 29 Jun 2025 22:41:31 +0300
Subject: [PATCH 1/7] Add grouping option to the key of the filtered-search +
 FF called security_inventory_filtering

---
 .../filtered_search_bar/constants.js          |  11 ++
 .../javascripts/vue_shared/constants.js       |   5 +
 ...nventory_dashboard_filtered_search_bar.vue | 163 +++++++++++++++++-
 .../components/tokens/custom_title_option.vue |  19 ++
 .../components/tokens/generic_token.vue       |  24 +++
 .../components/tokens/header_options.vue      |  20 +++
 .../security_inventory/constants.js           |  30 +++-
 .../groups/security/inventory_controller.rb   |   1 +
 .../beta/security_inventory_filtering.yml     |  10 ++
 ...tory_dashboard_filtered_search_bar_spec.js |  52 +++++-
 .../tokens/custom_title_option_spec.js        |  53 ++++++
 .../components/tokens/generic_token_spec.js   |  39 +++++
 .../components/tokens/header_options_spec.js  |  42 +++++
 locale/gitlab.pot                             |  51 ++++++
 14 files changed, 510 insertions(+), 10 deletions(-)
 create mode 100644 ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
 create mode 100644 ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
 create mode 100644 ee/app/assets/javascripts/security_inventory/components/tokens/header_options.vue
 create mode 100644 ee/config/feature_flags/beta/security_inventory_filtering.yml
 create mode 100644 ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
 create mode 100644 ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js
 create mode 100644 ee/spec/frontend/security_inventory/components/tokens/header_options_spec.js

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index 016e3c4546b965..13e0a9a36f5522 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -21,12 +21,23 @@ export const OPERATOR_AFTER = '≥';
 export const OPERATOR_AFTER_TEXT = __('on or after');
 export const OPERATOR_BEFORE = '<';
 export const OPERATOR_BEFORE_TEXT = __('before');
+export const OPERATOR_BIGGER_THAN_OR_EQUAL = '=>';
+export const OPERATOR_BIGGER_THAN_OR_EQUAL_TEXT = __('bigger than');
+export const OPERATOR_LESS_THAN_OR_EQUAL = '=<';
+export const OPERATOR_LESS_THAN_OR_EQUAL_TEXT = __('lower than');
 
 export const OPERATORS_IS = [{ value: OPERATOR_IS, description: OPERATOR_IS_TEXT }];
 export const OPERATORS_NOT = [{ value: OPERATOR_NOT, description: OPERATOR_NOT_TEXT }];
 export const OPERATORS_OR = [{ value: OPERATOR_OR, description: OPERATOR_OR_TEXT }];
 export const OPERATORS_AFTER = [{ value: OPERATOR_AFTER, description: OPERATOR_AFTER_TEXT }];
 export const OPERATORS_BEFORE = [{ value: OPERATOR_BEFORE, description: OPERATOR_BEFORE_TEXT }];
+export const OPERATORS_BIGGER_THAN_OR_EQUAL = [
+  { value: OPERATOR_BIGGER_THAN_OR_EQUAL, description: OPERATOR_BIGGER_THAN_OR_EQUAL_TEXT },
+];
+export const OPERATORS_LESS_THAN_OR_EQUAL = [
+  { value: OPERATOR_LESS_THAN_OR_EQUAL, description: OPERATOR_LESS_THAN_OR_EQUAL_TEXT },
+];
+
 export const OPERATORS_IS_NOT = [...OPERATORS_IS, ...OPERATORS_NOT];
 export const OPERATORS_IS_NOT_OR = [...OPERATORS_IS, ...OPERATORS_NOT, ...OPERATORS_OR];
 export const OPERATORS_AFTER_BEFORE = [...OPERATORS_AFTER, ...OPERATORS_BEFORE];
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 81e179630ba7cb..4c5db3e5339c64 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -116,6 +116,7 @@ export const SEVERITY_LEVEL_UNKNOWN = 'unknown';
 export const SEVERITY_LEVEL_MEDIUM = 'medium';
 export const SEVERITY_LEVEL_LOW = 'low';
 export const SEVERITY_LEVEL_INFO = 'info';
+export const SEVERITY_LEVEL_ANY_SEVERITY = 'any_severity';
 
 export const SEVERITY_LEVELS = {
   [SEVERITY_LEVEL_CRITICAL]: s__('severity|Critical'),
@@ -125,3 +126,7 @@ export const SEVERITY_LEVELS = {
   [SEVERITY_LEVEL_INFO]: s__('severity|Info'),
   [SEVERITY_LEVEL_UNKNOWN]: s__('severity|Unknown'),
 };
+
+export const SEVERITY_LEVELS_ANY_SEVERITY = {
+  [SEVERITY_LEVEL_ANY_SEVERITY]: s__('severity|Any severity'),
+};
diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index 8d5891905c29a8..2f2225975bbbde 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -1,13 +1,60 @@
 <script>
+import { GlDropdownDivider } from '@gitlab/ui';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
+import {
+  FILTERED_SEARCH_TERM,
+  OPERATORS_IS,
+  OPERATORS_NOT,
+  OPERATORS_LESS_THAN_OR_EQUAL,
+  OPERATORS_BIGGER_THAN_OR_EQUAL,
+} from '~/vue_shared/components/filtered_search_bar/constants';
 import { queryToObject } from '~/lib/utils/url_utility';
+import {
+  TOOL_ENABLED,
+  TOOL_NOT_ENABLED,
+  TOOL_FAILED,
+  SCANNER_FILTER_LABELS,
+} from 'ee/security_inventory/constants';
+import { s__, sprintf } from '~/locale';
+import { SEVERITY_LEVELS_ANY_SEVERITY, SEVERITY_LEVELS } from '~/vue_shared/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import GenericToken from './tokens/generic_token.vue';
+import customTitleOption from './tokens/custom_title_option.vue';
+import HeaderOptions from './tokens/header_options.vue';
+
+const TOKEN_PREFIXES = {
+  TOOL_COVERAGE: 'tool-coverage-',
+  VULNERABILITY_COUNT: 'vulnerability-count-',
+};
+
+const VULNERABILITY_COUNT_KEYS = {
+  ANY_SEVERITY: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}any-severity`,
+  CRITICAL: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}critical`,
+  HIGH: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}high`,
+  MEDIUM: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}medium`,
+  LOW: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}low`,
+  INFO: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}info`,
+  UNKNOWN: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}unknown`,
+};
+
+const TOOL_COVERAGE_KEYS = {
+  SAST: `${TOKEN_PREFIXES.TOOL_COVERAGE}sast`,
+  SAST_ADVANCED: `${TOKEN_PREFIXES.TOOL_COVERAGE}advanced-sast`,
+  DEPENDENCY_SCANNING: `${TOKEN_PREFIXES.TOOL_COVERAGE}dependency-scanning`,
+  SECRET_DETECTION: `${TOKEN_PREFIXES.TOOL_COVERAGE}secret-detection`,
+  SECRET_PUSH_PROTECTION: `${TOKEN_PREFIXES.TOOL_COVERAGE}secret-push-protection`,
+  CONTAINER_SCANNING: `${TOKEN_PREFIXES.TOOL_COVERAGE}container-scanning`,
+  CONTAINER_SCANNING_FOR_REGISTRY: `${TOKEN_PREFIXES.TOOL_COVERAGE}container-scanning-for-registry`,
+  DAST: `${TOKEN_PREFIXES.TOOL_COVERAGE}dast`,
+  SAST_IAC: `${TOKEN_PREFIXES.TOOL_COVERAGE}sast-iac`,
+};
 
 export default {
   name: 'InventoryDashboardFilteredSearchBar',
   components: {
     FilteredSearch,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     initialFilters: {
       type: Object,
@@ -26,8 +73,85 @@ export default {
     };
   },
   computed: {
+    showFilterTokens() {
+      return this.glFeatures.securityInventoryFiltering;
+    },
+    vulnerabilityCountKeys() {
+      return [
+        ...Object.entries(SEVERITY_LEVELS),
+        ...Object.entries(SEVERITY_LEVELS_ANY_SEVERITY),
+      ].map(([level, key]) => {
+        return {
+          type: VULNERABILITY_COUNT_KEYS[level.toUpperCase()],
+          title: sprintf(s__('SecurityInventory|Vulnerability count %{level}'), {
+            level: key.toLowerCase(),
+          }),
+          token: GenericToken,
+          unique: true,
+          optionComponent: customTitleOption,
+          operators: [
+            ...OPERATORS_LESS_THAN_OR_EQUAL,
+            ...OPERATORS_IS,
+            ...OPERATORS_BIGGER_THAN_OR_EQUAL,
+          ],
+          customKey: {
+            title: key,
+          },
+        };
+      });
+    },
+    toolCoverageKeys() {
+      return Object.entries(SCANNER_FILTER_LABELS).map(([tool, key]) => {
+        return {
+          type: TOOL_COVERAGE_KEYS[tool.toUpperCase()],
+          title: sprintf(s__('SecurityInventory|%{key}'), {
+            key,
+          }),
+          token: GenericToken,
+          unique: true,
+          operators: [...OPERATORS_IS, ...OPERATORS_NOT],
+          options: [
+            { value: 'enabled', title: TOOL_ENABLED },
+            { value: 'not-enabled', title: TOOL_NOT_ENABLED },
+            { value: 'failed', title: TOOL_FAILED },
+          ],
+        };
+      });
+    },
     searchTokens() {
-      return [];
+      if (!this.showFilterTokens) return [];
+      return [
+        {
+          type: TOKEN_PREFIXES.VULNERABILITY_COUNT,
+          title: s__('SecurityInventory|Vulnerability count'),
+          optionComponent: HeaderOptions,
+          customKey: { hasComponent: true },
+          shouldDisplayTokenFn: this.createTokenSelectionValidator([
+            ...Object.values(VULNERABILITY_COUNT_KEYS),
+          ]),
+        },
+        ...this.vulnerabilityCountKeys,
+        {
+          type: 'divider',
+          title: s__('SecurityInventory|Divider'),
+          optionComponent: GlDropdownDivider,
+          customKey: { hasComponent: true },
+          shouldDisplayTokenFn: this.createPrefixTokenSelectionValidator(
+            [TOKEN_PREFIXES.TOOL_COVERAGE, TOKEN_PREFIXES.VULNERABILITY_COUNT],
+            [...Object.values(VULNERABILITY_COUNT_KEYS), ...Object.values(TOOL_COVERAGE_KEYS)],
+          ),
+        },
+        {
+          type: TOKEN_PREFIXES.TOOL_COVERAGE,
+          title: s__('SecurityInventory|Tool coverage'),
+          optionComponent: HeaderOptions,
+          customKey: { hasComponent: true },
+          shouldDisplayTokenFn: this.createTokenSelectionValidator([
+            ...Object.values(TOOL_COVERAGE_KEYS),
+          ]),
+        },
+        ...this.toolCoverageKeys,
+      ];
     },
     initialFilterValue() {
       if (this.initialFilters.search) {
@@ -57,13 +181,46 @@ export default {
       this.filterParams = { ...filterParams };
       this.$emit('filterSubgroupsAndProjects', this.filterParams);
     },
+    createTokenSelectionValidator(keys) {
+      return (tokens) => {
+        const matchingTokens = tokens
+          .filter((token) => keys.some((key) => token.type === key))
+          .map((token) => token.type);
+
+        return matchingTokens.length !== keys.length;
+      };
+    },
+    createPrefixTokenSelectionValidator(prefixes, keys) {
+      return (tokens) => {
+        const keysByPrefix = prefixes.reduce((acc, prefix) => {
+          acc[prefix] = keys.filter((key) => key.startsWith(prefix));
+          return acc;
+        }, {});
+
+        const matchingTokens = tokens
+          .filter((token) => prefixes.some((prefix) => token.type.startsWith(prefix)))
+          .map((token) => token.type);
+
+        const anyPrefixFullySelected = Object.entries(keysByPrefix).some(([, prefixKeys]) => {
+          const selectedTokensForPrefix = matchingTokens.filter((token) =>
+            prefixKeys.includes(token),
+          );
+          return selectedTokensForPrefix.length === prefixKeys.length;
+        });
+
+        if (matchingTokens.length === 0) {
+          return true;
+        }
+        return !anyPrefixFullySelected;
+      };
+    },
   },
 };
 </script>
 
 <template>
   <filtered-search
-    class="gl-pr-3"
+    class="gl-max-w-19/20 gl-pr-3"
     v-bind="$attrs"
     :namespace="namespace"
     :initial-filter-value="initialFilterValue"
diff --git a/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue b/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
new file mode 100644
index 00000000000000..8873cc8ce20c42
--- /dev/null
+++ b/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
@@ -0,0 +1,19 @@
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return this.option?.customKey?.title || this.option?.title;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>{{ title }}</span>
+</template>
diff --git a/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue b/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
new file mode 100644
index 00000000000000..43a0c6126f5bce
--- /dev/null
+++ b/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlFilteredSearchToken } from '@gitlab/ui';
+
+export default {
+  name: 'GenericToken',
+  components: {
+    GlFilteredSearchToken,
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" />
+</template>
diff --git a/ee/app/assets/javascripts/security_inventory/components/tokens/header_options.vue b/ee/app/assets/javascripts/security_inventory/components/tokens/header_options.vue
new file mode 100644
index 00000000000000..1cfa3c6b87da83
--- /dev/null
+++ b/ee/app/assets/javascripts/security_inventory/components/tokens/header_options.vue
@@ -0,0 +1,20 @@
+<script>
+import { GlDropdownSectionHeader } from '@gitlab/ui';
+
+export default {
+  name: 'HeaderOptions',
+  components: {
+    GlDropdownSectionHeader,
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown-section-header> {{ option.title }}</gl-dropdown-section-header>
+</template>
diff --git a/ee/app/assets/javascripts/security_inventory/constants.js b/ee/app/assets/javascripts/security_inventory/constants.js
index 10d1dc3b774a54..06237f1cb01bc6 100644
--- a/ee/app/assets/javascripts/security_inventory/constants.js
+++ b/ee/app/assets/javascripts/security_inventory/constants.js
@@ -1,15 +1,15 @@
 import { s__ } from '~/locale';
 import { CRITICAL, HIGH, MEDIUM, LOW } from 'ee/vulnerabilities/constants';
 
-const DEPENDENCY_SCANNING_KEY = 'DEPENDENCY_SCANNING';
-const SAST_KEY = 'SAST';
+export const DEPENDENCY_SCANNING_KEY = 'DEPENDENCY_SCANNING';
+export const SAST_KEY = 'SAST';
 export const SAST_ADVANCED_KEY = 'SAST_ADVANCED';
-const SECRET_DETECTION_KEY = 'SECRET_DETECTION';
+export const SECRET_DETECTION_KEY = 'SECRET_DETECTION';
 export const SECRET_PUSH_PROTECTION_KEY = 'SECRET_PUSH_PROTECTION';
-const CONTAINER_SCANNING_KEY = 'CONTAINER_SCANNING';
+export const CONTAINER_SCANNING_KEY = 'CONTAINER_SCANNING';
 export const CONTAINER_SCANNING_FOR_REGISTRY_KEY = 'CONTAINER_SCANNING_FOR_REGISTRY';
-const DAST_KEY = 'DAST';
-const SAST_IAC_KEY = 'SAST_IAC';
+export const DAST_KEY = 'DAST';
+export const SAST_IAC_KEY = 'SAST_IAC';
 
 export const SIDEBAR_WIDTH_INITIAL = 300;
 export const SIDEBAR_WIDTH_MINIMUM = 200;
@@ -82,6 +82,20 @@ export const SCANNER_POPOVER_LABELS = {
   [CONTAINER_SCANNING_FOR_REGISTRY_KEY]: s__('SecurityInventory|Container scanning for registry'),
 };
 
+export const SCANNER_FILTER_LABELS = {
+  [DEPENDENCY_SCANNING_KEY]: s__('SecurityInventory|Dependency scanning (DS)'),
+  [SAST_KEY]: s__('SecurityInventory|Basic SAST (SAST)'),
+  [SAST_ADVANCED_KEY]: s__('SecurityInventory|Advanced SAST (SAST)'),
+  [SECRET_DETECTION_KEY]: s__('SecurityInventory|Pipeline secret detection (SD)'),
+  [SECRET_PUSH_PROTECTION_KEY]: s__('SecurityInventory|Secret push protection (SD)'),
+  [CONTAINER_SCANNING_KEY]: s__('SecurityInventory|Container scanning (CS)'),
+  [CONTAINER_SCANNING_FOR_REGISTRY_KEY]: s__(
+    'SecurityInventory|Container scanning for registry (CS)',
+  ),
+  [DAST_KEY]: s__('SecurityInventory|Dynamic Application Security Testing (DAST)'),
+  [SAST_IAC_KEY]: s__('SecurityInventory|Infrastructure as Code (IaC)'),
+};
+
 export const SEVERITY_SEGMENTS = [CRITICAL, HIGH, MEDIUM, LOW];
 
 export const SEVERITY_BACKGROUND_COLORS = {
@@ -100,3 +114,7 @@ export const PROJECT_SECURITY_CONFIGURATION_PATH = '/-/security/configuration';
 export const PROJECT_VULNERABILITY_REPORT_PATH = '/-/security/vulnerability_report';
 export const GROUP_VULNERABILITY_REPORT_PATH = '/-/security/vulnerabilities';
 export const PROJECT_PIPELINE_JOB_PATH = '/-/jobs';
+
+export const TOOL_ENABLED = 'Enabled';
+export const TOOL_NOT_ENABLED = 'Not enabled';
+export const TOOL_FAILED = 'Failed';
diff --git a/ee/app/controllers/groups/security/inventory_controller.rb b/ee/app/controllers/groups/security/inventory_controller.rb
index e0ca8684c6d320..4d0a679c48894f 100644
--- a/ee/app/controllers/groups/security/inventory_controller.rb
+++ b/ee/app/controllers/groups/security/inventory_controller.rb
@@ -9,6 +9,7 @@ class InventoryController < Groups::ApplicationController
 
       before_action do
         push_frontend_feature_flag(:security_inventory_dashboard, @group.root_ancestor)
+        push_frontend_feature_flag(:security_inventory_filtering, @group.root_ancestor)
       end
 
       feature_category :security_asset_inventories
diff --git a/ee/config/feature_flags/beta/security_inventory_filtering.yml b/ee/config/feature_flags/beta/security_inventory_filtering.yml
new file mode 100644
index 00000000000000..50821a35896189
--- /dev/null
+++ b/ee/config/feature_flags/beta/security_inventory_filtering.yml
@@ -0,0 +1,10 @@
+---
+name: security_inventory_filtering
+description:
+feature_issue_url: https://gitlab.com/groups/gitlab-org/-/epics/16484
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/196057
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/552224
+milestone: '18.3'
+group: group::security platform management
+type: beta
+default_enabled: false
diff --git a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
index afaf9eb1aa8b12..8cde7c45e1a196 100644
--- a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
+++ b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
@@ -1,8 +1,16 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import InventoryDashboardFilteredSearchBar from 'ee/security_inventory/components/inventory_dashboard_filtered_search_bar.vue';
+import GenericToken from 'ee/security_inventory/components/tokens/generic_token.vue';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import { queryToObject } from '~/lib/utils/url_utility';
+import HeaderOptions from 'ee/security_inventory/components/tokens/header_options.vue';
+import customTitleOption from 'ee/security_inventory/components/tokens/custom_title_option.vue';
+import {
+  OPERATORS_BIGGER_THAN_OR_EQUAL,
+  OPERATORS_IS,
+  OPERATORS_LESS_THAN_OR_EQUAL,
+} from '~/vue_shared/components/filtered_search_bar/constants';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   queryToObject: jest.fn().mockReturnValue({}),
@@ -12,12 +20,15 @@ jest.mock('~/lib/utils/url_utility', () => ({
 describe('InventoryDashboardFilteredSearchBar', () => {
   let wrapper;
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, securityInventoryFiltering = false } = {}) => {
     wrapper = shallowMount(InventoryDashboardFilteredSearchBar, {
       propsData: {
         namespace: 'group1',
         ...props,
       },
+      provide: {
+        glFeatures: { securityInventoryFiltering },
+      },
     });
   };
 
@@ -140,4 +151,43 @@ describe('InventoryDashboardFilteredSearchBar', () => {
       });
     });
   });
+
+  describe('when `securityInventoryFiltering` is disabled', () => {
+    it('renders empty array tokens', () => {
+      expect(findFilteredSearch().props('tokens')).toMatchObject([]);
+    });
+  });
+
+  describe('when `securityInventoryFiltering` is enabled', () => {
+    it('renders all tokens', () => {
+      createComponent({ securityInventoryFiltering: true });
+      expect(findFilteredSearch().props('tokens')).toMatchObject(
+        expect.arrayContaining([
+          expect.objectContaining(
+            {
+              type: 'vulnerability-count-',
+              title: 'Vulnerability count',
+              optionComponent: HeaderOptions,
+              customKey: { hasComponent: true },
+            },
+            {
+              type: 'vulnerability-count-critical',
+              title: 'Vulnerability count critical',
+              token: GenericToken,
+              unique: true,
+              optionComponent: customTitleOption,
+              operators: [
+                ...OPERATORS_LESS_THAN_OR_EQUAL,
+                ...OPERATORS_IS,
+                ...OPERATORS_BIGGER_THAN_OR_EQUAL,
+              ],
+              customKey: {
+                title: 'critical',
+              },
+            },
+          ),
+        ]),
+      );
+    });
+  });
 });
diff --git a/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js b/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
new file mode 100644
index 00000000000000..a70818b5c220bb
--- /dev/null
+++ b/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+import CustomTitleOption from 'ee/security_inventory/components/tokens/custom_title_option.vue';
+
+describe('CustomTitleOption', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(CustomTitleOption, {
+      propsData: {
+        option: { title: 'Original Title', customKey: { title: 'Custom Title' } },
+        ...props,
+      },
+    });
+  };
+
+  describe('component rendering', () => {
+    it('renders title when available', () => {
+      const option = {
+        title: 'Original Title',
+      };
+      createComponent({ option });
+      expect(wrapper.text()).toBe('Original Title');
+    });
+
+    it('renders customKey title when available', () => {
+      createComponent();
+      expect(wrapper.text()).toBe('Custom Title');
+    });
+
+    it('renders customKey when title not exists', () => {
+      const option = {
+        customKey: { title: 'Custom Title' },
+      };
+      createComponent({ option });
+      expect(wrapper.text()).toBe('Custom Title');
+    });
+
+    it('renders empty string when no title is provided', () => {
+      const option = {};
+      createComponent({ option });
+      expect(wrapper.text()).toBe('');
+    });
+
+    it('renders customKey title when customKey exists but title is undefined', () => {
+      const option = {
+        title: 'Original Title',
+        customKey: { title: undefined },
+      };
+      createComponent({ option });
+      expect(wrapper.text()).toBe('Original Title');
+    });
+  });
+});
diff --git a/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js b/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js
new file mode 100644
index 00000000000000..50035724be6324
--- /dev/null
+++ b/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js
@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlFilteredSearchToken } from '@gitlab/ui';
+import GenericToken from 'ee/security_inventory/components/tokens/generic_token.vue';
+
+describe('Token', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(GenericToken, {
+      propsData: {
+        config: { type: 'custom-type' },
+        value: { data: 'data value' },
+        ...props,
+      },
+    });
+  };
+
+  const findDropdownSectionHeader = () => wrapper.findComponent(GlFilteredSearchToken);
+
+  describe('component rendering', () => {
+    it('renders GlFilteredSearchToken', () => {
+      createComponent();
+      expect(findDropdownSectionHeader().exists()).toBe(true);
+    });
+
+    it('passes all props to GlFilteredSearchToken', () => {
+      const customConfig = { type: 'custom-token', unique: true };
+      const customValue = { data: 'custom-value' };
+      createComponent({ config: customConfig, value: customValue });
+
+      expect(findDropdownSectionHeader().props()).toEqual(
+        expect.objectContaining({
+          config: expect.objectContaining(customConfig),
+          value: expect.objectContaining(customValue),
+        }),
+      );
+    });
+  });
+});
diff --git a/ee/spec/frontend/security_inventory/components/tokens/header_options_spec.js b/ee/spec/frontend/security_inventory/components/tokens/header_options_spec.js
new file mode 100644
index 00000000000000..072f288fb71621
--- /dev/null
+++ b/ee/spec/frontend/security_inventory/components/tokens/header_options_spec.js
@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlDropdownSectionHeader } from '@gitlab/ui';
+import HeaderOptions from 'ee/security_inventory/components/tokens/header_options.vue';
+
+describe('HeaderOptions', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(HeaderOptions, {
+      propsData: {
+        option: { title: 'Original Title' },
+        ...props,
+      },
+    });
+  };
+
+  const findDropdownSectionHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
+
+  describe('component rendering', () => {
+    it('renders GlDropdownSectionHeader', () => {
+      createComponent();
+      expect(findDropdownSectionHeader().exists()).toBe(true);
+    });
+
+    it('renders title text', () => {
+      createComponent();
+      expect(findDropdownSectionHeader().text()).toBe('Original Title');
+    });
+
+    it('handles empty title', () => {
+      const option = { title: '' };
+      createComponent({ option });
+      expect(findDropdownSectionHeader().text()).toBe('');
+    });
+
+    it('handles non-string title', () => {
+      const option = { title: 123 };
+      createComponent({ option });
+      expect(findDropdownSectionHeader().text()).toBe('123');
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c7967b153a2b2e..21214945cba2a8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -56289,9 +56289,15 @@ msgstr ""
 msgid "SecurityInventoryFilter|Search projects…"
 msgstr ""
 
+msgid "SecurityInventory|%{key}"
+msgstr ""
+
 msgid "SecurityInventory|Add projects to this group to start tracking their security posture."
 msgstr ""
 
+msgid "SecurityInventory|Advanced SAST (SAST)"
+msgstr ""
+
 msgid "SecurityInventory|An error occurred while fetching subgroups and projects. Please try again."
 msgstr ""
 
@@ -56301,18 +56307,27 @@ msgstr ""
 msgid "SecurityInventory|Basic SAST"
 msgstr ""
 
+msgid "SecurityInventory|Basic SAST (SAST)"
+msgstr ""
+
 msgid "SecurityInventory|CS"
 msgstr ""
 
 msgid "SecurityInventory|Container scanning"
 msgstr ""
 
+msgid "SecurityInventory|Container scanning (CS)"
+msgstr ""
+
 msgid "SecurityInventory|Container scanning (standard)"
 msgstr ""
 
 msgid "SecurityInventory|Container scanning for registry"
 msgstr ""
 
+msgid "SecurityInventory|Container scanning for registry (CS)"
+msgstr ""
+
 msgid "SecurityInventory|DAST"
 msgstr ""
 
@@ -56322,6 +56337,15 @@ msgstr ""
 msgid "SecurityInventory|Dependency scanning"
 msgstr ""
 
+msgid "SecurityInventory|Dependency scanning (DS)"
+msgstr ""
+
+msgid "SecurityInventory|Divider"
+msgstr ""
+
+msgid "SecurityInventory|Dynamic Application Security Testing (DAST)"
+msgstr ""
+
 msgid "SecurityInventory|Dynamic application security testing (DAST)"
 msgstr ""
 
@@ -56334,6 +56358,9 @@ msgstr ""
 msgid "SecurityInventory|IaC"
 msgstr ""
 
+msgid "SecurityInventory|Infrastructure as Code (IaC)"
+msgstr ""
+
 msgid "SecurityInventory|Infrastructure as code scanning (IaC)"
 msgstr ""
 
@@ -56352,6 +56379,9 @@ msgstr ""
 msgid "SecurityInventory|Pipeline secret detection"
 msgstr ""
 
+msgid "SecurityInventory|Pipeline secret detection (SD)"
+msgstr ""
+
 msgid "SecurityInventory|Project vulnerabilities"
 msgstr ""
 
@@ -56370,6 +56400,9 @@ msgstr ""
 msgid "SecurityInventory|Secret push protection"
 msgstr ""
 
+msgid "SecurityInventory|Secret push protection (SD)"
+msgstr ""
+
 msgid "SecurityInventory|Security inventory"
 msgstr ""
 
@@ -56379,6 +56412,9 @@ msgstr ""
 msgid "SecurityInventory|This group doesn't have any subgroups."
 msgstr ""
 
+msgid "SecurityInventory|Tool coverage"
+msgstr ""
+
 msgid "SecurityInventory|Tool coverage: %{coverage}"
 msgstr ""
 
@@ -56394,6 +56430,12 @@ msgstr ""
 msgid "SecurityInventory|View vulnerability report"
 msgstr ""
 
+msgid "SecurityInventory|Vulnerability count"
+msgstr ""
+
+msgid "SecurityInventory|Vulnerability count %{level}"
+msgstr ""
+
 msgid "SecurityInventory|You're already viewing this subgroup"
 msgstr ""
 
@@ -73846,6 +73888,9 @@ msgstr ""
 msgid "before"
 msgstr ""
 
+msgid "bigger than"
+msgstr ""
+
 msgid "blocks"
 msgstr ""
 
@@ -74976,6 +75021,9 @@ msgstr ""
 msgid "locked by %{path_lock_user_name} %{created_at}"
 msgstr ""
 
+msgid "lower than"
+msgstr ""
+
 msgid "main"
 msgstr ""
 
@@ -75903,6 +75951,9 @@ msgstr ""
 msgid "service accounts"
 msgstr ""
 
+msgid "severity|Any severity"
+msgstr ""
+
 msgid "severity|Blocker"
 msgstr ""
 
-- 
GitLab


From 73060f52516661b2c03486c4f8d8125449c444aa Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Tue, 1 Jul 2025 14:30:53 +0300
Subject: [PATCH 2/7] Change the operators of 'tool coverage'

---
 .../components/inventory_dashboard_filtered_search_bar.vue      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index 2f2225975bbbde..158d1cf47de02e 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -4,7 +4,6 @@ import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered
 import {
   FILTERED_SEARCH_TERM,
   OPERATORS_IS,
-  OPERATORS_NOT,
   OPERATORS_LESS_THAN_OR_EQUAL,
   OPERATORS_BIGGER_THAN_OR_EQUAL,
 } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -109,7 +108,6 @@ export default {
           }),
           token: GenericToken,
           unique: true,
-          operators: [...OPERATORS_IS, ...OPERATORS_NOT],
           options: [
             { value: 'enabled', title: TOOL_ENABLED },
             { value: 'not-enabled', title: TOOL_NOT_ENABLED },
-- 
GitLab


From 20e712e5ea402d45cbdb87afa6f0d9b18b8d2814 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Wed, 2 Jul 2025 15:37:08 +0300
Subject: [PATCH 3/7] Fix the header while the user is searching

---
 ...nventory_dashboard_filtered_search_bar.vue | 53 ++++++++++++++-----
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index 158d1cf47de02e..e978eb155161e1 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -26,7 +26,12 @@ const TOKEN_PREFIXES = {
   VULNERABILITY_COUNT: 'vulnerability-count-',
 };
 
-const VULNERABILITY_COUNT_KEYS = {
+const TOKEN_TYPES_TO_LABELS = {
+  [TOKEN_PREFIXES.VULNERABILITY_COUNT]: { ...SEVERITY_LEVELS, ...SEVERITY_LEVELS_ANY_SEVERITY },
+  [TOKEN_PREFIXES.TOOL_COVERAGE]: SCANNER_FILTER_LABELS,
+};
+
+const VULNERABILITY_COUNT_TYPES = {
   ANY_SEVERITY: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}any-severity`,
   CRITICAL: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}critical`,
   HIGH: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}high`,
@@ -36,7 +41,7 @@ const VULNERABILITY_COUNT_KEYS = {
   UNKNOWN: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}unknown`,
 };
 
-const TOOL_COVERAGE_KEYS = {
+const TOOL_COVERAGE_TYPES = {
   SAST: `${TOKEN_PREFIXES.TOOL_COVERAGE}sast`,
   SAST_ADVANCED: `${TOKEN_PREFIXES.TOOL_COVERAGE}advanced-sast`,
   DEPENDENCY_SCANNING: `${TOKEN_PREFIXES.TOOL_COVERAGE}dependency-scanning`,
@@ -81,7 +86,7 @@ export default {
         ...Object.entries(SEVERITY_LEVELS_ANY_SEVERITY),
       ].map(([level, key]) => {
         return {
-          type: VULNERABILITY_COUNT_KEYS[level.toUpperCase()],
+          type: VULNERABILITY_COUNT_TYPES[level.toUpperCase()],
           title: sprintf(s__('SecurityInventory|Vulnerability count %{level}'), {
             level: key.toLowerCase(),
           }),
@@ -102,7 +107,7 @@ export default {
     toolCoverageKeys() {
       return Object.entries(SCANNER_FILTER_LABELS).map(([tool, key]) => {
         return {
-          type: TOOL_COVERAGE_KEYS[tool.toUpperCase()],
+          type: TOOL_COVERAGE_TYPES[tool.toUpperCase()],
           title: sprintf(s__('SecurityInventory|%{key}'), {
             key,
           }),
@@ -124,9 +129,10 @@ export default {
           title: s__('SecurityInventory|Vulnerability count'),
           optionComponent: HeaderOptions,
           customKey: { hasComponent: true },
-          shouldDisplayTokenFn: this.createTokenSelectionValidator([
-            ...Object.values(VULNERABILITY_COUNT_KEYS),
-          ]),
+          shouldDisplayTokenFn: this.createTokenSelectionValidator(
+            TOKEN_PREFIXES.VULNERABILITY_COUNT,
+            [...Object.values(VULNERABILITY_COUNT_TYPES)],
+          ),
         },
         ...this.vulnerabilityCountKeys,
         {
@@ -136,7 +142,7 @@ export default {
           customKey: { hasComponent: true },
           shouldDisplayTokenFn: this.createPrefixTokenSelectionValidator(
             [TOKEN_PREFIXES.TOOL_COVERAGE, TOKEN_PREFIXES.VULNERABILITY_COUNT],
-            [...Object.values(VULNERABILITY_COUNT_KEYS), ...Object.values(TOOL_COVERAGE_KEYS)],
+            [...Object.values(VULNERABILITY_COUNT_TYPES), ...Object.values(TOOL_COVERAGE_TYPES)],
           ),
         },
         {
@@ -144,8 +150,8 @@ export default {
           title: s__('SecurityInventory|Tool coverage'),
           optionComponent: HeaderOptions,
           customKey: { hasComponent: true },
-          shouldDisplayTokenFn: this.createTokenSelectionValidator([
-            ...Object.values(TOOL_COVERAGE_KEYS),
+          shouldDisplayTokenFn: this.createTokenSelectionValidator(TOKEN_PREFIXES.TOOL_COVERAGE, [
+            ...Object.values(TOOL_COVERAGE_TYPES),
           ]),
         },
         ...this.toolCoverageKeys,
@@ -179,8 +185,16 @@ export default {
       this.filterParams = { ...filterParams };
       this.$emit('filterSubgroupsAndProjects', this.filterParams);
     },
-    createTokenSelectionValidator(keys) {
-      return (tokens) => {
+    createTokenSelectionValidator(type, keys) {
+      return ({ tokens = [], searchValue = '' }) => {
+        // when user search in the search bar
+        if (tokens.length === 0 && searchValue !== '') {
+          return Object.values(TOKEN_TYPES_TO_LABELS[type]).some((title) =>
+            title.toLowerCase().includes(searchValue.toLowerCase()),
+          );
+        }
+
+        // when user open the token list options
         const matchingTokens = tokens
           .filter((token) => keys.some((key) => token.type === key))
           .map((token) => token.type);
@@ -189,7 +203,20 @@ export default {
       };
     },
     createPrefixTokenSelectionValidator(prefixes, keys) {
-      return (tokens) => {
+      return ({ tokens = [], searchValue = '' }) => {
+        // when user search in the search bar
+        if (tokens.length === 0 && searchValue !== '') {
+          const [firstLabels, secondLabels] = prefixes
+            .map((prefix) => TOKEN_TYPES_TO_LABELS[prefix])
+            .map(Object.values);
+
+          return (
+            firstLabels.some((label) => label.toLowerCase().includes(searchValue.toLowerCase())) &&
+            secondLabels.some((label) => label.toLowerCase().includes(searchValue.toLowerCase()))
+          );
+        }
+
+        // when user open the token list options
         const keysByPrefix = prefixes.reduce((acc, prefix) => {
           acc[prefix] = keys.filter((key) => key.startsWith(prefix));
           return acc;
-- 
GitLab


From 16aa02cfcc503f71ded8fd709e526946af230785 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Thu, 3 Jul 2025 13:31:46 +0300
Subject: [PATCH 4/7] CR changes

---
 ...nventory_dashboard_filtered_search_bar.vue | 18 ++++-----
 .../components/tokens/generic_token.vue       | 24 ------------
 .../components/tokens/generic_token_spec.js   | 39 -------------------
 3 files changed, 8 insertions(+), 73 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
 delete mode 100644 ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js

diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index e978eb155161e1..c61e71bda24419 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdownDivider } from '@gitlab/ui';
+import { GlDropdownDivider, GlFilteredSearchToken } from '@gitlab/ui';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import {
   FILTERED_SEARCH_TERM,
@@ -17,7 +17,6 @@ import {
 import { s__, sprintf } from '~/locale';
 import { SEVERITY_LEVELS_ANY_SEVERITY, SEVERITY_LEVELS } from '~/vue_shared/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import GenericToken from './tokens/generic_token.vue';
 import customTitleOption from './tokens/custom_title_option.vue';
 import HeaderOptions from './tokens/header_options.vue';
 
@@ -90,7 +89,7 @@ export default {
           title: sprintf(s__('SecurityInventory|Vulnerability count %{level}'), {
             level: key.toLowerCase(),
           }),
-          token: GenericToken,
+          token: GlFilteredSearchToken,
           unique: true,
           optionComponent: customTitleOption,
           operators: [
@@ -111,7 +110,7 @@ export default {
           title: sprintf(s__('SecurityInventory|%{key}'), {
             key,
           }),
-          token: GenericToken,
+          token: GlFilteredSearchToken,
           unique: true,
           options: [
             { value: 'enabled', title: TOOL_ENABLED },
@@ -129,10 +128,9 @@ export default {
           title: s__('SecurityInventory|Vulnerability count'),
           optionComponent: HeaderOptions,
           customKey: { hasComponent: true },
-          shouldDisplayTokenFn: this.createTokenSelectionValidator(
-            TOKEN_PREFIXES.VULNERABILITY_COUNT,
-            [...Object.values(VULNERABILITY_COUNT_TYPES)],
-          ),
+          disabled: this.createTokenSelectionValidator(TOKEN_PREFIXES.VULNERABILITY_COUNT, [
+            ...Object.values(VULNERABILITY_COUNT_TYPES),
+          ]),
         },
         ...this.vulnerabilityCountKeys,
         {
@@ -140,7 +138,7 @@ export default {
           title: s__('SecurityInventory|Divider'),
           optionComponent: GlDropdownDivider,
           customKey: { hasComponent: true },
-          shouldDisplayTokenFn: this.createPrefixTokenSelectionValidator(
+          disabled: this.createPrefixTokenSelectionValidator(
             [TOKEN_PREFIXES.TOOL_COVERAGE, TOKEN_PREFIXES.VULNERABILITY_COUNT],
             [...Object.values(VULNERABILITY_COUNT_TYPES), ...Object.values(TOOL_COVERAGE_TYPES)],
           ),
@@ -150,7 +148,7 @@ export default {
           title: s__('SecurityInventory|Tool coverage'),
           optionComponent: HeaderOptions,
           customKey: { hasComponent: true },
-          shouldDisplayTokenFn: this.createTokenSelectionValidator(TOKEN_PREFIXES.TOOL_COVERAGE, [
+          disabled: this.createTokenSelectionValidator(TOKEN_PREFIXES.TOOL_COVERAGE, [
             ...Object.values(TOOL_COVERAGE_TYPES),
           ]),
         },
diff --git a/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue b/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
deleted file mode 100644
index 43a0c6126f5bce..00000000000000
--- a/ee/app/assets/javascripts/security_inventory/components/tokens/generic_token.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-import { GlFilteredSearchToken } from '@gitlab/ui';
-
-export default {
-  name: 'GenericToken',
-  components: {
-    GlFilteredSearchToken,
-  },
-  props: {
-    config: {
-      type: Object,
-      required: true,
-    },
-    value: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" />
-</template>
diff --git a/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js b/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js
deleted file mode 100644
index 50035724be6324..00000000000000
--- a/ee/spec/frontend/security_inventory/components/tokens/generic_token_spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlFilteredSearchToken } from '@gitlab/ui';
-import GenericToken from 'ee/security_inventory/components/tokens/generic_token.vue';
-
-describe('Token', () => {
-  let wrapper;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(GenericToken, {
-      propsData: {
-        config: { type: 'custom-type' },
-        value: { data: 'data value' },
-        ...props,
-      },
-    });
-  };
-
-  const findDropdownSectionHeader = () => wrapper.findComponent(GlFilteredSearchToken);
-
-  describe('component rendering', () => {
-    it('renders GlFilteredSearchToken', () => {
-      createComponent();
-      expect(findDropdownSectionHeader().exists()).toBe(true);
-    });
-
-    it('passes all props to GlFilteredSearchToken', () => {
-      const customConfig = { type: 'custom-token', unique: true };
-      const customValue = { data: 'custom-value' };
-      createComponent({ config: customConfig, value: customValue });
-
-      expect(findDropdownSectionHeader().props()).toEqual(
-        expect.objectContaining({
-          config: expect.objectContaining(customConfig),
-          value: expect.objectContaining(customValue),
-        }),
-      );
-    });
-  });
-});
-- 
GitLab


From 298a2c03129a1fe4d081fb336a9b41b9264963c5 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Mon, 7 Jul 2025 22:57:05 +0300
Subject: [PATCH 5/7] CR changes

---
 ...nventory_dashboard_filtered_search_bar.vue | 171 ++++++++++++------
 ...tory_dashboard_filtered_search_bar_spec.js |  15 +-
 2 files changed, 123 insertions(+), 63 deletions(-)

diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index c61e71bda24419..efc98fae8eba38 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -73,6 +73,8 @@ export default {
     return {
       initialSortBy: 'updated_at_desc',
       filterParams: {},
+      availableTokens: [],
+      searchValue: '',
     };
   },
   computed: {
@@ -120,37 +122,27 @@ export default {
         };
       });
     },
-    searchTokens() {
+    initialAvailableTokens() {
       if (!this.showFilterTokens) return [];
       return [
         {
           type: TOKEN_PREFIXES.VULNERABILITY_COUNT,
           title: s__('SecurityInventory|Vulnerability count'),
           optionComponent: HeaderOptions,
-          customKey: { hasComponent: true },
-          disabled: this.createTokenSelectionValidator(TOKEN_PREFIXES.VULNERABILITY_COUNT, [
-            ...Object.values(VULNERABILITY_COUNT_TYPES),
-          ]),
+          customKey: { useOptionComponentForKey: true },
         },
         ...this.vulnerabilityCountKeys,
         {
           type: 'divider',
           title: s__('SecurityInventory|Divider'),
           optionComponent: GlDropdownDivider,
-          customKey: { hasComponent: true },
-          disabled: this.createPrefixTokenSelectionValidator(
-            [TOKEN_PREFIXES.TOOL_COVERAGE, TOKEN_PREFIXES.VULNERABILITY_COUNT],
-            [...Object.values(VULNERABILITY_COUNT_TYPES), ...Object.values(TOOL_COVERAGE_TYPES)],
-          ),
+          customKey: { useOptionComponentForKey: true },
         },
         {
           type: TOKEN_PREFIXES.TOOL_COVERAGE,
           title: s__('SecurityInventory|Tool coverage'),
           optionComponent: HeaderOptions,
-          customKey: { hasComponent: true },
-          disabled: this.createTokenSelectionValidator(TOKEN_PREFIXES.TOOL_COVERAGE, [
-            ...Object.values(TOOL_COVERAGE_TYPES),
-          ]),
+          customKey: { useOptionComponentForKey: true },
         },
         ...this.toolCoverageKeys,
       ];
@@ -183,59 +175,119 @@ export default {
       this.filterParams = { ...filterParams };
       this.$emit('filterSubgroupsAndProjects', this.filterParams);
     },
-    createTokenSelectionValidator(type, keys) {
-      return ({ tokens = [], searchValue = '' }) => {
-        // when user search in the search bar
-        if (tokens.length === 0 && searchValue !== '') {
-          return Object.values(TOKEN_TYPES_TO_LABELS[type]).some((title) =>
-            title.toLowerCase().includes(searchValue.toLowerCase()),
-          );
-        }
+    disableHeaderToken(childrenTypes, searchedTokens, type) {
+      // when user search in the search bar
+      this.searchValue = this.getSearchValue(searchedTokens);
+      if (this.searchValue !== '') {
+        return !Object.values(TOKEN_TYPES_TO_LABELS[type]).some((title) =>
+          title.toLowerCase().includes(this.searchValue.toLowerCase()),
+        );
+      }
 
-        // when user open the token list options
-        const matchingTokens = tokens
-          .filter((token) => keys.some((key) => token.type === key))
-          .map((token) => token.type);
+      // when user open the token list options
+      const matchingTokens = searchedTokens
+        .filter((searchedToken) => childrenTypes.includes(searchedToken.type))
+        .map((searchedToken) => searchedToken.type);
 
-        return matchingTokens.length !== keys.length;
-      };
+      return matchingTokens.length === childrenTypes.length;
     },
-    createPrefixTokenSelectionValidator(prefixes, keys) {
-      return ({ tokens = [], searchValue = '' }) => {
-        // when user search in the search bar
-        if (tokens.length === 0 && searchValue !== '') {
-          const [firstLabels, secondLabels] = prefixes
-            .map((prefix) => TOKEN_TYPES_TO_LABELS[prefix])
-            .map(Object.values);
+    disableDividerToken(splittingTypes, searchedTokens, childrenTypes) {
+      // when user search in the search bar
+      this.searchValue = this.getSearchValue(searchedTokens);
+      if (this.searchValue !== '') {
+        const [firstLabels, secondLabels] = splittingTypes
+          .map((prefix) => TOKEN_TYPES_TO_LABELS[prefix])
+          .map(Object.values);
 
-          return (
-            firstLabels.some((label) => label.toLowerCase().includes(searchValue.toLowerCase())) &&
-            secondLabels.some((label) => label.toLowerCase().includes(searchValue.toLowerCase()))
-          );
-        }
+        return !(
+          firstLabels.some((label) =>
+            label.toLowerCase().includes(this.searchValue.toLowerCase()),
+          ) &&
+          secondLabels.some((label) => label.toLowerCase().includes(this.searchValue.toLowerCase()))
+        );
+      }
+
+      // when user open the token list options
+      const keysByPrefix = splittingTypes.reduce((acc, prefix) => {
+        acc[prefix] = childrenTypes.filter((key) => key.startsWith(prefix));
+        return acc;
+      }, {});
 
-        // when user open the token list options
-        const keysByPrefix = prefixes.reduce((acc, prefix) => {
-          acc[prefix] = keys.filter((key) => key.startsWith(prefix));
-          return acc;
-        }, {});
+      const matchingTokens = searchedTokens
+        .filter((searchedToken) =>
+          splittingTypes.some((prefix) => searchedToken.type.startsWith(prefix)),
+        )
+        .map((searchedToken) => searchedToken.type);
 
-        const matchingTokens = tokens
-          .filter((token) => prefixes.some((prefix) => token.type.startsWith(prefix)))
-          .map((token) => token.type);
+      const anyPrefixFullySelected = Object.values(keysByPrefix).some((prefixKeys) => {
+        const selectedTokensForPrefix = matchingTokens.filter((searchedToken) =>
+          prefixKeys.includes(searchedToken),
+        );
+        return selectedTokensForPrefix.length === prefixKeys.length;
+      });
 
-        const anyPrefixFullySelected = Object.entries(keysByPrefix).some(([, prefixKeys]) => {
-          const selectedTokensForPrefix = matchingTokens.filter((token) =>
-            prefixKeys.includes(token),
-          );
-          return selectedTokensForPrefix.length === prefixKeys.length;
-        });
+      if (matchingTokens.length === 0) {
+        return false;
+      }
+      return anyPrefixFullySelected;
+    },
+    disableRegularToken(availableToken, searchedTokens) {
+      const titleToCheck = availableToken.customKey?.title || availableToken.title;
+
+      // when user search in the search bar
+      this.searchValue = this.getSearchValue(searchedTokens);
+      if (this.searchValue !== '') {
+        return !titleToCheck.toLowerCase().includes(this.searchValue.toLowerCase());
+      }
 
-        if (matchingTokens.length === 0) {
-          return true;
+      // when user open the token list options
+      return !searchedTokens.some((searchedToken) => {
+        return titleToCheck.includes(searchedToken.value.data);
+      });
+    },
+    onInput(searchedTokens) {
+      this.availableTokens = this.initialAvailableTokens.map((availableToken) => {
+        if (TOKEN_PREFIXES.VULNERABILITY_COUNT === availableToken.type) {
+          return {
+            ...availableToken,
+            disabled: this.disableHeaderToken(
+              [...Object.values(VULNERABILITY_COUNT_TYPES)],
+              searchedTokens,
+              TOKEN_PREFIXES.VULNERABILITY_COUNT,
+            ),
+          };
+        }
+        if (TOKEN_PREFIXES.TOOL_COVERAGE === availableToken.type) {
+          return {
+            ...availableToken,
+            disabled: this.disableHeaderToken(
+              [...Object.values(TOOL_COVERAGE_TYPES)],
+              searchedTokens,
+              TOKEN_PREFIXES.TOOL_COVERAGE,
+            ),
+          };
         }
-        return !anyPrefixFullySelected;
-      };
+        if (availableToken.type === 'divider') {
+          return {
+            ...availableToken,
+            disabled: this.disableDividerToken(
+              [TOKEN_PREFIXES.TOOL_COVERAGE, TOKEN_PREFIXES.VULNERABILITY_COUNT],
+              searchedTokens,
+              [...Object.values(VULNERABILITY_COUNT_TYPES), ...Object.values(TOOL_COVERAGE_TYPES)],
+            ),
+          };
+        }
+        return {
+          ...availableToken,
+          disabled: this.disableRegularToken(availableToken, searchedTokens),
+        };
+      });
+    },
+    getSearchValue(searchedTokens) {
+      if (!searchedTokens[searchedTokens.length - 2]?.value.operator) {
+        return searchedTokens[searchedTokens.length - 2]?.value.data || '';
+      }
+      return '';
     },
   },
 };
@@ -247,11 +299,12 @@ export default {
     v-bind="$attrs"
     :namespace="namespace"
     :initial-filter-value="initialFilterValue"
-    :tokens="searchTokens"
+    :tokens="availableTokens"
     :initial-sort-by="initialSortBy"
     :search-input-placeholder="s__('SecurityInventoryFilter|Search projects…')"
     :search-text-option-label="s__('SecurityInventoryFilter|Search for project name')"
     terms-as-tokens
     @onFilter="onFilter"
+    @onInput="onInput"
   />
 </template>
diff --git a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
index 8cde7c45e1a196..7cc3ca52022cfd 100644
--- a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
+++ b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { GlFilteredSearchToken } from '@gitlab/ui';
 import InventoryDashboardFilteredSearchBar from 'ee/security_inventory/components/inventory_dashboard_filtered_search_bar.vue';
-import GenericToken from 'ee/security_inventory/components/tokens/generic_token.vue';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import { queryToObject } from '~/lib/utils/url_utility';
 import HeaderOptions from 'ee/security_inventory/components/tokens/header_options.vue';
@@ -159,8 +159,15 @@ describe('InventoryDashboardFilteredSearchBar', () => {
   });
 
   describe('when `securityInventoryFiltering` is enabled', () => {
-    it('renders all tokens', () => {
+    it('renders all tokens', async () => {
       createComponent({ securityInventoryFiltering: true });
+      findFilteredSearch().vm.$emit('onInput', [
+        {
+          type: 'filtered-search-term',
+          value: { data: '' },
+        },
+      ]);
+      await nextTick();
       expect(findFilteredSearch().props('tokens')).toMatchObject(
         expect.arrayContaining([
           expect.objectContaining(
@@ -168,12 +175,12 @@ describe('InventoryDashboardFilteredSearchBar', () => {
               type: 'vulnerability-count-',
               title: 'Vulnerability count',
               optionComponent: HeaderOptions,
-              customKey: { hasComponent: true },
+              customKey: { useOptionComponentForKey: true },
             },
             {
               type: 'vulnerability-count-critical',
               title: 'Vulnerability count critical',
-              token: GenericToken,
+              token: GlFilteredSearchToken,
               unique: true,
               optionComponent: customTitleOption,
               operators: [
-- 
GitLab


From 437d10f32f31c946aff4684ac558c1de2e1ed3c5 Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Thu, 10 Jul 2025 14:35:44 +0300
Subject: [PATCH 6/7] CR changes

---
 .../components/inventory_dashboard_filtered_search_bar.vue | 7 +++----
 .../inventory_dashboard_filtered_search_bar_spec.js        | 3 +--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index efc98fae8eba38..04e911bedfdc3d 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -129,20 +129,19 @@ export default {
           type: TOKEN_PREFIXES.VULNERABILITY_COUNT,
           title: s__('SecurityInventory|Vulnerability count'),
           optionComponent: HeaderOptions,
-          customKey: { useOptionComponentForKey: true },
+          customKey: { component: HeaderOptions },
         },
         ...this.vulnerabilityCountKeys,
         {
           type: 'divider',
           title: s__('SecurityInventory|Divider'),
           optionComponent: GlDropdownDivider,
-          customKey: { useOptionComponentForKey: true },
+          customKey: { component: GlDropdownDivider },
         },
         {
           type: TOKEN_PREFIXES.TOOL_COVERAGE,
           title: s__('SecurityInventory|Tool coverage'),
-          optionComponent: HeaderOptions,
-          customKey: { useOptionComponentForKey: true },
+          customKey: { component: HeaderOptions },
         },
         ...this.toolCoverageKeys,
       ];
diff --git a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
index 7cc3ca52022cfd..9fbe6867f9301a 100644
--- a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
+++ b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
@@ -174,8 +174,7 @@ describe('InventoryDashboardFilteredSearchBar', () => {
             {
               type: 'vulnerability-count-',
               title: 'Vulnerability count',
-              optionComponent: HeaderOptions,
-              customKey: { useOptionComponentForKey: true },
+              customKey: { component: HeaderOptions },
             },
             {
               type: 'vulnerability-count-critical',
-- 
GitLab


From f24827424012ccf51e0d0565f24b90d9828ceb2c Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Sun, 20 Jul 2025 18:43:34 +0300
Subject: [PATCH 7/7] CR changes

---
 .../filtered_search_bar/constants.js          |   8 +-
 .../javascripts/vue_shared/constants.js       |   6 +-
 ...nventory_dashboard_filtered_search_bar.vue | 100 ++++++++++++------
 .../components/tokens/custom_title_option.vue |   2 +-
 ...tory_dashboard_filtered_search_bar_spec.js |   4 +-
 .../tokens/custom_title_option_spec.js        |  12 +--
 locale/gitlab.pot                             |  14 +--
 7 files changed, 90 insertions(+), 56 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index 13e0a9a36f5522..0733e9ab1b1826 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -21,10 +21,10 @@ export const OPERATOR_AFTER = '≥';
 export const OPERATOR_AFTER_TEXT = __('on or after');
 export const OPERATOR_BEFORE = '<';
 export const OPERATOR_BEFORE_TEXT = __('before');
-export const OPERATOR_BIGGER_THAN_OR_EQUAL = '=>';
-export const OPERATOR_BIGGER_THAN_OR_EQUAL_TEXT = __('bigger than');
-export const OPERATOR_LESS_THAN_OR_EQUAL = '=<';
-export const OPERATOR_LESS_THAN_OR_EQUAL_TEXT = __('lower than');
+export const OPERATOR_BIGGER_THAN_OR_EQUAL = '>=';
+export const OPERATOR_BIGGER_THAN_OR_EQUAL_TEXT = __('greater than or equal');
+export const OPERATOR_LESS_THAN_OR_EQUAL = '<=';
+export const OPERATOR_LESS_THAN_OR_EQUAL_TEXT = __('less than or equal');
 
 export const OPERATORS_IS = [{ value: OPERATOR_IS, description: OPERATOR_IS_TEXT }];
 export const OPERATORS_NOT = [{ value: OPERATOR_NOT, description: OPERATOR_NOT_TEXT }];
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 4c5db3e5339c64..9ba865fe068a9b 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -116,7 +116,7 @@ export const SEVERITY_LEVEL_UNKNOWN = 'unknown';
 export const SEVERITY_LEVEL_MEDIUM = 'medium';
 export const SEVERITY_LEVEL_LOW = 'low';
 export const SEVERITY_LEVEL_INFO = 'info';
-export const SEVERITY_LEVEL_ANY_SEVERITY = 'any_severity';
+export const SEVERITY_LEVEL_ANY = 'any';
 
 export const SEVERITY_LEVELS = {
   [SEVERITY_LEVEL_CRITICAL]: s__('severity|Critical'),
@@ -127,6 +127,6 @@ export const SEVERITY_LEVELS = {
   [SEVERITY_LEVEL_UNKNOWN]: s__('severity|Unknown'),
 };
 
-export const SEVERITY_LEVELS_ANY_SEVERITY = {
-  [SEVERITY_LEVEL_ANY_SEVERITY]: s__('severity|Any severity'),
+export const SEVERITY_LEVELS_ANY = {
+  [SEVERITY_LEVEL_ANY]: s__('severity|Any'),
 };
diff --git a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
index 04e911bedfdc3d..380e55a73529c0 100644
--- a/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/inventory_dashboard_filtered_search_bar.vue
@@ -15,7 +15,7 @@ import {
   SCANNER_FILTER_LABELS,
 } from 'ee/security_inventory/constants';
 import { s__, sprintf } from '~/locale';
-import { SEVERITY_LEVELS_ANY_SEVERITY, SEVERITY_LEVELS } from '~/vue_shared/constants';
+import { SEVERITY_LEVELS, SEVERITY_LEVELS_ANY } from '~/vue_shared/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import customTitleOption from './tokens/custom_title_option.vue';
 import HeaderOptions from './tokens/header_options.vue';
@@ -26,12 +26,12 @@ const TOKEN_PREFIXES = {
 };
 
 const TOKEN_TYPES_TO_LABELS = {
-  [TOKEN_PREFIXES.VULNERABILITY_COUNT]: { ...SEVERITY_LEVELS, ...SEVERITY_LEVELS_ANY_SEVERITY },
+  [TOKEN_PREFIXES.VULNERABILITY_COUNT]: { ...SEVERITY_LEVELS, ...SEVERITY_LEVELS_ANY },
   [TOKEN_PREFIXES.TOOL_COVERAGE]: SCANNER_FILTER_LABELS,
 };
 
 const VULNERABILITY_COUNT_TYPES = {
-  ANY_SEVERITY: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}any-severity`,
+  ANY: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}any`,
   CRITICAL: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}critical`,
   HIGH: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}high`,
   MEDIUM: `${TOKEN_PREFIXES.VULNERABILITY_COUNT}medium`,
@@ -82,28 +82,27 @@ export default {
       return this.glFeatures.securityInventoryFiltering;
     },
     vulnerabilityCountKeys() {
-      return [
-        ...Object.entries(SEVERITY_LEVELS),
-        ...Object.entries(SEVERITY_LEVELS_ANY_SEVERITY),
-      ].map(([level, key]) => {
-        return {
-          type: VULNERABILITY_COUNT_TYPES[level.toUpperCase()],
-          title: sprintf(s__('SecurityInventory|Vulnerability count %{level}'), {
-            level: key.toLowerCase(),
-          }),
-          token: GlFilteredSearchToken,
-          unique: true,
-          optionComponent: customTitleOption,
-          operators: [
-            ...OPERATORS_LESS_THAN_OR_EQUAL,
-            ...OPERATORS_IS,
-            ...OPERATORS_BIGGER_THAN_OR_EQUAL,
-          ],
-          customKey: {
-            title: key,
-          },
-        };
-      });
+      return [...Object.entries(SEVERITY_LEVELS), ...Object.entries(SEVERITY_LEVELS_ANY)].map(
+        ([level, key]) => {
+          return {
+            type: VULNERABILITY_COUNT_TYPES[level.toUpperCase()],
+            title: sprintf(s__('SecurityInventory|Vulnerability count %{level}'), {
+              level: key.toLowerCase(),
+            }),
+            token: GlFilteredSearchToken,
+            unique: true,
+            optionComponent: customTitleOption,
+            operators: [
+              ...OPERATORS_LESS_THAN_OR_EQUAL,
+              ...OPERATORS_IS,
+              ...OPERATORS_BIGGER_THAN_OR_EQUAL,
+            ],
+            customKeyToken: {
+              title: key,
+            },
+          };
+        },
+      );
     },
     toolCoverageKeys() {
       return Object.entries(SCANNER_FILTER_LABELS).map(([tool, key]) => {
@@ -129,19 +128,19 @@ export default {
           type: TOKEN_PREFIXES.VULNERABILITY_COUNT,
           title: s__('SecurityInventory|Vulnerability count'),
           optionComponent: HeaderOptions,
-          customKey: { component: HeaderOptions },
+          customKeyToken: { component: HeaderOptions },
         },
         ...this.vulnerabilityCountKeys,
         {
           type: 'divider',
           title: s__('SecurityInventory|Divider'),
           optionComponent: GlDropdownDivider,
-          customKey: { component: GlDropdownDivider },
+          customKeyToken: { component: GlDropdownDivider },
         },
         {
           type: TOKEN_PREFIXES.TOOL_COVERAGE,
           title: s__('SecurityInventory|Tool coverage'),
-          customKey: { component: HeaderOptions },
+          customKeyToken: { component: HeaderOptions },
         },
         ...this.toolCoverageKeys,
       ];
@@ -178,8 +177,22 @@ export default {
       // when user search in the search bar
       this.searchValue = this.getSearchValue(searchedTokens);
       if (this.searchValue !== '') {
-        return !Object.values(TOKEN_TYPES_TO_LABELS[type]).some((title) =>
-          title.toLowerCase().includes(this.searchValue.toLowerCase()),
+        const originalLabels = Object.values(TOKEN_TYPES_TO_LABELS[type]);
+
+        // filter out labels based on existing searched tokens
+        const filteredLabels = originalLabels.filter(
+          (label) =>
+            !searchedTokens.some(
+              (searchedToken) =>
+                searchedToken.type.includes(type) &&
+                searchedToken.type.includes(label.toLowerCase()),
+            ),
+        );
+
+        return (
+          !filteredLabels.filter((title) =>
+            title.toLowerCase().includes(this.searchValue.toLowerCase()),
+          ).length > 0
         );
       }
 
@@ -198,11 +211,32 @@ export default {
           .map((prefix) => TOKEN_TYPES_TO_LABELS[prefix])
           .map(Object.values);
 
+        // filter out labels based on existing searched tokens
+        const filteredFirstLabels = firstLabels.filter(
+          (label) =>
+            !searchedTokens.some(
+              (searchedToken) =>
+                childrenTypes.includes(searchedToken.type) &&
+                searchedToken.type.includes(label.toLowerCase()),
+            ),
+        );
+
+        const filteredSecondLabels = secondLabels.filter(
+          (label) =>
+            !searchedTokens.some(
+              (searchedToken) =>
+                childrenTypes.includes(searchedToken.type) &&
+                searchedToken.type.includes(label.toLowerCase()),
+            ),
+        );
+
         return !(
-          firstLabels.some((label) =>
+          filteredFirstLabels.some((label) =>
             label.toLowerCase().includes(this.searchValue.toLowerCase()),
           ) &&
-          secondLabels.some((label) => label.toLowerCase().includes(this.searchValue.toLowerCase()))
+          filteredSecondLabels.some((label) =>
+            label.toLowerCase().includes(this.searchValue.toLowerCase()),
+          )
         );
       }
 
@@ -231,7 +265,7 @@ export default {
       return anyPrefixFullySelected;
     },
     disableRegularToken(availableToken, searchedTokens) {
-      const titleToCheck = availableToken.customKey?.title || availableToken.title;
+      const titleToCheck = availableToken.customKeyToken?.title || availableToken.title;
 
       // when user search in the search bar
       this.searchValue = this.getSearchValue(searchedTokens);
diff --git a/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue b/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
index 8873cc8ce20c42..80ac13054fd998 100644
--- a/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
+++ b/ee/app/assets/javascripts/security_inventory/components/tokens/custom_title_option.vue
@@ -8,7 +8,7 @@ export default {
   },
   computed: {
     title() {
-      return this.option?.customKey?.title || this.option?.title;
+      return this.option?.customKeyToken?.title || this.option?.title;
     },
   },
 };
diff --git a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
index 9fbe6867f9301a..0d16d805ebb808 100644
--- a/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
+++ b/ee/spec/frontend/security_inventory/components/inventory_dashboard_filtered_search_bar_spec.js
@@ -174,7 +174,7 @@ describe('InventoryDashboardFilteredSearchBar', () => {
             {
               type: 'vulnerability-count-',
               title: 'Vulnerability count',
-              customKey: { component: HeaderOptions },
+              customKeyToken: { component: HeaderOptions },
             },
             {
               type: 'vulnerability-count-critical',
@@ -187,7 +187,7 @@ describe('InventoryDashboardFilteredSearchBar', () => {
                 ...OPERATORS_IS,
                 ...OPERATORS_BIGGER_THAN_OR_EQUAL,
               ],
-              customKey: {
+              customKeyToken: {
                 title: 'critical',
               },
             },
diff --git a/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js b/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
index a70818b5c220bb..34faeac1a5e46a 100644
--- a/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
+++ b/ee/spec/frontend/security_inventory/components/tokens/custom_title_option_spec.js
@@ -7,7 +7,7 @@ describe('CustomTitleOption', () => {
   const createComponent = (props = {}) => {
     wrapper = shallowMount(CustomTitleOption, {
       propsData: {
-        option: { title: 'Original Title', customKey: { title: 'Custom Title' } },
+        option: { title: 'Original Title', customKeyToken: { title: 'Custom Title' } },
         ...props,
       },
     });
@@ -22,14 +22,14 @@ describe('CustomTitleOption', () => {
       expect(wrapper.text()).toBe('Original Title');
     });
 
-    it('renders customKey title when available', () => {
+    it('renders customKeyToken title when available', () => {
       createComponent();
       expect(wrapper.text()).toBe('Custom Title');
     });
 
-    it('renders customKey when title not exists', () => {
+    it('renders customKeyToken when title not exists', () => {
       const option = {
-        customKey: { title: 'Custom Title' },
+        customKeyToken: { title: 'Custom Title' },
       };
       createComponent({ option });
       expect(wrapper.text()).toBe('Custom Title');
@@ -41,10 +41,10 @@ describe('CustomTitleOption', () => {
       expect(wrapper.text()).toBe('');
     });
 
-    it('renders customKey title when customKey exists but title is undefined', () => {
+    it('renders customKeyToken title when customKeyToken exists but title is undefined', () => {
       const option = {
         title: 'Original Title',
-        customKey: { title: undefined },
+        customKeyToken: { title: undefined },
       };
       createComponent({ option });
       expect(wrapper.text()).toBe('Original Title');
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 21214945cba2a8..2a7d588593611a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -73888,9 +73888,6 @@ msgstr ""
 msgid "before"
 msgstr ""
 
-msgid "bigger than"
-msgstr ""
-
 msgid "blocks"
 msgstr ""
 
@@ -74703,6 +74700,9 @@ msgstr[1] ""
 msgid "frontmatter"
 msgstr ""
 
+msgid "greater than or equal"
+msgstr ""
+
 msgid "group"
 msgstr ""
 
@@ -74996,6 +74996,9 @@ msgstr ""
 msgid "less than a minute"
 msgstr ""
 
+msgid "less than or equal"
+msgstr ""
+
 msgid "level: %{level}"
 msgstr ""
 
@@ -75021,9 +75024,6 @@ msgstr ""
 msgid "locked by %{path_lock_user_name} %{created_at}"
 msgstr ""
 
-msgid "lower than"
-msgstr ""
-
 msgid "main"
 msgstr ""
 
@@ -75951,7 +75951,7 @@ msgstr ""
 msgid "service accounts"
 msgstr ""
 
-msgid "severity|Any severity"
+msgid "severity|Any"
 msgstr ""
 
 msgid "severity|Blocker"
-- 
GitLab