From bad009c0fab91dfdde20872995f65da9b551d994 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Wed, 18 Sep 2024 10:30:49 -0300 Subject: [PATCH] fix: update project description, update alerts animation, fix delete and duplicate loading (#3835) * Deleted "personal" from manage your projects * Removed animations from alerts on the dropdown * Changed useDeleteFlow to return isPending as well * Added delete loading to components and added filter of components not present in "flows" for deletion * added isDuplicating as a isMutating with the postAddFlow --- .../components/singleAlertComponent/index.tsx | 273 +++++++++--------- src/frontend/src/constants/constants.ts | 2 +- src/frontend/src/hooks/flows/use-add-flow.ts | 2 +- .../src/hooks/flows/use-delete-flow.ts | 4 +- .../sideBarDraggableComponent/index.tsx | 2 +- .../components/componentsComponent/index.tsx | 5 +- .../myCollectionComponent/index.tsx | 35 ++- 7 files changed, 167 insertions(+), 156 deletions(-) diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx index 17d32f864..1aea8b0f2 100644 --- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx +++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -1,5 +1,4 @@ import { CustomLink } from "@/customization/components/custom-link"; -import { Transition } from "@headlessui/react"; import { useState } from "react"; import IconComponent from "../../../../components/genericIconComponent"; import { SingleAlertComponentType } from "../../../../types/alerts"; @@ -11,161 +10,147 @@ export default function SingleAlert({ const [show, setShow] = useState(true); const type = dropItem.type; - return ( - - {type === "error" ? ( -
-
+
+
+
+

+ {dropItem.title} +

+ {dropItem.list ? ( +
+
    + {dropItem.list.map((item, idx) => ( +
  • + {item} +
    • + ))} +
+
+ ) : ( + <> + )} +
+
+
+
-
-

- {dropItem.title} -

- {dropItem.list ? ( -
-
    - {dropItem.list.map((item, idx) => ( -
  • - {item} -
    • - ))} -
-
- ) : ( - <> - )} -
-
-
- -
-
+
- ) : type === "notice" ? ( -
-
+
+
+ ) : type === "notice" ? ( +
+
+
+
+

+ {dropItem.title} +

+

+ {dropItem.link ? ( + + Details + + ) : ( + <> + )} +

+
+
+
+
-
-

- {dropItem.title} -

-

- {dropItem.link ? ( - - Details - - ) : ( - <> - )} -

-
-
-
- -
-
+
- ) : ( -
-
+
+
+ ) : ( +
+
+
+
+

+ {dropItem.title} +

+
+
+
+
-
-

- {dropItem.title} -

-
-
-
- -
-
+
- )} - +
+
); } diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index f9482fa9f..2f9117f09 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -703,7 +703,7 @@ export const CHAT_INPUT_PLACEHOLDER = export const CHAT_INPUT_PLACEHOLDER_SEND = "Send a message..."; export const EDIT_CODE_TITLE = "Edit Code"; export const MY_COLLECTION_DESC = - "Manage your personal projects. Download and upload entire collections."; + "Manage your projects. Download and upload entire collections."; export const STORE_DESC = "Explore community-shared flows and components."; export const STORE_TITLE = "Langflow Store"; export const NO_API_KEY = "You don't have an API key."; diff --git a/src/frontend/src/hooks/flows/use-add-flow.ts b/src/frontend/src/hooks/flows/use-add-flow.ts index 56bbd0f46..99aeb37de 100644 --- a/src/frontend/src/hooks/flows/use-add-flow.ts +++ b/src/frontend/src/hooks/flows/use-add-flow.ts @@ -26,7 +26,7 @@ const useAddFlow = () => { ); const flows = useFlowsManagerStore((state) => state.flows); const setFlows = useFlowsManagerStore((state) => state.setFlows); - const deleteFlow = useDeleteFlow(); + const { deleteFlow } = useDeleteFlow(); const { folderId } = useParams(); diff --git a/src/frontend/src/hooks/flows/use-delete-flow.ts b/src/frontend/src/hooks/flows/use-delete-flow.ts index 39c3333e8..9eebffeb9 100644 --- a/src/frontend/src/hooks/flows/use-delete-flow.ts +++ b/src/frontend/src/hooks/flows/use-delete-flow.ts @@ -10,7 +10,7 @@ const useDeleteFlow = () => { const flows = useFlowsManagerStore((state) => state.flows); const setFlows = useFlowsManagerStore((state) => state.setFlows); - const { mutate } = useDeleteDeleteFlows(); + const { mutate, isPending } = useDeleteDeleteFlows(); const deleteFlow = async ({ id, @@ -45,7 +45,7 @@ const useDeleteFlow = () => { }); }; - return deleteFlow; + return { deleteFlow, isDeleting: isPending }; }; export default useDeleteFlow; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx index 1dc7e2afa..fe4cab3c1 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx @@ -41,7 +41,7 @@ export const SidebarDraggableComponent = forwardRef( ref, ) => { const [open, setOpen] = useState(false); - const deleteFlow = useDeleteFlow(); + const { deleteFlow } = useDeleteFlow(); const flows = useFlowsManagerStore((state) => state.flows); const version = useDarkStore((state) => state.version); diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx index fbbc58e92..187683735 100644 --- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx @@ -1,5 +1,4 @@ import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows"; -import useDeleteFlow from "@/hooks/flows/use-delete-flow"; import { useEffect, useMemo, useState } from "react"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { useLocation, useParams } from "react-router-dom"; @@ -29,10 +28,12 @@ export default function ComponentsComponent({ type = "all", currentFolder, isLoading, + deleteFlow, }: { type?: string; currentFolder?: FolderType; isLoading: boolean; + deleteFlow: ({ id }: { id: string[] }) => Promise; }) { const { folderId } = useParams(); @@ -176,8 +177,6 @@ export default function ComponentsComponent({ handleExport, ); - const deleteFlow = useDeleteFlow(); - const handleDeleteMultiple = () => { deleteFlow({ id: selectedFlowsComponentsCards }) .then(() => { diff --git a/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx b/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx index 89b58c81e..22335d46e 100644 --- a/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx +++ b/src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx @@ -1,6 +1,8 @@ import { useGetFolderQuery } from "@/controllers/API/queries/folders/use-get-folder"; +import useDeleteFlow from "@/hooks/flows/use-delete-flow"; +import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { useFolderStore } from "@/stores/foldersStore"; -import { useIsFetching } from "@tanstack/react-query"; +import { useIsFetching, useIsMutating } from "@tanstack/react-query"; import { useParams } from "react-router-dom"; import ComponentsComponent from "../componentsComponent"; import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent"; @@ -13,27 +15,52 @@ const MyCollectionComponent = ({ type }: MyCollectionComponentProps) => { const { folderId } = useParams(); const myCollectionId = useFolderStore((state) => state.myCollectionId); - const { data, isFetching } = useGetFolderQuery( + const flows = useFlowsManagerStore((state) => state.flows); + + const { data: folderData, isFetching } = useGetFolderQuery( { id: folderId ?? myCollectionId ?? "", }, { enabled: !!folderId || !!myCollectionId }, ); + const data = { + flows: + folderData?.flows.filter((flow) => + flows?.find((f) => f.id === flow.id), + ) ?? [], + name: folderData?.name ?? "", + description: folderData?.description ?? "", + parent_id: folderData?.parent_id ?? "", + components: folderData?.components ?? [], + }; + const isLoadingFolders = !!useIsFetching({ queryKey: ["useGetFolders"], exact: false, }); + const { deleteFlow, isDeleting } = useDeleteFlow(); + + const isAddingFlow = !!useIsMutating({ + mutationKey: ["usePostAddFlow"], + exact: true, + }); + return ( <> - +