bugfix: add steps to delete flows caused by new constraints (#3045)

* 📝 (flows.py): refactor delete_multiple_flows function to improve readability and efficiency
✨ (use-delete-flows.ts): add useDeleteFlows hook to handle deletion of multiple flows in frontend
♻️ (index.tsx): refactor handleDeleteMultiple function to use useDeleteFlows hook for deleting multiple flows
🔧 (actionsMainPage-shard-1.spec.ts): add test for selecting and deleting a flow in end-to-end tests

* 📝 (flows.py): Remove unused imports and variables to clean up the code and improve readability
♻️ (flows.py): Refactor code to remove unnecessary import and variable declarations, making the code more concise and maintainable

* add unit tests to delete multiple flows with transactions and build

* format

* add assert on tests

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