Alerting: fix filtering in notification policies (#57824)

public/app/features/alerting/unified/components/alert-groups/MatcherFilter.test.tsx

@@ -12,9 +12,14 @@ import { MatcherFilter } from './MatcherFilter';
 jest.mock('@grafana/runtime');
 
 describe('Analytics', () => {
-  it('Sends log info when filtering alert instances by label', async () => {
-    lodash.debounce = jest.fn().mockImplementation((fn) => fn);
+  beforeEach(() => {
+    lodash.debounce = jest.fn().mockImplementation((fn) => {
+      fn.cancel = () => {};
+      return fn;
+    });
+  });
 
+  it('Sends log info when filtering alert instances by label', async () => {
     render(<MatcherFilter onFilterChange={jest.fn()} />);
 
     const searchInput = screen.getByTestId('search-query-input');
@@ -22,4 +27,15 @@ describe('Analytics', () => {
 
     expect(logInfo).toHaveBeenCalledWith(LogMessages.filterByLabel);
   });
+
+  it('should call onChange handler', async () => {
+    const onFilterMock = jest.fn();
+
+    render(<MatcherFilter defaultQueryString="foo" onFilterChange={onFilterMock} />);
+
+    const searchInput = screen.getByTestId('search-query-input');
+    await userEvent.type(searchInput, '=bar');
+
+    expect(onFilterMock).toHaveBeenLastCalledWith('foo=bar');
+  });
 });

public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { debounce } from 'lodash';
-import React, { FormEvent } from 'react';
+import React, { FormEvent, useEffect, useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
@@ -11,20 +11,28 @@ import { LogMessages } from '../../Analytics';
 
 interface Props {
   className?: string;
-  queryString?: string;
   defaultQueryString?: string;
   onFilterChange: (filterString: string) => void;
 }
 
-export const MatcherFilter = ({ className, onFilterChange, defaultQueryString, queryString }: Props) => {
+export const MatcherFilter = ({ className, onFilterChange, defaultQueryString }: Props) => {
   const styles = useStyles2(getStyles);
-  const handleSearchChange = debounce((e: FormEvent<HTMLInputElement>) => {
-    logInfo(LogMessages.filterByLabel);
 
-    const target = e.target as HTMLInputElement;
-    onFilterChange(target.value);
-  }, 600);
+  const onSearchInputChanged = useMemo(
+    () =>
+      debounce((e: FormEvent<HTMLInputElement>) => {
+        logInfo(LogMessages.filterByLabel);
+
+        const target = e.target as HTMLInputElement;
+        onFilterChange(target.value);
+      }, 600),
+    [onFilterChange]
+  );
+
+  useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);
+
   const searchIcon = <Icon name={'search'} />;
+
   return (
     <div className={className}>
       <Label>
@@ -45,8 +53,7 @@ export const MatcherFilter = ({ className, onFilterChange, defaultQueryString, q
       <Input
         placeholder="Search"
         defaultValue={defaultQueryString}
-        value={queryString}
-        onChange={handleSearchChange}
+        onChange={onSearchInputChanged}
         data-testid="search-query-input"
         prefix={searchIcon}
         className={styles.inputWidth}

public/app/features/alerting/unified/components/amroutes/AmSpecificRouting.tsx

@@ -119,7 +119,7 @@ export const AmSpecificRouting: FC<AmSpecificRoutingProps> = ({
                   onFilterChange={(filter) =>
                     setFilters((currentFilters) => ({ ...currentFilters, queryString: filter }))
                   }
-                  queryString={filters.queryString ?? ''}
+                  defaultQueryString={filters.queryString ?? ''}
                   className={styles.filterInput}
                 />
                 <div className={styles.filterInput}>