Add filter to hide dismissed alerts

- add alert_filter component
- allow for hiding of dismissed alerts
- add tests

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

+<script>
+import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { DEFAULT_FILTERS } from './constants';
+
+export default {
+  DEFAULT_DISMISSED_FILTER: true,
+  components: { GlFormCheckbox, GlFormGroup },
+  i18n: {
+    HIDE_DISMISSED_TITLE: s__('ThreatMonitoring|Hide dismissed alerts'),
+  },
+  methods: {
+    changeDismissedFilter(filtered) {
+      const newFilters = filtered ? DEFAULT_FILTERS : {};
+      this.$emit('filter-change', newFilters);
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-pt-3 gl-px-3 gl-bg-gray-10 gl-display-flex gl-justify-content-end gl-align-items-center"
+  >
+    <gl-form-group label-size="sm">
+      <gl-form-checkbox
+        class="gl-mt-3"
+        :checked="$options.DEFAULT_DISMISSED_FILTER"
+        @change="changeDismissedFilter"
+      >
+        {{ $options.i18n.HIDE_DISMISSED_TITLE }}
+      </gl-form-checkbox>
+    </gl-form-group>
+  </div>
+</template>

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

@@ -14,7 +14,8 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 // TODO once backend is settled, update by either abstracting this out to app/assets/javascripts/graphql_shared or create new, modified query in #287757
 import getAlerts from '~/alert_management/graphql/queries/get_alerts.query.graphql';
-import { FIELDS, MESSAGES, PAGE_SIZE, STATUSES } from './constants';
+import { DEFAULT_FILTERS, FIELDS, MESSAGES, PAGE_SIZE, STATUSES } from './constants';
+import AlertFilters from './alert_filters.vue';
 import AlertStatus from './alert_status.vue';
 
 export default {
@@ -26,6 +27,7 @@ export default {
   },
   components: {
     AlertStatus,
+    AlertFilters,
     GlAlert,
     GlIntersectionObserver,
     GlLink,
@@ -47,6 +49,7 @@ export default {
           firstPageSize: this.$options.PAGE_SIZE,
           projectPath: this.projectPath,
           sort: this.sort,
+          ...this.filters,
         };
       },
       update: ({ project }) => project?.alertManagementAlerts.nodes || [],
@@ -63,6 +66,7 @@ export default {
       alerts: [],
       errored: false,
       errorMsg: '',
+      filters: DEFAULT_FILTERS,
       isErrorAlertDismissed: false,
       pageInfo: {},
       sort: 'STARTED_AT_DESC',
@@ -118,6 +122,9 @@ export default {
       this.errored = true;
       this.errorMsg = msg;
     },
+    handleFilterChange(newFilters) {
+      this.filters = newFilters;
+    },
     handleStatusUpdate() {
       this.$apollo.queries.alerts.refetch();
     },
@@ -126,6 +133,7 @@ export default {
 </script>
 <template>
   <div>
+    <alert-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/app/assets/javascripts/threat_monitoring/components/alerts/constants.js

@@ -45,3 +45,5 @@ export const FIELDS = [
 ];
 
 export const PAGE_SIZE = 20;
+
+export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] };

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

+import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
+import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
+import { GlFormCheckbox } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+describe('AlertFilters component', () => {
+  let wrapper;
+
+  const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox);
+
+  const createWrapper = () => {
+    wrapper = shallowMount(AlertFilters);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('default state', () => {
+    it('"hide dismissed checkbox" is checked', () => {
+      createWrapper();
+      const checkbox = findGlFormCheckbox();
+      expect(checkbox.exists()).toBe(true);
+      expect(checkbox.attributes('checked')).toBeTruthy();
+    });
+  });
+
+  describe('dismissed alerts filter', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    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([[{}]]);
+    });
+
+    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]]);
+    });
+  });
+});

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

 import { GlIntersectionObserver, GlSkeletonLoading } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import AlertsList from 'ee/threat_monitoring/components/alerts/alerts_list.vue';
+import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
 import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
+import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
 import { mockAlerts } from '../../mock_data';
 
 const alerts = mockAlerts;
@@ -25,7 +27,9 @@ describe('AlertsList component', () => {
       },
     },
   };
+  const defaultProps = { filters: DEFAULT_FILTERS };
 
+  const findAlertFilters = () => wrapper.find(AlertFilters);
   const findUnconfiguredAlert = () => wrapper.find("[data-testid='threat-alerts-unconfigured']");
   const findErrorAlert = () => wrapper.find("[data-testid='threat-alerts-error']");
   const findStartedAtColumn = () => wrapper.find("[data-testid='threat-alerts-started-at']");
@@ -43,12 +47,14 @@ describe('AlertsList component', () => {
       mocks: {
         $apollo,
       },
+      propsData: defaultProps,
       provide: {
         documentationPath: '#',
         projectPath: '#',
       },
       stubs: {
         AlertStatus: true,
+        AlertFilters: true,
         GlAlert: true,
         GlLoadingIcon: true,
         GlIntersectionObserver: true,
@@ -70,6 +76,22 @@ describe('AlertsList component', () => {
       createWrapper({ data: { alerts, pageInfo } });
     });
 
+    it('shows threat monitoring alert filters', () => {
+      expect(findAlertFilters().exists()).toBe(true);
+    });
+
+    it('does have the default filters initially', () => {
+      expect(wrapper.vm.filters).toEqual(DEFAULT_FILTERS);
+    });
+
+    it('does update its filters on filter event emitted', async () => {
+      const newFilters = { statuses: [] };
+      expect(wrapper.vm.filters).toEqual(DEFAULT_FILTERS);
+      findAlertFilters().vm.$emit('filter-change', newFilters);
+      await wrapper.vm.$nextTick();
+      expect(wrapper.vm.filters).toEqual(newFilters);
+    });
+
     it('does show all columns', () => {
       expect(findStartedAtColumn().exists()).toBe(true);
       expect(findIdColumn().exists()).toBe(true);

locale/gitlab.pot

@@ -28698,6 +28698,9 @@ msgstr ""
 msgid "ThreatMonitoring|Environment"
 msgstr ""
 
+msgid "ThreatMonitoring|Hide dismissed alerts"
+msgstr ""
+
 msgid "ThreatMonitoring|In review"
 msgstr ""