[ui] Allow freeform schedule/sensor name in launched-by Runs filter

dagster-io · Jan 22, 2025 · 947d09f · 947d09f
1 parent a7ba385
commit 947d09f
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 28 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFilterInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunsFilterInput.tsx
@@ -490,11 +490,11 @@ export const useRunsFilterInput = ({tokens, onChange, enabledFilters}: RunsFilte
     matchType: 'any-of',
   });
 
-  const launchedByFilter = useStaticSetFilter({
+  const launchedByFilter = useSuggestionFilter({
     name: 'Launched by',
-    allowMultipleSelections: false,
     icon: 'add_circle',
-    allValues: createdByValues,
+    initialSuggestions: createdByValues,
+    allowMultipleSelections: false,
     renderLabel: ({value}) => {
       let icon;
       let labelValue = value.value;
@@ -522,16 +522,38 @@ export const useRunsFilterInput = ({tokens, onChange, enabledFilters}: RunsFilte
       return x.value!;
     },
     state: useMemo(() => {
-      return new Set(
-        tokens
-          .filter(
-            ({token, value}) =>
-              token === 'tag' && CREATED_BY_TAGS.includes(value.split('=')[0] as DagsterTag),
-          )
-          .map(({value}) => tagValueToFilterObject(value)),
-      );
+      return tokens
+        .filter(
+          ({token, value}) =>
+            token === 'tag' && CREATED_BY_TAGS.includes(value.split('=')[0] as DagsterTag),
+        )
+        .map(({value}) => tagValueToFilterObject(value));
     }, [tokens]),
-    onStateChanged: (values) => {
+    freeformSearchResult(query, suggestionPath) {
+      if (suggestionPath.length === 0) {
+        return [
+          {
+            value: {
+              key: `${DagsterTag.ScheduleName}-freeform`,
+              type: DagsterTag.ScheduleName,
+              value: query,
+            },
+            final: true,
+          },
+          {
+            value: {
+              key: `${DagsterTag.SensorName}-freeform`,
+              type: DagsterTag.SensorName,
+              value: query,
+            },
+            final: true,
+          },
+        ];
+      }
+      return null;
+    },
+    freeformResultPosition: 'end',
+    setState: (values) => {
       onChange([
         ...tokens.filter((token) => {
           if (token.token !== 'tag') {
@@ -545,6 +567,12 @@ export const useRunsFilterInput = ({tokens, onChange, enabledFilters}: RunsFilte
         })),
       ]);
     },
+    getKey: ({value}) => value,
+    isMatch: ({value}, query) => value.toLowerCase().includes(query.toLowerCase()),
+    matchType: 'any-of',
+    onSuggestionClicked: async (value) => {
+      return [{value}];
+    },
   });
 
   const createdDateFilter = useTimeRangeFilter({

diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useSuggestionFilter.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/useSuggestionFilter.tsx
@@ -15,11 +15,13 @@ type Args<TValue> = {
   freeformSearchResult?: (
     query: string,
     suggestionPath: TValue[],
-  ) => SuggestionFilterSuggestion<TValue> | null;
+  ) => SuggestionFilterSuggestion<TValue> | SuggestionFilterSuggestion<TValue>[] | null;
+  freeformResultPosition?: 'start' | 'end';
 
   state: TValue[]; // Active suggestions
   setState: (state: TValue[]) => void;
 
+  allowMultipleSelections?: boolean;
   initialSuggestions: SuggestionFilterSuggestion<TValue>[];
   getNoSuggestionsPlaceholder?: (query: string) => string;
   onSuggestionClicked: (value: TValue) => Promise<SuggestionFilterSuggestion<TValue>[]> | void;
@@ -45,6 +47,8 @@ export function useSuggestionFilter<TValue>({
   state,
   setState,
   initialSuggestions,
+  allowMultipleSelections = true,
+  freeformResultPosition = 'start',
   onSuggestionClicked,
   getNoSuggestionsPlaceholder,
   getStringValue,
@@ -121,29 +125,43 @@ export function useSuggestionFilter<TValue>({
         }
         if (!hasExactMatch && freeformSearchResult && query.length) {
           const suggestion = freeformSearchResult(query, suggestionPath);
-          if (suggestion) {
-            results.unshift({
-              label: (
-                <SuggestionFilterLabel
-                  value={suggestion.value}
-                  renderLabel={renderLabel}
-                  filter={filterObjRef.current}
-                />
-              ),
-              key: getKey?.(suggestion.value) || 'freeform',
-              value: suggestion,
-            });
+          const suggestions = Array.isArray(suggestion) ? suggestion : [suggestion];
+          if (suggestions) {
+            const freeformResults =
+              suggestions
+                .filter((s): s is SuggestionFilterSuggestion<TValue> => s !== null)
+                .map((suggestion) => ({
+                  label: (
+                    <SuggestionFilterLabel
+                      value={suggestion.value}
+                      renderLabel={renderLabel}
+                      filter={filterObjRef.current}
+                    />
+                  ),
+                  key: getKey?.(suggestion.value) || 'freeform',
+                  value: suggestion,
+                })) || [];
+
+            if (freeformResultPosition === 'start') {
+              results.unshift(...freeformResults);
+            } else {
+              results.push(...freeformResults);
+            }
           }
         }
         return results;
       },
 
       onSelect: async ({value, clearSearch}) => {
         if (value.final) {
-          if (state.includes(value.value)) {
-            setState(state.filter((v) => v !== value.value));
+          if (!allowMultipleSelections) {
+            const result = state.includes(value.value) ? [] : [value.value];
+            setState(result);
           } else {
-            setState([...state, value.value]);
+            const result = state.includes(value.value)
+              ? state.filter((v) => v !== value.value)
+              : [...state, value.value];
+            setState(result);
           }
         } else {
           clearSearch();