[Feature-3701][ui] Shortcut connection action for node in same flow (#3699)

* [Improvement][ui] Shortcut connection action for node in same flow

* Set pre-tasks to get current node connect to pre-nodes automatically.
* Only SHELL and SUB-PROCESS node enabled this method.

* Add license

* Fix code-smell

* Replace Chinese comments

* Try to re-trigger e2eTest

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue

@@ -277,6 +277,12 @@
           :backfill-item="backfillItem"
           :pre-node="preNode">
         </m-conditions>
+        <!-- Pre-tasks in workflow -->
+        <m-pre-tasks
+          v-if="['SHELL', 'SUB_PROCESS'].indexOf(taskType) > -1"
+          @on-pre-tasks="_onPreTasks"
+          ref="PRE_TASK"
+          :backfill-item="backfillItem"></m-pre-tasks>
       </div>
     </div>
     <div class="bottom-box">
@@ -310,6 +316,7 @@
   import mSelectInput from './_source/selectInput'
   import mTimeoutAlarm from './_source/timeoutAlarm'
   import mWorkerGroups from './_source/workerGroups'
+  import mPreTasks from './tasks/pre_tasks'
   import clickoutside from '@/module/util/clickoutside'
   import disabledState from '@/module/mixin/disabledState'
   import { isNameExDag, rtBantpl } from './../plugIn/util'
@@ -369,7 +376,11 @@
             value: 'failed',
             label: `${i18n.$t('failed')}`
           }
-        ]
+        ],
+        // preTasks
+        preTaskIdsInWorkflow: [],
+        preTasksToAdd: [],    // pre-taskIds to add, used in jsplumb connects
+        preTasksToDelete: [], // pre-taskIds to delete, used in jsplumb connects
       }
     },
     /**
@@ -393,6 +404,14 @@
       _onDependent (o) {
         this.dependence = Object.assign(this.dependence, {}, o)
       },
+      /**
+       * Pre-tasks in workflow
+       */
+      _onPreTasks (o) {
+        this.preTaskIdsInWorkflow = o.preTasks
+        this.preTasksToAdd = o.preTasksToAdd
+        this.preTasksToDelete = o.preTasksToDelete
+      },
       /**
        * cache dependent
        */
@@ -543,6 +562,43 @@
         if (!this.$refs[this.taskType]._verification()) {
           return
         }
+        // Verify preTasks and update dag-things
+        if (this.$refs['PRE_TASK']) {
+          if (!this.$refs['PRE_TASK']._verification()) {
+            return
+          }
+          else {
+            // Sync data-targetarr
+            $(`#${this.id}`).attr(
+              'data-targetarr', this.preTaskIdsInWorkflow ? this.preTaskIdsInWorkflow.join(',') : '')
+
+            // Update JSP connections
+            let plumbIns = JSP.JspInstance
+            var targetId = this.id
+
+            // Update new connections
+            this.preTasksToAdd.map(sourceId => {
+              plumbIns.connect({
+                source: sourceId,
+                target: targetId,
+                type: 'basic',
+                paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
+                HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}
+              })
+            })
+
+            // Update remove connections
+            let currentConnects = plumbIns.getAllConnections()
+            let len = currentConnects.length
+            for (let i = 0; i < len; i++) {
+              if (this.preTasksToDelete.indexOf(currentConnects[i].sourceId) > -1 && currentConnects[i].targetId == targetId) {
+                plumbIns.deleteConnection(currentConnects[i])
+                i -= 1
+                len -= 1
+              }
+            }
+          }
+        }
 
         $(`#${this.id}`).find('span').text(this.name)
         this.conditionResult.successNode[0] = this.successBranch
@@ -684,6 +740,16 @@
       }
       this.cacheBackfillItem = JSON.parse(JSON.stringify(o))
       this.isContentBox = true
+
+      // Init value of preTask selector
+      let preTaskIds = $(`#${this.id}`).attr('data-targetarr')
+      if (!_.isEmpty(this.backfillItem)) {
+        if (preTaskIds && preTaskIds.length) {
+          this.backfillItem.preTasks = preTaskIds.split(',')
+        } else {
+          this.backfillItem.preTasks = []
+        }
+      }
     },
     mounted () {
       let self = this
@@ -745,7 +811,8 @@
       mSelectInput,
       mTimeoutAlarm,
       mPriority,
-      mWorkerGroups
+      mWorkerGroups,
+      mPreTasks,
     }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue

@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+<template>
+  <div class="pre_tasks-model">
+    <div class="clearfix list">
+      <div class="text-box">
+        <span>{{$t('Pre tasks')}}</span>
+      </div>
+      <div class="cont-box">
+        <div class="label-box">
+          <x-select
+              ref="preTasksSelector"
+              style="width: 100%;"
+              filterable
+              multiple
+              v-model="preTasks"
+              :disabled="isDetails"
+              :id="preTasksSelectorId">
+            <x-option
+                v-for="task in preTaskList"
+                :key="task.id"
+                :value="task.id"
+                :label="task.name">
+            </x-option>
+          </x-select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import disabledState from '@/module/mixin/disabledState'
+  export default {
+    name: 'pre_tasks',
+    mixins: [disabledState],
+    props: {
+      backfillItem: Object
+    },
+    data () {
+      return {
+        preTasksSelectorId: '_preTasksSelectorId',  // Refresh target vue-component by changing id
+        preTasks: [],
+        preTasksOld: [],
+      }
+    },
+    mounted () {
+      this.preTasks = this.backfillItem['preTasks'] || this.preTasks
+      this.preTasksOld = this.preTasks
+    
+      // Refresh target vue-component by changing id
+      this.$nextTick(() => {
+        this.preTasksSelectorId = 'preTasksSelectorId'
+      })
+    },
+    computed: {
+      preTaskList: function () {
+        let currentTaskId = this.backfillItem['id'] || this.id
+        let cacheTasks = Object.assign({}, this.store.state.dag.tasks)
+        let keys = Object.keys(cacheTasks)
+        for (let i = 0; i < keys.length; i++) {
+          let key = keys[i]
+          if ((!cacheTasks[key].id || !cacheTasks[key].name) || (currentTaskId && cacheTasks[key].id === currentTaskId)) {
+            // Clean undefined and current task data
+            delete cacheTasks[key]
+          }
+        }
+
+        return cacheTasks
+      },
+      // preTaskIds used to create new connection
+      preTasksToAdd: function () {
+        let toAddTasks = this.preTasks.filter(taskId => {
+          return (this.preTasksOld.indexOf(taskId) === -1)
+        })
+        return toAddTasks
+      },
+      // preTaskIds used to delete connection
+      preTasksToDelete: function () {
+        return this.preTasksOld.filter(taskId => this.preTasks.indexOf(taskId) === -1)
+      },
+    },
+    methods: {
+      // Pass data to parent-level to process dag
+      _verification () {
+        this.$emit('on-pre-tasks', {
+          preTasks: this.preTasks,
+          preTasksToAdd: this.preTasksToAdd,
+          preTasksToDelete: this.preTasksToDelete,
+        })
+        return true
+      }
+    }
+  }
+</script>

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -642,5 +642,6 @@ export default {
   'Related items': 'Related items',
   'Project name is required': 'Project name is required',
   'Batch move': 'Batch move',
-  Version: 'Version'
+  Version: 'Version',
+  'Pre tasks': 'Pre tasks',
 }

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -642,5 +642,6 @@ export default {
   'Related items': '关联项目',
   'Project name is required': '项目名称必填',
   'Batch move': '批量移动',
-  Version: '版本'
+  Version: '版本',
+  'Pre tasks': '前置任务',
 }