From f7722d9e01d0b92d0040987029165c8a7018321d Mon Sep 17 00:00:00 2001
From: Devosend <devosend@gmail.com>
Date: Fri, 25 Feb 2022 18:53:42 +0800
Subject: [PATCH] [Feature][UI Next] Add dag toolbar tooltip. (#8546)

* toolbar add tooltip

* fix toolbar workflow name dispaly bug
---
 .../src/locales/modules/en_US.ts              |   5 +-
 .../src/locales/modules/zh_CN.ts              |   5 +-
 .../workflow/components/dag/dag-toolbar.tsx   | 163 +++++++++++-------
 .../workflow/components/dag/dag.module.scss   |   7 +
 .../workflow/instance/detail/index.tsx        |   2 +-
 5 files changed, 112 insertions(+), 70 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index e0feaa5ec1..147c400c67 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -564,7 +564,10 @@ const project = {
     positive_integer: 'Please enter a positive integer greater than 0',
     prop_empty: 'prop is empty',
     prop_repeat: 'prop is repeat',
-    node_not_created: 'Failed to save node not created'
+    node_not_created: 'Failed to save node not created',
+    copy_name: 'Copy Name',
+    view_variables: 'View Variables',
+    startup_parameter: 'Startup Parameter'
   },
   node: {
     current_node_settings: 'Current node settings',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index d11fedaf90..ca952c21c7 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -562,7 +562,10 @@ const project = {
     positive_integer: '请输入大于 0 的正整数',
     prop_empty: '自定义参数prop不能为空',
     prop_repeat: 'prop中有重复',
-    node_not_created: '未创建节点保存失败'
+    node_not_created: '未创建节点保存失败',
+    copy_name: '复制名称',
+    view_variables: '查看变量',
+    startup_parameter: '启动参数'
   },
   node: {
     current_node_settings: '当前节点设置',
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
index 63ad0ad2f8..bab2f3d1f2 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-toolbar.tsx
@@ -162,84 +162,113 @@ export default defineComponent({
           Styles[themeStore.darkTheme ? 'toolbar-dark' : 'toolbar-light']
         ]}
       >
-        <div>
-          <span class={Styles['workflow-name']}>
-            {props.definition?.processDefinition?.name ||
+        <span class={Styles['workflow-name']}>
+          {route.name === 'workflow-instance-detail'
+            ? props.instance?.name
+            : props.definition?.processDefinition?.name ||
               t('project.dag.create')}
-          </span>
-          {props.definition?.processDefinition?.name && (
-            <NButton
-              quaternary
-              circle
-              onClick={() => copy(props.definition?.processDefinition?.name)}
-              class={Styles['toolbar-btn']}
-            >
-              <NIcon>
-                <CopyOutlined />
-              </NIcon>
-            </NButton>
-          )}
+        </span>
+        {props.definition?.processDefinition?.name && (
+          <NTooltip
+            v-slots={{
+              trigger: () => (
+                <NButton
+                  quaternary
+                  circle
+                  onClick={() => {
+                    const name =
+                      route.name === 'workflow-instance-detail'
+                        ? props.instance?.name
+                        : props.definition?.processDefinition?.name
+                    copy(name)
+                  }}
+                  class={Styles['toolbar-btn']}
+                >
+                  <NIcon>
+                    <CopyOutlined />
+                  </NIcon>
+                </NButton>
+              ),
+              default: () => t('project.dag.copy_name')
+            }}
+          ></NTooltip>
+        )}
+        <div class={Styles['toolbar-left-part']}>
           {route.name === 'workflow-instance-detail' && (
             <>
-              <NPopover
-                show={paramPopoverRef.value}
-                placement='bottom'
-                trigger='manual'
-              >
-                {{
+              <NTooltip
+                v-slots={{
                   trigger: () => (
-                    <NButton
-                      quaternary
-                      circle
-                      onClick={() =>
-                        (paramPopoverRef.value = !paramPopoverRef.value)
-                      }
-                      class={Styles['toolbar-btn']}
+                    <NPopover
+                      show={paramPopoverRef.value}
+                      placement='bottom'
+                      trigger='manual'
                     >
-                      <NIcon>
-                        <FundViewOutlined />
-                      </NIcon>
-                    </NButton>
-                  ),
-                  header: () => (
-                    <NText strong depth={1}>
-                      {t('project.workflow.parameters_variables')}
-                    </NText>
+                      {{
+                        trigger: () => (
+                          <NButton
+                            quaternary
+                            circle
+                            onClick={() =>
+                              (paramPopoverRef.value = !paramPopoverRef.value)
+                            }
+                            class={Styles['toolbar-btn']}
+                          >
+                            <NIcon>
+                              <FundViewOutlined />
+                            </NIcon>
+                          </NButton>
+                        ),
+                        header: () => (
+                          <NText strong depth={1}>
+                            {t('project.workflow.parameters_variables')}
+                          </NText>
+                        ),
+                        default: () => <VariablesView onCopy={copy} />
+                      }}
+                    </NPopover>
                   ),
-                  default: () => <VariablesView onCopy={copy} />
+                  default: () => t('project.dag.view_variables')
                 }}
-              </NPopover>
-
-              <NPopover
-                show={startupPopoverRef.value}
-                placement='bottom'
-                trigger='manual'
-              >
-                {{
+              ></NTooltip>
+              <NTooltip
+                v-slots={{
                   trigger: () => (
-                    <NButton
-                      quaternary
-                      circle
-                      onClick={() =>
-                        (startupPopoverRef.value = !startupPopoverRef.value)
-                      }
-                      class={Styles['toolbar-btn']}
+                    <NPopover
+                      show={startupPopoverRef.value}
+                      placement='bottom'
+                      trigger='manual'
                     >
-                      <NIcon>
-                        <RightCircleOutlined />
-                      </NIcon>
-                    </NButton>
-                  ),
-                  header: () => (
-                    <NText strong depth={1}>
-                      {t('project.workflow.startup_parameter')}
-                    </NText>
+                      {{
+                        trigger: () => (
+                          <NButton
+                            quaternary
+                            circle
+                            onClick={() =>
+                              (startupPopoverRef.value =
+                                !startupPopoverRef.value)
+                            }
+                            class={Styles['toolbar-btn']}
+                          >
+                            <NIcon>
+                              <RightCircleOutlined />
+                            </NIcon>
+                          </NButton>
+                        ),
+                        header: () => (
+                          <NText strong depth={1}>
+                            {t('project.workflow.startup_parameter')}
+                          </NText>
+                        ),
+                        default: () => (
+                          <StartupParam startupParam={props.instance} />
+                        )
+                      }}
+                    </NPopover>
                   ),
-                  default: () => (
-                    <StartupParam startupParam={props.instance.value} />
-                  )
+                  default: () => t('project.dag.startup_parameter')
                 }}
-              </NPopover>
+              ></NTooltip>
             </>
           )}
         </div>
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
index b4b39516e3..59df30e4b7 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag.module.scss
@@ -75,6 +75,7 @@ $bgLight: #ffffff;
 
 .workflow-name {
   font-size: 14px;
+  font-weight: 700;
 }
 
 .toolbar-btn {
@@ -228,6 +229,12 @@ $bgLight: #ffffff;
   z-index: 9;
 }
 
+.toolbar-left-part {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
 .toolbar-right-part {
   display: flex;
   align-items: center;
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
index 55be0b7835..bbf19ba7ba 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx
@@ -59,7 +59,7 @@ export default defineComponent({
         ]}
       >
         <Dag
-          instance={instance}
+          instance={instance.value}
           definition={definition.value}
           onRefresh={refresh}
           projectCode={projectCode}