fix: re-implement logic to correctly save or update flow in the appro…

…priate folder on autologin = false (langflow-ai#2610)

♻️ (frontend): remove unused imports and variables in cardComponent
✨ (authContext): add setAllFlows and setSelectedFolder to AuthProvider
✨ (undrawCards): add folderIdUrl for better URL handling
✨ (collectionCard): add folder URL handling for navigation
✨ (use-delete-multiple): add setAllFlows and setSelectedFolder to handleDeleteMultiple
✨ (componentsComponent): add isLoadingFolders and setSelectedFolder
✨ (tabsComponent): add folder URL handling for tab navigation
✨ (flowsManagerStore): add folder URL handling in saveFlowDebounce

✨ (foldersStore.tsx): add setSelectedFolder method to manage selected folder state
♻️ (foldersStore.tsx): move setIsLoadingFolders call to improve loading state management
✨ (flowsManager/index.ts): add folderId parameter to saveFlow and saveFlowDebounce methods for better flow management
✨ (folders/index.ts): add setSelectedFolder method to FoldersStoreType for better folder state management

(cherry picked from commit 0df06c0)

src/frontend/src/components/cardComponent/index.tsx

@@ -27,7 +27,6 @@ import {
 import { Checkbox } from "../ui/checkbox";
 import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
-import DragCardComponent from "./components/dragCardComponent";
 import useDataEffect from "./hooks/use-data-effect";
 import useInstallComponent from "./hooks/use-handle-install";
 import useLikeComponent from "./hooks/use-handle-like";
@@ -56,7 +55,6 @@ export default function CollectionCardComponent({
   control?: Control<any, any>;
   is_component?: boolean;
 }) {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);

src/frontend/src/contexts/authContext.tsx

@@ -1,3 +1,4 @@
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { createContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Cookies from "universal-cookie";
@@ -56,6 +57,8 @@ export function AuthProvider({ children }): React.ReactElement {
   );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const fetchApiData = useStoreStore((state) => state.fetchApiData);
+  const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
+  const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder);
 
   useEffect(() => {
     const storedAccessToken = cookies.get("access_token_lf");
@@ -105,6 +108,8 @@ export function AuthProvider({ children }): React.ReactElement {
       setUserData(null);
       setAccessToken(null);
       setIsAuthenticated(false);
+      setAllFlows([]);
+      setSelectedFolder(null);
       navigate("/login");
     } catch (error) {
       console.error(error);

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -26,6 +26,9 @@ export default function UndrawCardComponent({
   const location = useLocation();
   const folderId = location?.state?.folderId;
   const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+
+  const folderIdUrl = folderId || myCollectionId || "";
 
   function selectImage() {
     switch (flow.name) {
@@ -108,7 +111,7 @@ export default function UndrawCardComponent({
         updateIds(flow.data!);
         addFlow(true, flow).then((id) => {
           setFolderUrl(folderId ?? "");
-          navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
+          navigate(`/flow/${id}/folder/${folderIdUrl}`);
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"

src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx

@@ -1,3 +1,4 @@
+import { useFolderStore } from "@/stores/foldersStore";
 import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import CollectionCardComponent from "../../../../../../components/cardComponent";
@@ -9,9 +10,15 @@ const CollectionCard = ({ item, type, isLoading, control }) => {
   const editFlowLink = `/flow/${item.id}`;
   const editFlowButtonTestId = `edit-flow-button-${item.id}`;
 
+  const folderUrl = useFolderStore((state) => state.folderUrl);
+  const myCollectionIdFolder = useFolderStore((state) => state.myCollectionId);
+
+  const hasFolderUrl = folderUrl != null && folderUrl !== "";
+  const currentFolderUrl = hasFolderUrl ? folderUrl : myCollectionIdFolder;
+
   const handleClick = () => {
     if (!isComponent) {
-      navigate(editFlowLink);
+      navigate(editFlowLink, { state: { folderId: currentFolderUrl } });
     }
   };
 

src/frontend/src/pages/MainPage/components/componentsComponent/hooks/use-delete-multiple.tsx

@@ -1,3 +1,5 @@
+import { FolderType } from "@/pages/MainPage/entities";
+import { FlowType } from "@/types/flow";
 import { useCallback } from "react";
 
 const useDeleteMultipleFlows = (
@@ -10,10 +12,15 @@ const useDeleteMultipleFlows = (
   getFolderById: (id: string) => void,
   setSuccessData: (data: { title: string }) => void,
   setErrorData: (data: { title: string; list: string[] }) => void,
+  setAllFlows: (flows: FlowType[]) => void,
+  setSelectedFolder: (folder: FolderType | null) => void,
 ) => {
   const handleDeleteMultiple = useCallback(() => {
     removeFlow(selectedFlowsComponentsCards)
       .then(() => {
+        setAllFlows([]);
+        setSelectedFolder(null);
+
         resetFilter();
         getFoldersApi(true);
         if (!folderId || folderId === myCollectionId) {

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -76,6 +76,8 @@ export default function ComponentsComponent({
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
   const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
+  const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder);
 
   const cardTypes = useMemo(() => {
     if (window.location.pathname.includes("components")) {
@@ -159,6 +161,8 @@ export default function ComponentsComponent({
     getFolderById,
     setSuccessData,
     setErrorData,
+    setAllFlows,
+    setSelectedFolder,
   );
 
   useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards);
@@ -196,11 +200,13 @@ export default function ComponentsComponent({
       >
         <div className="flex h-full w-full flex-col justify-between">
           <div className="flex w-full flex-col gap-4">
-            {!isLoading && data?.length === 0 ? (
+            {!isLoading && !isLoadingFolders && data?.length === 0 ? (
               <EmptyComponent />
             ) : (
               <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
-                {isLoading === false && data?.length > 0 ? (
+                {isLoading === false &&
+                data?.length > 0 &&
+                isLoadingFolders === false ? (
                   <>
                     {data?.map((item) => (
                       <FormProvider {...methods} key={item.id}>

src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useFolderStore } from "../../../../../../stores/foldersStore";
 
@@ -17,6 +17,10 @@ const TabsSearchComponent = ({
 }: TabsSearchComponentProps) => {
   const navigate = useNavigate();
   const folderUrl = useFolderStore((state) => state.folderUrl);
+  const myCollectionIdFolder = useFolderStore((state) => state.myCollectionId);
+
+  const hasFolderUrl = folderUrl != null && folderUrl !== "";
+  const currentFolderUrl = hasFolderUrl ? folderUrl : myCollectionIdFolder;
 
   const changeLocation = (tabOption) => {
     const location = window.location.pathname;
@@ -33,7 +37,7 @@ const TabsSearchComponent = ({
         break;
     }
 
-    navigate(newLocation, { state: { folderId: folderUrl } });
+    navigate(newLocation, { state: { folderId: currentFolderUrl } });
   };
 
   useEffect(() => {

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,6 +1,7 @@
 import { AxiosError } from "axios";
 import { cloneDeep } from "lodash";
 import pDebounce from "p-debounce";
+import { useLocation } from "react-router-dom";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
@@ -132,6 +133,13 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     return get().saveFlowDebounce(flow, silent); // call the debounced function directly
   },
   saveFlowDebounce: pDebounce((flow: FlowType, silent?: boolean) => {
+    const folderUrl = useFolderStore.getState().folderUrl;
+    const hasFolderUrl = folderUrl != null && folderUrl !== "";
+
+    flow.folder_id = hasFolderUrl
+      ? useFolderStore.getState().folderUrl
+      : useFolderStore.getState().myCollectionId ?? "";
+
     set({ saveLoading: true });
     return new Promise<void>((resolve, reject) => {
       updateFlowInDatabase(flow)

src/frontend/src/stores/foldersStore.tsx

@@ -13,8 +13,8 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
   folders: [],
   getFoldersApi: (refetch = false, startupApplication: boolean = false) => {
     return new Promise<void>((resolve, reject) => {
+      get().setIsLoadingFolders(true);
       if (get()?.folders.length === 0 || refetch === true) {
-        get().setIsLoadingFolders(true);
         getFolders().then(
           async (res) => {
             const foldersWithoutStarterProjects = res?.filter(
@@ -36,18 +36,18 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
 
             const { refreshFlows } = useFlowsManagerStore.getState();
             const { getTypes } = useTypesStore.getState();
-            const { setIsLoadingFolders } = get();
 
             if (refetch) {
               if (startupApplication) {
                 await refreshFlows();
                 await getTypes();
+                get().setIsLoadingFolders(false);
               } else {
                 refreshFlows();
                 getTypes();
+                get().setIsLoadingFolders(false);
               }
             }
-            setIsLoadingFolders(false);
 
             resolve();
           },
@@ -104,6 +104,7 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
     }
   },
   selectedFolder: null,
+  setSelectedFolder: (folder) => set(() => ({ selectedFolder: folder })),
   loadingById: false,
   getMyCollectionFolder: () => {
     const folders = get().folders;

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -14,10 +14,15 @@ export type FlowsManagerStoreType = {
   isLoading: boolean;
   setIsLoading: (isLoading: boolean) => void;
   refreshFlows: () => Promise<void>;
-  saveFlow: (flow: FlowType, silent?: boolean) => Promise<void> | undefined;
+  saveFlow: (
+    flow: FlowType,
+    silent?: boolean,
+    folderId?: string,
+  ) => Promise<void> | undefined;
   saveFlowDebounce: (
     flow: FlowType,
     silent?: boolean,
+    folderId?: string,
   ) => Promise<void> | undefined;
   autoSaveCurrentFlow: (
     nodes: Node[],

src/frontend/src/types/zustand/folders/index.ts

@@ -10,6 +10,7 @@ export type FoldersStoreType = {
   isLoadingFolders: boolean;
   setIsLoadingFolders: (isLoadingFolders: boolean) => void;
   selectedFolder: FolderType | null;
+  setSelectedFolder: (folder: FolderType | null) => void;
   getFolderById: (id: string) => void;
   getMyCollectionFolder: () => void;
   myCollectionFlows: FolderType | null;