fix: fix building loop when renaming a folder and opening a new flow and running It (#3844)

* refactor: Add useIsFetching hook for folder fetching in DropdownButtonComponent

* refactor: Improve folder sidebar buttons component

Refactor the folder sidebar buttons component to improve its structure and readability. This includes adding a new hook for folder fetching, handling rendering and filtering functionality, and updating the UI for adding and uploading folders. The changes also include handling double-click and keydown events for folder items, as well as fixing some bugs related to folder editing and deleting. These improvements enhance the overall user experience and maintainability of the codebase.

* refactor: Remove unused import and variable in DropdownButtonComponent

* refactor: Remove unused import and variable in DropdownButtonComponent

- Remove unused import and variable in DropdownButtonComponent
- Add useIsFetching hook for folder fetching in DropdownButtonComponent

* refactor: Remove unused import and variable in DropdownButtonComponent

src/frontend/src/components/dropdownButtonComponent/index.tsx

@@ -15,6 +15,7 @@ export default function DropdownButton({
   options,
   plusButton = false,
   dropdownOptions = true,
+  isFetchingFolders = false,
 }: dropdownButtonPropsType): JSX.Element {
   const [showOptions, setShowOptions] = useState<boolean>(false);
 
@@ -33,6 +34,7 @@ export default function DropdownButton({
               event.preventDefault();
               onFirstBtnClick();
             }}
+            disabled={isFetchingFolders}
           >
             {plusButton && (
               <IconComponent name="Plus" className="main-page-nav-button" />

src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -230,37 +230,107 @@ const SideBarFoldersButtonsComponent = ({
     exact: false,
   });
 
-  return (
+  const isUpdatingFolder = isFetchingFolders || isPending || loading;
-    <>
+
+  const HeaderButtons = () => (
     <div className="flex shrink-0 items-center justify-between gap-2">
       <div className="flex-1 self-start text-lg font-semibold">Folders</div>
-
+      <AddFolderButton onClick={addNewFolder} disabled={isUpdatingFolder} />
-        <ShadTooltip content={"Add a new folder"}>
+      <UploadFolderButton
-          <Button
-            variant="primary"
-            size="icon"
-            className="px-2"
-            onClick={addNewFolder}
-            data-testid="add-folder-button"
-            disabled={isFetchingFolders || isPending || loading}
-          >
-            <ForwardedIconComponent name="FolderPlus" className="w-4" />
-          </Button>
-        </ShadTooltip>
-
-        <ShadTooltip content={"Upload a folder"}>
-          <Button
-            variant="primary"
-            size="icon"
-            className="px-2"
         onClick={handleUploadFlowsToFolder}
-            data-testid="upload-folder-button"
+        disabled={isUpdatingFolder}
-            disabled={isFetchingFolders || isPending || loading}
+      />
+    </div>
+  );
+
+  const AddFolderButton = ({ onClick, disabled }) => (
+    <ShadTooltip content="Add a new folder">
+      <Button
+        variant="primary"
+        size="icon"
+        className="px-2"
+        onClick={onClick}
+        data-testid="add-folder-button"
+        disabled={disabled}
       >
-            <ForwardedIconComponent name="Upload" className="w-4" />
+        <IconComponent name="FolderPlus" className="w-4" />
       </Button>
     </ShadTooltip>
-      </div>
+  );
+
+  const UploadFolderButton = ({ onClick, disabled }) => (
+    <ShadTooltip content="Upload a folder">
+      <Button
+        variant="primary"
+        size="icon"
+        className="px-2"
+        onClick={onClick}
+        data-testid="upload-folder-button"
+        disabled={disabled}
+      >
+        <IconComponent name="Upload" className="w-4" />
+      </Button>
+    </ShadTooltip>
+  );
+
+  const handleDoubleClick = (event, item) => {
+    if (item.name === "My Projects") {
+      return;
+    }
+
+    if (!foldersNames[item.name]) {
+      setFoldersNames({ [item.name]: item.name });
+    }
+
+    if (editFolders.find((obj) => obj.name === item.name)?.name) {
+      const newEditFolders = editFolders.map((obj) => {
+        if (obj.name === item.name) {
+          return { name: item.name, edit: true };
+        }
+        return { name: obj.name, edit: false };
+      });
+      setEditFolderName(newEditFolders);
+      takeSnapshot();
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    setEditFolderName((old) => [...old, { name: item.name, edit: true }]);
+    setFoldersNames((oldFolder) => ({
+      ...oldFolder,
+      [item.name]: item.name,
+    }));
+    takeSnapshot();
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  const handleKeyDownFn = (e, item) => {
+    if (e.key === "Escape") {
+      const newEditFolders = editFolders.map((obj) => {
+        if (obj.name === item.name) {
+          return { name: item.name, edit: false };
+        }
+        return { name: obj.name, edit: false };
+      });
+      setEditFolderName(newEditFolders);
+      setFoldersNames({});
+      setEditFolderName(
+        folders.map((obj) => ({
+          name: obj.name,
+          edit: false,
+        })),
+      );
+    }
+    if (e.key === "Enter") {
+      refInput.current?.blur();
+    }
+  };
+
+  return (
+    <>
+      <HeaderButtons />
 
       <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
         <>
@@ -289,41 +359,7 @@ const SideBarFoldersButtonsComponent = ({
                 >
                   <div
                     onDoubleClick={(event) => {
-                      if (item.name === "My Projects") {
+                      handleDoubleClick(event, item);
-                        return;
-                      }
-
-                      if (!foldersNames[item.name]) {
-                        setFoldersNames({ [item.name]: item.name });
-                      }
-
-                      if (
-                        editFolders.find((obj) => obj.name === item.name)?.name
-                      ) {
-                        const newEditFolders = editFolders.map((obj) => {
-                          if (obj.name === item.name) {
-                            return { name: item.name, edit: true };
-                          }
-                          return { name: obj.name, edit: false };
-                        });
-                        setEditFolderName(newEditFolders);
-                        takeSnapshot();
-                        event.stopPropagation();
-                        event.preventDefault();
-                        return;
-                      }
-
-                      setEditFolderName((old) => [
-                        ...old,
-                        { name: item.name, edit: true },
-                      ]);
-                      setFoldersNames((oldFolder) => ({
-                        ...oldFolder,
-                        [item.name]: item.name,
-                      }));
-                      takeSnapshot();
-                      event.stopPropagation();
-                      event.preventDefault();
                     }}
                     className="flex w-full items-center gap-2"
                   >
@@ -331,7 +367,7 @@ const SideBarFoldersButtonsComponent = ({
                       name={"folder"}
                       className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
                     />
-                    {editFolderName?.edit ? (
+                    {editFolderName?.edit && !isUpdatingFolder ? (
                       <div>
                         <Input
                           className="w-36"
@@ -340,34 +376,17 @@ const SideBarFoldersButtonsComponent = ({
                           }}
                           ref={refInput}
                           onKeyDown={(e) => {
-                            if (e.key === "Escape") {
+                            handleKeyDownFn(e, item);
-                              const newEditFolders = editFolders.map((obj) => {
-                                if (obj.name === item.name) {
-                                  return { name: item.name, edit: false };
-                                }
-                                return { name: obj.name, edit: false };
-                              });
-                              setEditFolderName(newEditFolders);
-                              setFoldersNames({});
-                              setEditFolderName(
-                                folders.map((obj) => ({
-                                  name: obj.name,
-                                  edit: false,
-                                })),
-                              );
-                            }
-                            if (e.key === "Enter") {
-                              refInput.current?.blur();
-                            }
                             handleKeyDown(e, e.key, "");
                           }}
                           autoFocus={true}
-                          onBlur={async () => {
+                          onBlur={() => {
                             if (refInput.current?.value !== item.name) {
                               handleEditNameFolder(item);
                             } else {
                               editFolderName.edit = false;
                             }
+                            refInput.current?.blur();
                           }}
                           value={foldersNames[item.name]}
                           id={`input-folder-${item.name}`}
@@ -390,6 +409,7 @@ const SideBarFoldersButtonsComponent = ({
                         }}
                         variant={"ghost"}
                         size={"icon"}
+                        disabled={isUpdatingFolder}
                       >
                         <IconComponent
                           name={"trash"}
@@ -398,14 +418,16 @@ const SideBarFoldersButtonsComponent = ({
                       </Button>
                     )}
                     <Button
-                      className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
+                      className="hidden px-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
                       onClick={(e) => {
                         handleDownloadFolder(item.id!);
                         e.stopPropagation();
                         e.preventDefault();
                         track("Folder Exported", { folderId: item.id! });
                       }}
-                      unstyled
+                      variant={"ghost"}
+                      size={"icon"}
+                      disabled={isUpdatingFolder}
                     >
                       <IconComponent
                         name={"Download"}

src/frontend/src/pages/MainPage/pages/mainPage/index.tsx

@@ -3,6 +3,7 @@ import { useDeleteFolders } from "@/controllers/API/queries/folders";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
 import { track } from "@/customization/utils/analytics";
 import useAlertStore from "@/stores/alertStore";
+import { useIsFetching } from "@tanstack/react-query";
 import { useState } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import DropdownButton from "../../../../components/dropdownButtonComponent";
@@ -57,6 +58,11 @@ export default function HomePage(): JSX.Element {
     );
   };
 
+  const isFetchingFolders = !!useIsFetching({
+    queryKey: ["useGetFolders"],
+    exact: false,
+  });
+
   return (
     <>
       <PageLayout
@@ -73,6 +79,7 @@ export default function HomePage(): JSX.Element {
               options={dropdownOptions}
               plusButton={true}
               dropdownOptions={false}
+              isFetchingFolders={isFetchingFolders}
             />
           </div>
         }

src/frontend/src/types/components/index.ts

@@ -827,6 +827,7 @@ export type dropdownButtonPropsType = {
   options: Array<{ name: string; onBtnClick: () => void }>;
   plusButton?: boolean;
   dropdownOptions?: boolean;
+  isFetchingFolders?: boolean;
 };
 
 export type IOFieldViewProps = {