diff --git a/packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index a833798e..aa8534fe 100644 --- a/packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/open-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -164,6 +164,7 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => { zoomOnDoubleClick={false} elementsSelectable={true} panOnScroll={true} + panOnDrag={false} zoomOnScroll={false} preventScrolling={true} selectionOnDrag={true} @@ -178,7 +179,7 @@ export const Diagram = ({ divRef, ref, colorMode = "light" }: DiagramProps) => { }} data-testid={"react-flow-canvas"} elevateEdgesOnSelect={false} - nodesDraggable={!isReadOnly} + nodesDraggable={false} nodesConnectable={!isReadOnly} > {minimapVisible && ( diff --git a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx index 9e99c5d4..9104bbe7 100644 --- a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx +++ b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx @@ -51,7 +51,7 @@ function FieldRow({ label, field }: { label: string; field: DetailField }) { export function NodeDetailsView({ node }: NodeDetailsViewProps) { const { t } = useI18n(); - const { errors, nodeIds } = useDiagramEditorContext(); + const { errors, nodeIds, isReadOnly } = useDiagramEditorContext(); const task = node.data.task; const nodeErrors = getNodeErrors(errors, node.id, nodeIds); @@ -79,7 +79,7 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) { )} - {task !== undefined && ( + {isReadOnly && task !== undefined && ( <>
diff --git a/packages/open-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx b/packages/open-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx index e2262d9d..c08b6f93 100644 --- a/packages/open-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx +++ b/packages/open-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx @@ -173,11 +173,12 @@ describe("Diagram Component", () => { expect(ReactFlow).toHaveBeenCalled(); }); - // Verify that ReactFlow was called with nodesDraggable={true} and nodesConnectable={true} + // Verify that ReactFlow was called with nodesDraggable={false} and nodesConnectable={true} and panOnDrag={false} const mockReactFlow = vi.mocked(ReactFlow); const reactFlowProps = mockReactFlow.mock.calls[mockReactFlow.mock.calls.length - 1][0]; - expect(reactFlowProps.nodesDraggable).toBe(true); + expect(reactFlowProps.nodesDraggable).toBe(false); expect(reactFlowProps.nodesConnectable).toBe(true); + expect(reactFlowProps.panOnDrag).toBe(false); await waitFor(() => { expect(applyAutoLayoutSpy).toHaveBeenCalled(); diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx index 50143f22..52098a6a 100644 --- a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx +++ b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx @@ -161,5 +161,21 @@ describe("NodeDetailsView", () => { expect(screen.queryByTestId("sidebar-errors")).not.toBeInTheDocument(); expect(screen.getByText("Properties")).toBeInTheDocument(); }); + + it("does not render the Source section in editable mode", () => { + const task = { + call: "http", + with: { endpoint: "https://api.example.com" }, + }; + const node = makeNode({ label: "getPets", task }); + + const { container } = renderWithProviders(, { + isReadOnly: false, + }); + + expect(screen.queryByRole("heading", { name: "Source" })).not.toBeInTheDocument(); + expect(container.querySelector(".dec-sidebar-yaml-summary")).toBeNull(); + expect(container.querySelector(".dec-sidebar-yaml-pre")).toBeNull(); + }); }); });