feat(canvas): added the ability to lock blocks

Author: waleedlatif1

apps/docs/content/docs/en/tools/pulse.mdx

@@ -11,7 +11,7 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 />
 
 {/* MANUAL-CONTENT-START:intro */}
-The [Pulse](https://www.pulseapi.com/) tool enables seamless extraction of text and structured content from a wide variety of documents—including PDFs, images, and Office files—using state-of-the-art OCR (Optical Character Recognition) powered by Pulse. Designed for automated agentic workflows, Pulse Parser makes it easy to unlock valuable information trapped in unstructured documents and integrate the extracted content directly into your workflow.
+The [Pulse](https://www.runpulse.com) tool enables seamless extraction of text and structured content from a wide variety of documents—including PDFs, images, and Office files—using state-of-the-art OCR (Optical Character Recognition) powered by Pulse. Designed for automated agentic workflows, Pulse Parser makes it easy to unlock valuable information trapped in unstructured documents and integrate the extracted content directly into your workflow.
 
 With Pulse, you can:
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react'
-import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, LogOut } from 'lucide-react'
+import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
 import { Button, Copy, PlayOutline, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
@@ -49,6 +49,7 @@ export const ActionBar = memo(
       collaborativeBatchRemoveBlocks,
       collaborativeBatchToggleBlockEnabled,
       collaborativeBatchToggleBlockHandles,
+      collaborativeBatchToggleLocked,
     } = useCollaborativeWorkflow()
     const { setPendingSelection } = useWorkflowRegistry()
     const { handleRunFromBlock } = useWorkflowExecution()
@@ -84,21 +85,25 @@ export const ActionBar = memo(
       )
     }, [blockId, addNotification, collaborativeBatchAddBlocks, setPendingSelection])
 
-    const { isEnabled, horizontalHandles, parentId, parentType } = useWorkflowStore(
-      useCallback(
-        (state) => {
-          const block = state.blocks[blockId]
-          const parentId = block?.data?.parentId
-          return {
-            isEnabled: block?.enabled ?? true,
-            horizontalHandles: block?.horizontalHandles ?? false,
-            parentId,
-            parentType: parentId ? state.blocks[parentId]?.type : undefined,
-          }
-        },
-        [blockId]
+    const { isEnabled, horizontalHandles, parentId, parentType, isLocked, isParentLocked } =
+      useWorkflowStore(
+        useCallback(
+          (state) => {
+            const block = state.blocks[blockId]
+            const parentId = block?.data?.parentId
+            const parentBlock = parentId ? state.blocks[parentId] : undefined
+            return {
+              isEnabled: block?.enabled ?? true,
+              horizontalHandles: block?.horizontalHandles ?? false,
+              parentId,
+              parentType: parentBlock?.type,
+              isLocked: block?.locked ?? false,
+              isParentLocked: parentBlock?.locked ?? false,
+            }
+          },
+          [blockId]
+        )
       )
-    )
 
     const { activeWorkflowId } = useWorkflowRegistry()
     const { isExecuting, getLastExecutionSnapshot } = useExecutionStore()
@@ -161,25 +166,27 @@ export const ActionBar = memo(
         {!isNoteBlock && !isInsideSubflow && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (canRunFromBlock && !disabled) {
-                    handleRunFromBlockClick()
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || !canRunFromBlock}
-              >
-                <PlayOutline className={ICON_SIZE} />
-              </Button>
+              <span className='inline-flex'>
+                <Button
+                  variant='ghost'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (canRunFromBlock && !disabled) {
+                      handleRunFromBlockClick()
+                    }
+                  }}
+                  className={ACTION_BUTTON_STYLES}
+                  disabled={disabled || !canRunFromBlock}
+                >
+                  <PlayOutline className={ICON_SIZE} />
+                </Button>
+              </span>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
               {(() => {
                 if (disabled) return getTooltipMessage('Run from block')
                 if (isExecuting) return 'Execution in progress'
-                if (!dependenciesSatisfied) return 'Run upstream blocks first'
+                if (!dependenciesSatisfied) return 'Run previous blocks first'
                 return 'Run from block'
               })()}
             </Tooltip.Content>
@@ -193,22 +200,42 @@ export const ActionBar = memo(
                 variant='ghost'
                 onClick={(e) => {
                   e.stopPropagation()
-                  if (!disabled) {
+                  if (!disabled && !isLocked) {
                     collaborativeBatchToggleBlockEnabled([blockId])
                   }
                 }}
                 className={ACTION_BUTTON_STYLES}
-                disabled={disabled}
+                disabled={disabled || isLocked}
               >
                 {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
-              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+              {isLocked
+                ? 'Block is locked'
+                : getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
             </Tooltip.Content>
           </Tooltip.Root>
         )}
 
+        {userPermissions.canAdmin && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  collaborativeBatchToggleLocked([blockId])
+                }}
+                className={ACTION_BUTTON_STYLES}
+              >
+                {isLocked ? <Unlock className={ICON_SIZE} /> : <Lock className={ICON_SIZE} />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>{isLocked ? 'Unlock Block' : 'Lock Block'}</Tooltip.Content>
+          </Tooltip.Root>
+        )}
+
         {!isStartBlock && !isResponseBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
@@ -237,12 +264,12 @@ export const ActionBar = memo(
                 variant='ghost'
                 onClick={(e) => {
                   e.stopPropagation()
-                  if (!disabled) {
+                  if (!disabled && !isLocked) {
                     collaborativeBatchToggleBlockHandles([blockId])
                   }
                 }}
                 className={ACTION_BUTTON_STYLES}
-                disabled={disabled}
+                disabled={disabled || isLocked}
               >
                 {horizontalHandles ? (
                   <ArrowLeftRight className={ICON_SIZE} />
@@ -252,7 +279,9 @@ export const ActionBar = memo(
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
-              {getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
+              {isLocked
+                ? 'Block is locked'
+                : getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
             </Tooltip.Content>
           </Tooltip.Root>
         )}
@@ -264,19 +293,23 @@ export const ActionBar = memo(
                 variant='ghost'
                 onClick={(e) => {
                   e.stopPropagation()
-                  if (!disabled && userPermissions.canEdit) {
+                  if (!disabled && userPermissions.canEdit && !isLocked && !isParentLocked) {
                     window.dispatchEvent(
                       new CustomEvent('remove-from-subflow', { detail: { blockIds: [blockId] } })
                     )
                   }
                 }}
                 className={ACTION_BUTTON_STYLES}
-                disabled={disabled || !userPermissions.canEdit}
+                disabled={disabled || !userPermissions.canEdit || isLocked || isParentLocked}
               >
                 <LogOut className={ICON_SIZE} />
               </Button>
             </Tooltip.Trigger>
-            <Tooltip.Content side='top'>{getTooltipMessage('Remove from Subflow')}</Tooltip.Content>
+            <Tooltip.Content side='top'>
+              {isLocked || isParentLocked
+                ? 'Block is locked'
+                : getTooltipMessage('Remove from Subflow')}
+            </Tooltip.Content>
           </Tooltip.Root>
         )}
 
@@ -286,17 +319,19 @@ export const ActionBar = memo(
               variant='ghost'
               onClick={(e) => {
                 e.stopPropagation()
-                if (!disabled) {
+                if (!disabled && !isLocked) {
                   collaborativeBatchRemoveBlocks([blockId])
                 }
               }}
               className={ACTION_BUTTON_STYLES}
-              disabled={disabled}
+              disabled={disabled || isLocked}
             >
               <Trash2 className={ICON_SIZE} />
             </Button>
           </Tooltip.Trigger>
-          <Tooltip.Content side='top'>{getTooltipMessage('Delete Block')}</Tooltip.Content>
+          <Tooltip.Content side='top'>
+            {isLocked ? 'Block is locked' : getTooltipMessage('Delete Block')}
+          </Tooltip.Content>
         </Tooltip.Root>
       </div>
     )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx

@@ -20,6 +20,7 @@ export interface BlockInfo {
   horizontalHandles: boolean
   parentId?: string
   parentType?: string
+  locked?: boolean
 }
 
 /**
@@ -46,10 +47,17 @@ export interface BlockMenuProps {
   showRemoveFromSubflow?: boolean
   /** Whether run from block is available (has snapshot, was executed, not inside subflow) */
   canRunFromBlock?: boolean
+  /** Whether to disable edit actions (user can't edit OR blocks are locked) */
   disableEdit?: boolean
+  /** Whether the user has edit permission (ignoring locked state) */
+  userCanEdit?: boolean
   isExecuting?: boolean
   /** Whether the selected block is a trigger (has no incoming edges) */
   isPositionalTrigger?: boolean
+  /** Callback to toggle locked state of selected blocks */
+  onToggleLocked?: () => void
+  /** Whether the user has admin permissions */
+  canAdmin?: boolean
 }
 
 /**
@@ -78,13 +86,18 @@ export function BlockMenu({
   showRemoveFromSubflow = false,
   canRunFromBlock = false,
   disableEdit = false,
+  userCanEdit = true,
   isExecuting = false,
   isPositionalTrigger = false,
+  onToggleLocked,
+  canAdmin = false,
 }: BlockMenuProps) {
   const isSingleBlock = selectedBlocks.length === 1
 
   const allEnabled = selectedBlocks.every((b) => b.enabled)
   const allDisabled = selectedBlocks.every((b) => !b.enabled)
+  const allLocked = selectedBlocks.every((b) => b.locked)
+  const allUnlocked = selectedBlocks.every((b) => !b.locked)
 
   const hasSingletonBlock = selectedBlocks.some(
     (b) =>
@@ -108,6 +121,12 @@ export function BlockMenu({
     return 'Toggle Enabled'
   }
 
+  const getToggleLockedLabel = () => {
+    if (allLocked) return 'Unlock'
+    if (allUnlocked) return 'Lock'
+    return 'Toggle Lock'
+  }
+
   return (
     <Popover
       open={isOpen}
@@ -150,7 +169,7 @@ export function BlockMenu({
         </PopoverItem>
         {!hasSingletonBlock && (
           <PopoverItem
-            disabled={disableEdit}
+            disabled={!userCanEdit}
             onClick={() => {
               onDuplicate()
               onClose()
@@ -195,6 +214,16 @@ export function BlockMenu({
             Remove from Subflow
           </PopoverItem>
         )}
+        {canAdmin && onToggleLocked && (
+          <PopoverItem
+            onClick={() => {
+              onToggleLocked()
+              onClose()
+            }}
+          >
+            {getToggleLockedLabel()}
+          </PopoverItem>
+        )}
 
         {/* Single block actions */}
         {isSingleBlock && <PopoverDivider />}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu/canvas-menu.tsx

@@ -34,6 +34,8 @@ export interface CanvasMenuProps {
   canUndo?: boolean
   canRedo?: boolean
   isInvitationsDisabled?: boolean
+  /** Whether the workflow has locked blocks (disables auto-layout) */
+  hasLockedBlocks?: boolean
 }
 
 /**
@@ -60,6 +62,7 @@ export function CanvasMenu({
   disableEdit = false,
   canUndo = false,
   canRedo = false,
+  hasLockedBlocks = false,
 }: CanvasMenuProps) {
   return (
     <Popover
@@ -129,11 +132,12 @@ export function CanvasMenu({
         </PopoverItem>
         <PopoverItem
           className='group'
-          disabled={disableEdit}
+          disabled={disableEdit || hasLockedBlocks}
           onClick={() => {
             onAutoLayout()
             onClose()
           }}
+          title={hasLockedBlocks ? 'Unlock blocks to use auto-layout' : undefined}
         >
           <span>Auto-layout</span>
           <span className='ml-auto opacity-70 group-hover:opacity-100'>⇧L</span>