feat(workflow): lock/unlock workflow from context menu and panel

Author: waleedlatif1

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

@@ -1,6 +1,7 @@
 'use client'
 
 import type { RefObject } from 'react'
+import { Lock, Unlock } from 'lucide-react'
 import {
   Popover,
   PopoverAnchor,
@@ -26,16 +27,22 @@ export interface CanvasMenuProps {
   onOpenLogs: () => void
   onToggleVariables: () => void
   onToggleChat: () => void
+  onToggleWorkflowLock?: () => void
   isVariablesOpen?: boolean
   isChatOpen?: boolean
   hasClipboard?: boolean
   disableEdit?: boolean
   disableAdmin?: boolean
+  canAdmin?: boolean
   canUndo?: boolean
   canRedo?: boolean
   isInvitationsDisabled?: boolean
   /** Whether the workflow has locked blocks (disables auto-layout) */
   hasLockedBlocks?: boolean
+  /** Whether all blocks in the workflow are locked */
+  allBlocksLocked?: boolean
+  /** Whether the workflow has any blocks */
+  hasBlocks?: boolean
 }
 
 /**
@@ -56,13 +63,17 @@ export function CanvasMenu({
   onOpenLogs,
   onToggleVariables,
   onToggleChat,
+  onToggleWorkflowLock,
   isVariablesOpen = false,
   isChatOpen = false,
   hasClipboard = false,
   disableEdit = false,
+  canAdmin = false,
   canUndo = false,
   canRedo = false,
   hasLockedBlocks = false,
+  allBlocksLocked = false,
+  hasBlocks = false,
 }: CanvasMenuProps) {
   return (
     <Popover
@@ -142,6 +153,22 @@ export function CanvasMenu({
           <span>Auto-layout</span>
           <span className='ml-auto opacity-70 group-hover:opacity-100'>⇧L</span>
         </PopoverItem>
+        {canAdmin && onToggleWorkflowLock && (
+          <PopoverItem
+            disabled={!hasBlocks}
+            onClick={() => {
+              onToggleWorkflowLock()
+              onClose()
+            }}
+          >
+            {allBlocksLocked ? (
+              <Unlock className='h-3 w-3' />
+            ) : (
+              <Lock className='h-3 w-3' />
+            )}
+            <span>{allBlocksLocked ? 'Unlock workflow' : 'Lock workflow'}</span>
+          </PopoverItem>
+        )}
         <PopoverItem
           onClick={() => {
             onFitToView()

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

@@ -61,6 +61,9 @@ export const Notifications = memo(function Notifications() {
           case 'refresh':
             window.location.reload()
             break
+          case 'unlock-workflow':
+            window.dispatchEvent(new CustomEvent('unlock-workflow'))
+            break
           default:
             logger.warn('Unknown action type', { notificationId, actionType: action.type })
         }
@@ -175,7 +178,9 @@ export const Notifications = memo(function Notifications() {
                     ? 'Fix in Copilot'
                     : notification.action!.type === 'refresh'
                       ? 'Refresh'
-                      : 'Take action'}
+                      : notification.action!.type === 'unlock-workflow'
+                        ? 'Unlock Workflow'
+                        : 'Take action'}
                 </Button>
               )}
             </div>

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

@@ -2,7 +2,7 @@
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowUp, Square } from 'lucide-react'
+import { ArrowUp, Lock, Square, Unlock } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
 import {
@@ -42,7 +42,9 @@ import {
 import { Variables } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables'
 import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-auto-layout'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
+import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useChatStore } from '@/stores/chat/store'
 import { useNotificationStore } from '@/stores/notifications/store'
@@ -126,6 +128,15 @@ export const Panel = memo(function Panel() {
     Object.values(state.blocks).some((block) => block.locked)
   )
 
+  const allBlocksLocked = useWorkflowStore((state) => {
+    const blockList = Object.values(state.blocks)
+    return blockList.length > 0 && blockList.every((block) => block.locked)
+  })
+
+  const hasBlocks = useWorkflowStore((state) => Object.keys(state.blocks).length > 0)
+
+  const { collaborativeBatchToggleLocked } = useCollaborativeWorkflow()
+
   // Delete workflow hook
   const { isDeleting, handleDeleteWorkflow } = useDeleteWorkflow({
     workspaceId,
@@ -329,6 +340,17 @@ export const Panel = memo(function Panel() {
     workspaceId,
   ])
 
+  /**
+   * Toggles the locked state of all blocks in the workflow
+   */
+  const handleToggleWorkflowLock = useCallback(() => {
+    const blocks = useWorkflowStore.getState().blocks
+    const allLocked = Object.values(blocks).every((b) => b.locked)
+    const ids = getWorkflowLockToggleIds(blocks, !allLocked)
+    if (ids.length > 0) collaborativeBatchToggleLocked(ids)
+    setIsMenuOpen(false)
+  }, [collaborativeBatchToggleLocked])
+
   // Compute run button state
   const canRun = userPermissions.canRead // Running only requires read permissions
   const isLoadingPermissions = userPermissions.isLoading
@@ -399,6 +421,19 @@ export const Panel = memo(function Panel() {
                     <Layout className='h-3 w-3' animate={isAutoLayouting} variant='clockwise' />
                     <span>Auto layout</span>
                   </PopoverItem>
+                  {userPermissions.canAdmin && (
+                    <PopoverItem
+                      onClick={handleToggleWorkflowLock}
+                      disabled={!hasBlocks}
+                    >
+                      {allBlocksLocked ? (
+                        <Unlock className='h-3 w-3' />
+                      ) : (
+                        <Lock className='h-3 w-3' />
+                      )}
+                      <span>{allBlocksLocked ? 'Unlock workflow' : 'Lock workflow'}</span>
+                    </PopoverItem>
+                  )}
                   {
                     <PopoverItem onClick={() => setVariablesOpen(!isVariablesOpen)}>
                       <VariableIcon className='h-3 w-3' />

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

@@ -1298,7 +1298,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                   </Tooltip.Content>
                 </Tooltip.Root>
               )}
-            {!isEnabled && <Badge variant='gray-secondary'>disabled</Badge>}
+            {!isEnabled && !isLocked && <Badge variant='gray-secondary'>disabled</Badge>}
             {isLocked && <Badge variant='gray-secondary'>locked</Badge>}
 
             {type === 'schedule' && shouldShowScheduleBadge && scheduleInfo?.isDisabled && (

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

@@ -58,6 +58,35 @@ export function isEdgeProtected(
  * @param blocks - Record of all blocks in the workflow
  * @returns Result containing deletable IDs, protected IDs, and whether all are protected
  */
+/**
+ * Returns block IDs ordered so that `batchToggleLocked` will target the desired state.
+ *
+ * `batchToggleLocked` determines its target locked state from `!firstBlock.locked`.
+ * When `targetLocked` is true (lock all), an unlocked block must come first.
+ * When `targetLocked` is false (unlock all), a locked block must come first.
+ *
+ * @param blocks - Record of all blocks in the workflow
+ * @param targetLocked - The desired locked state for all blocks
+ * @returns Sorted block IDs, or empty array if there are no blocks
+ */
+export function getWorkflowLockToggleIds(
+  blocks: Record<string, BlockState>,
+  targetLocked: boolean
+): string[] {
+  const ids = Object.keys(blocks)
+  if (ids.length === 0) return []
+
+  ids.sort((a, b) => {
+    const aVal = blocks[a].locked ? 1 : 0
+    const bVal = blocks[b].locked ? 1 : 0
+    // To lock all (targetLocked=true): unlocked first (aVal - bVal)
+    // To unlock all (targetLocked=false): locked first (bVal - aVal)
+    return targetLocked ? aVal - bVal : bVal - aVal
+  })
+
+  return ids
+}
+
 export function filterProtectedBlocks(
   blockIds: string[],
   blocks: Record<string, BlockState>

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

@@ -57,6 +57,7 @@ import {
   estimateBlockDimensions,
   filterProtectedBlocks,
   getClampedPositionForNode,
+  getWorkflowLockToggleIds,
   isBlockProtected,
   isEdgeProtected,
   isInEditableElement,
@@ -393,6 +394,13 @@ const WorkflowContent = React.memo(() => {
 
   const { blocks, edges, lastSaved } = currentWorkflow
 
+  const allBlocksLocked = useMemo(() => {
+    const blockList = Object.values(blocks)
+    return blockList.length > 0 && blockList.every((b) => b.locked)
+  }, [blocks])
+
+  const hasBlocks = useMemo(() => Object.keys(blocks).length > 0, [blocks])
+
   const isWorkflowReady = useMemo(
     () =>
       hydration.phase === 'ready' &&
@@ -1175,6 +1183,73 @@ const WorkflowContent = React.memo(() => {
     collaborativeBatchToggleLocked(blockIds)
   }, [contextMenuBlocks, collaborativeBatchToggleLocked])
 
+  const handleToggleWorkflowLock = useCallback(() => {
+    const currentBlocks = useWorkflowStore.getState().blocks
+    const allLocked = Object.values(currentBlocks).every((b) => b.locked)
+    const ids = getWorkflowLockToggleIds(currentBlocks, !allLocked)
+    if (ids.length > 0) collaborativeBatchToggleLocked(ids)
+  }, [collaborativeBatchToggleLocked])
+
+  // Show notification when all blocks in the workflow are locked
+  const lockNotificationIdRef = useRef<string | null>(null)
+
+  const clearLockNotification = useCallback(() => {
+    if (lockNotificationIdRef.current) {
+      useNotificationStore.getState().removeNotification(lockNotificationIdRef.current)
+      lockNotificationIdRef.current = null
+    }
+  }, [])
+
+  // Reset notification when switching workflows so it recreates for the new workflow
+  const prevWorkflowIdRef = useRef(activeWorkflowId)
+  const prevCanAdminRef = useRef(effectivePermissions.canAdmin)
+  useEffect(() => {
+    if (!isWorkflowReady) return
+
+    const workflowChanged = prevWorkflowIdRef.current !== activeWorkflowId
+    const canAdminChanged = prevCanAdminRef.current !== effectivePermissions.canAdmin
+    prevWorkflowIdRef.current = activeWorkflowId
+    prevCanAdminRef.current = effectivePermissions.canAdmin
+
+    // Clear stale notification when workflow or admin status changes
+    if ((workflowChanged || canAdminChanged) && lockNotificationIdRef.current) {
+      clearLockNotification()
+    }
+
+    if (allBlocksLocked) {
+      if (lockNotificationIdRef.current) return
+
+      const isAdmin = effectivePermissions.canAdmin
+      lockNotificationIdRef.current = addNotification({
+        level: 'info',
+        message: isAdmin
+          ? 'This workflow is locked'
+          : 'This workflow is locked. Ask an admin to unlock it.',
+        workflowId: activeWorkflowId || undefined,
+        ...(isAdmin
+          ? { action: { type: 'unlock-workflow' as const, message: '' } }
+          : {}),
+      })
+    } else {
+      clearLockNotification()
+    }
+  }, [allBlocksLocked, isWorkflowReady, effectivePermissions.canAdmin, addNotification, activeWorkflowId, clearLockNotification])
+
+  // Clean up notification on unmount
+  useEffect(() => clearLockNotification, [clearLockNotification])
+
+  // Listen for unlock-workflow events from notification action button
+  useEffect(() => {
+    const handleUnlockWorkflow = () => {
+      const currentBlocks = useWorkflowStore.getState().blocks
+      const ids = getWorkflowLockToggleIds(currentBlocks, false)
+      if (ids.length > 0) collaborativeBatchToggleLocked(ids)
+    }
+
+    window.addEventListener('unlock-workflow', handleUnlockWorkflow)
+    return () => window.removeEventListener('unlock-workflow', handleUnlockWorkflow)
+  }, [collaborativeBatchToggleLocked])
+
   const handleContextRemoveFromSubflow = useCallback(() => {
     const blocksToRemove = contextMenuBlocks.filter(
       (block) => block.parentId && (block.parentType === 'loop' || block.parentType === 'parallel')
@@ -3700,6 +3775,10 @@ const WorkflowContent = React.memo(() => {
               canUndo={canUndo}
               canRedo={canRedo}
               hasLockedBlocks={Object.values(blocks).some((b) => b.locked)}
+              onToggleWorkflowLock={handleToggleWorkflowLock}
+              allBlocksLocked={allBlocksLocked}
+              canAdmin={effectivePermissions.canAdmin}
+              hasBlocks={hasBlocks}
             />
           </>
         )}

apps/sim/stores/notifications/types.ts

@@ -6,7 +6,7 @@ export interface NotificationAction {
   /**
    * Action type identifier for handler reconstruction
    */
-  type: 'copilot' | 'refresh'
+  type: 'copilot' | 'refresh' | 'unlock-workflow'
 
   /**
    * Message or data to pass to the action handler.