fix(workflow): wait for active workflow hydration before deploy

Author: Bill Leoutsakos

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

@@ -7,6 +7,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 const mockState = vi.hoisted(() => ({
   hydrationPhase: 'ready' as 'idle' | 'state-loading' | 'ready',
+  hydrationWorkflowId: 'workflow-1' as string | null,
+  registryActiveWorkflowId: 'workflow-1' as string | null,
   hasBlocks: true,
   isDeployed: false,
   changeDetected: false,
@@ -80,7 +82,13 @@ vi.mock('@/hooks/queries/deployments', () => ({
 
 vi.mock('@/stores/workflows/registry/store', () => ({
   useWorkflowRegistry: (selector: (state: unknown) => unknown) =>
-    selector({ hydration: { phase: mockState.hydrationPhase } }),
+    selector({
+      activeWorkflowId: mockState.registryActiveWorkflowId,
+      hydration: {
+        phase: mockState.hydrationPhase,
+        workflowId: mockState.hydrationWorkflowId,
+      },
+    }),
 }))
 
 import { Deploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy'
@@ -114,6 +122,8 @@ beforeEach(() => {
   document.body.appendChild(container)
   root = createRoot(container)
   mockState.hydrationPhase = 'ready'
+  mockState.hydrationWorkflowId = 'workflow-1'
+  mockState.registryActiveWorkflowId = 'workflow-1'
   mockState.hasBlocks = true
   mockState.isDeployed = false
   mockState.changeDetected = false
@@ -154,6 +164,12 @@ describe('Deploy compact mode', () => {
     expect(container.querySelector('button')?.getAttribute('aria-label')).toBe('Update')
   })
 
+  it('disables deployment while the active tab is still hydrating another workflow', () => {
+    renderDeploy({ hydrationWorkflowId: 'workflow-2', registryActiveWorkflowId: 'workflow-2' })
+
+    expect(container.querySelector('button')?.disabled).toBe(true)
+  })
+
   it.each([
     ['non-admin users', { canAdmin: false }],
     ['empty workflows', { hasBlocks: false }],

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

@@ -30,8 +30,12 @@ export function Deploy({
   disabled = false,
 }: DeployProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
-  const isRegistryLoading = hydrationPhase === 'idle' || hydrationPhase === 'state-loading'
+  const registryActiveWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const hydration = useWorkflowRegistry((state) => state.hydration)
+  const isRegistryLoading =
+    hydration.phase !== 'ready' ||
+    registryActiveWorkflowId !== activeWorkflowId ||
+    hydration.workflowId !== activeWorkflowId
   const { hasBlocks } = useCurrentWorkflow()
 
   const { data: deploymentInfo } = useDeploymentInfo(activeWorkflowId, {