From f21eb8f9fefdb2f9f6fc917e2af838b927cce68a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BE=E5=B2=81?= <mozhenghua19811109@126.com>
Date: Wed, 8 Dec 2021 15:09:01 +0800
Subject: [PATCH] [ISSUE 6444]Optimize task node helper document in workflow
 toolbar (#7226)

* [ISSUE 6444]Optimize task node helper document in workflow toolbar

* fix some review issue than submit by DS

* refact by add guard judgement when type is undefined

* move method helpUrlEnable and helpUrl nest in 'methods' body
---
 .../js/conf/home/pages/dag/_source/config.js  | 12 ++++++++----
 .../dag/_source/formModel/formModel.scss      |  5 +++++
 .../pages/dag/_source/formModel/formModel.vue | 19 ++++++++++++++++++-
 .../src/js/module/i18n/config.js              |  2 ++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
index b56e4e6fe7..af81261117 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
@@ -280,7 +280,8 @@ const tasksType = {
   },
   PROCEDURE: {
     desc: 'PROCEDURE',
-    color: '#525CCD'
+    color: '#525CCD',
+    helperLinkDisable: true
   },
   SQL: {
     desc: 'SQL',
@@ -296,7 +297,8 @@ const tasksType = {
   },
   MR: {
     desc: 'MapReduce',
-    color: '#A0A5CC'
+    color: '#A0A5CC',
+    helperLinkDisable: true
   },
   PYTHON: {
     desc: 'PYTHON',
@@ -320,7 +322,8 @@ const tasksType = {
   },
   SQOOP: {
     desc: 'SQOOP',
-    color: '#E46F13'
+    color: '#E46F13',
+    helperLinkDisable: true
   },
   CONDITIONS: {
     desc: 'CONDITIONS',
@@ -332,7 +335,8 @@ const tasksType = {
   },
   WATERDROP: {
     desc: 'WATERDROP',
-    color: '#646465'
+    color: '#646465',
+    helperLinkDisable: true
   }
 }
 
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
index 4ff63c9681..05216321e7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.scss
@@ -27,6 +27,11 @@
       left: 24px;
       top: 18px;
       font-size: 16px;
+      .helper-link {
+        font-size: 12px;
+        display: inline-block;
+        margin-left: 10px;
+      }
     }
     .go-subtask {
       position: absolute;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index e80f03f500..b53e661296 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -17,7 +17,12 @@
 <template>
   <div class="form-model-wrapper" v-clickoutside="_handleClose">
     <div class="title-box">
-      <span class="name">{{ $t("Current node settings") }}</span>
+      <span class="name">{{ $t("Current node settings") }}
+        <a v-if="helpUrlEnable(nodeData.taskType)" class="helper-link" target="_blank"
+           :href="helpUrl(nodeData.taskType)">
+          <i class="el-icon-question" />
+          {{nodeData.taskType}} {{ $t('Instructions') }}</a>
+      </span>
       <span class="go-subtask">
         <!-- Component can't pop up box to do component processing -->
         <m-log
@@ -452,6 +457,7 @@
   import mMr from './tasks/mr'
   import mSql from './tasks/sql'
   import i18n from '@/module/i18n'
+  import { findLocale } from '@/module/i18n/config'
   import mListBox from './tasks/_source/listBox'
   import mShell from './tasks/shell'
   import mWaterdrop from './tasks/waterdrop'
@@ -574,6 +580,17 @@
     inject: ['dagChart'],
     methods: {
       ...mapActions('dag', ['getTaskInstanceList']),
+      helpUrlEnable (typekey) {
+        const type = tasksType[typekey]
+        if (!type) return false
+        if (!type.helperLinkDisable) return true
+        return !type.helperLinkDisable
+      },
+      helpUrl (tasktype) {
+        return 'https://dolphinscheduler.apache.org/' +
+          findLocale(i18n.globalScope.LOCALE).helperContext +
+          '/docs/latest/user_doc/guide/task/' + tasktype.toLowerCase() + '.html'
+      },
       taskToBackfillItem (task) {
         return {
           code: task.code,
diff --git a/dolphinscheduler-ui/src/js/module/i18n/config.js b/dolphinscheduler-ui/src/js/module/i18n/config.js
index 69ac450f57..20fad4bf01 100644
--- a/dolphinscheduler-ui/src/js/module/i18n/config.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/config.js
@@ -23,11 +23,13 @@ import en_US from './locale/en_US'
 export function localeList () {
   return [
     {
+      helperContext:'zh-cn',
       code: 'zh_CN',
       name: '中文',
       locale: zh_CN
     },
     {
+      helperContext:'en-us',
       code: 'en_US',
       name: 'English',
       locale: en_US