From 6c5c6461f2367eb86e6c9faa06c0f9196951987b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 4 Dec 2024 18:06:02 -0300
Subject: [PATCH] fix: add hover state on folder button when moving flow to it
 (#4999)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (index.tsx): Refactor SideBarFoldersButtonsComponent to improve code readability and maintainability. Add new functionalities such as drag and drop, folder hovering effects, and folder actions like upload, download, add, update, and delete. Update folder state management and handle loading states for various folder operations.

* ✨ (add-folder-button.tsx): Add a new component for adding folders to the sidebar
✨ (folder-select-item.tsx): Add a new component for displaying folder select items in the sidebar
✨ (header-buttons.tsx): Add a new component for displaying header buttons in the sidebar
✨ (input-edit-folder-name.tsx): Add a new component for editing folder names in the sidebar
✨ (select-options.tsx): Add a new component for displaying select options in the sidebar
✨ (upload-folder-button.tsx): Add a new component for uploading folders to the sidebar
✨ (handle-select-change.ts): Add a new helper function for handling select changes in the sidebar
🔧 (index.tsx): Refactor sidebar folder buttons component to use new components and helpers for better organization and functionality

* ✨ (use-on-file-drop.tsx): add support for fetching and using flows specific to the current folder in the file drop functionality
📝 (use-get-folder.ts): update the get folder query to set and use flows specific to the current folder
📝 (foldersStore.tsx): add state management for storing and setting flows specific to the current folder in the store
📝 (index.ts): add FlowType import for flows specific to the current folder in the store types

* ✨ (flows.py): Add description field to the returned flow object in read_flows function for better data representation
♻️ (use-on-file-drop.tsx): Refactor code to use new centralized store for flows instead of accessing flowsFromCurrentFolder directly
🔧 (use-get-folder.ts): Remove setFlowsFromCurrentFolder function and directly update flows in the store within getFolderFn
🔧 (foldersStore.tsx): Remove flowsFromCurrentFolder state and setFlowsFromCurrentFolder function from the store as they are no longer needed
---
 src/backend/base/langflow/api/v1/flows.py                 | 8 +++++++-
 .../folderSidebarComponent/hooks/use-on-file-drop.tsx     | 3 ++-
 src/frontend/src/types/zustand/folders/index.ts           | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/flows.py b/src/backend/base/langflow/api/v1/flows.py
index da9fe1430..f78debd7d 100644
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@@ -222,7 +222,13 @@ async def read_flows(
                 flows = [flow for flow in flows if flow.folder_id != starter_folder_id]
             if header_flows:
                 return [
-                    {"id": flow.id, "name": flow.name, "folder_id": flow.folder_id, "is_component": flow.is_component}
+                    {
+                        "id": flow.id,
+                        "name": flow.name,
+                        "folder_id": flow.folder_id,
+                        "is_component": flow.is_component,
+                        "description": flow.description,
+                    }
                     for flow in flows
                 ]
             return flows
diff --git a/src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx
index b877a6ab8..c6b3e0b11 100644
--- a/src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/core/folderSidebarComponent/hooks/use-on-file-drop.tsx
@@ -17,8 +17,9 @@ const useFileDrop = (folderId: string) => {
 
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const flows = useFlowsManagerStore((state) => state.flows);
   const saveFlow = useSaveFlow();
+  const flows = useFlowsManagerStore((state) => state.flows);
+
   const { mutate: uploadFlowToFolder } = usePostUploadFlowToFolder();
   const handleFileDrop = async (e, folderId) => {
     if (e.dataTransfer.types.some((type) => type === "Files")) {
diff --git a/src/frontend/src/types/zustand/folders/index.ts b/src/frontend/src/types/zustand/folders/index.ts
index deab29874..333ac8b9e 100644
--- a/src/frontend/src/types/zustand/folders/index.ts
+++ b/src/frontend/src/types/zustand/folders/index.ts
@@ -1,3 +1,4 @@
+import { FlowType } from "@/types/flow";
 import { FolderType } from "../../../pages/MainPage/entities";
 
 export type FoldersStoreType = {