feat(aci): UI to filter monitors by assignee

Author: leedongwei

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

@@ -1,57 +1,25 @@
 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 {DETECTOR_FILTER_KEYS} from 'sentry/views/detectors/constants';
+import {getFieldDefinition} from 'sentry/utils/fields';
+import {useDetectorFilterKeys} from 'sentry/views/detectors/utils/useDetectorFilterKeys';
 
 type DetectorSearchProps = {
   initialQuery: string;
   onSearch: (query: string) => void;
 };
 
-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({initialQuery, onSearch}: DetectorSearchProps) {
+  const filterKeys = useDetectorFilterKeys();
+
   return (
     <SearchQueryBuilder
       initialQuery={initialQuery}
       placeholder={t('Search for monitors')}
       onSearch={onSearch}
-      filterKeys={FILTER_KEYS}
+      filterKeys={filterKeys}
       getTagValues={() => Promise.resolve([])}
       searchSource="detectors-list"
-      fieldDefinitionGetter={getDetectorFilterKeyDefinition}
+      fieldDefinitionGetter={getFieldDefinition}
       disallowUnsupportedFilters
       disallowWildcard
       disallowLogicalOperators

static/app/views/detectors/constants.tsx

@@ -36,4 +36,9 @@ export const DETECTOR_FILTER_KEYS: Record<
     ] satisfies DetectorType[],
     keywords: ['type'],
   },
+  assignee: {
+    description: 'User or team assigned to the monitor',
+    valueType: FieldValueType.STRING,
+    keywords: ['assigned', 'owner'],
+  },
 };

static/app/views/detectors/utils/useDetectorFilterKeys.tsx

@@ -0,0 +1,40 @@
+import {useMemo} from 'react';
+
+import type {TagCollection} from 'sentry/types/group';
+import useAssignedSearchValues from 'sentry/utils/membersAndTeams/useAssignedSearchValues';
+import {DETECTOR_FILTER_KEYS} from 'sentry/views/detectors/constants';
+
+export function useDetectorFilterKeys(): TagCollection {
+  const assignedValues = useAssignedSearchValues();
+
+  return useMemo(() => {
+    return Object.fromEntries(
+      Object.keys(DETECTOR_FILTER_KEYS).map(key => {
+        const {values} = DETECTOR_FILTER_KEYS[key] ?? {};
+
+        // Special handling for assignee field to provide user/team values
+        if (key === 'assignee') {
+          return [
+            key,
+            {
+              key,
+              name: key,
+              predefined: true,
+              values: assignedValues,
+            },
+          ];
+        }
+
+        return [
+          key,
+          {
+            key,
+            name: key,
+            predefined: values !== undefined,
+            values,
+          },
+        ];
+      })
+    );
+  }, [assignedValues]);
+}