From 3e099ac72ea93fae4360030abae8367285c6cc62 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 12 Dec 2024 12:42:09 -0300
Subject: [PATCH] fix: remove unused import and simplify key generation in
 SideBarFoldersButtonsComponent (#5227)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ♻️ (index.tsx): Remove unused getRandomKeyByssmm function to clean up code and improve maintainability
📝 (index.tsx): Update key prop in SidebarMenuItem component to use index instead of getRandomKeyByssmm function for better performance and readability

* 📝 (select-options.tsx): Refactor SelectOptions component to improve readability and maintainability by restructuring the JSX elements and adding proper classNames
📝 (index.tsx): Introduce state for hoveredFolderId to track the currently hovered folder in the SideBarFoldersButtonsComponent for better user interaction and visual feedback. Update SidebarMenuItem to include onMouseEnter and onMouseLeave events to set and clear the hoveredFolderId state respectively. Update SidebarMenuButton className to conditionally apply background color based on the hoveredFolderId state.
---
 .github/changes-filter.yaml                   |  2 +
 .../components/select-options.tsx             | 92 ++++++++++---------
 .../components/sideBarFolderButtons/index.tsx | 16 +++-
 3 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/.github/changes-filter.yaml b/.github/changes-filter.yaml
index 04cb094a2..255ff8b43 100644
--- a/.github/changes-filter.yaml
+++ b/.github/changes-filter.yaml
@@ -21,6 +21,8 @@ docs:
 starter-projects:
   - "src/backend/base/langflow/initial_setup/**"
   - "src/backend/base/langflow/components/**"
+  - "src/backend/base/langflow/services/**"
+  - "src/backend/base/langflow/custom/**"
   - "src/frontend/src/pages/MainPage/**"
   - "src/frontend/src/utils/reactflowUtils.ts"
   - "src/frontend/tests/extended/features/**"
diff --git a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx
index 32061becc..60c356e2b 100644
--- a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx
+++ b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/components/select-options.tsx
@@ -27,52 +27,54 @@ export const SelectOptions = ({
   checkPathName: (folderId: string) => boolean;
 }) => {
   return (
-    <Select
-      onValueChange={(value) =>
-        handleSelectChange(
-          value,
-          item,
-          handleDeleteFolder,
-          handleDownloadFolder,
-          handleSelectFolderToRename,
-        )
-      }
-      value=""
-    >
-      <ShadTooltip content="Options" side="right" styleClasses="z-50">
-        <SelectTrigger
-          className={cn(
-            "w-fit p-0",
-            checkPathName(item.id!) ? "block" : "hidden",
-          )}
-          id={`options-trigger-${item.name}`}
-          data-testid="more-options-button"
-        >
-          <IconComponent
-            name="MoreHorizontal"
-            className="w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:text-foreground"
-          />
-        </SelectTrigger>
-      </ShadTooltip>
-      <SelectContent align="end" alignOffset={-16} position="popper">
-        {item.name !== "My Projects" && (
-          <SelectItem
-            id="rename-button"
-            value="rename"
-            data-testid="btn-rename-folder"
+    <div>
+      <Select
+        onValueChange={(value) =>
+          handleSelectChange(
+            value,
+            item,
+            handleDeleteFolder,
+            handleDownloadFolder,
+            handleSelectFolderToRename,
+          )
+        }
+        value=""
+      >
+        <ShadTooltip content="Options" side="right" styleClasses="z-50">
+          <SelectTrigger
+            className="w-fit"
+            id={`options-trigger-${item.name}`}
+            data-testid="more-options-button"
           >
-            <FolderSelectItem name="Rename" iconName="SquarePen" />
+            <IconComponent
+              name={"MoreHorizontal"}
+              className={cn(
+                `w-4 stroke-[1.5] px-0 text-muted-foreground group-hover/menu-button:block group-hover/menu-button:text-foreground`,
+                checkPathName(item.id!) ? "block" : "hidden",
+              )}
+            />
+          </SelectTrigger>
+        </ShadTooltip>
+        <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="SquarePen" />
+            </SelectItem>
+          )}
+          <SelectItem value="download" data-testid="btn-download-folder">
+            <FolderSelectItem name="Download Content" iconName="Download" />
           </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="Trash2" />
-          </SelectItem>
-        )}
-      </SelectContent>
-    </Select>
+          {index > 0 && (
+            <SelectItem value="delete" data-testid="btn-delete-folder">
+              <FolderSelectItem name="Delete" iconName="Trash2" />
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
   );
 };
diff --git a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
index daa34d60b..c72575ff0 100644
--- a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
@@ -28,7 +28,7 @@ import useAlertStore from "../../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../../../stores/foldersStore";
 import { handleKeyDown } from "../../../../../utils/reactflowUtils";
-import { cn, getRandomKeyByssmm } from "../../../../../utils/utils";
+import { cn } from "../../../../../utils/utils";
 import useFileDrop from "../../hooks/use-on-file-drop";
 import { SidebarFolderSkeleton } from "../sidebarFolderSkeleton";
 import { HeaderButtons } from "./components/header-buttons";
@@ -333,6 +333,8 @@ const SideBarFoldersButtonsComponent = ({
     }
   };
 
+  const [hoveredFolderId, setHoveredFolderId] = useState<string | null>(null);
+
   return (
     <Sidebar
       collapsible={isMobile ? "offcanvas" : "none"}
@@ -356,7 +358,12 @@ const SideBarFoldersButtonsComponent = ({
                     (folder) => folder.name === item.name,
                   )[0];
                   return (
-                    <SidebarMenuItem key={getRandomKeyByssmm()}>
+                    <SidebarMenuItem
+                      key={index}
+                      className="group/menu-button"
+                      onMouseEnter={() => setHoveredFolderId(item.id!)}
+                      onMouseLeave={() => setHoveredFolderId(null)}
+                    >
                       <div className="relative flex w-full">
                         <SidebarMenuButton
                           size="md"
@@ -369,7 +376,8 @@ const SideBarFoldersButtonsComponent = ({
                           isActive={checkPathName(item.id!)}
                           onClick={() => handleChangeFolder!(item.id!)}
                           className={cn(
-                            "group/menu-button flex-grow pr-8", // Added padding-right to make room for options
+                            "flex-grow pr-8",
+                            hoveredFolderId === item.id && "bg-accent",
                             checkHoveringFolder(item.id!),
                           )}
                         >
@@ -401,7 +409,7 @@ const SideBarFoldersButtonsComponent = ({
                         </SidebarMenuButton>
                         <div
                           className="absolute right-2 top-[0.45rem] flex items-center hover:text-foreground"
-                          onClick={(e) => e.stopPropagation()} // Prevent click from triggering parent button
+                          onClick={(e) => e.stopPropagation()}
                         >
                           <SelectOptions
                             item={item}