chore: workflow sync with hash (#4250)

web/app/components/workflow/hooks/use-workflow-interactions.ts

@@ -10,13 +10,12 @@ import {
 import { useEdgesInteractions } from './use-edges-interactions'
 import { useNodesInteractions } from './use-nodes-interactions'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { fetchWorkflowDraft } from '@/service/workflow'
 
 export const useWorkflowInteractions = () => {
-  const reactflow = useReactFlow()
   const workflowStore = useWorkflowStore()
   const { handleNodeCancelRunningStatus } = useNodesInteractions()
   const { handleEdgeCancelRunningStatus } = useEdgesInteractions()
-  const { eventEmitter } = useEventEmitterContextContext()
 
   const handleCancelDebugAndPreviewPanel = useCallback(() => {
     workflowStore.setState({
@@ -27,6 +26,16 @@ export const useWorkflowInteractions = () => {
     handleEdgeCancelRunningStatus()
   }, [workflowStore, handleNodeCancelRunningStatus, handleEdgeCancelRunningStatus])
 
+  return {
+    handleCancelDebugAndPreviewPanel,
+  }
+}
+
+export const useWorkflowUpdate = () => {
+  const reactflow = useReactFlow()
+  const workflowStore = useWorkflowStore()
+  const { eventEmitter } = useEventEmitterContextContext()
+
   const handleUpdateWorkflowCanvas = useCallback((payload: WorkflowDataUpdator) => {
     const {
       nodes,
@@ -44,8 +53,19 @@ export const useWorkflowInteractions = () => {
     setViewport(viewport)
   }, [eventEmitter, reactflow])
 
+  const handleRefreshWorkflowDraft = useCallback(() => {
+    const {
+      appId,
+      setSyncWorkflowDraftHash,
+    } = workflowStore.getState()
+    fetchWorkflowDraft(`/apps/${appId}/workflows/draft`).then((response) => {
+      handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdator)
+      setSyncWorkflowDraftHash(response.hash)
+    })
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
   return {
-    handleCancelDebugAndPreviewPanel,
     handleUpdateWorkflowCanvas,
+    handleRefreshWorkflowDraft,
   }
 }