[Feature][UI Next] Add dag toolbar tooltip. (#8546)

* toolbar add tooltip

* fix toolbar workflow name dispaly bug

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',

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: '当前节点设置',

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

@@ -162,25 +162,43 @@ export default defineComponent({
           Styles[themeStore.darkTheme ? 'toolbar-dark' : 'toolbar-light']
         ]}
       >
-        <div>
         <span class={Styles['workflow-name']}>
-            {props.definition?.processDefinition?.name ||
+          {route.name === 'workflow-instance-detail'
+            ? props.instance?.name
+            : props.definition?.processDefinition?.name ||
               t('project.dag.create')}
         </span>
         {props.definition?.processDefinition?.name && (
+          <NTooltip
+            v-slots={{
+              trigger: () => (
                 <NButton
                   quaternary
                   circle
-              onClick={() => copy(props.definition?.processDefinition?.name)}
+                  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' && (
             <>
+              <NTooltip
+                v-slots={{
+                  trigger: () => (
                     <NPopover
                       show={paramPopoverRef.value}
                       placement='bottom'
@@ -209,7 +227,13 @@ export default defineComponent({
                         default: () => <VariablesView onCopy={copy} />
                       }}
                     </NPopover>
-
+                  ),
+                  default: () => t('project.dag.view_variables')
+                }}
+              ></NTooltip>
+              <NTooltip
+                v-slots={{
+                  trigger: () => (
                     <NPopover
                       show={startupPopoverRef.value}
                       placement='bottom'
@@ -221,7 +245,8 @@ export default defineComponent({
                             quaternary
                             circle
                             onClick={() =>
-                        (startupPopoverRef.value = !startupPopoverRef.value)
+                              (startupPopoverRef.value =
+                                !startupPopoverRef.value)
                             }
                             class={Styles['toolbar-btn']}
                           >
@@ -236,10 +261,14 @@ export default defineComponent({
                           </NText>
                         ),
                         default: () => (
-                    <StartupParam startupParam={props.instance.value} />
+                          <StartupParam startupParam={props.instance} />
                         )
                       }}
                     </NPopover>
+                  ),
+                  default: () => t('project.dag.startup_parameter')
+                }}
+              ></NTooltip>
             </>
           )}
         </div>

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;

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}