use reactquery cache in deploy modal

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { createLogger } from '@sim/logger'
+import { useEffect, useMemo, useState } from 'react'
 import { AlertCircle, Loader2 } from 'lucide-react'
 import { Modal, ModalBody, ModalContent, ModalHeader } from '@/components/emcn'
 import { redactApiKeys } from '@/lib/core/security/redaction'
@@ -10,10 +9,9 @@ import {
   BlockDetailsSidebar,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { useExecutionSnapshot } from '@/hooks/queries/logs'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
-const logger = createLogger('ExecutionSnapshot')
-
 interface TraceSpan {
   blockId?: string
   input?: unknown
@@ -45,25 +43,6 @@ function isMigratedWorkflowState(state: WorkflowState): state is MigratedWorkflo
   return (state as MigratedWorkflowState)._migrated === true
 }
 
-interface ExecutionSnapshotData {
-  executionId: string
-  workflowId: string
-  workflowState: WorkflowState | MigratedWorkflowState
-  executionMetadata: {
-    trigger: string
-    startedAt: string
-    endedAt?: string
-    totalDurationMs?: number
-
-    cost: {
-      total: number | null
-      input: number | null
-      output: number | null
-    }
-    totalTokens: number | null
-  }
-}
-
 interface ExecutionSnapshotProps {
   executionId: string
   traceSpans?: TraceSpan[]
@@ -85,83 +64,55 @@ export function ExecutionSnapshot({
   isOpen = false,
   onClose = () => {},
 }: ExecutionSnapshotProps) {
-  const [data, setData] = useState<ExecutionSnapshotData | null>(null)
-  const [blockExecutions, setBlockExecutions] = useState<Record<string, BlockExecutionData>>({})
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const { data, isLoading, error } = useExecutionSnapshot(executionId)
   const [pinnedBlockId, setPinnedBlockId] = useState<string | null>(null)
 
-  useEffect(() => {
-    if (traceSpans && Array.isArray(traceSpans)) {
-      const blockExecutionMap: Record<string, BlockExecutionData> = {}
-
-      const collectBlockSpans = (spans: TraceSpan[]): TraceSpan[] => {
-        const blockSpans: TraceSpan[] = []
-
-        for (const span of spans) {
-          if (span.blockId) {
-            blockSpans.push(span)
-          }
-          if (span.children && Array.isArray(span.children)) {
-            blockSpans.push(...collectBlockSpans(span.children))
-          }
-        }
+  // Process traceSpans to create blockExecutions map
+  const blockExecutions = useMemo(() => {
+    if (!traceSpans || !Array.isArray(traceSpans)) return {}
 
-        return blockSpans
-      }
+    const blockExecutionMap: Record<string, BlockExecutionData> = {}
 
-      const allBlockSpans = collectBlockSpans(traceSpans)
+    const collectBlockSpans = (spans: TraceSpan[]): TraceSpan[] => {
+      const blockSpans: TraceSpan[] = []
 
-      for (const span of allBlockSpans) {
-        if (span.blockId && !blockExecutionMap[span.blockId]) {
-          blockExecutionMap[span.blockId] = {
-            input: redactApiKeys(span.input || {}),
-            output: redactApiKeys(span.output || {}),
-            status: span.status || 'unknown',
-            durationMs: span.duration || 0,
-          }
+      for (const span of spans) {
+        if (span.blockId) {
+          blockSpans.push(span)
+        }
+        if (span.children && Array.isArray(span.children)) {
+          blockSpans.push(...collectBlockSpans(span.children))
         }
       }
 
-      setBlockExecutions(blockExecutionMap)
+      return blockSpans
     }
-  }, [traceSpans])
-
-  useEffect(() => {
-    const abortController = new AbortController()
 
-    const fetchData = async () => {
-      try {
-        setLoading(true)
-        setError(null)
+    const allBlockSpans = collectBlockSpans(traceSpans)
 
-        const response = await fetch(`/api/logs/execution/${executionId}`, {
-          signal: abortController.signal,
-        })
-        if (!response.ok) {
-          throw new Error(`Failed to fetch execution snapshot data: ${response.statusText}`)
+    for (const span of allBlockSpans) {
+      if (span.blockId && !blockExecutionMap[span.blockId]) {
+        blockExecutionMap[span.blockId] = {
+          input: redactApiKeys(span.input || {}),
+          output: redactApiKeys(span.output || {}),
+          status: span.status || 'unknown',
+          durationMs: span.duration || 0,
         }
-
-        const result = await response.json()
-        setData(result)
-        logger.debug(`Loaded execution snapshot data for execution: ${executionId}`)
-      } catch (err) {
-        if (err instanceof Error && err.name === 'AbortError') return
-        const errorMessage = err instanceof Error ? err.message : 'Unknown error'
-        logger.error('Failed to fetch execution snapshot data:', err)
-        setError(errorMessage)
-      } finally {
-        setLoading(false)
       }
     }
 
-    fetchData()
+    return blockExecutionMap
+  }, [traceSpans])
 
-    return () => abortController.abort()
+  // Reset pinned block when executionId changes
+  useEffect(() => {
+    setPinnedBlockId(null)
   }, [executionId])
 
+  const workflowState = data?.workflowState as WorkflowState | undefined
+
   const renderContent = () => {
-    if (loading) {
+    if (isLoading) {
       return (
         <div
           className={cn('flex items-center justify-center', className)}
@@ -183,24 +134,27 @@ export function ExecutionSnapshot({
         >
           <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
             <AlertCircle className='h-[16px] w-[16px]' />
-            <span className='text-[13px]'>Failed to load execution snapshot: {error}</span>
+            <span className='text-[13px]'>Failed to load execution snapshot: {error.message}</span>
           </div>
         </div>
       )
     }
 
-    if (!data) {
+    if (!data || !workflowState) {
       return (
         <div
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='text-[13px] text-[var(--text-secondary)]'>No data available</div>
+          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+            <Loader2 className='h-[16px] w-[16px] animate-spin' />
+            <span className='text-[13px]'>Loading execution snapshot...</span>
+          </div>
         </div>
       )
     }
 
-    if (isMigratedWorkflowState(data.workflowState)) {
+    if (isMigratedWorkflowState(workflowState)) {
       return (
         <div
           className={cn('flex flex-col items-center justify-center gap-[16px] p-[32px]', className)}
@@ -214,9 +168,7 @@ export function ExecutionSnapshot({
             This log was migrated from the old logging system. The workflow state at execution time
             is not available.
           </div>
-          <div className='text-[12px] text-[var(--text-tertiary)]'>
-            Note: {data.workflowState._note}
-          </div>
+          <div className='text-[12px] text-[var(--text-tertiary)]'>Note: {workflowState._note}</div>
         </div>
       )
     }
@@ -231,7 +183,7 @@ export function ExecutionSnapshot({
       >
         <div className='h-full flex-1'>
           <WorkflowPreview
-            workflowState={data.workflowState}
+            workflowState={workflowState}
             showSubBlocks={true}
             isPannable={true}
             defaultPosition={{ x: 0, y: 0 }}
@@ -244,12 +196,12 @@ export function ExecutionSnapshot({
             executedBlocks={blockExecutions}
           />
         </div>
-        {pinnedBlockId && data.workflowState.blocks[pinnedBlockId] && (
+        {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
           <BlockDetailsSidebar
-            block={data.workflowState.blocks[pinnedBlockId]}
+            block={workflowState.blocks[pinnedBlockId]}
             executionData={blockExecutions[pinnedBlockId]}
             allBlockExecutions={blockExecutions}
-            workflowBlocks={data.workflowState.blocks}
+            workflowBlocks={workflowState.blocks}
             isExecutionMode
           />
         )}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Maximize2 } from 'lucide-react'
 import {
@@ -19,6 +19,7 @@ import {
   BlockDetailsSidebar,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { Versions } from './components'
 
@@ -59,45 +60,23 @@ export function GeneralDeploy({
   const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
   const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
 
-  const versionCacheRef = useRef<Map<number, WorkflowState>>(new Map())
-  const [, forceUpdate] = useState({})
-
   const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
   const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote)
   const versionToLoadInfo = versions.find((v) => v.version === versionToLoad)
 
-  const cachedSelectedState =
-    selectedVersion !== null ? versionCacheRef.current.get(selectedVersion) : null
-
-  const fetchSelectedVersionState = useCallback(
-    async (version: number) => {
-      if (!workflowId) return
-      if (versionCacheRef.current.has(version)) return
+  // React Query for fetching selected version state (with caching)
+  const { data: selectedVersionState } = useDeploymentVersionState(workflowId, selectedVersion)
 
-      try {
-        const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
-        if (res.ok) {
-          const data = await res.json()
-          if (data.deployedState) {
-            versionCacheRef.current.set(version, data.deployedState)
-            forceUpdate({})
-          }
-        }
-      } catch (error) {
-        logger.error('Error fetching version state:', error)
-      }
-    },
-    [workflowId]
-  )
+  // React Query mutation for reverting to a version
+  const revertMutation = useRevertToVersion()
 
   useEffect(() => {
     if (selectedVersion !== null) {
-      fetchSelectedVersionState(selectedVersion)
       setPreviewMode('selected')
     } else {
       setPreviewMode('active')
     }
-  }, [selectedVersion, fetchSelectedVersionState])
+  }, [selectedVersion])
 
   const handleSelectVersion = useCallback((version: number | null) => {
     setSelectedVersion(version)
@@ -122,14 +101,7 @@ export function GeneralDeploy({
     setVersionToLoad(null)
 
     try {
-      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}/revert`, {
-        method: 'POST',
-      })
-
-      if (!response.ok) {
-        throw new Error('Failed to load deployment')
-      }
-
+      await revertMutation.mutateAsync({ workflowId, version })
       onLoadDeploymentComplete()
     } catch (error) {
       logger.error('Failed to load deployment:', error)
@@ -152,11 +124,11 @@ export function GeneralDeploy({
   }
 
   const workflowToShow = useMemo(() => {
-    if (previewMode === 'selected' && cachedSelectedState) {
-      return cachedSelectedState
+    if (previewMode === 'selected' && selectedVersionState) {
+      return selectedVersionState
     }
     return deployedState
-  }, [previewMode, cachedSelectedState, deployedState])
+  }, [previewMode, selectedVersionState, deployedState])
 
   const showToggle = selectedVersion !== null && deployedState
 
@@ -241,8 +213,9 @@ export function GeneralDeploy({
                     <Button
                       type='button'
                       variant='default'
+                      size='sm'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute top-[8px] right-[8px] z-10 h-[28px] w-[28px] p-0'
+                      className='absolute top-[8px] right-[8px] z-10'
                     >
                       <Maximize2 className='h-[14px] w-[14px]' />
                     </Button>
@@ -351,7 +324,7 @@ export function GeneralDeploy({
                     showSubBlocks={true}
                     isPannable={true}
                     defaultPosition={{ x: 0, y: 0 }}
-                    defaultZoom={0.8}
+                    defaultZoom={0.6}
                     onNodeClick={(blockId) => {
                       setExpandedSelectedBlockId(
                         expandedSelectedBlockId === blockId ? null : blockId