From 53340fc07b1e7b6d5f76aeb015fc36eb661e4a32 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Thu, 27 Oct 2022 14:13:00 +0800
Subject: [PATCH] [Feature][UI] Added the display and hide function of
 dynamically created workflow buttons. (#12558)

---
 dolphinscheduler-ui/src/locales/en_US/project.ts      |  1 +
 dolphinscheduler-ui/src/locales/zh_CN/project.ts      |  1 +
 dolphinscheduler-ui/src/store/ui-setting/types.ts     |  1 +
 .../src/store/ui-setting/ui-setting.ts                |  7 +++++++
 .../src/views/projects/workflow/definition/index.tsx  | 11 +++++++++++
 dolphinscheduler-ui/src/views/ui-setting/index.tsx    |  7 +++----
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/dolphinscheduler-ui/src/locales/en_US/project.ts b/dolphinscheduler-ui/src/locales/en_US/project.ts
index 1d2416b7d7..115cb70967 100644
--- a/dolphinscheduler-ui/src/locales/en_US/project.ts
+++ b/dolphinscheduler-ui/src/locales/en_US/project.ts
@@ -44,6 +44,7 @@ export default {
     operating_environment: 'Operating Environment',
     workflow_relation: 'Workflow Relation',
     create_workflow: 'Create Workflow',
+    create_workflow_dynamic: 'Create Workflow (Dynamic)',
     import_workflow: 'Import Workflow',
     workflow_name: 'Workflow Name',
     workflow_instance_name: 'Workflow Instance Name',
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/project.ts b/dolphinscheduler-ui/src/locales/zh_CN/project.ts
index 6476e06d67..31c5c64617 100644
--- a/dolphinscheduler-ui/src/locales/zh_CN/project.ts
+++ b/dolphinscheduler-ui/src/locales/zh_CN/project.ts
@@ -44,6 +44,7 @@ export default {
     operating_environment: '运行环境',
     workflow_relation: '工作流关系',
     create_workflow: '创建工作流',
+    create_workflow_dynamic: '创建工作流 (动态)',
     import_workflow: '导入工作流',
     workflow_name: '工作流名称',
     workflow_instance_name: '工作流实例名称',
diff --git a/dolphinscheduler-ui/src/store/ui-setting/types.ts b/dolphinscheduler-ui/src/store/ui-setting/types.ts
index d38d0c7e5e..175a0f115f 100644
--- a/dolphinscheduler-ui/src/store/ui-setting/types.ts
+++ b/dolphinscheduler-ui/src/store/ui-setting/types.ts
@@ -16,6 +16,7 @@
  */
 interface UISettingStore {
   logTimer: number
+  dynamicTask: boolean
 }
 
 export { UISettingStore }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts b/dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts
index bf392dacae..cfa2fb79a2 100644
--- a/dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts
+++ b/dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts
@@ -22,16 +22,23 @@ export const useUISettingStore = defineStore({
   id: 'ui-setting',
   state: (): UISettingStore => ({
     logTimer: 0,
+    dynamicTask: false
   }),
   persist: true,
   getters: {
     getLogTimer(): number {
       return this.logTimer
+    },
+    getDynamicTask(): boolean {
+      return this.dynamicTask
     }
   },
   actions: {
     setLogTimer(timer: number): void {
       this.logTimer = timer
+    },
+    setDynamicTask(): void {
+      this.dynamicTask = !this.dynamicTask
     }
   }
 })
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 688c1610aa..8773ea7c8e 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -36,6 +36,7 @@ import {
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import { useRouter, useRoute } from 'vue-router'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import ImportModal from './components/import-modal'
 import StartModal from './components/start-modal'
@@ -50,6 +51,7 @@ export default defineComponent({
     const router: Router = useRouter()
     const route = useRoute()
     const projectCode = Number(route.params.projectCode)
+    const uiSettingStore = useUISettingStore()
 
     const {
       variables,
@@ -114,6 +116,7 @@ export default defineComponent({
       batchCopyWorkflow,
       handleCopyUpdateList,
       ...toRefs(variables),
+      uiSettingStore,
       trim
     }
   },
@@ -142,6 +145,14 @@ export default defineComponent({
               >
                 {t('project.workflow.import_workflow')}
               </NButton>
+              {
+                this.uiSettingStore.getDynamicTask && <NButton
+                  size='small'
+                  type='warning'
+                >
+                  {t('project.workflow.create_workflow_dynamic')}
+                </NButton>
+              }
             </NSpace>
             <NSpace>
               <NInput
diff --git a/dolphinscheduler-ui/src/views/ui-setting/index.tsx b/dolphinscheduler-ui/src/views/ui-setting/index.tsx
index 10799c265e..262ca36da4 100644
--- a/dolphinscheduler-ui/src/views/ui-setting/index.tsx
+++ b/dolphinscheduler-ui/src/views/ui-setting/index.tsx
@@ -31,7 +31,6 @@ const setting = defineComponent({
   name: 'ui-setting',
   setup() {
     const uiSettingStore = useUISettingStore()
-    const defaultLogTimer = uiSettingStore.getLogTimer
 
     const logTimerMap = {
       0: 'Off',
@@ -68,7 +67,7 @@ const setting = defineComponent({
         value: 1800
       }
     ]
-    return { defaultLogTimer, logTimerMap, logTimerOptions }
+    return { uiSettingStore, logTimerMap, logTimerOptions }
   },
   render() {
     const { t } = useI18n()
@@ -80,7 +79,7 @@ const setting = defineComponent({
           <span>{t('ui_setting.refresh_time')}</span>
           <NSelect
             style={{ width: '200px' }}
-            default-value={this.logTimerMap[this.defaultLogTimer]}
+            default-value={this.logTimerMap[this.uiSettingStore.getLogTimer]}
             options={this.logTimerOptions}
             onUpdateValue={handleUpdateValue}
           />
@@ -88,7 +87,7 @@ const setting = defineComponent({
         <h4>{t('ui_setting.experimental_feature')}</h4>
         <NSpace align='center' justify='space-between'>
           <span>{t('ui_setting.dynamic_task_component')}</span>
-          <NSwitch round={false}></NSwitch>
+          <NSwitch round={false} defaultValue={this.uiSettingStore.getDynamicTask} onUpdateValue={() => this.uiSettingStore.setDynamicTask()}></NSwitch>
         </NSpace>
       </Card>
     )