From 9bca69ebfbb49c26b94f0ee0517f630f79684997 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sun, 3 Mar 2024 14:10:11 +0800
Subject: [PATCH] app DSL export supported

---
 web/app/(commonLayout)/apps/AppCard.tsx | 18 ++++++++++++++++--
 web/i18n/en-US/app.ts                   |  1 +
 web/i18n/zh-Hans/app.ts                 |  1 +
 web/service/apps.ts                     |  5 +++++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index 35194e91e6..d9215914c7 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -13,7 +13,7 @@ import type { ConfigParams } from '@/app/components/app/overview/settings'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
-import { copyApp, deleteApp, fetchAppDetail, updateAppSiteConfig } from '@/service/apps'
+import { copyApp, deleteApp, exportAppConfig, fetchAppDetail, updateAppSiteConfig } from '@/service/apps'
 import DuplicateAppModal from '@/app/components/app/duplicate-modal'
 import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
 import AppIcon from '@/app/components/base/app-icon'
@@ -135,6 +135,20 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
     }
   }
 
+  const onExport = async () => {
+    try {
+      const { data } = await exportAppConfig(app.id)
+      const a = document.createElement('a')
+      const file = new Blob([data], { type: 'application/yaml' })
+      a.href = URL.createObjectURL(file)
+      a.download = `${app.name}.yml`
+      a.click()
+    }
+    catch (e) {
+      notify({ type: 'error', message: t('app.exportFailed') })
+    }
+  }
+
   const Operations = (props: HtmlContentProps) => {
     const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
@@ -153,7 +167,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       e.stopPropagation()
       props.onClick?.()
       e.preventDefault()
-      // TODO export
+      onExport()
     }
     const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
       e.stopPropagation()
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index f8423e601b..dab2b10893 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -10,6 +10,7 @@ const translation = {
   duplicate: 'Duplicate',
   duplicateTitle: 'Duplicate App',
   export: 'Export DSL',
+  exportFailed: 'Export DSL failed.',
   createFromConfigFile: 'Create from DSL file',
   deleteAppConfirmTitle: 'Delete this app?',
   deleteAppConfirmContent:
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index f150859a3d..2ec8bc5411 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -10,6 +10,7 @@ const translation = {
   duplicate: '复制',
   duplicateTitle: '复制应用',
   export: '导出 DSL',
+  exportFailed: '导出 DSL 失败',
   createFromConfigFile: '通过 DSL 文件创建',
   deleteAppConfirmTitle: '确认删除应用?',
   deleteAppConfirmContent:
diff --git a/web/service/apps.ts b/web/service/apps.ts
index 43de7a23c3..08897ee95d 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -19,10 +19,15 @@ export const fetchAppTemplates: Fetcher<AppTemplatesResponse, { url: string }> =
 export const createApp: Fetcher<AppDetailResponse, { name: string; icon: string; icon_background: string; mode: AppMode; description?: string; config?: ModelConfig }> = ({ name, icon, icon_background, mode, description, config }) => {
   return post<AppDetailResponse>('apps', { body: { name, icon, icon_background, mode, description, model_config: config } })
 }
+
 export const copyApp: Fetcher<AppDetailResponse, { appID: string; name: string; icon: string; icon_background: string; mode: AppMode; description?: string }> = ({ appID, name, icon, icon_background, mode, description }) => {
   return post<AppDetailResponse>(`apps/${appID}/copy`, { body: { name, icon, icon_background, mode, description } })
 }
 
+export const exportAppConfig: Fetcher<{ data: string }, string> = (appID) => {
+  return post<{ data: string }>(`apps/${appID}/export`)
+}
+
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
   return del<CommonResponse>(`apps/${appID}`)
 }