feat: support importing and overwriting workflow DSL (#5511)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/workflow/panel-contextmenu.tsx

@@ -8,48 +8,30 @@ import { useClickAway } from 'ahooks'
 import ShortcutsName from './shortcuts-name'
 import { useStore } from './store'
 import {
+  useDSL,
   useNodesInteractions,
   usePanelInteractions,
   useWorkflowStartRun,
 } from './hooks'
 import AddBlock from './operator/add-block'
 import { useOperator } from './operator/hooks'
-import { exportAppConfig } from '@/service/apps'
-import { useToastContext } from '@/app/components/base/toast'
-import { useStore as useAppStore } from '@/app/components/app/store'
 
 const PanelContextmenu = () => {
   const { t } = useTranslation()
-  const { notify } = useToastContext()
   const ref = useRef(null)
   const panelMenu = useStore(s => s.panelMenu)
   const clipboardElements = useStore(s => s.clipboardElements)
-  const appDetail = useAppStore(s => s.appDetail)
+  const setShowImportDSLModal = useStore(s => s.setShowImportDSLModal)
   const { handleNodesPaste } = useNodesInteractions()
   const { handlePaneContextmenuCancel } = usePanelInteractions()
   const { handleStartWorkflowRun } = useWorkflowStartRun()
   const { handleAddNote } = useOperator()
+  const { handleExportDSL } = useDSL()
 
   useClickAway(() => {
     handlePaneContextmenuCancel()
   }, ref)
 
-  const onExport = async () => {
-    if (!appDetail)
-      return
-    try {
-      const { data } = await exportAppConfig(appDetail.id)
-      const a = document.createElement('a')
-      const file = new Blob([data], { type: 'application/yaml' })
-      a.href = URL.createObjectURL(file)
-      a.download = `${appDetail.name}.yml`
-      a.click()
-    }
-    catch (e) {
-      notify({ type: 'error', message: t('app.exportFailed') })
-    }
-  }
-
   const renderTrigger = () => {
     return (
       <div
@@ -123,10 +105,16 @@ const PanelContextmenu = () => {
       <div className='p-1'>
         <div
           className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
-          onClick={() => onExport()}
+          onClick={() => handleExportDSL()}
         >
           {t('app.export')}
         </div>
+        <div
+          className='flex items-center justify-between px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+          onClick={() => setShowImportDSLModal(true)}
+        >
+          {t('workflow.common.importDSL')}
+        </div>
       </div>
     </div>
   )