From 98c1f0e8aa99f44d09e6b90dba73021b8ebce5d5 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 18 Sep 2024 20:13:47 -0300
Subject: [PATCH] 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
---
 .../dropdownButtonComponent/index.tsx         |   2 +
 .../components/sideBarFolderButtons/index.tsx | 196 ++++++++++--------
 .../pages/MainPage/pages/mainPage/index.tsx   |   7 +
 src/frontend/src/types/components/index.ts    |   1 +
 4 files changed, 119 insertions(+), 87 deletions(-)

diff --git a/src/frontend/src/components/dropdownButtonComponent/index.tsx b/src/frontend/src/components/dropdownButtonComponent/index.tsx
index 7e9aea5b761..eae8e41ef87 100644
--- a/src/frontend/src/components/dropdownButtonComponent/index.tsx
+++ b/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" />
diff --git a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
index 17f9442714b..38ac3c1d484 100644
--- a/src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/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,41 +359,7 @@ 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"
                   >
@@ -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") {
-                              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"}
diff --git a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx b/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
index e6b80704a59..43719a6da16 100644
--- a/src/frontend/src/pages/MainPage/pages/mainPage/index.tsx
+++ b/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>
         }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index da5591f512a..bcceb069b83 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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 = {