Merge pull request #2400 from automatisch/AUT-1494

feat: fix search bar to work in harmony with folders

packages/web/src/components/SearchInput/index.jsx

@@ -7,7 +7,7 @@ import FormControl from '@mui/material/FormControl';
 import SearchIcon from '@mui/icons-material/Search';
 import useFormatMessage from 'hooks/useFormatMessage';
 
-export default function SearchInput({ onChange, defaultValue = '' }) {
+export default function SearchInput({ onChange, defaultValue = '', value }) {
   const formatMessage = useFormatMessage();
   return (
     <FormControl variant="outlined" fullWidth>
@@ -16,6 +16,7 @@ export default function SearchInput({ onChange, defaultValue = '' }) {
       </InputLabel>
 
       <OutlinedInput
+        value={value}
         defaultValue={defaultValue}
         id="search-input"
         type="text"
@@ -36,4 +37,5 @@ export default function SearchInput({ onChange, defaultValue = '' }) {
 SearchInput.propTypes = {
   onChange: PropTypes.func,
   defaultValue: PropTypes.string,
+  value: PropTypes.string,
 };

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