Search plain text in alert list frontend

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -13,10 +13,12 @@ import {
   GlTab,
   GlBadge,
   GlPagination,
+  GlSearchBoxByType,
   GlSprintf,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
+import { debounce, trim } from 'lodash';
 import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import { fetchPolicies } from '~/lib/graphql';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -54,6 +56,7 @@ export default {
     errorMsg: s__(
       "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.",
     ),
+    searchPlaceholder: __('Search or filter results...'),
   },
   fields: [
     {
@@ -126,6 +129,7 @@ export default {
     GlTab,
     GlBadge,
     GlPagination,
+    GlSearchBoxByType,
     GlSprintf,
   },
   props: {
@@ -160,6 +164,7 @@ export default {
       query: getAlerts,
       variables() {
         return {
+          searchTerm: this.searchTerm,
           projectPath: this.projectPath,
           statuses: this.statusFilter,
           sort: this.sort,
@@ -186,6 +191,7 @@ export default {
       query: getAlertsCountByStatus,
       variables() {
         return {
+          searchTerm: this.searchTerm,
           projectPath: this.projectPath,
         };
       },
@@ -196,6 +202,7 @@ export default {
   },
   data() {
     return {
+      searchTerm: '',
       errored: false,
       isAlertDismissed: false,
       isErrorAlertDismissed: false,
@@ -211,7 +218,11 @@ export default {
   computed: {
     showNoAlertsMsg() {
       return (
-        !this.errored && !this.loading && this.alertsCount?.all === 0 && !this.isAlertDismissed
+        !this.errored &&
+        !this.loading &&
+        this.alertsCount?.all === 0 &&
+        !this.searchTerm &&
+        !this.isAlertDismissed
       );
     },
     showErrorMsg() {
@@ -257,6 +268,13 @@ export default {
       this.resetPagination();
       this.sort = `${sortingColumn}_${sortingDirection}`;
     },
+    onInputChange: debounce(function debounceSearch(input) {
+      const trimmedInput = trim(input);
+      if (trimmedInput !== this.searchTerm) {
+        this.resetPagination();
+        this.searchTerm = trimmedInput;
+      }
+    }, 500),
     updateAlertStatus(status, iid) {
       this.$apollo
         .mutate({
@@ -343,7 +361,7 @@ export default {
         {{ $options.i18n.errorMsg }}
       </gl-alert>
 
-      <gl-tabs @input="filterAlertsByStatus">
+      <gl-tabs content-class="gl-p-0" @input="filterAlertsByStatus">
         <gl-tab v-for="tab in $options.statusTabs" :key="tab.status">
           <template slot="title">
             <span>{{ tab.title }}</span>
@@ -354,11 +372,19 @@ export default {
         </gl-tab>
       </gl-tabs>
 
+      <div class="gl-bg-gray-10 gl-p-5 gl-border-b-solid gl-border-b-1 gl-border-gray-100">
+        <gl-search-box-by-type
+          class="gl-bg-white"
+          :placeholder="$options.i18n.searchPlaceholder"
+          @input="onInputChange"
+        />
+      </div>
+
       <h4 class="d-block d-md-none my-3">
         {{ s__('AlertManagement|Alerts') }}
       </h4>
       <gl-table
-        class="alert-management-table mt-3"
+        class="alert-management-table"
         :items="alerts ? alerts.list : []"
         :fields="$options.fields"
         :show-empty="true"

app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql

 #import "../fragments/list_item.fragment.graphql"
 
 query getAlerts(
+    $searchTerm: String,
     $projectPath: ID!,
     $statuses: [AlertManagementStatus!],
     $sort: AlertManagementAlertSort,
@@ -11,6 +12,7 @@ query getAlerts(
 ) {
     project(fullPath: $projectPath, ) {
         alertManagementAlerts(
+            search: $searchTerm,
             statuses: $statuses,
             sort: $sort,
             first: $firstPageSize

app/assets/javascripts/alert_management/graphql/queries/get_count_by_status.query.graphql

-query getAlertsCount($projectPath: ID!) {
+query getAlertsCount(
+    $searchTerm: String,
+    $projectPath: ID!
+) {
     project(fullPath: $projectPath) {
-        alertManagementAlertStatusCounts {
+        alertManagementAlertStatusCounts(
+            search: $searchTerm
+        ) {
             all
             open
             acknowledged

changelogs/unreleased/tr-alert-text-search.yml

+---
+title: Search plain text in alert list frontend
+merge_request: 34631
+author:
+type: added

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -11,6 +11,7 @@ import {
   GlTab,
   GlBadge,
   GlPagination,
+  GlSearchBoxByType,
 } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -49,6 +50,7 @@ describe('AlertManagementList', () => {
   const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
   const findPagination = () => wrapper.find(GlPagination);
+  const findSearch = () => wrapper.find(GlSearchBoxByType);
   const alertsCount = {
     open: 14,
     triggered: 10,
@@ -487,4 +489,26 @@ describe('AlertManagementList', () => {
       });
     });
   });
+
+  describe('Search', () => {
+    beforeEach(() => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
+        loading: false,
+      });
+    });
+
+    it('renders the search component', () => {
+      expect(findSearch().exists()).toBe(true);
+    });
+
+    it('sets the `searchTerm` graphql variable', () => {
+      const SEARCH_TERM = 'Simple Alert';
+
+      findSearch().vm.$emit('input', SEARCH_TERM);
+
+      expect(wrapper.vm.$data.searchTerm).toBe(SEARCH_TERM);
+    });
+  });
 });