chore: slice workflow refresh draft hook (#19292)

web/app/components/workflow-app/components/workflow-main.tsx

@@ -8,6 +8,7 @@ import type { WorkflowProps } from '@/app/components/workflow'
 import WorkflowChildren from './workflow-children'
 import {
   useNodesSyncDraft,
+  useWorkflowRefreshDraft,
   useWorkflowRun,
   useWorkflowStartRun,
 } from '../hooks'
@@ -32,6 +33,7 @@ const WorkflowMain = ({
     doSyncWorkflowDraft,
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft()
+  const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
   const {
     handleBackupDraft,
     handleLoadBackupDraft,
@@ -49,6 +51,7 @@ const WorkflowMain = ({
     return {
       syncWorkflowDraftWhenPageClose,
       doSyncWorkflowDraft,
+      handleRefreshWorkflowDraft,
       handleBackupDraft,
       handleLoadBackupDraft,
       handleRestoreFromPublishedWorkflow,
@@ -61,6 +64,7 @@ const WorkflowMain = ({
   }, [
     syncWorkflowDraftWhenPageClose,
     doSyncWorkflowDraft,
+    handleRefreshWorkflowDraft,
     handleBackupDraft,
     handleLoadBackupDraft,
     handleRestoreFromPublishedWorkflow,

web/app/components/workflow-app/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-nodes-sync-draft'
 export * from './use-workflow-run'
 export * from './use-workflow-start-run'
 export * from './use-is-chat-mode'
+export * from './use-workflow-refresh-draft'

web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -6,20 +6,20 @@ import {
   useWorkflowStore,
 } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
 import {
   useNodesReadOnly,
 } from '@/app/components/workflow/hooks/use-workflow'
 import { syncWorkflowDraft } from '@/service/workflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { API_PREFIX } from '@/config'
+import { useWorkflowRefreshDraft } from '.'
 
 export const useNodesSyncDraft = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const featuresStore = useFeaturesStore()
   const { getNodesReadOnly } = useNodesReadOnly()
-  const { handleRefreshWorkflowDraft } = useWorkflowUpdate()
+  const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
   const params = useParams()
 
   const getPostParams = useCallback(() => {

web/app/components/workflow-app/hooks/use-workflow-refresh-draft.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+import { useWorkflowStore } from '@/app/components/workflow/store'
+import { fetchWorkflowDraft } from '@/service/workflow'
+import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
+import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
+
+export const useWorkflowRefreshDraft = () => {
+  const workflowStore = useWorkflowStore()
+  const { handleUpdateWorkflowCanvas } = useWorkflowUpdate()
+
+  const handleRefreshWorkflowDraft = useCallback(() => {
+    const {
+      appId,
+      setSyncWorkflowDraftHash,
+      setIsSyncingWorkflowDraft,
+      setEnvironmentVariables,
+      setEnvSecrets,
+      setConversationVariables,
+    } = workflowStore.getState()
+    setIsSyncingWorkflowDraft(true)
+    fetchWorkflowDraft(`/apps/${appId}/workflows/draft`).then((response) => {
+      handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdater)
+      setSyncWorkflowDraftHash(response.hash)
+      setEnvSecrets((response.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
+        acc[env.id] = env.value
+        return acc
+      }, {} as Record<string, string>))
+      setEnvironmentVariables(response.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [])
+      setConversationVariables(response.conversation_variables || [])
+    }).finally(() => setIsSyncingWorkflowDraft(false))
+  }, [handleUpdateWorkflowCanvas, workflowStore])
+
+  return {
+    handleRefreshWorkflowDraft,
+  }
+}