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

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,19 +10,7 @@ export default function SingleAlert({
   const [show, setShow] = useState(true);
   const type = dropItem.type;
 
-  return (
-    <Transition
-      className="noflow nowheel nopan nodelete nodrag relative"
-      show={show}
-      appear={true}
-      enter="transition-transform duration-500 ease-out"
-      enterFrom={"transform translate-x-[-100%]"}
-      enterTo={"transform translate-x-0"}
-      leave="transition-transform duration-500 ease-in"
-      leaveFrom={"transform translate-x-0"}
-      leaveTo={"transform translate-x-[-100%]"}
-    >
-      {type === "error" ? (
+  return type === "error" ? (
     <div
       className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
       key={dropItem.id}
@@ -165,7 +152,5 @@ export default function SingleAlert({
         </div>
       </div>
     </div>
-      )}
-    </Transition>
   );
 }

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.";

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

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;

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

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<void>;
 }) {
   const { folderId } = useParams();
 
@@ -176,8 +177,6 @@ export default function ComponentsComponent({
     handleExport,
   );
 
-  const deleteFlow = useDeleteFlow();
-
   const handleDeleteMultiple = () => {
     deleteFlow({ id: selectedFlowsComponentsCards })
       .then(() => {

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 (
     <>
-      <HeaderTabsSearchComponent loading={isFetching || isLoadingFolders} />
+      <HeaderTabsSearchComponent
+        loading={isFetching || isLoadingFolders || isDeleting || isAddingFlow}
+      />
       <div className="mt-5 flex h-full flex-col">
         <ComponentsComponent
           key={type}
           type={type}
           currentFolder={data}
-          isLoading={isFetching || isLoadingFolders}
+          deleteFlow={deleteFlow}
+          isLoading={
+            isFetching || isLoadingFolders || isDeleting || isAddingFlow
+          }
         />
       </div>
     </>