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();
+ });
});
});