Add search by dag_display_name_pattern on dag list page.

airflow/ui/openapi-gen/queries/queries.ts

@@ -117,6 +117,10 @@ export const useDagServiceGetDags = <
         paused,
         tags,
       }) as TData,
+    staleTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnMount: true,
+    refetchOnReconnect: false,
     ...options,
   });
 /**

airflow/ui/package.json

@@ -28,7 +28,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "use-debounce": "^10.0.3"
   },
   "devDependencies": {
     "@7nohe/openapi-react-query-codegen": "^1.6.0",

airflow/ui/src/components/DataTable/searchParams.ts

@@ -17,12 +17,14 @@
  * under the License.
  */
 import type { SortingState } from "@tanstack/react-table";
-
 import type { TableState } from "./types";
+import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams";
 
-export const LIMIT_PARAM = "limit";
-export const OFFSET_PARAM = "offset";
-export const SORT_PARAM = "sort";
+const {
+  LIMIT: LIMIT_PARAM,
+  OFFSET: OFFSET_PARAM,
+  SORT: SORT_PARAM
+} : SearchParamsKeysType = SearchParamsKeys;
 
 export const stateToSearchParams = (
   state: TableState,

airflow/ui/src/components/SearchBar.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { forwardRef } from "react";
 import {
   Button,
   type ButtonProps,
@@ -28,20 +29,16 @@ import {
 } from "@chakra-ui/react";
 import { FiSearch } from "react-icons/fi";
 
-export const SearchBar = ({
-  buttonProps,
-  groupProps,
-  inputProps,
-}: {
-  readonly buttonProps?: ButtonProps;
-  readonly groupProps?: InputGroupProps;
-  readonly inputProps?: InputProps;
-}) => (
+export const SearchBar = forwardRef<HTMLInputElement, {
+  buttonProps?: ButtonProps;
+  groupProps?: InputGroupProps;
+  inputProps?: InputProps;
+}>(({ buttonProps, groupProps, inputProps }, ref) => (
   <InputGroup {...groupProps}>
     <InputLeftElement pointerEvents="none">
       <FiSearch />
     </InputLeftElement>
-    <Input placeholder="Search DAGs" pr={150} {...inputProps} />
+    <Input placeholder="Search DAGs" pr={150} {...inputProps} ref={ref} />
     <InputRightElement width={150}>
       <Button
         colorScheme="blue"
@@ -55,4 +52,4 @@ export const SearchBar = ({
       </Button>
     </InputRightElement>
   </InputGroup>
-);
+));

airflow/ui/src/constants/searchParams.ts

@@ -0,0 +1,27 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export enum SearchParamsKeys {
+  LIMIT = "limit",
+  NAME_PATTERN = "name_pattern",
+  OFFSET = "offset",
+  PAUSED = "paused",
+  SORT = "sort"
+}
+
+export type SearchParamsKeysType = Record<keyof typeof SearchParamsKeys, string>;

airflow/ui/src/pages/DagsList/DagsFilters.tsx

@@ -1,4 +1,4 @@
-/*!
+/*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -23,8 +23,9 @@ import { useSearchParams } from "react-router-dom";
 
 import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { QuickFilterButton } from "src/components/QuickFilterButton";
+import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams";
 
-const PAUSED_PARAM = "paused";
+const { PAUSED: PAUSED_PARAM }: SearchParamsKeysType = SearchParamsKeys;
 
 export const DagsFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();

airflow/ui/src/pages/DagsList/DagsList.tsx

@@ -25,7 +25,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import { type ChangeEventHandler, useCallback, useState } from "react";
+import { type ChangeEvent, type ChangeEventHandler, useCallback, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useDagServiceGetDags } from "openapi/queries";
@@ -37,6 +37,7 @@ import { useTableURLState } from "src/components/DataTable/useTableUrlState";
 import { SearchBar } from "src/components/SearchBar";
 import { TogglePause } from "src/components/TogglePause";
 import { pluralize } from "src/utils/pluralize";
+import { SearchParamsKeys, type SearchParamsKeysType } from "src/constants/searchParams";
 
 import { DagCard } from "./DagCard";
 import { DagsFilters } from "./DagsFilters";
@@ -89,35 +90,56 @@ const columns: Array<ColumnDef<DAGResponse>> = [
   },
 ];
 
+const {
+  NAME_PATTERN: NAME_PATTERN_PARAM,
+  PAUSED: PAUSED_PARAM
+}: SearchParamsKeysType = SearchParamsKeys;
+
 const cardDef: CardDef<DAGResponse> = {
   card: ({ row }) => <DagCard dag={row} />,
   meta: {
     customSkeleton: <Skeleton height="120px" width="100%" />,
   },
 };
 
-const PAUSED_PARAM = "paused";
-
 export const DagsList = () => {
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [display, setDisplay] = useState<"card" | "table">("card");
 
   const showPaused = searchParams.get(PAUSED_PARAM);
 
   const { setTableURLState, tableURLState } = useTableURLState();
   const { pagination, sorting } = tableURLState;
+  const [dagDisplayNamePattern, setDagDisplayNamePattern] = useState(searchParams.get(NAME_PATTERN_PARAM) ?? undefined);
 
   // TODO: update API to accept multiple orderBy params
   const [sort] = sorting;
   const orderBy = sort ? `${sort.desc ? "-" : ""}${sort.id}` : undefined;
 
+  const handleSearchChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+    if (value) {
+      searchParams.set(NAME_PATTERN_PARAM, value);
+    } else {
+      searchParams.delete(NAME_PATTERN_PARAM);
+    }
+    setSearchParams(searchParams);
+    setTableURLState({
+      pagination: { ...pagination, pageIndex: 0 },
+      sorting,
+    });
+    setDagDisplayNamePattern(value);
+  };
+
   const { data, isFetching, isLoading } = useDagServiceGetDags({
+    dagDisplayNamePattern: Boolean(dagDisplayNamePattern)
+        ? `%${dagDisplayNamePattern}%`
+        : undefined,
     limit: pagination.pageSize,
     offset: pagination.pageIndex * pagination.pageSize,
     onlyActive: true,
     orderBy,
     paused: showPaused === null ? undefined : showPaused === "true",
-  });
+  }, [dagDisplayNamePattern, showPaused]);
 
   const handleSortChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
     ({ currentTarget: { value } }) => {
@@ -136,7 +158,10 @@ export const DagsList = () => {
       <VStack alignItems="none">
         <SearchBar
           buttonProps={{ isDisabled: true }}
-          inputProps={{ isDisabled: true }}
+          inputProps={{
+            defaultValue: dagDisplayNamePattern,
+            onChange: handleSearchChange
+          }}
         />
         <DagsFilters />
         <HStack justifyContent="space-between">