fix: Creating edges is blocked in read-only mode (WB-339)

.changeset/pretty-months-thank.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': minor
+---
+
+fix: creating edges is blocked in read-only mode.

packages/sdk/src/features/diagram/diagram.tsx

@@ -3,7 +3,6 @@ import {
   type EdgeTypes,
   type NodeChange,
   type OnBeforeDelete,
-  type OnConnect,
   type OnNodeDrag,
   type OnSelectionChangeParams,
   ReactFlow,
@@ -31,6 +30,7 @@ import { SNAP_GRID, SNAP_IS_ACTIVE } from './diagram.const';
 import { TemporaryEdge } from './edges/temporary-edge/temporary-edge';
 import { useEdgeTypes } from './hooks/use-edge-types';
 import { useNodeTypes } from './hooks/use-node-types';
+import { useConnect } from './hooks/use-on-connect';
 import { useIsValidConnection } from './hooks/use-react-flow-config';
 import { callNodeChangedListeners } from './listeners/node-changed-listeners';
 import { callNodeDragStartListeners } from './listeners/node-drag-start-listeners';
@@ -84,14 +84,12 @@ function DiagramContainerComponent({ edgeTypes = {} }: DiagramContainerProps) {
     onEdgesChange,
     onEdgeMouseEnter,
     onEdgeMouseLeave,
-    onConnect: onConnectAction,
     onInit,
     onSelectionChange,
   } = useStore(diagramStateSelector);
 
   const { openDeleteConfirmationModal } = useDeleteConfirmation();
 
-  const setConnectionBeingDragged = useStore((store) => store.setConnectionBeingDragged);
   const nodeTypes = useNodeTypes();
   const isValidConnection = useIsValidConnection();
   // Plain read: the ancestor `<WorkflowBuilder.Root>` writes the holder during
@@ -129,28 +127,7 @@ function DiagramContainerComponent({ edgeTypes = {} }: DiagramContainerProps) {
     [onDropFromPalette],
   );
 
-  const onConnect: OnConnect = useCallback(
-    (connection) => {
-      trackFutureChange('addEdge');
-      onConnectAction(connection);
-    },
-    [onConnectAction],
-  );
-
-  const onConnectStart = useCallback(
-    (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      _: any,
-      { nodeId, handleId }: { nodeId: string | null; handleId: string | null },
-    ) => {
-      setConnectionBeingDragged(nodeId, handleId);
-    },
-    [setConnectionBeingDragged],
-  );
-
-  const onConnectEnd = useCallback(() => {
-    setConnectionBeingDragged(null, null);
-  }, [setConnectionBeingDragged]);
+  const { onConnect, onConnectStart, onConnectEnd } = useConnect();
 
   const onNodeDragStop = useCallback(() => {
     return trackFutureChange('nodeDragStop');

packages/sdk/src/features/diagram/hooks/use-on-connect.tsx

@@ -0,0 +1,59 @@
+import { SnackbarType } from '@synergycodes/overflow-ui';
+import type { OnConnect, OnConnectEnd, OnConnectStart } from '@xyflow/react';
+import { useCallback } from 'react';
+
+import { trackFutureChange } from '../../../features/changes-tracker/stores/use-changes-tracker-store';
+import { useStore } from '../../../store/store';
+import { showSnackbar } from '../../../utils/show-snackbar';
+
+export function useConnect() {
+  const isReadOnlyMode = useStore((store) => store.isReadOnlyMode);
+  const onConnectAction = useStore((store) => store.onConnect);
+  const setConnectionBeingDragged = useStore((store) => store.setConnectionBeingDragged);
+
+  const onConnect: OnConnect = useCallback(
+    (connection) => {
+      if (isReadOnlyMode) {
+        showSnackbar({
+          title: 'cantEditReadOnlyMode',
+          variant: SnackbarType.WARNING,
+        });
+
+        return;
+      }
+
+      trackFutureChange('addEdge');
+      onConnectAction(connection);
+    },
+    [isReadOnlyMode, onConnectAction],
+  );
+
+  const onConnectStart: OnConnectStart = useCallback(
+    (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      _: any,
+      { nodeId, handleId }: { nodeId: string | null; handleId: string | null },
+    ) => {
+      if (isReadOnlyMode) {
+        return;
+      }
+
+      setConnectionBeingDragged(nodeId, handleId);
+    },
+    [isReadOnlyMode, setConnectionBeingDragged],
+  );
+
+  const onConnectEnd: OnConnectEnd = useCallback(() => {
+    if (isReadOnlyMode) {
+      return;
+    }
+
+    setConnectionBeingDragged(null, null);
+  }, [isReadOnlyMode, setConnectionBeingDragged]);
+
+  return {
+    onConnect,
+    onConnectStart,
+    onConnectEnd,
+  };
+}

packages/sdk/src/features/diagram/selectors.ts

@@ -8,7 +8,6 @@ export function diagramStateSelector({
   edges,
   onNodesChange,
   onEdgesChange,
-  onConnect,
   onInit,
   isReadOnlyMode,
   onEdgeMouseEnter,
@@ -20,7 +19,6 @@ export function diagramStateSelector({
     edges,
     onNodesChange,
     onEdgesChange,
-    onConnect,
     onInit,
     isReadOnlyMode,
     onEdgeMouseEnter,

packages/sdk/src/features/i18n/locales/en.ts

@@ -181,6 +181,7 @@ export const en = {
     wrongDiagramFormat: 'Wrong diagram format',
     contentCopied: 'Content copied to clipboard',
     variablesListIsEmpty: 'The list of available variables is empty.',
+    cantEditReadOnlyMode: 'Editing is blocked in read-only mode.',
   },
   workflowsSettings: {
     modalTitle: 'Settings',

packages/sdk/src/features/i18n/locales/pl.ts

@@ -145,6 +145,7 @@ export const pl = {
     wrongDiagramFormat: 'Nieprawidłowy format diagramu',
     contentCopied: 'Treść skopiowana do schowka',
     variablesListIsEmpty: 'Lista dostępnych zmiennych jest pusta.',
+    cantEditReadOnlyMode: 'Edycja jest zablokowana w trybie tylko do odczytu.',
   },
   aiTools: {
     title: 'Narzędzia agenta AI',