From 89aebc9eca0410e909d793b03df5f9eb4fb0edb0 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Tue, 4 Aug 2026 12:37:22 +0530 Subject: [PATCH 1/2] Disable node dragging and conditionally display Source section Signed-off-by: kumaradityaraj --- .../src/react-flow/diagram/Diagram.tsx | 3 ++- .../src/side-panel/NodeDetailsView.tsx | 4 ++-- .../tests/react-flow/diagram/Diagram.test.tsx | 3 ++- .../tests/side-panel/NodeDetailsView.test.tsx | 16 ++++++++++++++++ 4 files changed, 22 insertions(+), 4 deletions(-) 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..599486b1 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 @@ -176,8 +176,9 @@ describe("Diagram Component", () => { // Verify that ReactFlow was called with nodesDraggable={true} and nodesConnectable={true} 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(); + }); }); }); From 767d0baa0bb9fc57790746abba39d6ce75fe9fdb Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Tue, 4 Aug 2026 12:45:13 +0530 Subject: [PATCH 2/2] copilot suggestion Signed-off-by: kumaradityaraj --- .../tests/react-flow/diagram/Diagram.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 599486b1..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,7 +173,7 @@ 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(false);