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="flex-1 self-start text-lg font-semibold">Folders</div>
-      <AddFolderButton onClick={addNewFolder} disabled={isUpdatingFolder} />
+    <div className="mt-4 flex shrink-0 items-center justify-between gap-2">
+      <div className="text-md flex-1 font-semibold">Folders</div>
       <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,79 +409,104 @@ const SideBarFoldersButtonsComponent = ({
                     onDoubleClick={(event) => {
                       handleDoubleClick(event, item);
                     }}
-                    className="flex w-full items-center gap-2"
+                    className="flex w-full items-center justify-between"
                   >
-                    <IconComponent
-                      name={"folder"}
-                      className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
-                    />
-                    {editFolderName?.edit && !isUpdatingFolder ? (
-                      <div>
-                        <Input
-                          className="w-36"
-                          onChange={(e) => {
-                            handleEditFolderName(e, item.name);
-                          }}
-                          ref={refInput}
-                          onKeyDown={(e) => {
-                            handleKeyDownFn(e, item);
-                            handleKeyDown(e, e.key, "");
-                          }}
-                          autoFocus={true}
-                          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}`}
-                          data-testid={`input-folder`}
-                        />
-                      </div>
-                    ) : (
-                      <span className="block w-full truncate opacity-100">
-                        {item.name}
-                      </span>
-                    )}
-                    {index > 0 && (
-                      <Button
-                        data-testid="btn-delete-folder"
-                        className="hidden p-0 hover:bg-primary group-hover:block"
-                        onClick={(e) => {
-                          handleDeleteFolder!(item);
-                          e.stopPropagation();
-                          e.preventDefault();
-                        }}
-                        variant={"ghost"}
-                        size={"icon"}
-                        disabled={isUpdatingFolder}
+                    <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"
+                      />
+                      {editFolderName?.edit && !isUpdatingFolder ? (
+                        <div>
+                          <Input
+                            className="w-36"
+                            onChange={(e) => {
+                              handleEditFolderName(e, item.name);
+                            }}
+                            ref={refInput}
+                            onKeyDown={(e) => {
+                              handleKeyDownFn(e, item);
+                              handleKeyDown(e, e.key, "");
+                            }}
+                            autoFocus={true}
+                            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 {
+                                editFolderName.edit = false;
+                              }
+                              refInput.current?.blur();
+                            }}
+                            value={foldersNames[item.name]}
+                            id={`input-folder-${item.name}`}
+                            data-testid={`input-folder`}
+                          />
+                        </div>
+                      ) : (
+                        <span className="block w-full grow truncate opacity-100">
+                          {item.name}
+                        </span>
+                      )}
+                    </div>
+                    <Select
+                      onValueChange={(value) => handleSelectChange(value, item)}
+                      value=""
+                    >
+                      <SelectTrigger
+                        className="w-fit"
+                        id={`options-trigger-${item.name}`}
+                        data-testid="more-options-button"
                       >
                         <IconComponent
-                          name={"trash"}
-                          className="w-4 stroke-[1.5] p-0"
+                          name={"MoreHorizontal"}
+                          className="hidden w-4 stroke-[1.5] px-0 text-primary group-hover:block"
                         />
-                      </Button>
-                    )}
-                    <Button
-                      className="hidden px-0 hover:bg-primary group-hover:block"
-                      onClick={(e) => {
-                        handleDownloadFolder(item.id!);
-                        e.stopPropagation();
-                        e.preventDefault();
-                        track("Folder Exported", { folderId: item.id! });
-                      }}
-                      variant={"ghost"}
-                      size={"icon"}
-                      disabled={isUpdatingFolder}
-                    >
-                      <IconComponent
-                        name={"Download"}
-                        className="w-4 stroke-[1.5] text-primary"
-                      />
-                    </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>
+                        )}
+                        <SelectItem
+                          value="download"
+                          data-testid="btn-download-folder"
+                        >
+                          <FolderSelectItem
+                            name="Download Content"
+                            iconName="download"
+                          />
+                        </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,25 +15,27 @@ 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 flex-col gap-4">
-        <CustomBanner />
-        <div className="flex w-full items-center justify-between gap-4 space-y-0.5 py-2">
-          <div className="flex w-full flex-col">
-            <h2
-              className="text-2xl font-bold tracking-tight"
-              data-testid="mainpage_title"
-            >
-              {title}
-              {betaIcon && <span className="store-beta-icon">BETA</span>}
-            </h2>
-            <p className="text-muted-foreground">{description}</p>
+    <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">
+            <div className="flex w-full flex-col">
+              <h2
+                className="text-2xl font-bold tracking-tight"
+                data-testid="mainpage_title"
+              >
+                {title}
+                {betaIcon && <span className="store-beta-icon">BETA</span>}
+              </h2>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+            <div className="flex-shrink-0">{button && button}</div>
           </div>
-          <div className="flex-shrink-0">{button && button}</div>
         </div>
+        <Separator className="my-6 flex" />
+        {children}
       </div>
-      <Separator className="my-6 flex" />
-      {children}
     </div>
   );
 }

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

@@ -79,43 +79,43 @@ export default function HomePage(): JSX.Element {
 
   return (
     <>
-      <PageLayout
-        title={USER_PROJECTS_HEADER}
-        description={MY_COLLECTION_DESC}
-        button={
-          <div className="flex gap-2">
-            <DropdownButton
-              firstButtonName="New Project"
-              onFirstBtnClick={() => {
-                setOpenModal(true);
-                track("New Project Button Clicked");
-              }}
-              options={dropdownOptions}
-              plusButton={true}
-              dropdownOptions={false}
-              isFetchingFolders={isLoadingFolder}
-            />
-          </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="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}
+          button={
+            <div className="flex gap-2">
+              <DropdownButton
+                firstButtonName="New Project"
+                onFirstBtnClick={() => {
+                  setOpenModal(true);
+                  track("New Project Button Clicked");
+                }}
+                options={dropdownOptions}
+                plusButton={true}
+                dropdownOptions={false}
+                isFetchingFolders={isLoadingFolder}
+              />
+            </div>
+          }
+        >
           <div className="relative h-full w-full flex-1">
             <Outlet />
           </div>
-        </div>
-      </PageLayout>
+        </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);