feat(panel): deploy logic

Author: emir-karabeg

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

@@ -0,0 +1,106 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { Button, Rocket } from '@/components/emcn'
+import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components'
+import type { WorkspaceUserPermissions } from '@/hooks/use-user-permissions'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useChangeDetection, useDeployedState, useDeployment } from './hooks'
+
+interface DeployProps {
+  activeWorkflowId: string | null
+  userPermissions: WorkspaceUserPermissions
+  className?: string
+}
+
+/**
+ * Deploy component that handles workflow deployment
+ * Manages deployed state, change detection, and deployment operations
+ */
+export function Deploy({ activeWorkflowId, userPermissions, className }: DeployProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const { isLoading: isRegistryLoading } = useWorkflowRegistry()
+
+  // Get deployment status from registry
+  const deploymentStatus = useWorkflowRegistry((state) =>
+    state.getWorkflowDeploymentStatus(activeWorkflowId)
+  )
+  const isDeployed = deploymentStatus?.isDeployed || false
+
+  // Fetch and manage deployed state
+  const { deployedState, isLoadingDeployedState, refetchDeployedState } = useDeployedState({
+    workflowId: activeWorkflowId,
+    isDeployed,
+    isRegistryLoading,
+  })
+
+  // Detect changes between current and deployed state
+  const { changeDetected, setChangeDetected } = useChangeDetection({
+    workflowId: activeWorkflowId,
+    deployedState,
+    isLoadingDeployedState,
+  })
+
+  // Handle deployment operations
+  const { isDeploying, handleDeployClick } = useDeployment({
+    workflowId: activeWorkflowId,
+    isDeployed,
+    refetchDeployedState,
+  })
+
+  const canDeploy = userPermissions.canAdmin
+  const isDisabled = isDeploying || !canDeploy
+  const isPreviousVersionActive = isDeployed && changeDetected
+
+  /**
+   * Handle deploy button click
+   */
+  const onDeployClick = useCallback(async () => {
+    if (!canDeploy || !activeWorkflowId) return
+
+    const result = await handleDeployClick()
+    if (result.shouldOpenModal) {
+      setIsModalOpen(true)
+    }
+  }, [canDeploy, activeWorkflowId, handleDeployClick])
+
+  const refetchWithErrorHandling = async () => {
+    if (!activeWorkflowId) return
+
+    try {
+      await refetchDeployedState()
+    } catch (error) {
+      // Error already logged in hook
+    }
+  }
+
+  return (
+    <>
+      <Button
+        className='h-[32px] gap-[8px] px-[10px]'
+        variant='active'
+        onClick={onDeployClick}
+        disabled={isDisabled}
+      >
+        {isDeploying ? (
+          <Loader2 className='h-[13px] w-[13px] animate-spin' />
+        ) : (
+          <Rocket className='h-[13px] w-[13px]' />
+        )}
+        {changeDetected ? 'Update' : isDeployed ? 'Active' : 'Deploy'}
+      </Button>
+
+      <DeployModal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        workflowId={activeWorkflowId}
+        needsRedeployment={changeDetected}
+        setNeedsRedeployment={setChangeDetected}
+        deployedState={deployedState!}
+        isLoadingDeployedState={isLoadingDeployedState}
+        refetchDeployedState={refetchWithErrorHandling}
+      />
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/deploy/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useChangeDetection } from './use-change-detection'
+export { useDeployedState } from './use-deployed-state'
+export { useDeployment } from './use-deployment'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/deploy/hooks/use-change-detection.ts

@@ -0,0 +1,111 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createLogger } from '@/lib/logs/console/logger'
+import { useDebounce } from '@/hooks/use-debounce'
+import { useOperationQueueStore } from '@/stores/operation-queue/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('useChangeDetection')
+
+interface UseChangeDetectionProps {
+  workflowId: string | null
+  deployedState: WorkflowState | null
+  isLoadingDeployedState: boolean
+}
+
+/**
+ * Hook to detect changes between current workflow state and deployed state
+ * Uses API-based change detection for accuracy
+ */
+export function useChangeDetection({
+  workflowId,
+  deployedState,
+  isLoadingDeployedState,
+}: UseChangeDetectionProps) {
+  const [changeDetected, setChangeDetected] = useState(false)
+  const [blockStructureVersion, setBlockStructureVersion] = useState(0)
+  const [edgeStructureVersion, setEdgeStructureVersion] = useState(0)
+  const [subBlockStructureVersion, setSubBlockStructureVersion] = useState(0)
+
+  // Get current store state for change detection
+  const currentBlocks = useWorkflowStore((state) => state.blocks)
+  const currentEdges = useWorkflowStore((state) => state.edges)
+  const lastSaved = useWorkflowStore((state) => state.lastSaved)
+  const subBlockValues = useSubBlockStore((state) =>
+    workflowId ? state.workflowValues[workflowId] : null
+  )
+
+  // Track structure changes
+  useEffect(() => {
+    setBlockStructureVersion((version) => version + 1)
+  }, [currentBlocks])
+
+  useEffect(() => {
+    setEdgeStructureVersion((version) => version + 1)
+  }, [currentEdges])
+
+  useEffect(() => {
+    setSubBlockStructureVersion((version) => version + 1)
+  }, [subBlockValues])
+
+  // Reset version counters when workflow changes
+  useEffect(() => {
+    setBlockStructureVersion(0)
+    setEdgeStructureVersion(0)
+    setSubBlockStructureVersion(0)
+  }, [workflowId])
+
+  // Create trigger for status check
+  const statusCheckTrigger = useMemo(() => {
+    return JSON.stringify({
+      lastSaved: lastSaved ?? 0,
+      blockVersion: blockStructureVersion,
+      edgeVersion: edgeStructureVersion,
+      subBlockVersion: subBlockStructureVersion,
+    })
+  }, [lastSaved, blockStructureVersion, edgeStructureVersion, subBlockStructureVersion])
+
+  const debouncedStatusCheckTrigger = useDebounce(statusCheckTrigger, 500)
+
+  useEffect(() => {
+    // Avoid off-by-one false positives: wait until operation queue is idle
+    const { operations, isProcessing } = useOperationQueueStore.getState()
+    const hasPendingOps =
+      isProcessing || operations.some((op) => op.status === 'pending' || op.status === 'processing')
+
+    if (!workflowId || !deployedState) {
+      setChangeDetected(false)
+      return
+    }
+
+    if (isLoadingDeployedState || hasPendingOps) {
+      return
+    }
+
+    // Use the workflow status API to get accurate change detection
+    // This uses the same logic as the deployment API (reading from normalized tables)
+    const checkForChanges = async () => {
+      try {
+        const response = await fetch(`/api/workflows/${workflowId}/status`)
+        if (response.ok) {
+          const data = await response.json()
+          setChangeDetected(data.needsRedeployment || false)
+        } else {
+          logger.error('Failed to fetch workflow status:', response.status, response.statusText)
+          setChangeDetected(false)
+        }
+      } catch (error) {
+        logger.error('Error fetching workflow status:', error)
+        setChangeDetected(false)
+      }
+    }
+
+    checkForChanges()
+  }, [workflowId, deployedState, debouncedStatusCheckTrigger, isLoadingDeployedState])
+
+  return {
+    changeDetected,
+    setChangeDetected,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/deploy/hooks/use-deployed-state.ts

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react'
+import { createLogger } from '@/lib/logs/console/logger'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('useDeployedState')
+
+interface UseDeployedStateProps {
+  workflowId: string | null
+  isDeployed: boolean
+  isRegistryLoading: boolean
+}
+
+/**
+ * Hook to fetch and manage deployed workflow state
+ * Includes race condition protection for workflow changes
+ */
+export function useDeployedState({
+  workflowId,
+  isDeployed,
+  isRegistryLoading,
+}: UseDeployedStateProps) {
+  const [deployedState, setDeployedState] = useState<WorkflowState | null>(null)
+  const [isLoadingDeployedState, setIsLoadingDeployedState] = useState<boolean>(false)
+
+  const setNeedsRedeploymentFlag = useWorkflowRegistry(
+    (state) => state.setWorkflowNeedsRedeployment
+  )
+
+  /**
+   * Fetches the deployed state of the workflow from the server
+   * This is the single source of truth for deployed workflow state
+   */
+  const fetchDeployedState = async () => {
+    if (!workflowId || !isDeployed) {
+      setDeployedState(null)
+      return
+    }
+
+    // Store the workflow ID at the start of the request to prevent race conditions
+    const requestWorkflowId = workflowId
+
+    // Helper to get current active workflow ID for race condition checks
+    const getCurrentActiveWorkflowId = () => useWorkflowRegistry.getState().activeWorkflowId
+
+    try {
+      setIsLoadingDeployedState(true)
+
+      const response = await fetch(`/api/workflows/${requestWorkflowId}/deployed`)
+
+      // Check if the workflow ID changed during the request (user navigated away)
+      if (requestWorkflowId !== getCurrentActiveWorkflowId()) {
+        logger.debug('Workflow changed during deployed state fetch, ignoring response')
+        return
+      }
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          setDeployedState(null)
+          return
+        }
+        throw new Error(`Failed to fetch deployed state: ${response.statusText}`)
+      }
+
+      const data = await response.json()
+
+      if (requestWorkflowId === getCurrentActiveWorkflowId()) {
+        setDeployedState(data.deployedState || null)
+      } else {
+        logger.debug('Workflow changed after deployed state response, ignoring result')
+      }
+    } catch (error) {
+      logger.error('Error fetching deployed state:', { error })
+      if (requestWorkflowId === getCurrentActiveWorkflowId()) {
+        setDeployedState(null)
+      }
+    } finally {
+      if (requestWorkflowId === getCurrentActiveWorkflowId()) {
+        setIsLoadingDeployedState(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!workflowId) {
+      setDeployedState(null)
+      setIsLoadingDeployedState(false)
+      return
+    }
+
+    if (isRegistryLoading) {
+      setDeployedState(null)
+      setIsLoadingDeployedState(false)
+      return
+    }
+
+    if (isDeployed) {
+      setNeedsRedeploymentFlag(workflowId, false)
+      fetchDeployedState()
+    } else {
+      setDeployedState(null)
+      setIsLoadingDeployedState(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workflowId, isDeployed, isRegistryLoading, setNeedsRedeploymentFlag])
+
+  return {
+    deployedState,
+    isLoadingDeployedState,
+    refetchDeployedState: fetchDeployedState,
+  }
+}