feat: Folders Design Uplift (#4122)

* move folders to a full page aside

* new dropdown + styles

* [autofix.ci] apply automated fixes

* design updates

* [autofix.ci] apply automated fixes

* increase empty state width

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

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

@@ -1,4 +1,10 @@
 import ShadTooltip from "@/components/shadTooltipComponent";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select-custom";
 import {
   usePatchFolders,
   usePostFolders,
@@ -129,6 +135,7 @@ const SideBarFoldersButtonsComponent = ({
           link.download = `${data.folder_name}.json`;
 
           link.click();
+          track("Folder Exported", { folderId: id! });
         },
         onError: () => {
           setErrorData({
@@ -245,13 +252,13 @@ const SideBarFoldersButtonsComponent = ({
     isDeletingFolder;
 
   const HeaderButtons = () => (
-    <div className="flex shrink-0 items-center justify-between gap-2">
+    <div className="mt-4 flex shrink-0 items-center justify-between gap-2">
-      <div className="flex-1 self-start text-lg font-semibold">Folders</div>
+      <div className="text-md flex-1 font-semibold">Folders</div>
-      <AddFolderButton onClick={addNewFolder} disabled={isUpdatingFolder} />
       <UploadFolderButton
         onClick={handleUploadFlowsToFolder}
         disabled={isUpdatingFolder}
       />
+      <AddFolderButton onClick={addNewFolder} disabled={isUpdatingFolder} />
     </div>
   );
 
@@ -260,12 +267,12 @@ const SideBarFoldersButtonsComponent = ({
       <Button
         variant="primary"
         size="icon"
-        className="px-2"
+        className="border-0"
         onClick={onClick}
         data-testid="add-folder-button"
         disabled={disabled}
       >
-        <IconComponent name="FolderPlus" className="w-4" />
+        <IconComponent name="Plus" className="w-5" />
       </Button>
     </ShadTooltip>
   );
@@ -275,7 +282,7 @@ const SideBarFoldersButtonsComponent = ({
       <Button
         variant="primary"
         size="icon"
-        className="px-2"
+        className="border-0"
         onClick={onClick}
         data-testid="upload-folder-button"
         disabled={disabled}
@@ -285,11 +292,30 @@ const SideBarFoldersButtonsComponent = ({
     </ShadTooltip>
   );
 
+  const FolderSelectItem = ({ name, iconName }) => (
+    <div
+      className={cn(
+        name === "Delete" ? "text-error" : "",
+        "flex items-center font-medium",
+      )}
+    >
+      <IconComponent name={iconName} className="mr-2 w-4" />
+      <span>{name}</span>
+    </div>
+  );
+
   const handleDoubleClick = (event, item) => {
     if (item.name === "My Projects") {
       return;
     }
 
+    event.stopPropagation();
+    event.preventDefault();
+
+    handleSelectFolderToRename(item);
+  };
+
+  const handleSelectFolderToRename = (item) => {
     if (!foldersNames[item.name]) {
       setFoldersNames({ [item.name]: item.name });
     }
@@ -303,8 +329,6 @@ const SideBarFoldersButtonsComponent = ({
       });
       setEditFolderName(newEditFolders);
       takeSnapshot();
-      event.stopPropagation();
-      event.preventDefault();
       return;
     }
 
@@ -314,8 +338,6 @@ const SideBarFoldersButtonsComponent = ({
       [item.name]: item.name,
     }));
     takeSnapshot();
-    event.stopPropagation();
-    event.preventDefault();
   };
 
   const handleKeyDownFn = (e, item) => {
@@ -340,6 +362,20 @@ const SideBarFoldersButtonsComponent = ({
     }
   };
 
+  const handleSelectChange = (option, folder) => {
+    switch (option) {
+      case "delete":
+        handleDeleteFolder!(folder);
+        break;
+      case "download":
+        handleDownloadFolder(folder.id!);
+        break;
+      case "rename":
+        handleSelectFolderToRename(folder);
+        break;
+    }
+  };
+
   return (
     <>
       <HeaderButtons />
@@ -362,7 +398,7 @@ const SideBarFoldersButtonsComponent = ({
                   className={cn(
                     buttonVariants({ variant: "ghost" }),
                     checkPathName(item.id!)
-                      ? "border border-border bg-muted hover:bg-muted"
+                      ? "bg-muted hover:bg-muted"
                       : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
                     "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
                     folderIdDragging === item.id! ? "bg-border" : "",
@@ -373,8 +409,9 @@ const SideBarFoldersButtonsComponent = ({
                     onDoubleClick={(event) => {
                       handleDoubleClick(event, item);
                     }}
-                    className="flex w-full items-center gap-2"
+                    className="flex w-full items-center justify-between"
                   >
+                    <div className="flex items-center gap-2">
                       <IconComponent
                         name={"folder"}
                         className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
@@ -392,7 +429,16 @@ const SideBarFoldersButtonsComponent = ({
                               handleKeyDown(e, e.key, "");
                             }}
                             autoFocus={true}
-                          onBlur={() => {
+                            onBlur={(e) => {
+                              // fixes autofocus problem where cursor isn't present
+                              if (
+                                e.relatedTarget?.id ===
+                                `options-trigger-${item.name}`
+                              ) {
+                                refInput.current?.focus();
+                                return;
+                              }
+
                               if (refInput.current?.value !== item.name) {
                                 handleEditNameFolder(item);
                               } else {
@@ -406,46 +452,61 @@ const SideBarFoldersButtonsComponent = ({
                           />
                         </div>
                       ) : (
-                      <span className="block w-full truncate opacity-100">
+                        <span className="block w-full grow truncate opacity-100">
                           {item.name}
                         </span>
                       )}
-                    {index > 0 && (
+                    </div>
-                      <Button
+                    <Select
-                        data-testid="btn-delete-folder"
+                      onValueChange={(value) => handleSelectChange(value, item)}
-                        className="hidden p-0 hover:bg-primary group-hover:block"
+                      value=""
-                        onClick={(e) => {
+                    >
-                          handleDeleteFolder!(item);
+                      <SelectTrigger
-                          e.stopPropagation();
+                        className="w-fit"
-                          e.preventDefault();
+                        id={`options-trigger-${item.name}`}
-                        }}
+                        data-testid="more-options-button"
-                        variant={"ghost"}
-                        size={"icon"}
-                        disabled={isUpdatingFolder}
                       >
                         <IconComponent
-                          name={"trash"}
+                          name={"MoreHorizontal"}
-                          className="w-4 stroke-[1.5] p-0"
+                          className="hidden w-4 stroke-[1.5] px-0 text-primary group-hover:block"
                         />
-                      </Button>
+                      </SelectTrigger>
+                      <SelectContent
+                        align="end"
+                        alignOffset={-16}
+                        position="popper"
+                      >
+                        {item.name !== "My Projects" && (
+                          <SelectItem
+                            id="rename-button"
+                            value="rename"
+                            data-testid="btn-rename-folder"
+                          >
+                            <FolderSelectItem
+                              name="Rename"
+                              iconName="square-pen"
+                            />
+                          </SelectItem>
                         )}
-                    <Button
+                        <SelectItem
-                      className="hidden px-0 hover:bg-primary group-hover:block"
+                          value="download"
-                      onClick={(e) => {
+                          data-testid="btn-download-folder"
-                        handleDownloadFolder(item.id!);
-                        e.stopPropagation();
-                        e.preventDefault();
-                        track("Folder Exported", { folderId: item.id! });
-                      }}
-                      variant={"ghost"}
-                      size={"icon"}
-                      disabled={isUpdatingFolder}
                         >
-                      <IconComponent
+                          <FolderSelectItem
-                        name={"Download"}
+                            name="Download Content"
-                        className="w-4 stroke-[1.5] text-primary"
+                            iconName="download"
                           />
-                    </Button>
+                        </SelectItem>
+                        {index > 0 && (
+                          <SelectItem
+                            value="delete"
+                            data-testid="btn-delete-folder"
+                          >
+                            <FolderSelectItem name="Delete" iconName="trash" />
+                          </SelectItem>
+                        )}
+                      </SelectContent>
+                    </Select>
                   </div>
                 </div>
               );

src/frontend/src/components/horizontalScrollFadeComponent/index.tsx

@@ -53,7 +53,7 @@ export default function HorizontalScrollFadeComponent({
   }, [divWidth, children]); // Depend on divWidth
 
   return isFolder ? (
-    <div className="hidden w-full flex-col gap-2 lg:flex">{children}</div>
+    <div className="flex w-full flex-col gap-2">{children}</div>
   ) : (
     <div ref={fadeContainerRef} className="fade-container flex">
       <div ref={scrollContainerRef} className="scroll-container flex gap-2">

src/frontend/src/components/pageLayout/index.tsx

@@ -15,7 +15,8 @@ export default function PageLayout({
   betaIcon?: boolean;
 }) {
   return (
-    <div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-16 pt-6">
+    <div className="flex h-full w-full flex-col justify-between overflow-auto bg-background px-6 pt-10">
+      <div className="mx-auto h-full w-full max-w-[1440px]">
         <div className="flex flex-col gap-4">
           <CustomBanner />
           <div className="flex w-full items-center justify-between gap-4 space-y-0.5 py-2">
@@ -35,5 +36,6 @@ export default function PageLayout({
         <Separator className="my-6 flex" />
         {children}
       </div>
+    </div>
   );
 }

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

@@ -79,6 +79,19 @@ export default function HomePage(): JSX.Element {
 
   return (
     <>
+      <div className="flex h-full w-full space-y-8 md:flex-col lg:flex-row lg:space-y-0">
+        <aside className="hidden h-full w-fit flex-col space-y-6 border-r px-4 lg:flex">
+          <FolderSidebarNav
+            handleChangeFolder={(id: string) => {
+              navigate(`all/folder/${id}`);
+            }}
+            handleDeleteFolder={(item) => {
+              setFolderToEdit(item);
+              setOpenDeleteFolderModal(true);
+            }}
+            className="w-[20vw] max-w-[288px]"
+          />
+        </aside>
         <PageLayout
           title={USER_PROJECTS_HEADER}
           description={MY_COLLECTION_DESC}
@@ -98,24 +111,11 @@ export default function HomePage(): JSX.Element {
             </div>
           }
         >
-        <div className="flex h-full w-full space-y-8 md:flex-col lg:flex-row lg:space-x-8 lg:space-y-0">
-          <aside className="flex h-fit w-fit flex-col space-y-6">
-            <FolderSidebarNav
-              handleChangeFolder={(id: string) => {
-                navigate(`all/folder/${id}`);
-              }}
-              handleDeleteFolder={(item) => {
-                setFolderToEdit(item);
-                setOpenDeleteFolderModal(true);
-              }}
-              className="w-[20vw]"
-            />
-          </aside>
           <div className="relative h-full w-full flex-1">
             <Outlet />
           </div>
-        </div>
         </PageLayout>
+      </div>
       <ModalsComponent
         openModal={openModal}
         setOpenModal={setOpenModal}

src/frontend/tests/core/features/folders.spec.ts

@@ -64,9 +64,10 @@ test("CRUD folders", async ({ page }) => {
     .last()
     .hover()
     .then(async () => {
-      await page.getByTestId("btn-delete-folder").last().click();
+      await page.getByTestId("more-options-button").last().click();
     });
 
+  await page.getByTestId("btn-delete-folder").click();
   await page.getByText("Delete").last().click();
   await page.waitForTimeout(1000);
   await page.getByText("Folder deleted successfully").isVisible();

src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts

@@ -53,7 +53,8 @@ test("should be able to move flow from folder, rename it and be displayed on cor
   while (countFolders > 1) {
     await page.getByText("New Folder").first().hover();
 
-    await page.getByTestId("btn-delete-folder").first().click();
+    await page.getByTestId("more-options-button").first().click();
+    await page.getByTestId("btn-delete-folder").click();
     await page.getByText("Delete").last().click();
     countFolders--;
     await page.waitForTimeout(1000);