feat(canvas): allow locked block outbound connections (#3229)

* Allow outbound connections from locked blocks to be modified

- Modified isEdgeProtected to only check target block protection
- Outbound connections (from locked blocks) can now be added/removed
- Inbound connections (to locked blocks) remain protected
- Updated notification messages and comments to reflect the change

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>

* update notif msg

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>
Co-authored-by: waleed <walif6@gmail.com>

Author: 3 people

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts

@@ -36,17 +36,18 @@ export function isBlockProtected(blockId: string, blocks: Record<string, BlockSt
 
 /**
  * Checks if an edge is protected from modification.
- * An edge is protected if either its source or target block is protected.
+ * An edge is protected only if its target block is protected.
+ * Outbound connections from locked blocks are allowed to be modified.
  *
  * @param edge - The edge to check (must have source and target)
  * @param blocks - Record of all blocks in the workflow
- * @returns True if the edge is protected
+ * @returns True if the edge is protected (target is locked)
  */
 export function isEdgeProtected(
   edge: { source: string; target: string },
   blocks: Record<string, BlockState>
 ): boolean {
-  return isBlockProtected(edge.source, blocks) || isBlockProtected(edge.target, blocks)
+  return isBlockProtected(edge.target, blocks)
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -2523,7 +2523,7 @@ const WorkflowContent = React.memo(() => {
         .filter((change: any) => change.type === 'remove')
         .map((change: any) => change.id)
         .filter((edgeId: string) => {
-          // Prevent removing edges connected to protected blocks
+          // Prevent removing edges targeting protected blocks
           const edge = edges.find((e) => e.id === edgeId)
           if (!edge) return true
           return !isEdgeProtected(edge, blocks)
@@ -2595,7 +2595,7 @@ const WorkflowContent = React.memo(() => {
 
         if (!sourceNode || !targetNode) return
 
-        // Prevent connections to/from protected blocks
+        // Prevent connections to protected blocks (outbound from locked blocks is allowed)
         if (isEdgeProtected(connection, blocks)) {
           addNotification({
             level: 'info',
@@ -3357,12 +3357,12 @@ const WorkflowContent = React.memo(() => {
   /** Stable delete handler to avoid creating new function references per edge. */
   const handleEdgeDelete = useCallback(
     (edgeId: string) => {
-      // Prevent removing edges connected to protected blocks
+      // Prevent removing edges targeting protected blocks
       const edge = edges.find((e) => e.id === edgeId)
       if (edge && isEdgeProtected(edge, blocks)) {
         addNotification({
           level: 'info',
-          message: 'Cannot remove connections from locked blocks',
+          message: 'Cannot remove connections to locked blocks',
           workflowId: activeWorkflowId || undefined,
         })
         return
@@ -3420,7 +3420,7 @@ const WorkflowContent = React.memo(() => {
 
       // Handle edge deletion first (edges take priority if selected)
       if (selectedEdges.size > 0) {
-        // Get all selected edge IDs and filter out edges connected to protected blocks
+        // Get all selected edge IDs and filter out edges targeting protected blocks
         const edgeIds = Array.from(selectedEdges.values()).filter((edgeId) => {
           const edge = edges.find((e) => e.id === edgeId)
           if (!edge) return true