Add policy name filter to threat alerts

- add input field for policy name searching
- update tests

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_filters.vue

 <script>
-import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
+import { GlFormCheckbox, GlFormGroup, GlSearchBoxByType } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { DEFAULT_FILTERS } from './constants';
 
 export default {
   DEFAULT_DISMISSED_FILTER: true,
-  components: { GlFormCheckbox, GlFormGroup },
+  components: { GlFormCheckbox, GlFormGroup, GlSearchBoxByType },
+  props: {
+    filters: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showMinimumSearchQueryMessage: false,
+    };
+  },
   i18n: {
     HIDE_DISMISSED_TITLE: s__('ThreatMonitoring|Hide dismissed alerts'),
+    POLICY_NAME_FILTER_PLACEHOLDER: s__('NetworkPolicy|Search by policy name'),
+    POLICY_NAME_FILTER_TITLE: s__('NetworkPolicy|Policy'),
   },
   methods: {
     changeDismissedFilter(filtered) {
-      const newFilters = filtered ? DEFAULT_FILTERS : {};
-      this.$emit('filter-change', newFilters);
+      const newFilters = filtered ? DEFAULT_FILTERS : { statuses: [] };
+      this.handleFilterChange(newFilters);
+    },
+    handleSearch(searchTerm) {
+      const newFilters = { searchTerm };
+      this.handleFilterChange(newFilters);
+    },
+    handleFilterChange(newFilters) {
+      this.$emit('filter-change', { ...this.filters, ...newFilters });
     },
   },
 };
@@ -20,9 +41,17 @@ export default {
 
 <template>
   <div
-    class="gl-pt-3 gl-px-3 gl-bg-gray-10 gl-display-flex gl-justify-content-end gl-align-items-center"
+    class="gl-p-4 gl-bg-gray-10 gl-display-flex gl-justify-content-space-between gl-align-items-center"
   >
-    <gl-form-group label-size="sm">
+    <div>
+      <h5 class="gl-mt-0">{{ $options.i18n.POLICY_NAME_FILTER_TITLE }}</h5>
+      <gl-search-box-by-type
+        debounce="250"
+        :placeholder="$options.i18n.POLICY_NAME_FILTER_PLACEHOLDER"
+        @input="handleSearch"
+      />
+    </div>
+    <gl-form-group label-size="sm" class="gl-mb-0">
       <gl-form-checkbox
         class="gl-mt-3"
         :checked="$options.DEFAULT_DISMISSED_FILTER"

ee/app/assets/javascripts/threat_monitoring/components/alerts/alerts_list.vue

@@ -137,7 +137,7 @@ export default {
 </script>
 <template>
   <div>
-    <alert-filters @filter-change="handleFilterChange" />
+    <alert-filters :filters="filters" @filter-change="handleFilterChange" />
     <gl-alert v-if="showNoAlertsMsg" data-testid="threat-alerts-unconfigured" :dismissible="false">
       <gl-sprintf :message="$options.i18n.MESSAGES.CONFIGURE">
         <template #link="{ content }">

ee/changelogs/unreleased/296712-policy-name-search.yml

+---
+title: Add policy name filter to threat alerts
+merge_request: 56708
+author:
+type: added

ee/spec/frontend/threat_monitoring/components/alerts/alert_filters_spec.js

-import { GlFormCheckbox } from '@gitlab/ui';
+import { GlFormCheckbox, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
 import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
@@ -7,9 +7,10 @@ describe('AlertFilters component', () => {
   let wrapper;
 
   const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findGlSearch = () => wrapper.find(GlSearchBoxByType);
 
-  const createWrapper = () => {
-    wrapper = shallowMount(AlertFilters);
+  const createWrapper = (filters = DEFAULT_FILTERS) => {
+    wrapper = shallowMount(AlertFilters, { propsData: { filters } });
   };
 
   afterEach(() => {
@@ -17,32 +18,56 @@ describe('AlertFilters component', () => {
     wrapper = null;
   });
 
-  describe('default state', () => {
-    it('"hide dismissed checkbox" is checked', () => {
+  describe('Policy Name Filter', () => {
+    beforeEach(() => {
       createWrapper();
-      const checkbox = findGlFormCheckbox();
-      expect(checkbox.exists()).toBe(true);
-      expect(checkbox.attributes('checked')).toBeTruthy();
     });
-  });
 
-  describe('dismissed alerts filter', () => {
-    beforeEach(() => {
-      createWrapper();
+    describe('default state', () => {
+      it('shows policy name search box', () => {
+        const search = findGlSearch();
+        expect(search.exists()).toBe(true);
+        expect(search.attributes('value')).toBe('');
+      });
+
+      it('does emit an event with a user-defined string', async () => {
+        const term = 'abc';
+        const search = findGlSearch();
+        search.vm.$emit('input', term);
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('filter-change')).toStrictEqual([
+          [{ ...DEFAULT_FILTERS, searchTerm: 'abc' }],
+        ]);
+      });
     });
+  });
 
-    it('emits an event with no filters on filter deselect', async () => {
-      const checkbox = findGlFormCheckbox();
-      checkbox.vm.$emit('change', false);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('filter-change')).toEqual([[{}]]);
+  describe('Hide Dismissed Filter', () => {
+    describe('default state', () => {
+      it('"hide dismissed checkbox" is checked', () => {
+        createWrapper();
+        const checkbox = findGlFormCheckbox();
+        expect(checkbox.exists()).toBe(true);
+        expect(checkbox.attributes('checked')).toBeTruthy();
+      });
     });
 
-    it('emits an event with the default filters on filter select', async () => {
-      const checkbox = findGlFormCheckbox();
-      checkbox.vm.$emit('change', true);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('filter-change')).toEqual([[DEFAULT_FILTERS]]);
+    describe('dismissed alerts filter', () => {
+      it('emits an event with no filters on filter deselect', async () => {
+        createWrapper();
+        const checkbox = findGlFormCheckbox();
+        checkbox.vm.$emit('change', false);
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('filter-change')).toStrictEqual([[{ statuses: [] }]]);
+      });
+
+      it('emits an event with the default filters on filter select', async () => {
+        createWrapper({});
+        const checkbox = findGlFormCheckbox();
+        checkbox.vm.$emit('change', true);
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted('filter-change')).toEqual([[DEFAULT_FILTERS]]);
+      });
     });
   });
 });

ee/spec/frontend/threat_monitoring/components/alerts/alerts_list_spec.js

@@ -101,6 +101,7 @@ describe('AlertsList component', () => {
 
     it('shows threat monitoring alert filters', () => {
       expect(findAlertFilters().exists()).toBe(true);
+      expect(findAlertFilters().props('filters')).toBe(DEFAULT_FILTERS);
     });
 
     it('does have the default filters initially', () => {

locale/gitlab.pot

@@ -20394,6 +20394,12 @@ msgstr ""
 msgid "NetworkPolicies|ports/protocols"
 msgstr ""
 
+msgid "NetworkPolicy|Policy"
+msgstr ""
+
+msgid "NetworkPolicy|Search by policy name"
+msgstr ""
+
 msgid "Never"
 msgstr ""