[Feature][UI Next][V1.0.0-Alpha] Unify clickable text in tables. (#8813)

dolphinscheduler-ui-next/src/components/button-link/index.module.scss

@@ -14,10 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.button-link {
+  cursor: pointer;
+  color: var(--n-color-target);
 
-.links {
-  color: #2080f0;
-  text-decoration: none;
   &:hover {
     text-decoration: underline;
   }

dolphinscheduler-ui-next/src/components/button-link/index.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+import { defineComponent, PropType, renderSlot } from 'vue'
+import { NButton } from 'naive-ui'
+import styles from './index.module.scss'
+
+const props = {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  iconPlacement: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'left'
+  }
+}
+
+const ButtonLink = defineComponent({
+  name: 'button-link',
+  props,
+  emits: ['click'],
+  setup(props, { slots, emit }) {
+    const onClick = (ev: MouseEvent) => {
+      emit('click', ev)
+    }
+    return () => (
+      <NButton {...props} onClick={onClick} text class={styles['button-link']}>
+        {{
+          default: renderSlot(slots, 'default'),
+          icon: renderSlot(slots, 'icon')
+        }}
+      </NButton>
+    )
+  }
+})
+
+export default ButtonLink

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { defineComponent, h, PropType, renderSlot, Ref } from 'vue'
-import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui'
+import { defineComponent, PropType, renderSlot, Ref } from 'vue'
+import { NModal, NCard, NButton, NSpace } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { useI18n } from 'vue-i18n'
 import styles from './index.module.scss'
 import { LinkOption } from '@/components/modal/types'
@@ -108,12 +109,12 @@ const Modal = defineComponent({
                     .filter((item: any) => item.show)
                     .map((item: any) => {
                       return (
-                        <NButton text onClick={item.action}>
+                        <ButtonLink onClick={item.action}>
                           {{
                             default: () => item.text,
                             icon: () => item.icon()
                           }}
-                        </NButton>
+                        </ButtonLink>
                       )
                     })}
               </NSpace>

dolphinscheduler-ui-next/src/utils/log.ts

@@ -27,11 +27,20 @@ const log = {
 const typeColor = (type = 'primary') => {
   let color = ''
   switch (type) {
-    case 'primary': color = '#1890ff'; break
-    case 'success': color = '#52c41a'; break
-    case 'warning': color = '#faad14'; break
-    case 'error': color = '#ff4d4f'; break
-    default:; break
+    case 'primary':
+      color = '#1890ff'
+      break
+    case 'success':
+      color = '#52c41a'
+      break
+    case 'warning':
+      color = '#faad14'
+      break
+    case 'error':
+      color = '#ff4d4f'
+      break
+    default:
+      break
   }
   return color
 }
@@ -46,7 +55,9 @@ const typeColor = (type = 'primary') => {
   console.log(
     `%c ${title} %c ${text} %c`,
     'background:#35495E; padding: 2px ; border-radius: 3px 0 0 3px; color: #fff;',
-    `background:${typeColor(type)}; padding: 2px; border-radius: 0 3px 3px 0;  color: #fff;`,
+    `background:${typeColor(
+      type
+    )}; padding: 2px; border-radius: 0 3px 3px 0;  color: #fff;`,
     'background:transparent'
   )
 }

dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@@ -20,6 +20,7 @@ import { useI18n } from 'vue-i18n'
 import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
 import { EditOutlined, DeleteOutlined } from '@vicons/antd'
 import JsonHighlight from './json-highlight'
+import ButtonLink from '@/components/button-link'
 import { TableColumns } from './types'
 
 export function useColumns(onCallback: Function) {
@@ -52,16 +53,9 @@ export function useColumns(onCallback: Function) {
           { trigger: 'click' },
           {
             trigger: () =>
-              h(
-                NButton,
-                {
-                  quaternary: true,
-                  type: 'primary'
-                },
-                {
+              h(ButtonLink, null, {
                 default: () => t('datasource.click_to_view')
-                }
-              ),
+              }),
             default: () => h(JsonHighlight, { rowData })
           }
         )

dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@@ -18,6 +18,7 @@
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
+import ButtonLink from '@/components/button-link'
 import { queryProjectListPaging } from '@/service/modules/projects'
 import { parseTime } from '@/utils/common'
 import { deleteProject } from '@/service/modules/projects'
@@ -77,18 +78,14 @@ export function useTable() {
             {
               default: () =>
                 h(
-                  'a',
+                  ButtonLink,
                   {
                     onClick: () => {
                       menuStore.setProjectCode(row.code)
                       router.push({ path: `/projects/${row.code}` })
                     }
                   },
-                  {
-                    default: () => {
-                      return row.name
-                    }
-                  }
+                  { default: () => row.name }
                 ),
               tooltip: () => row.name
             }

dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss

@@ -42,13 +42,3 @@
     justify-content: center;
   }
 }
-
-.links {
-  color: dodgerblue;
-  text-decoration: none;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@@ -18,6 +18,7 @@
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
 import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { useI18n } from 'vue-i18n'
 import {
   DeleteOutlined,
@@ -30,7 +31,6 @@ import {
   deleteTaskDefinition
 } from '@/service/modules/task-definition'
 import { useRoute } from 'vue-router'
-import styles from './index.module.scss'
 import type {
   TaskDefinitionItem,
   TaskDefinitionRes
@@ -55,18 +55,11 @@ export function useTable(onEdit: Function) {
         width: 400,
         render: (row: IRecord) =>
           h(
-            'a',
+            ButtonLink,
             {
-              class: styles.links,
-              onClick: () => {
-                onEdit(row, true)
-              }
+              onClick: () => void onEdit(row, true)
             },
-            {
-              default: () => {
-                return row.taskName
-              }
-            }
+            { default: () => row.taskName }
           )
       },
       {

dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss

@@ -86,11 +86,3 @@
     width: 86%;
   }
 }
-
-.links {
-  color: #2080f0;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}

dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@@ -29,10 +29,10 @@ import {
   release
 } from '@/service/modules/process-definition'
 import TableAction from './components/table-action'
-
 import { IDefinitionParam } from './types'
 import styles from './index.module.scss'
 import { NEllipsis, NTag } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 
 export function useTable() {
   const { t } = useI18n()
@@ -72,17 +72,15 @@ export function useTable() {
             {
               default: () =>
                 h(
-                  'a',
+                  ButtonLink,
                   {
-                    href: 'javascript:',
-                    class: styles.links,
                     onClick: () =>
-                      router.push({
+                      void router.push({
                         name: 'workflow-definition-detail',
                         params: { code: row.code }
                       })
                   },
-                  row.name
+                  { default: () => row.name }
                 ),
               tooltip: () => row.name
             }
@@ -191,8 +189,7 @@ export function useTable() {
   }
 
   const deleteWorkflow = (row: any) => {
-    deleteByCode(variables.projectCode, row.code)
-      .then(() => {
+    deleteByCode(variables.projectCode, row.code).then(() => {
       window.$message.success(t('project.workflow.success'))
       getTableData({
         pageSize: variables.pageSize,
@@ -209,8 +206,7 @@ export function useTable() {
         | 'OFFLINE'
         | 'ONLINE'
     }
-    release(data, variables.projectCode, row.code)
-      .then(() => {
+    release(data, variables.projectCode, row.code).then(() => {
       window.$message.success(t('project.workflow.success'))
       getTableData({
         pageSize: variables.pageSize,
@@ -225,8 +221,7 @@ export function useTable() {
       codes: String(row.code),
       targetProjectCode: variables.projectCode
     }
-    batchCopyByCodes(data, variables.projectCode)
-      .then(() => {
+    batchCopyByCodes(data, variables.projectCode).then(() => {
       window.$message.success(t('project.workflow.success'))
       getTableData({
         pageSize: variables.pageSize,
@@ -267,8 +262,7 @@ export function useTable() {
     const data = {
       codes: String(row.code)
     }
-    batchExportByCodes(data, variables.projectCode)
-      .then((res: any) => {
+    batchExportByCodes(data, variables.projectCode).then((res: any) => {
       downloadBlob(res, fileName)
     })
   }

dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss

@@ -86,11 +86,3 @@
     width: 86%;
   }
 }
-
-.links {
-  color: #2080f0;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}

dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts

@@ -22,6 +22,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import { NTooltip, NIcon, NSpin } from 'naive-ui'
+import ButtonLink from '@/components/button-link'
 import { RowKey } from 'naive-ui/lib/data-table/src/interface'
 import {
   queryProcessInstanceListPaging,
@@ -74,24 +75,18 @@ export function useTable() {
         title: t('project.workflow.workflow_name'),
         key: 'name',
         width: 200,
-        render: (_row: IWorkflowInstance) =>
+        render: (row: IWorkflowInstance) =>
           h(
-            'a',
+            ButtonLink,
             {
-              href: 'javascript:',
-              class: styles.links,
               onClick: () =>
-                router.push({
+                void router.push({
                   name: 'workflow-instance-detail',
-                  params: { id: _row.id },
-                  query: { code: _row.processDefinitionCode }
+                  params: { id: row.id },
+                  query: { code: row.processDefinitionCode }
                 })
             },
-            {
-              default: () => {
-                return _row.name
-              }
-            }
+            { default: () => row.name }
           )
       },
       {
@@ -276,8 +271,7 @@ export function useTable() {
   }
 
   const deleteInstance = (id: number) => {
-    deleteProcessInstanceById(id, variables.projectCode)
-      .then(() => {
+    deleteProcessInstanceById(id, variables.projectCode).then(() => {
       window.$message.success(t('project.workflow.success'))
       if (variables.tableData.length === 1 && variables.page > 1) {
         variables.page -= 1
@@ -292,8 +286,7 @@ export function useTable() {
       processInstanceIds: _.join(variables.checkedRowKeys, ',')
     }
 
-    batchDeleteProcessInstanceByIds(data, variables.projectCode)
-      .then(() => {
+    batchDeleteProcessInstanceByIds(data, variables.projectCode).then(() => {
       window.$message.success(t('project.workflow.success'))
 
       if (
@@ -312,8 +305,7 @@ export function useTable() {
    * operating
    */
   const _upExecutorsState = (param: ExecuteReq) => {
-    execute(param, variables.projectCode)
-      .then(() => {
+    execute(param, variables.projectCode).then(() => {
       window.$message.success(t('project.workflow.success'))
 
       getTableData()
@@ -348,8 +340,7 @@ export function useTable() {
   const _countDownFn = (param: ICountDownParam) => {
     const { index } = param
     variables.tableData[index].buttonType = param.buttonType
-    execute(param, variables.projectCode)
-      .then(() => {
+    execute(param, variables.projectCode).then(() => {
       variables.tableData[index].disabled = true
       window.$message.success(t('project.workflow.success'))
       _countDown(() => {

dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts

@@ -22,9 +22,9 @@ import { bytesToSize } from '@/utils/common'
 import { useFileStore } from '@/store/file/file'
 import TableAction from './table-action'
 import { IRenameFile } from '../types'
+import ButtonLink from '@/components/button-link'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
-import styles from './index.module.scss'
 
 const goSubFolder = (router: Router, item: any) => {
   const fileStore = useFileStore()
@@ -55,17 +55,11 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) {
       width: 120,
       render: (row) =>
         h(
-          'a',
+          ButtonLink,
           {
-            href: 'javascript:',
-            class: styles.links,
-            onClick: () => goSubFolder(router, row)
+            onClick: () => void goSubFolder(router, row)
           },
-          {
-            default: () => {
-              return row.name
-            }
-          }
+          { default: () => row.name }
         )
     },
     { title: t('resource.file.user_name'), width: 100, key: 'user_name' },

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss

@@ -70,12 +70,4 @@
     align-items: center;
     margin-top: 20px;
   }
-
-  .links {
-    color: #2080f0;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }

dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

@@ -31,8 +31,8 @@ import {
   deleteResource,
   queryResourceById
 } from '@/service/modules/resources'
+import ButtonLink from '@/components/button-link'
 import { IUdfResourceParam } from './types'
-import styles from './index.module.scss'
 
 const goSubFolder = (router: Router, item: any) => {
   const fileStore = useFileStore()
@@ -75,24 +75,16 @@ export function useTable() {
         title: t('resource.udf.udf_source_name'),
         key: 'alias',
         render: (row) => {
-          if (!row.directory) {
-            return row.alias
-          } else {
-            return h(
-              'a',
+          return !row.directory
+            ? row.alias
+            : h(
+                ButtonLink,
                 {
-                href: 'javascript:',
-                class: styles.links,
-                onClick: () => goSubFolder(router, row)
+                  onClick: () => void goSubFolder(router, row)
                 },
-              {
-                default: () => {
-                  return row.alias
-                }
-              }
+                { default: () => row.alias }
               )
         }
-        }
       },
       {
         title: t('resource.udf.whether_directory'),
@@ -265,8 +257,7 @@ export function useTable() {
         fullName
       },
       id
-    )
-      .then((res: any) => {
+    ).then((res: any) => {
       fileStore.setCurrentDir(res.fullName)
       router.push({ name: 'resource-sub-manage', params: { id: res.id } })
     })

dolphinscheduler-ui/src/sass/common/_table.scss

@@ -97,7 +97,8 @@
       &:hover {
         background: #ddecff;
       }
-      th,td{
+      th,
+      td {
         &:nth-child(1) {
           width: 50px;
           text-align: center;
@@ -126,12 +127,6 @@
       }
     }
   }
-  .links {
-    color: #2d8cf0;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 
 .table-small-model {
@@ -140,7 +135,8 @@
     width: 100%;
     tr {
       background: #fff;
-      th,td {
+      th,
+      td {
         padding-left: 8px;
       }
       th {
@@ -149,19 +145,16 @@
         font-size: 12px;
         font-weight: bold;
         color: #333;
-        border-bottom: 2px solid #ECEDEC;
+        border-bottom: 2px solid #ecedec;
       }
       td {
         height: 32px;
         line-height: 32px;
-        border-bottom: 1px solid #ECEDEC;
+        border-bottom: 1px solid #ecedec;
         span {
           font-size: 12px;
           color: #333;
         }
-        .links {
-          color:#2d8cf0;
-        }
       }
       &:hover {
         td {