Feat/environment variables in workflow (#6515)

Co-authored-by: JzoNg <jzongcode@gmail.com>

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

@@ -5,7 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useReactFlow } from 'reactflow'
 import { useWorkflowStore } from '../store'
-import { WORKFLOW_DATA_UPDATE } from '../constants'
+import { DSL_EXPORT_CHECK, WORKFLOW_DATA_UPDATE } from '../constants'
 import type { WorkflowDataUpdator } from '../types'
 import {
   initialEdges,
@@ -66,11 +66,18 @@ export const useWorkflowUpdate = () => {
       appId,
       setSyncWorkflowDraftHash,
       setIsSyncingWorkflowDraft,
+      setEnvironmentVariables,
+      setEnvSecrets,
     } = workflowStore.getState()
     setIsSyncingWorkflowDraft(true)
     fetchWorkflowDraft(`/apps/${appId}/workflows/draft`).then((response) => {
       handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdator)
       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) || [])
     }).finally(() => setIsSyncingWorkflowDraft(false))
   }, [handleUpdateWorkflowCanvas, workflowStore])
 
@@ -83,12 +90,13 @@ export const useWorkflowUpdate = () => {
 export const useDSL = () => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
+  const { eventEmitter } = useEventEmitterContextContext()
   const [exporting, setExporting] = useState(false)
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
 
   const appDetail = useAppStore(s => s.appDetail)
 
-  const handleExportDSL = useCallback(async () => {
+  const handleExportDSL = useCallback(async (include = false) => {
     if (!appDetail)
       return
 
@@ -98,7 +106,10 @@ export const useDSL = () => {
     try {
       setExporting(true)
       await doSyncWorkflowDraft()
-      const { data } = await exportAppConfig(appDetail.id)
+      const { data } = await exportAppConfig({
+        appID: appDetail.id,
+        include,
+      })
       const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
       a.href = URL.createObjectURL(file)
@@ -113,7 +124,30 @@ export const useDSL = () => {
     }
   }, [appDetail, notify, t, doSyncWorkflowDraft, exporting])
 
+  const exportCheck = useCallback(async () => {
+    if (!appDetail)
+      return
+    try {
+      const workflowDraft = await fetchWorkflowDraft(`/apps/${appDetail?.id}/workflows/draft`)
+      const list = (workflowDraft.environment_variables || []).filter(env => env.value_type === 'secret')
+      if (list.length === 0) {
+        handleExportDSL()
+        return
+      }
+      eventEmitter?.emit({
+        type: DSL_EXPORT_CHECK,
+        payload: {
+          data: list,
+        },
+      } as any)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }, [appDetail, eventEmitter, handleExportDSL, notify, t])
+
   return {
+    exportCheck,
     handleExportDSL,
   }
 }