feat(aci): Add search bar filtering to detector list page (#93251)

Author: malwilley

static/app/views/detectors/components/detectorSearch.tsx

@@ -0,0 +1,70 @@
+import {SearchQueryBuilder} from 'sentry/components/searchQueryBuilder';
+import {t} from 'sentry/locale';
+import type {TagCollection} from 'sentry/types/group';
+import type {FieldDefinition} from 'sentry/utils/fields';
+import {FieldKind} from 'sentry/utils/fields';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import {DETECTOR_FILTER_KEYS} from 'sentry/views/detectors/constants';
+
+function getDetectorFilterKeyDefinition(filterKey: string): FieldDefinition | null {
+  if (DETECTOR_FILTER_KEYS.hasOwnProperty(filterKey) && DETECTOR_FILTER_KEYS[filterKey]) {
+    const {description, valueType, keywords, values} = DETECTOR_FILTER_KEYS[filterKey];
+
+    return {
+      kind: FieldKind.FIELD,
+      desc: description,
+      valueType,
+      keywords,
+      values,
+    };
+  }
+
+  return null;
+}
+
+const FILTER_KEYS: TagCollection = Object.fromEntries(
+  Object.keys(DETECTOR_FILTER_KEYS).map(key => {
+    const {values} = DETECTOR_FILTER_KEYS[key] ?? {};
+
+    return [
+      key,
+      {
+        key,
+        name: key,
+        predefined: values !== undefined,
+        values,
+      },
+    ];
+  })
+);
+
+export function DetectorSearch() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const query = typeof location.query.query === 'string' ? location.query.query : '';
+
+  return (
+    <SearchQueryBuilder
+      initialQuery={query}
+      placeholder={t('Search for monitors')}
+      onSearch={searchQuery => {
+        navigate({
+          pathname: location.pathname,
+          query: {
+            ...location.query,
+            query: searchQuery,
+          },
+        });
+      }}
+      filterKeys={FILTER_KEYS}
+      getTagValues={() => Promise.resolve([])}
+      searchSource="detectors-list"
+      fieldDefinitionGetter={getDetectorFilterKeyDefinition}
+      disallowUnsupportedFilters
+      disallowWildcard
+      disallowLogicalOperators
+      searchOnChange
+    />
+  );
+}

static/app/views/detectors/constants.tsx

@@ -1 +1,25 @@
+import {FieldValueType} from 'sentry/utils/fields';
+
 export const DETECTOR_LIST_PAGE_LIMIT = 25;
+
+export const DETECTOR_FILTER_KEYS: Record<
+  string,
+  {
+    description: string;
+    keywords: string[];
+    valueType: FieldValueType;
+    values?: string[];
+  }
+> = {
+  name: {
+    description: 'Name of the detector (exact match)',
+    valueType: FieldValueType.STRING,
+    keywords: ['title'],
+  },
+  type: {
+    description: 'Type of the detector (error, metric_issue, etc)',
+    valueType: FieldValueType.STRING,
+    values: ['error', 'metric_issue', 'uptime_domain_failure'],
+    keywords: ['type'],
+  },
+};

static/app/views/detectors/list.spec.tsx

@@ -2,7 +2,7 @@ import {DetectorFixture} from 'sentry-fixture/detectors';
 import {PageFiltersFixture} from 'sentry-fixture/pageFilters';
 import {UserFixture} from 'sentry-fixture/user';
 
-import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import DetectorsList from 'sentry/views/detectors/list';
@@ -41,4 +41,30 @@ describe('DetectorsList', function () {
       })
     );
   });
+
+  describe('search', function () {
+    it('can filter by type', async function () {
+      const mockDetectorsRequestErrorType = MockApiClient.addMockResponse({
+        url: '/organizations/org-slug/detectors/',
+        body: [DetectorFixture({type: 'error', name: 'Error Detector'})],
+        match: [MockApiClient.matchQuery({query: 'type:error'})],
+      });
+
+      render(<DetectorsList />);
+      await screen.findByText('Detector 1');
+
+      // Click through menus to select type:error
+      await userEvent.click(screen.getByRole('combobox', {name: 'Add a search term'}));
+      await userEvent.click(await screen.findByRole('option', {name: 'type'}));
+      const options = await screen.findAllByRole('option');
+      expect(options).toHaveLength(3);
+      expect(options[0]).toHaveTextContent('error');
+      expect(options[1]).toHaveTextContent('metric_issue');
+      expect(options[2]).toHaveTextContent('uptime_domain_failure');
+      await userEvent.click(screen.getByText('error'));
+
+      await screen.findByText('Error Detector');
+      expect(mockDetectorsRequestErrorType).toHaveBeenCalled();
+    });
+  });
 });

static/app/views/detectors/list.tsx

@@ -4,7 +4,6 @@ import {Flex} from 'sentry/components/container/flex';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
-import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {ActionsProvider} from 'sentry/components/workflowEngine/layout/actions';
 import ListLayout from 'sentry/components/workflowEngine/layout/list';
@@ -16,6 +15,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import DetectorListTable from 'sentry/views/detectors/components/detectorListTable';
+import {DetectorSearch} from 'sentry/views/detectors/components/detectorSearch';
 import {useDetectorsQuery} from 'sentry/views/detectors/hooks';
 import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
 
@@ -55,7 +55,7 @@ function TableHeader() {
     <Flex gap={space(2)}>
       <ProjectPageFilter />
       <div style={{flexGrow: 1}}>
-        <SearchBar placeholder={t('Search for events, users, tags, and more')} />
+        <DetectorSearch />
       </div>
     </Flex>
   );