fix: remove unused import and simplify key generation in SideBarFoldersButtonsComponent (#5227)

* ♻️ (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

@@ -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/**"

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>
   );
 };

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}