commit 15eba06014320cf8ca99335b7ffa497bd554f521
author Veet Moradiya <63164153+veetmoradiya3628@users.noreply.github.com> Tue May 13 06:41:40 2025 +0530
committer GitHub <noreply@github.com> Tue May 13 09:11:40 2025 +0800
tree eaf3343fac57c22d9f3166500d1afa3305c559b7
parent ca8b887e58285ad64ab0d2702d4b553c95424af0

Search functionality in the projects page for efficient usage (#8437)

config-ui/src/routes/project/home/index.tsx

diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx
index 0c52c18..8980eda 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/config-ui/src/routes/project/home/index.tsx
@@ -38,12 +38,18 @@
   const [open, setOpen] = useState(false);
   const [name, setName] = useState('');
   const [saving, setSaving] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [searchKeyword, setSearchKeyword] = useState('');
 
   const nameRef = useRef(null);
   const connectionRef = useRef(null);
   const configRef = useRef(null);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { ready, data } = useRefreshData(() => API.project.list({ page, pageSize }), [version, page, pageSize]);
+  const { ready, data } = useRefreshData(
+    () => API.project.list({ page, pageSize, ...(searchKeyword.trim() && { keyword: searchKeyword.trim() }) }),
+    [version, page, pageSize, searchKeyword]
+  );
 
   const navigate = useNavigate();
 
@@ -98,12 +104,35 @@
     if (success) {
       handleHideDialog();
       setVersion((v) => v + 1);
+      setPage(1);
+      setSearchKeyword('');
+      setInputValue('');
     }
   };
 
+  const handleSearch = (value: string) => {
+    setInputValue(value);
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      setSearchKeyword(value.trim());
+      setPage(1);
+      setVersion((v) => v + 1);
+    }, 500);
+  };
+
   return (
     <PageHeader breadcrumbs={[{ name: 'Projects', path: PATHS.PROJECTS() }]}>
-      <Flex style={{ marginBottom: 16 }} justify="flex-end">
+      <Flex style={{ marginBottom: 16, width: '100%' }} justify="flex-end" align="center">
+        <Input
+          placeholder="Search project ..."
+          style={{ width: 300, marginRight: 12 }}
+          value={inputValue}
+          onChange={(e) => handleSearch(e.target.value)}
+        />
         <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
           New Project
         </Button>