bugfix: add steps to delete flows caused by new constraints

src/backend/base/langflow/api/v1/flows.py

@@ -7,6 +7,8 @@
 import zipfile
 
 from fastapi.responses import StreamingResponse
+from langflow.services.database.models.transactions.crud import get_transactions_by_flow_id
+from langflow.services.database.models.vertex_builds.crud import get_vertex_builds_by_flow_id
 import orjson
 from fastapi import APIRouter, Depends, File, HTTPException, UploadFile
 from fastapi.encoders import jsonable_encoder
@@ -334,11 +336,20 @@ async def delete_multiple_flows(
 
     """
     try:
-        deleted_flows = db.exec(select(Flow).where(col(Flow.id).in_(flow_ids)).where(Flow.user_id == user.id)).all()
-        for flow in deleted_flows:
+        flows_to_delete = db.exec(select(Flow).where(col(Flow.id).in_(flow_ids)).where(Flow.user_id == user.id)).all()
+        for flow in flows_to_delete:
+            transactions_to_delete = get_transactions_by_flow_id(db, flow.id)
+            for transaction in transactions_to_delete:
+                db.delete(transaction)
+
+            builds_to_delete = get_vertex_builds_by_flow_id(db, flow.id)
+            for build in builds_to_delete:
+                db.delete(build)
+
             db.delete(flow)
+
         db.commit()
-        return {"deleted": len(deleted_flows)}
+        return {"deleted": len(flows_to_delete)}
     except Exception as exc:
         logger.exception(exc)
         raise HTTPException(status_code=500, detail=str(exc)) from exc

src/frontend/src/controllers/API/queries/flows/use-delete-flows.ts

@@ -0,0 +1,32 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IDeleteFlows {
+  flow_ids: string[];
+}
+
+export const useDeleteFlows: useMutationFunctionType<
+  undefined,
+  IDeleteFlows
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const deleteFlowsFn = async (payload: IDeleteFlows): Promise<any> => {
+    const response = await api.delete<any>(`${getURL("FLOWS")}/`, {
+      data: payload.flow_ids,
+    });
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<IDeleteFlows, any, IDeleteFlows> = mutate(
+    ["useLoginUser"],
+    deleteFlowsFn,
+    options,
+  );
+
+  return mutation;
+};

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

@@ -1,4 +1,5 @@
 import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows";
+import { useDeleteFlows } from "@/controllers/API/queries/flows/use-delete-flows";
 import { useEffect, useMemo, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useLocation } from "react-router-dom";
@@ -188,19 +189,36 @@ export default function ComponentsComponent({
     handleExport,
   );
 
-  const { handleDeleteMultiple } = useDeleteMultipleFlows(
-    selectedFlowsComponentsCards,
-    removeFlow,
-    resetFilter,
-    getFoldersApi,
-    folderId,
-    myCollectionId!,
-    getFolderById,
-    setSuccessData,
-    setErrorData,
-    setAllFlows,
-    setSelectedFolder,
-  );
+  const { mutate: mutateDeleteMultipleFlows } = useDeleteFlows();
+
+  const handleDeleteMultiple = () => {
+    mutateDeleteMultipleFlows(
+      {
+        flow_ids: selectedFlowsComponentsCards,
+      },
+      {
+        onSuccess: () => {
+          setAllFlows([]);
+          setSelectedFolder(null);
+
+          resetFilter();
+          getFoldersApi(true);
+          if (!folderId || folderId === myCollectionId) {
+            getFolderById(folderId ? folderId : myCollectionId);
+          }
+          setSuccessData({
+            title: "Selected items deleted successfully",
+          });
+        },
+        onError: () => {
+          setErrorData({
+            title: "Error deleting items",
+            list: ["Please try again"],
+          });
+        },
+      },
+    );
+  };
 
   useSelectedFlows(entireFormValues, setSelectedFlowsComponentsCards);
 

src/frontend/tests/end-to-end/actionsMainPage-shard-1.spec.ts

@@ -36,6 +36,41 @@ test("select and delete all", async ({ page }) => {
   await page.getByText("Selected items deleted successfully").isVisible();
 });
 
+test("select and delete a flow", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByTestId("checkbox-component").first().click();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("Delete").last().click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Selected items deleted successfully").isVisible();
+});
+
 test("search flows", async ({ page }) => {
   await page.goto("/");
   await page.waitForTimeout(2000);