feat: Persist locked state for flows (#4459)

* persist locked state for flows

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* 📝 (popover.tsx): Remove duplicate declaration of PopoverAnchor in popover.tsx
✨ (lock-flow.spec.ts): Add test for locking and unlocking a flow in the application to ensure proper functionality and saving of the flow.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/frontend/src/components/core/canvasControlsComponent/index.tsx

@@ -1,6 +1,11 @@
 import IconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+import useSaveFlow from "@/hooks/flows/use-save-flow";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import useFlowStore from "@/stores/flowStore";
 import { cn } from "@/utils/utils";
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
 import {
   ControlButton,
   Panel,
@@ -64,6 +69,30 @@ const CanvasControls = ({ children }) => {
     selector,
     shallow,
   );
+  const saveFlow = useSaveFlow();
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
+  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
+
+  useEffect(() => {
+    const isLocked = currentFlow?.locked;
+    store.setState({
+      nodesDraggable: !isLocked,
+      nodesConnectable: !isLocked,
+      elementsSelectable: !isLocked,
+    });
+  }, [currentFlow?.locked]);
+
+  const handleSaveFlow = () => {
+    if (!currentFlow) return;
+    const newFlow = cloneDeep(currentFlow);
+    newFlow.locked = isInteractive;
+    if (autoSaving) {
+      saveFlow(newFlow);
+    } else {
+      setCurrentFlow(newFlow);
+    }
+  };
 
   const onToggleInteractivity = () => {
     store.setState({
@@ -71,6 +100,7 @@ const CanvasControls = ({ children }) => {
       nodesConnectable: !isInteractive,
       elementsSelectable: !isInteractive,
     });
+    handleSaveFlow();
   };
 
   return (

src/frontend/src/components/ui/popover.tsx

@@ -6,10 +6,10 @@ import { cn } from "../../utils/utils";
 
 const Popover = PopoverPrimitive.Root;
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>

src/frontend/src/controllers/API/queries/flows/use-patch-update-flow.ts

@@ -12,6 +12,7 @@ interface IPatchUpdateFlow {
   description: string;
   folder_id: string | null | undefined;
   endpoint_name: string | null | undefined;
+  locked: boolean | null | undefined;
 }
 
 export const usePatchUpdateFlow: useMutationFunctionType<
@@ -27,6 +28,7 @@ export const usePatchUpdateFlow: useMutationFunctionType<
       description: payload.description,
       folder_id: payload.folder_id || null,
       endpoint_name: payload.endpoint_name || null,
+      locked: payload.locked || null,
     });
 
     return response.data;

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

@@ -58,11 +58,26 @@ const useSaveFlow = () => {
             );
           }
 
-          const { id, name, data, description, folder_id, endpoint_name } =
-            flow;
+          const {
+            id,
+            name,
+            data,
+            description,
+            folder_id,
+            endpoint_name,
+            locked,
+          } = flow;
           if (!currentSavedFlow?.data?.nodes.length || data!.nodes.length > 0) {
             mutate(
-              { id, name, data: data!, description, folder_id, endpoint_name },
+              {
+                id,
+                name,
+                data: data!,
+                description,
+                folder_id,
+                endpoint_name,
+                locked,
+              },
               {
                 onSuccess: (updatedFlow) => {
                   setSaveLoading(false);

src/frontend/src/types/flow/index.ts

@@ -30,6 +30,7 @@ export type FlowType = {
   icon_bg_color?: string;
   folder_id?: string;
   webhook?: boolean;
+  locked?: boolean | null;
 };
 
 export type NodeType = {

src/frontend/tests/extended/features/lock-flow.spec.ts

@@ -0,0 +1,94 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test(
+  "user must be able to lock a flow and it must be saved",
+  { tag: ["@release"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await page.waitForSelector('[data-testid="mainpage_title"]', {
+      timeout: 30000,
+    });
+
+    await page.waitForSelector('[id="new-project-btn"]', {
+      timeout: 30000,
+    });
+
+    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 Flow", { exact: true }).click();
+      await page.waitForSelector('[data-testid="modal-title"]', {
+        timeout: 3000,
+      });
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("lock_unlock").click();
+    await page.waitForSelector('[data-testid="icon-Lock"]', {
+      timeout: 3000,
+    });
+    expect(page.getByTestId("icon-Lock")).toBeVisible();
+
+    await page.getByTestId("icon-ChevronLeft").click();
+    await page.waitForSelector('[data-testid="mainpage_title"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("list-card").first().click();
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.waitForSelector('[data-testid="icon-Lock"]', {
+      timeout: 3000,
+    });
+    expect(page.getByTestId("icon-Lock")).toBeVisible();
+
+    await page.getByTestId("lock_unlock").click();
+    await page.waitForSelector('[data-testid="icon-LockOpen"]', {
+      timeout: 3000,
+    });
+    expect(page.getByTestId("icon-LockOpen")).toBeVisible();
+
+    await page.getByTestId("icon-ChevronLeft").click();
+    await page.waitForSelector('[data-testid="mainpage_title"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("list-card").first().click();
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.waitForSelector('[data-testid="icon-LockOpen"]', {
+      timeout: 3000,
+    });
+    expect(page.getByTestId("icon-LockOpen")).toBeVisible();
+  },
+);