Feat/environment variables in workflow (#6515)

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

web/app/components/app-sidebar/app-info.tsx

@@ -28,6 +28,9 @@ import type { CreateAppModalProps } from '@/app/components/explore/create-app-mo
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import UpdateDSLModal from '@/app/components/workflow/update-dsl-modal'
+import type { EnvironmentVariable } from '@/app/components/workflow/types'
+import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-modal'
+import { fetchWorkflowDraft } from '@/service/workflow'
 
 export type IAppInfoProps = {
   expand: boolean
@@ -47,6 +50,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
   const [showSwitchTip, setShowSwitchTip] = useState<string>('')
   const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false)
+  const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
 
   const mutateApps = useContextSelector(
     AppsContext,
@@ -108,11 +112,14 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
     }
   }
 
-  const onExport = async () => {
+  const onExport = async (include = false) => {
     if (!appDetail)
       return
     try {
-      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)
@@ -124,6 +131,27 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
     }
   }
 
+  const exportCheck = async () => {
+    if (!appDetail)
+      return
+    if (appDetail.mode !== 'workflow' && appDetail.mode !== 'advanced-chat') {
+      onExport()
+      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) {
+        onExport()
+        return
+      }
+      setSecretEnvList(list)
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
   const onConfirmDelete = useCallback(async () => {
     if (!appDetail)
       return
@@ -314,7 +342,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 </>
               )}
               <Divider className="!my-1" />
-              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={onExport}>
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={exportCheck}>
                 <span className='text-gray-700 text-sm leading-5'>{t('app.export')}</span>
               </div>
               {
@@ -403,14 +431,19 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             onCancel={() => setShowConfirmDelete(false)}
           />
         )}
-        {
-          showImportDSLModal && (
-            <UpdateDSLModal
-              onCancel={() => setShowImportDSLModal(false)}
-              onBackup={onExport}
-            />
-          )
-        }
+        {showImportDSLModal && (
+          <UpdateDSLModal
+            onCancel={() => setShowImportDSLModal(false)}
+            onBackup={onExport}
+          />
+        )}
+        {secretEnvList.length > 0 && (
+          <DSLExportConfirmModal
+            envList={secretEnvList}
+            onConfirm={onExport}
+            onClose={() => setSecretEnvList([])}
+          />
+        )}
       </div>
     </PortalToFollowElem>
   )