fix(workflow-preview): fixed the workflow preview to pull directly from the state in DB

Author: aadamgough

apps/sim/app/api/workflows/[id]/deployed/route.ts

@@ -1,16 +1,22 @@
 import { eq } from 'drizzle-orm'
-import type { NextRequest } from 'next/server'
+import type { NextRequest, NextResponse } from 'next/server'
 import { createLogger } from '@/lib/logs/console-logger'
 import { db } from '@/db'
 import { workflow } from '@/db/schema'
 import { validateWorkflowAccess } from '../../middleware'
 import { createErrorResponse, createSuccessResponse } from '../../utils'
 
-const logger = createLogger('WorkflowDeployedAPI')
+const logger = createLogger('WorkflowDeployedStateAPI')
 
 export const dynamic = 'force-dynamic'
 export const runtime = 'nodejs'
 
+// Helper function to add Cache-Control headers to NextResponse
+function addNoCacheHeaders(response: NextResponse): NextResponse {
+  response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
+  return response
+}
+
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const requestId = crypto.randomUUID().slice(0, 8)
   const { id } = await params
@@ -21,10 +27,11 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 
     if (validation.error) {
       logger.warn(`[${requestId}] Failed to fetch deployed state: ${validation.error.message}`)
-      return createErrorResponse(validation.error.message, validation.error.status)
+      const response = createErrorResponse(validation.error.message, validation.error.status)
+      return addNoCacheHeaders(response)
     }
 
-    // Fetch just the deployed state
+    // Fetch the workflow's deployed state
     const result = await db
       .select({
         deployedState: workflow.deployedState,
@@ -36,27 +43,28 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
 
     if (result.length === 0) {
       logger.warn(`[${requestId}] Workflow not found: ${id}`)
-      return createErrorResponse('Workflow not found', 404)
+      const response = createErrorResponse('Workflow not found', 404)
+      return addNoCacheHeaders(response)
     }
 
     const workflowData = result[0]
 
     // If the workflow is not deployed, return appropriate response
     if (!workflowData.isDeployed || !workflowData.deployedState) {
-      logger.info(`[${requestId}] No deployed state available for workflow: ${id}`)
-      return createSuccessResponse({
+      const response = createSuccessResponse({
         deployedState: null,
-        isDeployed: false,
+        message: 'Workflow is not deployed or has no deployed state',
       })
+      return addNoCacheHeaders(response)
     }
 
-    logger.info(`[${requestId}] Successfully retrieved DEPLOYED state: ${id}`)
-    return createSuccessResponse({
+    const response = createSuccessResponse({
       deployedState: workflowData.deployedState,
-      isDeployed: true,
     })
+    return addNoCacheHeaders(response)
   } catch (error: any) {
     logger.error(`[${requestId}] Error fetching deployed state: ${id}`, error)
-    return createErrorResponse(error.message || 'Failed to fetch deployed state', 500)
+    const response = createErrorResponse(error.message || 'Failed to fetch deployed state', 500)
+    return addNoCacheHeaders(response)
   }
 }

apps/sim/app/w/[id]/components/control-bar/components/deploy-modal/components/deployment-info/deployment-info.tsx

@@ -20,12 +20,12 @@ import { ApiKey } from '@/app/w/[id]/components/control-bar/components/deploy-mo
 import { DeployStatus } from '@/app/w/[id]/components/control-bar/components/deploy-modal/components/deployment-info/components/deploy-status/deploy-status'
 import { ExampleCommand } from '@/app/w/[id]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command'
 import { useNotificationStore } from '@/stores/notifications/store'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { DeployedWorkflowModal } from '../../../deployment-controls/components/deployed-workflow-modal'
 
 interface DeploymentInfoProps {
-  isLoading: boolean
+  isLoading?: boolean
   deploymentInfo: {
-    isDeployed: boolean
     deployedAt?: string
     apiKey: string
     endpoint: string
@@ -36,7 +36,9 @@ interface DeploymentInfoProps {
   onUndeploy: () => void
   isSubmitting: boolean
   isUndeploying: boolean
-  workflowId?: string
+  workflowId: string | null
+  deployedState: WorkflowState
+  isLoadingDeployedState: boolean
 }
 
 export function DeploymentInfo({
@@ -47,9 +49,10 @@ export function DeploymentInfo({
   isSubmitting,
   isUndeploying,
   workflowId,
+  deployedState,
+  isLoadingDeployedState,
 }: DeploymentInfoProps) {
   const [isViewingDeployed, setIsViewingDeployed] = useState(false)
-  const [deployedWorkflowState, setDeployedWorkflowState] = useState<any>(null)
   const { addNotification } = useNotificationStore()
 
   const handleViewDeployed = async () => {
@@ -58,28 +61,13 @@ export function DeploymentInfo({
       return
     }
 
-    try {
-      const response = await fetch(`/api/workflows/${workflowId}/deployed`)
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch deployed workflow')
-      }
-
-      const data = await response.json()
-
-      if (data?.deployedState) {
-        setDeployedWorkflowState(data.deployedState)
-        setIsViewingDeployed(true)
-      } else {
-        addNotification('error', 'Failed to view deployment: No deployment state found', workflowId)
-      }
-    } catch (error) {
-      console.error('Error fetching deployed workflow:', error)
-      addNotification(
-        'error',
-        `Failed to fetch deployed workflow: ${(error as Error).message}`,
-        workflowId
-      )
+    // If deployedState is already loaded, use it directly
+    if (deployedState) {
+      setIsViewingDeployed(true)
+      return
+    }
+    if (!isLoadingDeployedState) {
+      addNotification('error', 'Cannot view deployment: No deployed state available', workflowId)
     }
   }
 
@@ -168,11 +156,12 @@ export function DeploymentInfo({
         </div>
       </div>
 
-      {deployedWorkflowState && (
+      {deployedState && (
         <DeployedWorkflowModal
           isOpen={isViewingDeployed}
           onClose={() => setIsViewingDeployed(false)}
-          deployedWorkflowState={deployedWorkflowState}
+          needsRedeployment={deploymentInfo.needsRedeployment}
+          deployedWorkflowState={deployedState}
         />
       )}
     </>

apps/sim/app/w/[id]/components/control-bar/components/deploy-modal/deploy-modal.tsx

@@ -27,6 +27,7 @@ import { useNotificationStore } from '@/stores/notifications/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/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('DeployModal')
 
@@ -36,6 +37,9 @@ interface DeployModalProps {
   workflowId: string | null
   needsRedeployment: boolean
   setNeedsRedeployment: (value: boolean) => void
+  deployedState: WorkflowState
+  isLoadingDeployedState: boolean
+  refetchDeployedState: () => Promise<void>
 }
 
 interface ApiKey {
@@ -69,6 +73,9 @@ export function DeployModal({
   workflowId,
   needsRedeployment,
   setNeedsRedeployment,
+  deployedState,
+  isLoadingDeployedState,
+  refetchDeployedState,
 }: DeployModalProps) {
   // Store hooks
   const { addNotification } = useNotificationStore()
@@ -306,6 +313,9 @@ export function DeployModal({
 
       setDeploymentInfo(newDeploymentInfo)
 
+      // Fetch the updated deployed state after deployment
+      await refetchDeployedState()
+
       // No notification on successful deploy
     } catch (error: any) {
       logger.error('Error deploying workflow:', { error })
@@ -395,7 +405,9 @@ export function DeployModal({
         useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
       }
 
-      // Add a success notification
+      // Fetch the updated deployed state after redeployment
+      await refetchDeployedState()
+
       addNotification('info', 'Workflow successfully redeployed', workflowId)
     } catch (error: any) {
       logger.error('Error redeploying workflow:', { error })
@@ -407,7 +419,6 @@ export function DeployModal({
 
   // Custom close handler to ensure we clean up loading states
   const handleCloseModal = () => {
-    // Reset all loading states
     setIsSubmitting(false)
     setIsChatDeploying(false)
     setChatSubmitting(false)
@@ -505,8 +516,6 @@ export function DeployModal({
           deployedAt ? new Date(deployedAt) : undefined,
           apiKey
         )
-
-        logger.info('Workflow automatically deployed for chat deployment')
       } catch (error: any) {
         logger.error('Error auto-deploying workflow for chat:', { error })
         addNotification('error', `Failed to deploy workflow: ${error.message}`, workflowId)
@@ -606,38 +615,43 @@ export function DeployModal({
 
           <div className='flex-1 overflow-y-auto'>
             <div className='p-6'>
-              {activeTab === 'api' &&
-                (isDeployed ? (
-                  <DeploymentInfo
-                    isLoading={isLoading}
-                    deploymentInfo={deploymentInfo}
-                    onRedeploy={handleRedeploy}
-                    onUndeploy={handleUndeploy}
-                    isSubmitting={isSubmitting}
-                    isUndeploying={isUndeploying}
-                    workflowId={workflowId || undefined}
-                  />
-                ) : (
-                  <>
-                    {apiDeployError && (
-                      <div className='mb-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-                        <div className='font-semibold'>API Deployment Error</div>
-                        <div>{apiDeployError}</div>
+              {activeTab === 'api' && (
+                <>
+                  {isDeployed ? (
+                    <DeploymentInfo
+                      isLoading={isLoading}
+                      deploymentInfo={deploymentInfo}
+                      onRedeploy={handleRedeploy}
+                      onUndeploy={handleUndeploy}
+                      isSubmitting={isSubmitting}
+                      isUndeploying={isUndeploying}
+                      workflowId={workflowId}
+                      deployedState={deployedState}
+                      isLoadingDeployedState={isLoadingDeployedState}
+                    />
+                  ) : (
+                    <>
+                      {apiDeployError && (
+                        <div className='mb-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+                          <div className='font-semibold'>API Deployment Error</div>
+                          <div>{apiDeployError}</div>
+                        </div>
+                      )}
+                      <div className='-mx-1 px-1'>
+                        <DeployForm
+                          apiKeys={apiKeys}
+                          keysLoaded={keysLoaded}
+                          endpointUrl={`${env.NEXT_PUBLIC_APP_URL}/api/workflows/${workflowId}/execute`}
+                          workflowId={workflowId || ''}
+                          onSubmit={onDeploy}
+                          getInputFormatExample={getInputFormatExample}
+                          onApiKeyCreated={fetchApiKeys}
+                        />
                       </div>
-                    )}
-                    <div className='-mx-1 px-1'>
-                      <DeployForm
-                        apiKeys={apiKeys}
-                        keysLoaded={keysLoaded}
-                        endpointUrl={`${env.NEXT_PUBLIC_APP_URL}/api/workflows/${workflowId}/execute`}
-                        workflowId={workflowId || ''}
-                        onSubmit={onDeploy}
-                        getInputFormatExample={getInputFormatExample}
-                        onApiKeyCreated={fetchApiKeys}
-                      />
-                    </div>
-                  </>
-                ))}
+                    </>
+                  )}
+                </>
+              )}
 
               {activeTab === 'chat' && (
                 <ChatDeploy