feat: Show tool/application source and revamp node menu enable toggle

Author: zhanweizhang7

ui/src/components/app-icon/icons/application.ts

@@ -762,4 +762,50 @@ export default {
       ])
     },
   },
+  'app-rename': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M5.35396 11.2488H7.62464L14.3787 4.49454C14.6107 4.26247 14.6112 3.88637 14.3798 3.65369L12.3341 1.59729C12.1016 1.36479 11.7247 1.36479 11.4922 1.59729L11.0723 2.01716L11.074 2.01881L4.75861 8.38274V10.6534C4.75861 10.9822 5.02516 11.2488 5.35396 11.2488ZM11.8943 2.84344L13.1 4.05546L12.0797 5.07672L10.8803 3.8773L11.8943 2.84344ZM11.2381 5.91907L7.12247 10.0387H7.12065L5.96867 8.88492L10.0465 4.7274L11.2381 5.91907Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M8.76309 2.31594H2.44336C2.07802 2.31594 1.78186 2.6121 1.78186 2.97744V13.5614C1.78186 13.9267 2.07802 14.2229 2.44336 14.2229H13.0273C13.3927 14.2229 13.6888 13.9267 13.6888 13.5614V7.16134L12.3575 8.50066V12.8981H3.1131V3.64074H7.46236L8.76309 2.31594Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-active': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M7.99996 14C11.3137 14 14 11.3137 14 8.00002C14 4.68631 11.3137 2.00002 7.99996 2.00002C4.68625 2.00002 1.99996 4.68631 1.99996 8.00002C1.99996 11.3137 4.68625 14 7.99996 14ZM7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334ZM7.22663 9.51999L10.7622 5.98445C10.8923 5.85428 11.1034 5.85428 11.2336 5.98445L11.705 6.45586C11.8351 6.58603 11.8351 6.79709 11.705 6.92726L7.46233 11.1699C7.33216 11.3001 7.1211 11.3001 6.99093 11.1699L4.55065 8.72962C4.42047 8.59945 4.42047 8.38839 4.55065 8.25822L5.02205 7.78681C5.15223 7.65664 5.36328 7.65664 5.49346 7.78681L7.22663 9.51999Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }

ui/src/locales/lang/en-US/common.ts

@@ -69,6 +69,7 @@ export default {
     label: 'Status',
     enable: 'Enable',
     disable: 'Disable',
+    enableStatus: 'Enable status',
     enabled: 'Enabled',
     disabled: 'Disabled',
     enableSuccess: 'Successful',

ui/src/locales/lang/zh-CN/common.ts

@@ -71,6 +71,7 @@ export default {
     label: '状态',
     enable: '启用',
     disable: '禁用',
+    enableStatus: '启用状态',
     enabled: '已启用',
     disabled: '已禁用',
     enableSuccess: '启用成功',

ui/src/locales/lang/zh-Hant/common.ts

@@ -69,6 +69,7 @@ export default {
     label: '狀態',
     enable: '啟用',
     disable: '停用',
+    enableStatus: '啟用狀態',
     enabled: '已啟用',
     disabled: '已停用',
     enableSuccess: '啟用成功',

ui/src/workflow/common/NodeContainer.vue

@@ -63,13 +63,15 @@
                 <AppIcon iconName="app-more" class="color-secondary"></AppIcon>
               </el-button>
               <template #dropdown>
-                <el-dropdown-menu style="min-width: 80px">
-                  <el-dropdown-item @click="renameNode" class="p-8">{{
-                    $t('common.rename')
-                  }}</el-dropdown-item>
-                  <el-dropdown-item @click="copyNode" class="p-8">{{
-                    $t('common.copy')
-                  }}</el-dropdown-item>
+                <el-dropdown-menu style="min-width: 144px">
+                  <el-dropdown-item @click="renameNode" class="p-8">
+                    <AppIcon iconName="app-rename" class="color-secondary"></AppIcon>
+                    {{ $t('common.rename') }}</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="copyNode" class="p-8">
+                    <AppIcon iconName="app-copy" class="color-secondary"></AppIcon>
+                    {{ $t('common.copy') }}</el-dropdown-item
+                  >
                   <template
                     v-if="
                       !(
@@ -80,17 +82,16 @@
                       )
                     "
                   >
-                    <el-dropdown-item v-if="nodeDisabled" @click="enable()" class="p-8">{{
-                      $t('common.status.enable')
-                    }}</el-dropdown-item>
-                    <el-dropdown-item v-else @click="disable()" class="p-8">{{
-                      $t('common.status.disable')
-                    }}</el-dropdown-item></template
-                  >
+                    <div class="flex-between p-8" @click.stop>
+                      <AppIcon iconName="app-active" class="color-secondary"></AppIcon>
+                      <span class="mr-16">{{ $t('common.status.enableStatus') }}</span>
+                      <el-switch v-model="nodeEnabled" size="small" /></div
+                  ></template>
 
-                  <el-dropdown-item @click="deleteNode" class="border-t p-8">{{
-                    $t('common.delete')
-                  }}</el-dropdown-item>
+                  <el-dropdown-item @click="deleteNode" class="border-t p-8">
+                    <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
+                    {{ $t('common.delete') }}</el-dropdown-item
+                  >
                   <div v-if="sourceName" class="border-t p-8" @click.stop>
                     <div class="color-secondary font-small">{{ $t('common.source') }}</div>
                     <div class="lighter mt-4 break-all">{{ sourceName }}</div>
@@ -269,13 +270,6 @@ const dropdownMenuStyle = computed(() => {
       : '0px',
   }
 })
-const disable = () => {
-  nodeDisabled.value = true
-}
-const enable = () => {
-  nodeDisabled.value = false
-}
-
 const nodeDisabled = computed({
   get: () => {
     return props.nodeModel.properties.disabled || false
@@ -284,6 +278,12 @@ const nodeDisabled = computed({
     set(props.nodeModel.properties, 'disabled', v)
   },
 })
+const nodeEnabled = computed({
+  get: () => !nodeDisabled.value,
+  set: (v: boolean) => {
+    nodeDisabled.value = !v
+  },
+})
 const titleFormRef = ref()
 const nodeNameDialogVisible = ref<boolean>(false)
 const form = ref<any>({