fix(frontend): stop flow deletes from clobbering newly created flows (#13975)

fix(frontend): read fresh flow list in delete success

Author: Cristhianzl

src/frontend/src/hooks/flows/__tests__/use-delete-flow.test.ts

@@ -0,0 +1,85 @@
+import { renderHook } from "@testing-library/react";
+import type { FlowType } from "@/types/flow";
+import useDeleteFlow from "../use-delete-flow";
+
+const mockSetFlows = jest.fn();
+const mockMutate = jest.fn();
+
+const flowsState: { flows: FlowType[] } = { flows: [] };
+
+jest.mock("@/controllers/API/queries/flows/use-delete-delete-flows", () => ({
+  useDeleteDeleteFlows: () => ({ mutate: mockMutate, isPending: false }),
+}));
+
+type Selector<T> = (state: T) => unknown;
+type FlowsManagerState = { flows: FlowType[]; setFlows: jest.Mock };
+
+jest.mock("@/stores/flowsManagerStore", () => {
+  const store = Object.assign(
+    (selector: Selector<FlowsManagerState>) =>
+      selector({ flows: flowsState.flows, setFlows: mockSetFlows }),
+    { getState: () => ({ flows: flowsState.flows, setFlows: mockSetFlows }) },
+  );
+  return { __esModule: true, default: store };
+});
+
+jest.mock("@/stores/typesStore", () => ({
+  useTypesStore: { setState: jest.fn() },
+}));
+
+jest.mock("@/utils/reactflowUtils", () => ({
+  processFlows: (flows: FlowType[]) => ({ data: {}, flows }),
+  extractFieldsFromComponenents: () => ({}),
+}));
+
+const makeFlow = (id: string): FlowType =>
+  ({ id, name: id, data: { nodes: [], edges: [], viewport: {} } }) as FlowType;
+
+describe("useDeleteFlow", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    flowsState.flows = [];
+  });
+
+  it("should_remove_only_deleted_flows_when_delete_succeeds", async () => {
+    flowsState.flows = [makeFlow("flow-a"), makeFlow("flow-b")];
+    mockMutate.mockImplementation((_vars, { onSuccess }) => onSuccess());
+
+    const { result } = renderHook(() => useDeleteFlow());
+    await result.current.deleteFlow({ id: "flow-a" });
+
+    expect(mockSetFlows).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "flow-b" }),
+    ]);
+  });
+
+  it("should_keep_flow_created_while_delete_was_in_flight", async () => {
+    flowsState.flows = [makeFlow("placeholder")];
+    // Simulate a flow landing in the store (e.g. a template flow created by
+    // the welcome overlay handoff) before the DELETE response arrives.
+    mockMutate.mockImplementation((_vars, { onSuccess }) => {
+      flowsState.flows = [makeFlow("placeholder"), makeFlow("template-flow")];
+      onSuccess();
+    });
+
+    const { result } = renderHook(() => useDeleteFlow());
+    await result.current.deleteFlow({ id: "placeholder" });
+
+    expect(mockSetFlows).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "template-flow" }),
+    ]);
+  });
+
+  it("should_reject_when_delete_fails", async () => {
+    flowsState.flows = [makeFlow("flow-a")];
+    const error = new Error("boom");
+    mockMutate.mockImplementation((_vars, { onError }) => onError(error));
+
+    const { result } = renderHook(() => useDeleteFlow());
+
+    await expect(result.current.deleteFlow({ id: "flow-a" })).rejects.toThrow(
+      "boom",
+    );
+    expect(mockSetFlows).not.toHaveBeenCalled();
+  });
+});

src/frontend/src/hooks/flows/use-delete-flow.ts

@@ -16,7 +16,6 @@ const useDeleteFlow = () => {
   }: {
     id: string | string[];
   }): Promise<void> => {
-    const flows = useFlowsManagerStore.getState().flows;
     return new Promise<void>((resolve, reject) => {
       if (!Array.isArray(id)) {
         id = [id];
@@ -25,6 +24,9 @@ const useDeleteFlow = () => {
         { flow_ids: id },
         {
           onSuccess: () => {
+            // Fresh read: a pre-mutation snapshot would drop flows created
+            // while the DELETE was in flight, bouncing FlowPage to /all.
+            const flows = useFlowsManagerStore.getState().flows;
             const { data, flows: myFlows } = processFlows(
               (flows ?? []).filter((flow) => !id.includes(flow.id)),
             );

src/frontend/tests/core/integrations/starter-projects-outdated-components.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "../../fixtures";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { TIMEOUTS } from "../../utils/constants/timeouts";
 import { openTemplatesModal } from "../../utils/flow/new-project-flow";
 
 // The starter-project templates are checked for outdated components in four
@@ -70,7 +71,12 @@ QUARTERS.forEach((label, quarter) => {
           await expect(page.getByTestId("mainpage_title")).toBeVisible({
             timeout: 30000,
           });
-          await openTemplatesModal(page);
+          // TIMEOUTS.long: two shard workers share one SQLite backend, and
+          // each iteration's placeholder-flow create/delete churn can queue
+          // the "New Flow" POST behind the 30s busy_timeout. A standard (30s)
+          // wait expires exactly when the lock clears — see nightly run
+          // 28833493062 ("database is locked" + welcome/modal race timeout).
+          await openTemplatesModal(page, { modalTimeout: TIMEOUTS.long });
           await page.waitForLoadState("domcontentloaded");
           await page.getByTestId("side_nav_options_all-templates").click();
           await expect(

src/frontend/tests/utils/flow/new-project-flow.ts

@@ -64,9 +64,15 @@ export const openTemplatesModal = async (
   const welcomeSelector = '[data-testid="flow-builder-welcome-panel"]';
   const modalSelector = `[data-testid="${TID.modalTitle}"]`;
 
+  // The race must honor the caller's modalTimeout: clicking "New Flow" first
+  // POSTs the placeholder flow, and on CI shards where parallel workers share
+  // one SQLite backend that write can queue up to the 30s busy_timeout —
+  // callers in write-heavy loops pass TIMEOUTS.long to ride that window out.
+  const raceTimeout = options?.modalTimeout ?? TIMEOUTS.standard;
+
   await Promise.race([
-    page.waitForSelector(welcomeSelector, { timeout: TIMEOUTS.standard }),
-    page.waitForSelector(modalSelector, { timeout: TIMEOUTS.standard }),
+    page.waitForSelector(welcomeSelector, { timeout: raceTimeout }),
+    page.waitForSelector(modalSelector, { timeout: raceTimeout }),
   ]);
 
   if ((await page.locator(welcomeSelector).count()) > 0) {