Alerting: Fix MatcherFilter onChange handling (#87511)

* Fix input onChange handler

* Remove unused variables

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

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import lodash from 'lodash'; // eslint-disable-line lodash/import-scope
 import React from 'react';
 
 import * as analytics from '../../Analytics';
@@ -10,18 +9,11 @@ import { MatcherFilter } from './MatcherFilter';
 const logInfoSpy = jest.spyOn(analytics, 'logInfo');
 
 describe('Analytics', () => {
-  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');
-    await userEvent.type(searchInput, 'job=');
+    await userEvent.type(searchInput, 'job=', { delay: 600 }); // Delay waits for the MatcherFilter debounce
 
     expect(logInfoSpy).toHaveBeenCalledWith(analytics.LogMessages.filterByLabel);
   });
@@ -32,7 +24,7 @@ describe('Analytics', () => {
     render(<MatcherFilter defaultQueryString="foo" onFilterChange={onFilterMock} />);
 
     const searchInput = screen.getByTestId('search-query-input');
-    await userEvent.type(searchInput, '=bar');
+    await userEvent.type(searchInput, '=bar', { delay: 600 }); // Delay waits for the MatcherFilter debounce
 
     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, useEffect, useMemo } from 'react';
+import React from 'react';
+import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Field, Icon, Input, Label, Stack, Tooltip, useStyles2 } from '@grafana/ui';
@@ -16,17 +16,16 @@ interface Props {
 export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) => {
   const styles = useStyles2(getStyles);
 
-  const onSearchInputChanged = useMemo(
-    () =>
-      debounce((e: FormEvent<HTMLInputElement>) => {
-        logInfo(LogMessages.filterByLabel);
-        const target = e.currentTarget;
-        onFilterChange(target.value);
-      }, 600),
-    [onFilterChange]
-  );
+  const [filterQuery, setFilterQuery] = React.useState<string>(defaultQueryString ?? '');
 
-  useEffect(() => onSearchInputChanged.cancel(), [onSearchInputChanged]);
+  useDebounce(
+    () => {
+      logInfo(LogMessages.filterByLabel);
+      onFilterChange(filterQuery);
+    },
+    600,
+    [filterQuery]
+  );
 
   const searchIcon = <Icon name={'search'} />;
   const inputInvalid = defaultQueryString ? parseMatchers(defaultQueryString).length === 0 : false;
@@ -63,8 +62,8 @@ export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) =>
     >
       <Input
         placeholder="Search"
-        defaultValue={defaultQueryString ?? ''}
-        onChange={onSearchInputChanged}
+        value={filterQuery}
+        onChange={(e) => setFilterQuery(e.currentTarget.value)}
         data-testid="search-query-input"
         prefix={searchIcon}
         className={styles.inputWidth}