[Feature][UI Next] Add e2e to security worker group manage page. (#8434)

dolphinscheduler-ui-next/docs/e2e/security.md

@@ -51,21 +51,19 @@ id:
 
 #### worker group manage
 
-class:
-- [ ] items
-- [ ] el-popconfirm
-- [ ] el-button--primary
-- [ ] vue-treeselect__menu
-- [ ] name
-- [ ] edit
-- [ ] delete
-
-id:
-- [ ] btnCreateWorkerGroup
-- [ ] inputWorkerGroupName
-- [ ] selectWorkerAddress
-- [ ] btnSubmit
-- [ ] btnCancel
+| check              | class                          |
+|--------------------|--------------------------------|
+| :white_check_mark: | items                          |
+|  | el-popconfirm                  |
+|  | el-button--primary             |
+| :white_check_mark: | name                           |
+| :white_check_mark: | edit                           |
+| :white_check_mark: | delete                         |
+| :white_check_mark: | btn-create-worker-group        |
+| :white_check_mark: | input-worker-group-name        |
+| :white_check_mark: | select-worker-address          |
+| :white_check_mark: | btn-submit                     |
+| :white_check_mark: | btn-cancel                     |
 
 #### queue manage
 

dolphinscheduler-ui-next/src/views/security/worker-group-manage/components/worker-group-modal.tsx

@@ -100,6 +100,8 @@ const WorkerGroupModal = defineComponent({
           onCancel={this.cancelModal}
           onConfirm={this.confirmModal}
           confirmDisabled={!this.model.name || this.model.addrList.length < 1}
+          confirmClassName='btn-submit'
+          cancelClassName='btn-cancel'
         >
           {{
             default: () => (
@@ -113,6 +115,7 @@ const WorkerGroupModal = defineComponent({
                   path='name'
                 >
                   <NInput
+                    class='input-worker-group-name'
                     placeholder={t('security.worker_group.group_name_tips')}
                     v-model={[this.model.name, 'value']}
                   />
@@ -122,6 +125,7 @@ const WorkerGroupModal = defineComponent({
                   path='addrList'
                 >
                   <NSelect
+                    class='select-worker-address'
                     multiple
                     placeholder={t(
                       'security.worker_group.worker_addresses_tips'

dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.module.scss

@@ -19,17 +19,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-
-  .box {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    width: 300px;
-
-    button {
-      margin-left: 10px;
-    }
-  }
 }
 
 .table-card {

dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx

@@ -22,7 +22,8 @@ import {
   NDataTable,
   NIcon,
   NInput,
-  NPagination
+  NPagination,
+  NSpace
 } from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
@@ -105,11 +106,11 @@ const workerGroupManage = defineComponent({
         <NCard>
           <div class={styles['search-card']}>
             <div>
-              <NButton size='small' type='primary' onClick={handleModalChange}>
+              <NButton size='small' type='primary' onClick={handleModalChange} class='btn-create-worker-group'>
                 {t('security.worker_group.create_worker_group')}
               </NButton>
             </div>
-            <div class={styles.box}>
+            <NSpace>
               <NInput
                 size='small'
                 clearable
@@ -125,11 +126,11 @@ const workerGroupManage = defineComponent({
                   )
                 }}
               </NButton>
-            </div>
+            </NSpace>
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable row-class-name='items' columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts

@@ -46,7 +46,8 @@ export function useTable() {
       },
       {
         title: t('security.worker_group.group_name'),
-        key: 'name'
+        key: 'name',
+        className: 'name'
       },
       {
         title: t('security.worker_group.worker_addresses'),
@@ -94,6 +95,7 @@ export function useTable() {
                         circle: true,
                         type: 'info',
                         size: 'small',
+                        class: 'edit',
                         onClick: () => {
                           handleEdit(row)
                         }
@@ -124,7 +126,8 @@ export function useTable() {
                             {
                               circle: true,
                               type: 'error',
-                              size: 'small'
+                              size: 'small',
+                              class: 'delete'
                             },
                             {
                               icon: () => h(DeleteOutlined)