{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ handleOnNewValue();
+ }
+ }}
+ />
+ ),
+ }),
+);
+
+jest.mock("../utils/canvasUtils", () => ({
+ getModifierKey: jest.fn(() => "⌘"),
+}));
+
+describe("DropdownControlButton", () => {
+ const defaultProps = {
+ testId: "test-button",
+ label: "Test Button",
+ onClick: jest.fn(),
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("renders basic button with label", () => {
+ render(
);
+
+ expect(screen.getByTestId("test-button")).toBeInTheDocument();
+ expect(screen.getByText("Test Button")).toBeInTheDocument();
+ });
+
+ it("calls onClick handler when clicked", () => {
+ const mockOnClick = jest.fn();
+ render(
);
+
+ fireEvent.click(screen.getByTestId("test-button"));
+ expect(mockOnClick).toHaveBeenCalledTimes(1);
+ });
+
+ it("renders with icon when iconName is provided", () => {
+ render(
);
+
+ expect(screen.getByTestId("icon-test-icon")).toBeInTheDocument();
+ });
+
+ it("displays shortcut with modifier key", () => {
+ render(
);
+
+ expect(screen.getByText("⌘")).toBeInTheDocument();
+ expect(screen.getByText("+")).toBeInTheDocument();
+ });
+
+ it("applies disabled state correctly", () => {
+ render(
);
+
+ const button = screen.getByTestId("test-button");
+ expect(button).toBeDisabled();
+ });
+
+ it("sets tooltip text as title attribute", () => {
+ const tooltipText = "This is a tooltip";
+ render(
+
,
+ );
+
+ const button = screen.getByTestId("test-button");
+ expect(button).toHaveAttribute("title", tooltipText);
+ });
+
+ it("renders toggle component when hasToogle is true", () => {
+ render(
+
,
+ );
+
+ expect(screen.getByTestId("toggle-helper_lines")).toBeInTheDocument();
+ expect(screen.getByTestId("toggle-helper_lines")).toHaveAttribute(
+ "data-value",
+ "true",
+ );
+ });
+
+ it("passes toggle value correctly to toggle component", () => {
+ render(
+
,
+ );
+
+ expect(screen.getByTestId("toggle-helper_lines")).toHaveAttribute(
+ "data-value",
+ "false",
+ );
+ });
+
+ it("handles toggle click through onClick prop", () => {
+ const mockOnClick = jest.fn();
+ render(
+
,
+ );
+
+ fireEvent.click(screen.getByTestId("toggle-helper_lines"));
+ expect(mockOnClick).toHaveBeenCalled();
+ });
+
+ it("renders without shortcut when not provided", () => {
+ render(
);
+
+ expect(screen.queryByText("⌘")).not.toBeInTheDocument();
+ });
+
+ it("uses default onClick when not provided", () => {
+ render(
);
+
+ // Should not throw error when clicked
+ fireEvent.click(screen.getByTestId("test-button"));
+ });
+
+ it("applies correct CSS classes for disabled state", () => {
+ render(
);
+
+ const button = screen.getByTestId("test-button");
+ expect(button.className).toContain("cursor-not-allowed opacity-50");
+ });
+
+ it("renders empty label by default", () => {
+ render(
);
+
+ const button = screen.getByTestId("test-button");
+ expect(button).toBeInTheDocument();
+ });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
new file mode 100644
index 000000000..a3023dd64
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
@@ -0,0 +1,118 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, useNavigate } from "react-router-dom";
+import HelpDropdown from "../HelpDropdown";
+
+jest.mock("@/components/ui/button", () => ({
+ Button: ({ children, ...props }: any) => (
+
+ ),
+}));
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+ DropdownMenu: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+ DropdownMenuContent: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+ Separator: () =>
,
+}));
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+ __esModule: true,
+ default: () =>
,
+ ForwardedIconComponent: ({ name }: { name: string }) => (
+
+ ),
+}));
+
+jest.mock("@/constants/constants", () => ({
+ __esModule: true,
+ DATASTAX_DOCS_URL: "https://docs.datastax.com",
+ DOCS_URL: "https://docs.langflow.org",
+ DESKTOP_URL: "https://desktop.langflow.org",
+}));
+
+jest.mock("@/customization/feature-flags", () => ({
+ ENABLE_DATASTAX_LANGFLOW: false,
+}));
+
+jest.mock("@/utils/utils", () => ({
+ cn: (...args: any[]) => args.filter(Boolean).join(" "),
+ getOS: () => "macos",
+}));
+
+jest.mock("react-router-dom", () => {
+ const actual = jest.requireActual("react-router-dom");
+ return {
+ ...actual,
+ useNavigate: jest.fn(),
+ };
+});
+
+jest.mock("@/stores/darkStore", () => ({
+ useDarkStore: () => ({
+ dark: false,
+ setDark: jest.fn(),
+ }),
+}));
+
+jest.mock("@/stores/flowStore", () => ({
+ __esModule: true,
+ default: () => ({
+ helperLineEnabled: false,
+ setHelperLineEnabled: jest.fn(),
+ }),
+}));
+
+// Mock window.open
+Object.defineProperty(window, "open", {
+ writable: true,
+ value: jest.fn(),
+});
+
+describe("HelpDropdown", () => {
+ beforeEach(() => {
+ (window.open as jest.Mock).mockClear();
+ });
+
+ it("opens docs in new tab and navigates to shortcuts", () => {
+ const mockNavigate = jest.fn();
+ (useNavigate as unknown as jest.Mock).mockReturnValue(mockNavigate);
+
+ render(
+
+ {}} />
+ ,
+ );
+
+ fireEvent.click(screen.getByTestId("canvas_controls_dropdown_docs"));
+ expect(window.open).toHaveBeenCalledWith(
+ "https://docs.langflow.org",
+ "_blank",
+ );
+
+ fireEvent.click(screen.getByTestId("canvas_controls_dropdown_shortcuts"));
+ expect(mockNavigate).toHaveBeenCalledWith("/settings/shortcuts");
+
+ fireEvent.click(
+ screen.getByTestId("canvas_controls_dropdown_get_langflow_desktop"),
+ );
+ expect(window.open).toHaveBeenCalledWith(
+ "https://desktop.langflow.org",
+ "_blank",
+ );
+ });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx
new file mode 100644
index 000000000..557e624f1
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx
@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { HelpDropdownView } from "../HelpDropdownView";
+
+jest.mock("@/components/ui/button", () => ({
+ Button: ({ children, ...rest }) =>
,
+}));
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+ DropdownMenu: ({ children, open, onOpenChange }) => (
+
+
+
+ ),
+ DropdownMenuContent: ({ children }) => (
+
{children}
+ ),
+ DropdownMenuTrigger: ({ children }) => (
+
{children}
+ ),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+ Separator: () =>
,
+}));
+
+jest.mock("../DropdownControlButton", () => ({
+ __esModule: true,
+ default: ({ label, onClick, disabled, testId }) => (
+
+ ),
+}));
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+ __esModule: true,
+ default: ({ name }) =>
{name},
+}));
+
+// Minimize utils import surface (prevents pulling heavy modules)
+jest.mock("@/utils/utils", () => ({
+ __esModule: true,
+ getOS: () => "macos",
+ cn: (...args: Array
) => args.filter(Boolean).join(" "),
+}));
+
+describe("HelpDropdownView", () => {
+ it("calls provided handlers for each menu item", () => {
+ const onOpenChange = jest.fn();
+ const onToggleHelperLines = jest.fn();
+ const navigateTo = jest.fn();
+ const openLink = jest.fn();
+ const urls = {
+ docs: "https://docs",
+ bugReport: "https://bugs",
+ desktop: "https://desktop",
+ };
+
+ render(
+ ,
+ );
+
+ fireEvent.click(screen.getByTestId("canvas_controls_dropdown_docs"));
+ expect(openLink).toHaveBeenCalledWith("https://docs");
+
+ fireEvent.click(screen.getByTestId("canvas_controls_dropdown_shortcuts"));
+ expect(navigateTo).toHaveBeenCalledWith("/settings/shortcuts");
+
+ fireEvent.click(
+ screen.getByTestId("canvas_controls_dropdown_report_a_bug"),
+ );
+ expect(openLink).toHaveBeenCalledWith("https://bugs");
+
+ fireEvent.click(
+ screen.getByTestId("canvas_controls_dropdown_get_langflow_desktop"),
+ );
+ expect(openLink).toHaveBeenCalledWith("https://desktop");
+
+ fireEvent.click(
+ screen.getByTestId("canvas_controls_dropdown_enable_smart_guides"),
+ );
+ expect(onToggleHelperLines).toHaveBeenCalled();
+ });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts b/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts
new file mode 100644
index 000000000..eb5335771
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts
@@ -0,0 +1,257 @@
+import { ReactFlowState } from "@xyflow/react";
+import {
+ formatZoomPercentage,
+ getModifierKey,
+ reactFlowSelector,
+} from "../utils/canvasUtils";
+
+// Mock the getOS utility
+jest.mock("@/utils/utils", () => ({
+ getOS: jest.fn(),
+}));
+
+import { getOS } from "@/utils/utils";
+
+const mockGetOS = getOS as jest.MockedFunction;
+
+describe("canvasUtils", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("getModifierKey", () => {
+ it("returns ⌘ for macOS", () => {
+ mockGetOS.mockReturnValue("macos");
+ expect(getModifierKey()).toBe("⌘");
+ });
+
+ it("returns Ctrl for Windows", () => {
+ mockGetOS.mockReturnValue("windows");
+ expect(getModifierKey()).toBe("Ctrl");
+ });
+
+ it("returns Ctrl for Linux", () => {
+ mockGetOS.mockReturnValue("linux");
+ expect(getModifierKey()).toBe("Ctrl");
+ });
+
+ it("returns Ctrl for unknown OS", () => {
+ mockGetOS.mockReturnValue("unknown");
+ expect(getModifierKey()).toBe("Ctrl");
+ });
+ });
+
+ describe("formatZoomPercentage", () => {
+ it("formats zoom level 1 as 100%", () => {
+ expect(formatZoomPercentage(1)).toBe("100%");
+ });
+
+ it("formats zoom level 0.5 as 50%", () => {
+ expect(formatZoomPercentage(0.5)).toBe("50%");
+ });
+
+ it("formats zoom level 1.5 as 150%", () => {
+ expect(formatZoomPercentage(1.5)).toBe("150%");
+ });
+
+ it("formats zoom level 0.25 as 25%", () => {
+ expect(formatZoomPercentage(0.25)).toBe("25%");
+ });
+
+ it("formats zoom level 2.789 as 279%", () => {
+ expect(formatZoomPercentage(2.789)).toBe("279%");
+ });
+
+ it("rounds decimal values correctly", () => {
+ expect(formatZoomPercentage(0.333)).toBe("33%");
+ expect(formatZoomPercentage(0.666)).toBe("67%");
+ expect(formatZoomPercentage(1.234)).toBe("123%");
+ });
+
+ it("handles zero zoom level", () => {
+ expect(formatZoomPercentage(0)).toBe("0%");
+ });
+
+ it("handles very small zoom levels", () => {
+ expect(formatZoomPercentage(0.001)).toBe("0%");
+ expect(formatZoomPercentage(0.005)).toBe("1%");
+ });
+
+ it("handles very large zoom levels", () => {
+ expect(formatZoomPercentage(10)).toBe("1000%");
+ expect(formatZoomPercentage(50.5)).toBe("5050%");
+ });
+ });
+
+ describe("reactFlowSelector", () => {
+ const createMockReactFlowState = (
+ overrides: Partial = {},
+ ): ReactFlowState =>
+ ({
+ nodesDraggable: true,
+ nodesConnectable: true,
+ elementsSelectable: true,
+ transform: [0, 0, 1], // x, y, zoom
+ minZoom: 0.1,
+ maxZoom: 5,
+ ...overrides,
+ }) as ReactFlowState;
+
+ it("returns correct isInteractive when all interaction modes are enabled", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: true,
+ nodesConnectable: true,
+ elementsSelectable: true,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.isInteractive).toBe(true);
+ });
+
+ it("returns correct isInteractive when only nodesDraggable is enabled", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: true,
+ nodesConnectable: false,
+ elementsSelectable: false,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.isInteractive).toBe(true);
+ });
+
+ it("returns correct isInteractive when only nodesConnectable is enabled", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: false,
+ nodesConnectable: true,
+ elementsSelectable: false,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.isInteractive).toBe(true);
+ });
+
+ it("returns correct isInteractive when only elementsSelectable is enabled", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: false,
+ nodesConnectable: false,
+ elementsSelectable: true,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.isInteractive).toBe(true);
+ });
+
+ it("returns false for isInteractive when all interaction modes are disabled", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: false,
+ nodesConnectable: false,
+ elementsSelectable: false,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.isInteractive).toBe(false);
+ });
+
+ it("returns correct minZoomReached when zoom is at minimum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 0.1], // zoom at minZoom
+ minZoom: 0.1,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.minZoomReached).toBe(true);
+ });
+
+ it("returns correct minZoomReached when zoom is below minimum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 0.05], // zoom below minZoom
+ minZoom: 0.1,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.minZoomReached).toBe(true);
+ });
+
+ it("returns correct minZoomReached when zoom is above minimum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 0.5], // zoom above minZoom
+ minZoom: 0.1,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.minZoomReached).toBe(false);
+ });
+
+ it("returns correct maxZoomReached when zoom is at maximum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 5], // zoom at maxZoom
+ maxZoom: 5,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.maxZoomReached).toBe(true);
+ });
+
+ it("returns correct maxZoomReached when zoom is above maximum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 10], // zoom above maxZoom
+ maxZoom: 5,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.maxZoomReached).toBe(true);
+ });
+
+ it("returns correct maxZoomReached when zoom is below maximum", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 2], // zoom below maxZoom
+ maxZoom: 5,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.maxZoomReached).toBe(false);
+ });
+
+ it("returns correct zoom level from transform", () => {
+ const state = createMockReactFlowState({
+ transform: [100, 200, 1.5], // x, y, zoom
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.zoom).toBe(1.5);
+ });
+
+ it("handles edge case where zoom equals both min and max", () => {
+ const state = createMockReactFlowState({
+ transform: [0, 0, 1],
+ minZoom: 1,
+ maxZoom: 1,
+ });
+
+ const result = reactFlowSelector(state);
+ expect(result.minZoomReached).toBe(true);
+ expect(result.maxZoomReached).toBe(true);
+ expect(result.zoom).toBe(1);
+ });
+
+ it("returns complete selector object with all properties", () => {
+ const state = createMockReactFlowState({
+ nodesDraggable: true,
+ nodesConnectable: false,
+ elementsSelectable: true,
+ transform: [0, 0, 2],
+ minZoom: 0.5,
+ maxZoom: 4,
+ });
+
+ const result = reactFlowSelector(state);
+
+ expect(result).toEqual({
+ isInteractive: true,
+ minZoomReached: false,
+ maxZoomReached: false,
+ zoom: 2,
+ });
+ });
+ });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/index.tsx b/src/frontend/src/components/core/canvasControlsComponent/index.tsx
deleted file mode 100644
index e4129a994..000000000
--- a/src/frontend/src/components/core/canvasControlsComponent/index.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import {
- ControlButton,
- Panel,
- type ReactFlowState,
- useReactFlow,
- useStore,
- useStoreApi,
-} from "@xyflow/react";
-import { cloneDeep } from "lodash";
-import { useCallback, useEffect } from "react";
-import { useShallow } from "zustand/react/shallow";
-import { shallow } from "zustand/shallow";
-import IconComponent from "@/components/common/genericIconComponent";
-import ShadTooltip from "@/components/common/shadTooltipComponent";
-import useSaveFlow from "@/hooks/flows/use-save-flow";
-import useFlowStore from "@/stores/flowStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
-import { cn } from "@/utils/utils";
-
-type CustomControlButtonProps = {
- iconName: string;
- tooltipText: string;
- onClick: () => void;
- disabled?: boolean;
- backgroundClasses?: string;
- iconClasses?: string;
- testId?: string;
-};
-
-export const CustomControlButton = ({
- iconName,
- tooltipText,
- onClick,
- disabled,
- backgroundClasses,
- iconClasses,
- testId,
-}: CustomControlButtonProps): JSX.Element => {
- return (
-
-
-
-
-
-
-
- );
-};
-
-const selector = (s: ReactFlowState) => ({
- isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
- minZoomReached: s.transform[2] <= s.minZoom,
- maxZoomReached: s.transform[2] >= s.maxZoom,
-});
-
-const CanvasControls = ({ children }) => {
- const store = useStoreApi();
- const { fitView, zoomIn, zoomOut } = useReactFlow();
- const { isInteractive, minZoomReached, maxZoomReached } = useStore(
- selector,
- shallow,
- );
- const saveFlow = useSaveFlow();
- const isLocked = useFlowStore(
- useShallow((state) => state.currentFlow?.locked),
- );
- const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
- const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
- const setHelperLineEnabled = useFlowStore(
- (state) => state.setHelperLineEnabled,
- );
- const helperLineEnabled = useFlowStore((state) => state.helperLineEnabled);
-
- useEffect(() => {
- store.setState({
- nodesDraggable: !isLocked,
- nodesConnectable: !isLocked,
- elementsSelectable: !isLocked,
- });
- }, [isLocked]);
-
- const handleSaveFlow = useCallback(() => {
- const currentFlow = useFlowStore.getState().currentFlow;
- if (!currentFlow) return;
- const newFlow = cloneDeep(currentFlow);
- newFlow.locked = isInteractive;
- if (autoSaving) {
- saveFlow(newFlow);
- } else {
- setCurrentFlow(newFlow);
- }
- }, [isInteractive, autoSaving, saveFlow, setCurrentFlow]);
-
- const onToggleInteractivity = useCallback(() => {
- store.setState({
- nodesDraggable: !isInteractive,
- nodesConnectable: !isInteractive,
- elementsSelectable: !isInteractive,
- });
- handleSaveFlow();
- }, [isInteractive, store, handleSaveFlow]);
-
- const onToggleHelperLines = useCallback(() => {
- setHelperLineEnabled(!helperLineEnabled);
- }, [setHelperLineEnabled, helperLineEnabled]);
-
- return (
-
- {/* Zoom In */}
-
- {/* Zoom Out */}
-
- {/* Zoom To Fit */}
-
- {children}
- {/* Lock/Unlock */}
-
- {/* Display Helper Lines */}
-
-
- );
-};
-
-export default CanvasControls;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts b/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts
new file mode 100644
index 000000000..7fc464915
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts
@@ -0,0 +1,17 @@
+import { ReactFlowState } from "@xyflow/react";
+import { getOS } from "@/utils/utils";
+
+export const getModifierKey = (): string => {
+ const os = getOS();
+ return os === "macos" ? "⌘" : "Ctrl";
+};
+
+export const formatZoomPercentage = (zoom: number): string =>
+ `${Math.round(zoom * 100)}%`;
+
+export const reactFlowSelector = (s: ReactFlowState) => ({
+ isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
+ minZoomReached: s.transform[2] <= s.minZoom,
+ maxZoomReached: s.transform[2] >= s.maxZoom,
+ zoom: s.transform[2],
+});
diff --git a/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx
new file mode 100644
index 000000000..56010b8ac
--- /dev/null
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx
@@ -0,0 +1,99 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import EditFlowSettings from "../index";
+
+jest.mock("@/components/ui/input", () => ({
+ Input: ({ ...props }) => ,
+}));
+jest.mock("@/components/ui/textarea", () => ({
+ Textarea: ({ ...props }) => ,
+}));
+jest.mock("@/components/ui/switch", () => ({
+ Switch: ({ checked, onCheckedChange, ...rest }) => (
+ onCheckedChange?.(e.target.checked)}
+ {...rest}
+ />
+ ),
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+ __esModule: true,
+ default: () => ,
+}));
+// Mock Radix Form to avoid context requirement
+jest.mock("@radix-ui/react-form", () => ({
+ __esModule: true,
+ Field: ({ children }) => {children}
,
+ Label: ({ children }) => ,
+ Control: ({ children }) => <>{children},
+ Message: ({ children }) => {children}
,
+ Root: ({ children }) => ,
+}));
+
+// Prevent importing utils that pull darkStore via side-effects
+jest.mock("@/utils/utils", () => ({
+ __esModule: true,
+ cn: (...args) => args.filter(Boolean).join(" "),
+}));
+
+describe("EditFlowSettings", () => {
+ it("validates name and shows messages", () => {
+ const setName = jest.fn();
+ render(
+ ,
+ );
+
+ const nameInput = screen.getByTestId("input-flow-name");
+ fireEvent.change(nameInput, { target: { value: "T" } });
+ expect(setName).toHaveBeenCalledWith("T");
+
+ fireEvent.change(nameInput, { target: { value: "" } });
+ expect(screen.getByText(/Please enter a name/)).toBeInTheDocument();
+
+ fireEvent.change(nameInput, { target: { value: "Taken" } });
+ expect(screen.getAllByText(/already exists/).length).toBeGreaterThan(0);
+ });
+
+ it("submits with Enter in description without Shift", () => {
+ const submitForm = jest.fn();
+ render(
+ ,
+ );
+
+ const desc = screen.getByTestId("input-flow-description");
+ fireEvent.keyDown(desc, { key: "Enter", shiftKey: false });
+ expect(submitForm).toHaveBeenCalled();
+ });
+
+ it("toggles lock switch", () => {
+ const setLocked = jest.fn();
+ render(
+ ,
+ );
+ const sw = screen.getByTestId("lock-flow-switch");
+ fireEvent.click(sw);
+ expect(setLocked).toHaveBeenCalledWith(true);
+ });
+});
diff --git a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
index 13a386038..a495405b0 100644
--- a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
@@ -1,13 +1,19 @@
import * as Form from "@radix-ui/react-form";
import type React from "react";
import { useState } from "react";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Switch } from "@/components/ui/switch";
import type { InputProps } from "../../../types/components";
import { cn } from "../../../utils/utils";
import { Input } from "../../ui/input";
import { Textarea } from "../../ui/textarea";
export const EditFlowSettings: React.FC<
- InputProps & { submitForm?: () => void }
+ InputProps & {
+ submitForm?: () => void;
+ locked?: boolean;
+ setLocked?: (v: boolean) => void;
+ }
> = ({
name,
invalidNameList = [],
@@ -18,7 +24,13 @@ export const EditFlowSettings: React.FC<
setName,
setDescription,
submitForm,
-}: InputProps & { submitForm?: () => void }): JSX.Element => {
+ locked = false,
+ setLocked,
+}: InputProps & {
+ submitForm?: () => void;
+ locked?: boolean;
+ setLocked?: (v: boolean) => void;
+}): JSX.Element => {
const [isMaxLength, setIsMaxLength] = useState(false);
const [isMaxDescriptionLength, setIsMaxDescriptionLength] = useState(false);
const [isMinLength, setIsMinLength] = useState(false);
@@ -110,6 +122,7 @@ export const EditFlowSettings: React.FC<
onDoubleClickCapture={handleFocus}
data-testid="input-flow-name"
autoFocus
+ disabled={locked}
/>
) : (
@@ -128,7 +141,7 @@ export const EditFlowSettings: React.FC<
-
+
Description{setDescription ? "" : ":"}
@@ -150,6 +163,7 @@ export const EditFlowSettings: React.FC<
maxLength={descriptionMaxLength}
onDoubleClickCapture={handleFocus}
onKeyDown={handleDescriptionKeyDown}
+ disabled={locked}
/>
) : (
@@ -165,6 +179,19 @@ export const EditFlowSettings: React.FC<
Please enter a description
+
+
+ Lock Flow
+ setLocked?.(v)}
+ className="data-[state=checked]:bg-primary ml-auto"
+ data-testid="lock-flow-switch"
+ />
+
);
diff --git a/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx b/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx
new file mode 100644
index 000000000..86726e206
--- /dev/null
+++ b/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx
@@ -0,0 +1,174 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import FlowSettingsComponent from "../index";
+
+jest.mock("@/components/ui/button", () => ({
+ Button: ({ children, loading, ...rest }) => (
+
+ ),
+}));
+
+// Simplify Radix Form to a native form that respects onSubmit
+jest.mock("@radix-ui/react-form", () => ({
+ __esModule: true,
+ Root: React.forwardRef
(
+ ({ children, onSubmit }, ref) => (
+
+ ),
+ ),
+ Submit: ({ asChild, children }) => {
+ if (asChild && React.isValidElement(children)) {
+ return React.cloneElement(children as any, { type: "submit" });
+ }
+ return ;
+ },
+}));
+
+const mockSave = jest.fn();
+jest.mock("@/hooks/flows/use-save-flow", () => ({
+ __esModule: true,
+ default: () => mockSave,
+}));
+
+let mockSetSuccessData = jest.fn();
+jest.mock("@/stores/alertStore", () => ({
+ __esModule: true,
+ default: (sel) => sel({ setSuccessData: mockSetSuccessData }),
+}));
+
+let mockSetCurrentFlow = jest.fn();
+jest.mock("@/stores/flowStore", () => ({
+ __esModule: true,
+ default: (sel) =>
+ sel({
+ currentFlow: {
+ id: "1",
+ name: "Flow",
+ description: "Desc",
+ locked: false,
+ },
+ setCurrentFlow: mockSetCurrentFlow,
+ }),
+}));
+
+let mockAutoSaving = false;
+let mockFlows: Array<{ name: string }> = [];
+jest.mock("@/stores/flowsManagerStore", () => ({
+ __esModule: true,
+ default: (sel) => sel({ autoSaving: mockAutoSaving, flows: mockFlows }),
+}));
+
+// Mock EditFlowSettings to expose simple controls that call the provided setters
+jest.mock("@/components/core/editFlowSettingsComponent", () => ({
+ __esModule: true,
+ default: ({
+ setName,
+ setDescription,
+ setLocked,
+ }: {
+ setName?: (v: string) => void;
+ setDescription?: (v: string) => void;
+ setLocked?: (v: boolean) => void;
+ }) => (
+
+
+
+
+
+
+ ),
+}));
+
+describe("FlowSettingsComponent", () => {
+ const baseFlow = {
+ id: "1",
+ name: "Flow",
+ description: "Desc",
+ locked: false,
+ } as any;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ mockAutoSaving = false;
+ mockFlows = [{ name: "Flow" }, { name: "Other" }];
+ mockSetSuccessData = jest.fn();
+ mockSetCurrentFlow = jest.fn();
+ });
+
+ it("renders and disables save when no changes", () => {
+ render( {}} />);
+ const saveBtn = screen.getByTestId("save-flow-settings");
+ expect(saveBtn).toBeDisabled();
+ });
+
+ it("enables save when name changes and autoSaving true triggers saveFlow and success", async () => {
+ mockAutoSaving = true;
+ mockSave.mockResolvedValueOnce(undefined);
+ const onClose = jest.fn();
+
+ render();
+
+ fireEvent.click(screen.getByTestId("set-name-new"));
+ const saveBtn = screen.getByTestId("save-flow-settings");
+ expect(saveBtn).not.toBeDisabled();
+
+ fireEvent.click(saveBtn);
+
+ // Wait microtask queue to resolve promise chain
+ await Promise.resolve();
+
+ expect(mockSave).toHaveBeenCalledWith(
+ expect.objectContaining({ name: "New Name" }),
+ );
+ expect(mockSetSuccessData).toHaveBeenCalledWith({
+ title: "Changes saved successfully",
+ });
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ it("non-autoSaving path sets current flow and closes", () => {
+ mockAutoSaving = false;
+ const onClose = jest.fn();
+
+ render();
+
+ fireEvent.click(screen.getByTestId("set-desc-new"));
+ const saveBtn = screen.getByTestId("save-flow-settings");
+ expect(saveBtn).not.toBeDisabled();
+ fireEvent.click(saveBtn);
+
+ expect(mockSetCurrentFlow).toHaveBeenCalledWith(
+ expect.objectContaining({ description: "New Desc" }),
+ );
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ it("prevents saving when name is taken", () => {
+ mockFlows = [{ name: "Taken" }, { name: "Flow" }];
+
+ render( {}} />);
+
+ fireEvent.click(screen.getByTestId("set-name-taken"));
+ expect(screen.getByTestId("save-flow-settings")).toBeDisabled();
+ });
+
+ it("clicking cancel calls close", () => {
+ const onClose = jest.fn();
+ render();
+ fireEvent.click(screen.getByTestId("cancel-flow-settings"));
+ expect(onClose).toHaveBeenCalled();
+ });
+});
diff --git a/src/frontend/src/components/core/flowSettingsComponent/index.tsx b/src/frontend/src/components/core/flowSettingsComponent/index.tsx
index 8c3975ed8..24526bc5f 100644
--- a/src/frontend/src/components/core/flowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/flowSettingsComponent/index.tsx
@@ -9,15 +9,54 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
import type { FlowType } from "@/types/flow";
import EditFlowSettings from "../editFlowSettingsComponent";
-export default function FlowSettingsComponent({
- flowData,
- close,
- open,
-}: {
+type FlowSettingsComponentProps = {
flowData?: FlowType;
close: () => void;
open: boolean;
-}): JSX.Element {
+};
+
+const updateFlowWithFormValues = (
+ baseFlow: FlowType,
+ newName: string,
+ newDescription: string,
+ newLocked: boolean,
+): FlowType => {
+ const newFlow = cloneDeep(baseFlow);
+ newFlow.name = newName;
+ newFlow.description = newDescription;
+ newFlow.locked = newLocked;
+ return newFlow;
+};
+
+const buildInvalidNameList = (
+ allFlows: FlowType[] | undefined,
+ currentFlowName: string | undefined,
+): string[] => {
+ if (!allFlows) return [];
+ const names = allFlows.map((f) => f?.name ?? "");
+ return names.filter((n) => n !== (currentFlowName ?? ""));
+};
+
+const isSaveDisabled = (
+ flow: FlowType | undefined,
+ invalidNameList: string[],
+ name: string,
+ description: string,
+ locked: boolean,
+): boolean => {
+ if (!flow) return true;
+ const isNameChangedAndValid =
+ !invalidNameList.includes(name) && flow.name !== name;
+ const isDescriptionChanged = flow.description !== description;
+ const isLockedChanged = flow.locked !== locked;
+ return !(isNameChangedAndValid || isDescriptionChanged || isLockedChanged);
+};
+
+const FlowSettingsComponent = ({
+ flowData,
+ close,
+ open,
+}: FlowSettingsComponentProps): JSX.Element => {
const saveFlow = useSaveFlow();
const currentFlow = useFlowStore((state) =>
flowData ? undefined : state.currentFlow,
@@ -28,6 +67,7 @@ export default function FlowSettingsComponent({
const flow = flowData ?? currentFlow;
const [name, setName] = useState(flow?.name ?? "");
const [description, setDescription] = useState(flow?.description ?? "");
+ const [locked, setLocked] = useState(flow?.locked ?? false);
const [isSaving, setIsSaving] = useState(false);
const [disableSave, setDisableSave] = useState(true);
const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
@@ -36,15 +76,14 @@ export default function FlowSettingsComponent({
useEffect(() => {
setName(flow?.name ?? "");
setDescription(flow?.description ?? "");
+ setLocked(flow?.locked ?? false);
}, [flow?.name, flow?.description, flow?.endpoint_name, open]);
function handleSubmit(event?: React.FormEvent): void {
if (event) event.preventDefault();
setIsSaving(true);
if (!flow) return;
- const newFlow = cloneDeep(flow);
- newFlow.name = name;
- newFlow.description = description;
+ const newFlow = updateFlowWithFormValues(flow, name, description, locked);
if (autoSaving) {
saveFlow(newFlow)
@@ -70,25 +109,12 @@ export default function FlowSettingsComponent({
const [nameLists, setNameList] = useState([]);
useEffect(() => {
- if (flows) {
- const tempNameList: string[] = [];
- flows.forEach((flow: FlowType) => {
- tempNameList.push(flow?.name ?? "");
- });
- setNameList(tempNameList.filter((name) => name !== (flow?.name ?? "")));
- }
+ setNameList(buildInvalidNameList(flows, flow?.name));
}, [flows]);
useEffect(() => {
- if (
- (!nameLists.includes(name) && flow?.name !== name) ||
- flow?.description !== description
- ) {
- setDisableSave(false);
- } else {
- setDisableSave(true);
- }
- }, [nameLists, flow, description, name]);
+ setDisableSave(isSaveDisabled(flow, nameLists, name, description, locked));
+ }, [nameLists, flow, description, name, locked]);
return (
@@ -100,6 +126,8 @@ export default function FlowSettingsComponent({
setName={setName}
setDescription={setDescription}
submitForm={submitForm}
+ locked={locked}
+ setLocked={setLocked}
/>
@@ -127,4 +155,6 @@ export default function FlowSettingsComponent({
);
-}
+};
+
+export default FlowSettingsComponent;
diff --git a/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx b/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
new file mode 100644
index 000000000..a1616d180
--- /dev/null
+++ b/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import LogCanvasControls from "../index";
+
+jest.mock("@/modals/flowLogsModal", () => ({
+ __esModule: true,
+ default: ({ children }) => {children}
,
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+ __esModule: true,
+ default: () => ,
+}));
+jest.mock("@xyflow/react", () => ({
+ Panel: ({ children, ...rest }) => {children}
,
+}));
+jest.mock("@/components/ui/button", () => ({
+ Button: ({ children, ...rest }) => ,
+}));
+
+describe("LogCanvasControls", () => {
+ it("renders panel and button", () => {
+ render();
+ expect(screen.getByTestId("canvas_controls")).toBeInTheDocument();
+ expect(screen.getByText("Logs")).toBeInTheDocument();
+ });
+});
diff --git a/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx b/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
index 2aca124ed..2bd7fe569 100644
--- a/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
+++ b/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
@@ -7,8 +7,8 @@ const LogCanvasControls = () => {
return (