diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 289064c3fe..ba1a7ba485 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -1,3 +1,6 @@
+import { memo, useMemo, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useShallow } from "zustand/react/shallow";
import IconComponent from "@/components/common/genericIconComponent";
import ShadTooltip from "@/components/common/shadTooltipComponent";
import FlowSettingsComponent from "@/components/core/flowSettingsComponent";
@@ -20,9 +23,6 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { useShortcutsStore } from "@/stores/shortcuts";
import { swatchColors } from "@/utils/styleUtils";
import { cn, getNumberFromString } from "@/utils/utils";
-import { memo, useMemo, useRef, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-import { useShallow } from "zustand/react/shallow";
export const MenuBar = memo((): JSX.Element => {
const setSuccessData = useAlertStore((state) => state.setSuccessData);
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
index 23f9739e1c..456eb057ea 100644
--- a/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
@@ -1,5 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import CanvasControls from '../index';
+import { fireEvent, render, screen } from "@testing-library/react";
+import CanvasControls from "../index";
// Capture flow functions for assertions
const reactFlowFns = {
@@ -10,8 +10,12 @@ const reactFlowFns = {
};
// Mocks for external dependencies used internally
-jest.mock('@xyflow/react', () => ({
- Panel: ({ children, ...props }: any) =>
{children}
,
+jest.mock("@xyflow/react", () => ({
+ Panel: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
useReactFlow: () => reactFlowFns,
useStore: (_selector: any) => ({
isInteractive: true,
@@ -22,38 +26,40 @@ jest.mock('@xyflow/react', () => ({
useStoreApi: () => ({ setState: jest.fn() }),
}));
-jest.mock('@/stores/flowStore', () => ({
+jest.mock("@/stores/flowStore", () => ({
__esModule: true,
default: jest.fn(() => false),
}));
-jest.mock('@/components/ui/separator', () => ({
- Separator: ({ orientation }: { orientation: 'vertical' | 'horizontal' }) => (
+jest.mock("@/components/ui/separator", () => ({
+ Separator: ({ orientation }: { orientation: "vertical" | "horizontal" }) => (
),
}));
// Mock dropdowns to a simple render that exposes props for assertions
-jest.mock('../dropdowns', () => ({
+jest.mock("../dropdowns", () => ({
CanvasControlsDropdown: (props: any) => (
),
- HelpDropdown: (props: any) => (
-
- ),
+ HelpDropdown: (props: any) => ,
}));
-describe('CanvasControls', () => {
- it('renders panel and separators when children present', () => {
- render(child
);
- expect(screen.getByTestId('main_canvas_controls')).toBeInTheDocument();
- const seps = screen.getAllByTestId('separator-vertical');
+describe("CanvasControls", () => {
+ it("renders panel and separators when children present", () => {
+ render(
+
+ child
+ ,
+ );
+ expect(screen.getByTestId("main_canvas_controls")).toBeInTheDocument();
+ const seps = screen.getAllByTestId("separator-vertical");
expect(seps.length).toBeGreaterThanOrEqual(1);
- expect(screen.getByTestId('controls-dropdown')).toBeInTheDocument();
- expect(screen.getByTestId('help-dropdown')).toBeInTheDocument();
+ expect(screen.getByTestId("controls-dropdown")).toBeInTheDocument();
+ expect(screen.getByTestId("help-dropdown")).toBeInTheDocument();
});
- it('handles keyboard shortcuts with meta/ctrl keys', () => {
+ it("handles keyboard shortcuts with meta/ctrl keys", () => {
render();
reactFlowFns.fitView.mockClear();
reactFlowFns.zoomIn.mockClear();
@@ -61,13 +67,13 @@ describe('CanvasControls', () => {
reactFlowFns.zoomTo.mockClear();
// Press + (Equal) with meta
- fireEvent.keyDown(document, { key: '+', code: 'Equal', metaKey: true });
+ fireEvent.keyDown(document, { key: "+", code: "Equal", metaKey: true });
// Press - (Minus) with ctrl
- fireEvent.keyDown(document, { key: '-', code: 'Minus', ctrlKey: true });
+ fireEvent.keyDown(document, { key: "-", code: "Minus", ctrlKey: true });
// Press 1 (Digit1) with meta
- fireEvent.keyDown(document, { key: '1', code: 'Digit1', metaKey: true });
+ fireEvent.keyDown(document, { key: "1", code: "Digit1", metaKey: true });
// Press 0 (Digit0) with ctrl
- fireEvent.keyDown(document, { key: '0', code: 'Digit0', ctrlKey: true });
+ fireEvent.keyDown(document, { key: "0", code: "Digit0", ctrlKey: true });
expect(reactFlowFns.zoomIn).toHaveBeenCalled();
expect(reactFlowFns.zoomOut).toHaveBeenCalled();
@@ -75,5 +81,3 @@ describe('CanvasControls', () => {
expect(reactFlowFns.zoomTo).toHaveBeenCalledWith(1);
});
});
-
-
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
index a83d56aa50..e7e9266b66 100644
--- a/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
@@ -1,52 +1,68 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter, useNavigate } from 'react-router-dom';
-import { CanvasControlsDropdown, HelpDropdown } from '../dropdowns';
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, useNavigate } from "react-router-dom";
+import { CanvasControlsDropdown, HelpDropdown } from "../dropdowns";
-jest.mock('@/components/ui/button', () => ({
- Button: ({ children, ...props }: any) => ,
+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/dropdown-menu", () => ({
+ DropdownMenu: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+ DropdownMenuTrigger: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
+ DropdownMenuContent: ({ children, ...props }: any) => (
+
+ {children}
+
+ ),
}));
-jest.mock('@/components/ui/separator', () => ({
+jest.mock("@/components/ui/separator", () => ({
Separator: () => ,
}));
-jest.mock('@/components/common/genericIconComponent', () => ({
+jest.mock("@/components/common/genericIconComponent", () => ({
__esModule: true,
default: () => ,
- ForwardedIconComponent: ({ name }: { name: string }) => ,
+ ForwardedIconComponent: ({ name }: { name: string }) => (
+
+ ),
}));
-jest.mock('@/constants/constants', () => ({
+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',
+ DATASTAX_DOCS_URL: "https://docs.datastax.com",
+ DOCS_URL: "https://docs.langflow.org",
+ DESKTOP_URL: "https://desktop.langflow.org",
}));
-jest.mock('@/customization/feature-flags', () => ({
+jest.mock("@/customization/feature-flags", () => ({
ENABLE_DATASTAX_LANGFLOW: false,
}));
-jest.mock('@/utils/utils', () => ({
- cn: (...args: any[]) => args.filter(Boolean).join(' '),
- getOS: () => 'macos',
+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');
+jest.mock("react-router-dom", () => {
+ const actual = jest.requireActual("react-router-dom");
return {
...actual,
useNavigate: jest.fn(),
};
});
-describe('CanvasControlsDropdown', () => {
+describe("CanvasControlsDropdown", () => {
const baseProps = {
zoom: 1,
minZoomReached: false,
@@ -58,21 +74,21 @@ describe('CanvasControlsDropdown', () => {
onResetZoom: jest.fn(),
onFitView: jest.fn(),
shortcuts: {
- ZOOM_IN: { key: '+' },
- ZOOM_OUT: { key: '-' },
- RESET_ZOOM: { key: '0' },
- FIT_VIEW: { key: '1' },
+ ZOOM_IN: { key: "+" },
+ ZOOM_OUT: { key: "-" },
+ RESET_ZOOM: { key: "0" },
+ FIT_VIEW: { key: "1" },
},
};
- it('renders zoom percentage and calls handlers', () => {
+ it("renders zoom percentage and calls handlers", () => {
render();
- expect(screen.getByText('100%')).toBeInTheDocument();
+ expect(screen.getByText("100%")).toBeInTheDocument();
- fireEvent.click(screen.getByTestId('zoom_in_dropdown'));
- fireEvent.click(screen.getByTestId('zoom_out_dropdown'));
- fireEvent.click(screen.getByTestId('reset_zoom_dropdown'));
- fireEvent.click(screen.getByTestId('fit_view_dropdown'));
+ fireEvent.click(screen.getByTestId("zoom_in_dropdown"));
+ fireEvent.click(screen.getByTestId("zoom_out_dropdown"));
+ fireEvent.click(screen.getByTestId("reset_zoom_dropdown"));
+ fireEvent.click(screen.getByTestId("fit_view_dropdown"));
expect(baseProps.onZoomIn).toHaveBeenCalled();
expect(baseProps.onZoomOut).toHaveBeenCalled();
@@ -80,43 +96,49 @@ describe('CanvasControlsDropdown', () => {
expect(baseProps.onFitView).toHaveBeenCalled();
});
- it('disables buttons based on min/max zoom flags', () => {
+ it("disables buttons based on min/max zoom flags", () => {
render(
+ />,
);
- expect(screen.getByTestId('zoom_in_dropdown')).toBeDisabled();
- expect(screen.getByTestId('zoom_out_dropdown')).toBeDisabled();
+ expect(screen.getByTestId("zoom_in_dropdown")).toBeDisabled();
+ expect(screen.getByTestId("zoom_out_dropdown")).toBeDisabled();
});
});
-describe('HelpDropdown', () => {
+describe("HelpDropdown", () => {
beforeEach(() => {
(window.open as jest.Mock).mockClear();
});
- it('opens docs in new tab and navigates to shortcuts', () => {
+ 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_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_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');
+ 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/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
index daf0aa058f..a495405b0e 100644
--- a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
@@ -1,15 +1,19 @@
-import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import { Switch } from "@/components/ui/switch";
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; locked?: boolean; setLocked?: (v: boolean) => void }
+ InputProps & {
+ submitForm?: () => void;
+ locked?: boolean;
+ setLocked?: (v: boolean) => void;
+ }
> = ({
name,
invalidNameList = [],
@@ -22,7 +26,11 @@ export const EditFlowSettings: React.FC<
submitForm,
locked = false,
setLocked,
-}: InputProps & { submitForm?: () => void; locked?: boolean; setLocked?: (v: boolean) => void }): JSX.Element => {
+}: 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);
@@ -171,8 +179,11 @@ export const EditFlowSettings: React.FC<
Please enter a description
-
-
+
+
Lock Flow
-
>
);
};