fix: fix building loop when renaming a folder and opening a new flow and running It

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,
   });
 
+  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} />
+      <UploadFolderButton
+        onClick={handleUploadFlowsToFolder}
+        disabled={isUpdatingFolder}
+      />
+    </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}
+      >
+        <IconComponent name="FolderPlus" className="w-4" />
+      </Button>
+    </ShadTooltip>
+  );
+
+  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 (
     <>
-      <div className="flex shrink-0 items-center justify-between gap-2">
-        <div className="flex-1 self-start text-lg font-semibold">Folders</div>
-
-        <ShadTooltip content={"Add a new folder"}>
-          <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={isFetchingFolders || isPending || loading}
-          >
-            <ForwardedIconComponent name="Upload" className="w-4" />
-          </Button>
-        </ShadTooltip>
-      </div>
+      <HeaderButtons />
 
       <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
         <>
@@ -289,49 +359,15 @@ const SideBarFoldersButtonsComponent = ({
                 >
                   <div
                     onDoubleClick={(event) => {
-                      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();
+                      handleDoubleClick(event, item);
                     }}
                     className="flex w-full items-center gap-2"
                   >
                     <IconComponent
                       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") {
-                              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();
-                            }
+                            handleKeyDownFn(e, item);
                             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 = {