feat: fix search bar to work in harmony with folders

packages/web/src/pages/Flows/index.jsx

@@ -39,6 +39,7 @@ export default function Flows() {
   const flowName = searchParams.get('flowName') || '';
   const folderId = searchParams.get('folderId');
   const currentUserAbility = useCurrentUserAbility();
+  const [searchValue, setSearchValue] = React.useState(flowName);
 
   const { data, isSuccess, isLoading } = useFlows({ flowName, page, folderId });
 
@@ -47,9 +48,17 @@ export default function Flows() {
   const hasFlows = flows?.length;
   const navigateToLastPage = isSuccess && !hasFlows && page > 1;
 
-  const onSearchChange = React.useCallback((event) => {
-    setSearchParams({ flowName: event.target.value });
-  }, []);
+  const onSearchChange = React.useCallback(
+    (event) => {
+      const value = event.target.value;
+      setSearchValue(value);
+      setSearchParams({
+        flowName: value,
+        ...(folderId && { folderId }),
+      });
+    },
+    [folderId, setSearchParams],
+  );
 
   const getPathWithSearchParams = (page, flowName) => {
     const searchParams = new URLSearchParams();
@@ -75,6 +84,15 @@ export default function Flows() {
     }
   };
 
+  React.useEffect(
+    function resetSearchValue() {
+      if (!searchParams.has('flowName')) {
+        setSearchValue('');
+      }
+    },
+    [searchParams],
+  );
+
   React.useEffect(
     function redirectToLastPage() {
       if (navigateToLastPage) {
@@ -99,7 +117,7 @@ export default function Flows() {
             </Grid>
 
             <Grid item xs={12} md="auto" order={{ xs: 2, md: 1 }}>
-              <SearchInput onChange={onSearchChange} defaultValue={flowName} />
+              <SearchInput onChange={onSearchChange} value={searchValue} />
             </Grid>
 
             <Grid