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
langflow-ai · Sep 18, 2024 · 98c1f0e · 98c1f0e
1 parent 323d514
commit 98c1f0e
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 87 deletions.
diff --git 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
@@ -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"}

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