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 {
@@ -43,6 +43,7 @@ import { Variables } from '@/app/workspace/[workspaceId]/w/[workflowId]/componen
 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 { 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 +127,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 +339,28 @@ 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 blockList = Object.values(blocks)
+    if (blockList.length === 0) return
+
+    const allLocked = blockList.every((b) => b.locked)
+    const ids = Object.keys(blocks)
+
+    // Sort so the first block guarantees the correct target state for batchToggleLocked
+    ids.sort((a, b) => {
+      const aVal = blocks[a].locked ? 1 : 0
+      const bVal = blocks[b].locked ? 1 : 0
+      return allLocked ? bVal - aVal : aVal - bVal
+    })
+
+    collaborativeBatchToggleLocked(ids)
+    setIsMenuOpen(false)
+  }, [collaborativeBatchToggleLocked])
+
   // Compute run button state
   const canRun = userPermissions.canRead // Running only requires read permissions
   const isLoadingPermissions = userPermissions.isLoading
@@ -399,6 +431,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]/workflow.tsx

@@ -393,6 +393,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 +1182,93 @@ const WorkflowContent = React.memo(() => {
     collaborativeBatchToggleLocked(blockIds)
   }, [contextMenuBlocks, collaborativeBatchToggleLocked])
 
+  const handleToggleWorkflowLock = useCallback(() => {
+    const currentBlocks = useWorkflowStore.getState().blocks
+    const blockList = Object.values(currentBlocks)
+    if (blockList.length === 0) return
+
+    const allLocked = blockList.every((b) => b.locked)
+    const ids = Object.keys(currentBlocks)
+
+    // Sort so the first block guarantees the correct target state for batchToggleLocked
+    ids.sort((a, b) => {
+      const aVal = currentBlocks[a].locked ? 1 : 0
+      const bVal = currentBlocks[b].locked ? 1 : 0
+      return allLocked ? bVal - aVal : aVal - bVal
+    })
+
+    collaborativeBatchToggleLocked(ids)
+  }, [collaborativeBatchToggleLocked])
+
+  // Show notification when all blocks in the workflow are locked
+  const lockNotificationIdRef = useRef<string | null>(null)
+  const prevCanAdminRef = useRef(effectivePermissions.canAdmin)
+  useEffect(() => {
+    if (!isWorkflowReady) return
+
+    // Clear stale notification when admin status changes so it recreates with correct message
+    const canAdminChanged = prevCanAdminRef.current !== effectivePermissions.canAdmin
+    prevCanAdminRef.current = effectivePermissions.canAdmin
+    if (canAdminChanged && lockNotificationIdRef.current) {
+      useNotificationStore.getState().removeNotification(lockNotificationIdRef.current)
+      lockNotificationIdRef.current = null
+    }
+
+    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 if (lockNotificationIdRef.current) {
+      useNotificationStore.getState().removeNotification(lockNotificationIdRef.current)
+      lockNotificationIdRef.current = null
+    }
+  }, [allBlocksLocked, isWorkflowReady, effectivePermissions.canAdmin, addNotification, activeWorkflowId])
+
+  // Clean up notification on unmount
+  useEffect(() => {
+    return () => {
+      if (lockNotificationIdRef.current) {
+        useNotificationStore.getState().removeNotification(lockNotificationIdRef.current)
+        lockNotificationIdRef.current = null
+      }
+    }
+  }, [])
+
+  // Listen for unlock-workflow events from notification action button
+  useEffect(() => {
+    const handleUnlockWorkflow = () => {
+      const currentBlocks = useWorkflowStore.getState().blocks
+      const blockList = Object.values(currentBlocks)
+      if (blockList.length === 0) return
+
+      const anyLocked = blockList.some((b) => b.locked)
+      if (!anyLocked) return
+
+      const ids = Object.keys(currentBlocks)
+      // Ensure a locked block is first so batchToggleLocked targets unlock (false)
+      ids.sort((a, b) => {
+        const aVal = currentBlocks[a].locked ? 1 : 0
+        const bVal = currentBlocks[b].locked ? 1 : 0
+        return bVal - aVal
+      })
+
+      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 +3794,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.