[Feature][UI Next] Workflow save modal (#8341)

* [Feature][UI Next] Fix tslint bugs

* [Feature][UI Next] Workflow save modal

* [Feature][UI Next] Format code

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -496,7 +496,16 @@ const project = {
     dagre_layout: 'Dagre',
     rows: 'Rows',
     cols: 'Cols',
-    copy_success: 'Copy Success'
+    copy_success: 'Copy Success',
+    workflow_name: 'Workflow Name',
+    description: 'Description',
+    tenant: 'Tenant',
+    timeout_alert: 'Timeout Alert',
+    global_variables: 'Global Variables',
+    basic_info: 'Basic Information',
+    minute: 'Minute',
+    key: 'Key',
+    value: 'Value'
   },
   node: {
     current_node_settings: 'Current node settings',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -495,7 +495,16 @@ const project = {
     dagre_layout: '层次布局',
     rows: '行数',
     cols: '列数',
-    copy_success: '复制成功'
+    copy_success: '复制成功',
+    workflow_name: '工作流名称',
+    description: '描述',
+    tenant: '租户',
+    timeout_alert: '超时告警',
+    global_variables: '全局变量',
+    basic_info: '基本信息',
+    minute: '分',
+    key: '键',
+    value: '值'
   },
   node: {
     current_node_settings: '当前节点设置',

dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx

@@ -29,7 +29,7 @@ import {
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
-import { ALL_TASK_TYPES } from '@/views/projects/task/constants/task-type'
+import { TASK_TYPES_MAP } from '@/views/projects/task/constants/task-type'
 import Card from '@/components/card'
 import VersionModal from './components/version-modal'
 import MoveModal from './components/move-modal'
@@ -113,7 +113,7 @@ const TaskDefinition = defineComponent({
               <NSelect
                 v-model={[this.taskType, 'value']}
                 size='small'
-                options={Object.keys(ALL_TASK_TYPES).map((item) => {
+                options={Object.keys(TASK_TYPES_MAP).map((item) => {
                   return { value: item, label: item }
                 })}
                 placeholder={t('project.task.task_type')}

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-save-modal.tsx

+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, PropType, ref, computed, onMounted } from 'vue'
+import Modal from '@/components/modal'
+import { useI18n } from 'vue-i18n'
+import {
+  NForm,
+  NFormItem,
+  NInput,
+  NSelect,
+  NSwitch,
+  NInputNumber,
+  NDynamicInput
+} from 'naive-ui'
+import { queryTenantList } from '@/service/modules/tenants'
+import './x6-style.scss'
+
+const props = {
+  visible: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}
+
+interface Tenant {
+  tenantCode: string
+  id: number
+}
+
+export default defineComponent({
+  name: 'dag-save-modal',
+  props,
+  emits: ['update:show', 'save'],
+  setup(props, context) {
+    const { t } = useI18n()
+
+    const tenants = ref<Tenant[]>([])
+    const tenantsDropdown = computed(() => {
+      if (tenants.value) {
+        return tenants.value
+          .map((t) => ({
+            label: t.tenantCode,
+            value: t.tenantCode
+          }))
+          .concat({ label: 'default', value: 'default' })
+      }
+      return []
+    })
+    onMounted(() => {
+      queryTenantList().then((res: any) => {
+        tenants.value = res
+      })
+    })
+
+    const formValue = ref({
+      name: '',
+      description: '',
+      tenantCode: 'default',
+      timeoutFlag: false,
+      timeout: 0,
+      globalParams: []
+    })
+    const formRef = ref()
+    const rule = {
+      name: {
+        required: true
+      }
+    }
+    const onSubmit = () => {
+      context.emit('save', formValue.value)
+    }
+    const onCancel = () => {
+      context.emit('update:show', false)
+    }
+
+    return () => (
+      <Modal
+        show={props.visible}
+        title={t('project.dag.basic_info')}
+        onConfirm={onSubmit}
+        onCancel={onCancel}
+        autoFocus={false}
+      >
+        <NForm
+          label-width='100'
+          model={formValue.value}
+          rules={rule}
+          size='medium'
+          label-placement='left'
+          ref={formRef}
+        >
+          <NFormItem label={t('project.dag.workflow_name')} path='name'>
+            <NInput v-model:value={formValue.value.name} />
+          </NFormItem>
+          <NFormItem label={t('project.dag.description')} path='description'>
+            <NInput
+              type='textarea'
+              v-model:value={formValue.value.description}
+            />
+          </NFormItem>
+          <NFormItem label={t('project.dag.tenant')} path='tenantCode'>
+            <NSelect
+              options={tenantsDropdown.value}
+              v-model:value={formValue.value.tenantCode}
+            />
+          </NFormItem>
+          <NFormItem label={t('project.dag.timeout_alert')} path='timeoutFlag'>
+            <NSwitch v-model:value={formValue.value.timeoutFlag} />
+          </NFormItem>
+          {formValue.value.timeoutFlag && (
+            <NFormItem label=' ' path='timeout'>
+              <NInputNumber
+                v-model:value={formValue.value.timeout}
+                show-button={false}
+                min={0}
+                v-slots={{
+                  suffix: () => '分'
+                }}
+              ></NInputNumber>
+            </NFormItem>
+          )}
+          <NFormItem
+            label={t('project.dag.global_variables')}
+            path='globalParams'
+          >
+            <NDynamicInput
+              v-model:value={formValue.value.globalParams}
+              preset='pair'
+              key-placeholder={t('project.dag.key')}
+              value-placeholder={t('project.dag.value')}
+            />
+          </NFormItem>
+        </NForm>
+      </Modal>
+    )
+  }
+})

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx

@@ -15,19 +15,10 @@
  * limitations under the License.
  */
 
-import {
-  defineComponent,
-  ref,
-  inject,
-  PropType,
-  onMounted,
-  watch,
-  computed
-} from 'vue'
-import type { Ref } from 'vue'
+import { defineComponent, ref, inject, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Styles from './dag.module.scss'
-import { NTooltip, NIcon, NButton, NSelect, useMessage } from 'naive-ui'
+import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui'
 import {
   SearchOutlined,
   DownloadOutlined,
@@ -37,7 +28,7 @@ import {
   FormatPainterOutlined,
   CopyOutlined
 } from '@vicons/antd'
-import { useNodeSearch, useTextCopy, useCellQuery } from './dag-hooks'
+import { useNodeSearch, useTextCopy } from './dag-hooks'
 import { DataUri } from '@antv/x6'
 import { useFullscreen } from '@vueuse/core'
 import { useRouter } from 'vue-router'
@@ -59,7 +50,7 @@ const props = {
 export default defineComponent({
   name: 'workflow-dag-toolbar',
   props,
-  emits: ['versionToggle'],
+  emits: ['versionToggle', 'saveModelToggle'],
   setup(props, context) {
     const { t } = useI18n()
 
@@ -302,6 +293,9 @@ export default defineComponent({
             type='info'
             secondary
             round
+            onClick={() => {
+              context.emit('saveModelToggle', true)
+            }}
           >
             {t('project.dag.save')}
           </NButton>

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -30,6 +30,7 @@ import {
 import { useThemeStore } from '@/store/theme/theme'
 import VersionModal from '../../definition/components/version-modal'
 import { WorkflowDefinition } from './types'
+import DagSaveModal from './dag-save-modal'
 import './x6-style.scss'
 
 const props = {
@@ -89,6 +90,20 @@ export default defineComponent({
       versionModalShow.value = false
     }
 
+    // Save modal
+    const saveModalShow = ref(false)
+    const saveModelToggle = (bool: boolean) => {
+      if (typeof bool === 'boolean') {
+        saveModalShow.value = bool
+      } else {
+        saveModalShow.value = !versionModalShow.value
+      }
+    }
+    const onSave = (form: any) => {
+      // TODO
+      console.log(form)
+    }
+
     return () => (
       <div
         class={[
@@ -100,6 +115,7 @@ export default defineComponent({
           layoutToggle={layoutToggle}
           definition={props.definition}
           onVersionToggle={versionToggle}
+          onSaveModelToggle={saveModelToggle}
         />
         <div class={Styles.content}>
           <DagSidebar onDragStart={onDragStart} />
@@ -119,6 +135,7 @@ export default defineComponent({
             onUpdateList={refreshDetail}
           />
         )}
+        <DagSaveModal v-model:show={saveModalShow.value} onSave={onSave} />
       </div>
     )
   }

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-dag-drag-drop.ts

@@ -18,7 +18,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import type { Graph } from '@antv/x6'
-import type { Dragged } from '.'
 import { genTaskCodeList } from '@/service/modules/task-definition'
 import { useCellUpdate } from './dag-hooks'
 import { useRoute } from 'vue-router'
@@ -28,6 +27,12 @@ interface Options {
   graph: Ref<Graph | undefined>
 }
 
+interface Dragged {
+  x: number
+  y: number
+  type: string
+}
+
 /**
  * Sidebar item drag && drop in canvas
  */

dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx

@@ -67,7 +67,7 @@ export default defineComponent({
       <Card title={t('resource.file.file_details')}>
         <div class={styles['file-edit-content']}>
           <h2>
-            <span>{this.resourceViewRef?.value.alias}</span>
+            <span>{this.resourceViewRef.value?.alias}</span>
           </h2>
           <NForm
             rules={this.rules}
@@ -82,7 +82,7 @@ export default defineComponent({
                 }}
               >
                 <MonacoEditor
-                  v-model={[this.resourceViewRef?.value.content, 'value']}
+                  v-model={[this.resourceViewRef.value?.content, 'value']}
                 />
               </div>
             </NFormItem>

dolphinscheduler-ui-next/tsconfig.json

@@ -13,6 +13,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
+    "skipLibCheck": true,
     "types": ["vite/client"],
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },