(airflow) branch main updated: Add search bar for pools page (#46437)

[jscheffl]

This is an automated email from the ASF dual-hosted git repository.

jscheffl pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new ee76b4dce9c Add search bar for pools page (#46437)
ee76b4dce9c is described below

commit ee76b4dce9cd755a1632e31a4d998e1d6c78374a
Author: Shubham Raj <48172486+shubhamraj-...@users.noreply.github.com>
AuthorDate: Wed Feb 5 01:30:14 2025 +0530

    Add search bar for pools page (#46437)
---
 airflow/ui/src/pages/Pools/Pools.tsx | 39 +++++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/airflow/ui/src/pages/Pools/Pools.tsx 
b/airflow/ui/src/pages/Pools/Pools.tsx
index 329d41484f7..163f1039719 100644
--- a/airflow/ui/src/pages/Pools/Pools.tsx
+++ b/airflow/ui/src/pages/Pools/Pools.tsx
@@ -17,21 +17,50 @@
  * under the License.
  */
 import { Box, Skeleton } from "@chakra-ui/react";
+import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 import { usePoolServiceGetPools } from "openapi/queries";
 import { ErrorAlert } from "src/components/ErrorAlert";
+import { SearchBar } from "src/components/SearchBar";
+import { type SearchParamsKeysType, SearchParamsKeys } from 
"src/constants/searchParams";
 
 import PoolBar from "./PoolBar";
 
 export const Pools = () => {
-  const { data, error, isLoading } = usePoolServiceGetPools();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { NAME_PATTERN: NAME_PATTERN_PARAM }: SearchParamsKeysType = 
SearchParamsKeys;
+  const [poolNamePattern, setPoolNamePattern] = 
useState(searchParams.get(NAME_PATTERN_PARAM) ?? undefined);
+  const { data, error, isLoading } = usePoolServiceGetPools({
+    poolNamePattern: poolNamePattern ?? undefined,
+  });
 
-  return isLoading ? (
-    <Skeleton height="30" />
-  ) : (
+  const handleSearchChange = (value: string) => {
+    if (value) {
+      searchParams.set(NAME_PATTERN_PARAM, value);
+    } else {
+      searchParams.delete(NAME_PATTERN_PARAM);
+    }
+    setSearchParams(searchParams);
+    setPoolNamePattern(value);
+  };
+
+  return (
     <>
       <ErrorAlert error={error} />
-      <Box p={2}>{data?.pools.map((pool) => <PoolBar key={pool.name} 
pool={pool} />)}</Box>
+      <SearchBar
+        buttonProps={{ disabled: true }}
+        defaultValue={poolNamePattern ?? ""}
+        onChange={handleSearchChange}
+        placeHolder="Search Pools"
+      />
+      <Box mt={4}>
+        {isLoading ? (
+          <Skeleton height="100px" />
+        ) : (
+          data?.pools.map((pool) => <PoolBar key={pool.name} pool={pool} />)
+        )}
+      </Box>
     </>
   );
 };