From 8d4f191ed42a0f71da56b147f9f1c3db3d361bf1 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Sat, 19 Feb 2022 13:51:19 +0800
Subject: [PATCH] [Feature][UI Next] Add e2e to security tenant manage page.
 (#8440)

---
 dolphinscheduler-ui-next/docs/e2e/security.md | 31 +++++++++----------
 .../tenant-manage/components/tenant-modal.tsx |  5 +++
 .../security/tenant-manage/index.module.scss  |  4 ---
 .../views/security/tenant-manage/index.tsx    | 28 +++++++++++------
 .../views/security/tenant-manage/use-table.ts |  7 +++--
 5 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/dolphinscheduler-ui-next/docs/e2e/security.md b/dolphinscheduler-ui-next/docs/e2e/security.md
index 16e37cd813..1fe3913a27 100644
--- a/dolphinscheduler-ui-next/docs/e2e/security.md
+++ b/dolphinscheduler-ui-next/docs/e2e/security.md
@@ -11,23 +11,20 @@ class:
 
 #### tenant manage
 
-class:
-
-- [ ] items
-- [ ] el-popconfirm
-- [ ] el-button--primary
-- [ ] tenantCode
-- [ ] edit
-- [ ] delete
-
-id:
-
-- [ ] btnCreateTenant
-- [ ] inputTenantCode
-- [ ] selectQueue
-- [ ] inputDescription
-- [ ] btnSubmit
-- [ ] btnCancel
+| check              | class              |
+| ------------------ |--------------------|
+| :white_check_mark: | items              |
+|                    | el-popconfirm      |
+|                    | el-button--primary |
+| :white_check_mark: | tenant-code        |
+| :white_check_mark: | edit               |
+| :white_check_mark: | delete             |
+| :white_check_mark: | btn-create-tenant  |
+| :white_check_mark: | input-tenant-code  |
+| :white_check_mark: | select-queue       |
+| :white_check_mark: | input-description  |
+| :white_check_mark: | btn-submit         |
+| :white_check_mark: | btn-cancel         |
 
 #### user manage
 
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
index 5a7aac56b5..68b040e1be 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/components/tenant-modal.tsx
@@ -101,6 +101,8 @@ const TenantModal = defineComponent({
           show={this.showModalRef}
           onCancel={this.cancelModal}
           onConfirm={this.confirmModal}
+          confirmClassName='btn-submit'
+          cancelClassName='btn-cancel'
         >
           {{
             default: () => (
@@ -119,6 +121,7 @@ const TenantModal = defineComponent({
                   path='tenantCode'
                 >
                   <NInput
+                    class='input-tenant-code'
                     disabled={this.statusRef === 1}
                     placeholder={t('security.tenant.tenant_code_tips')}
                     v-model={[this.model.tenantCode, 'value']}
@@ -129,6 +132,7 @@ const TenantModal = defineComponent({
                   path='queueId'
                 >
                   <NSelect
+                    class='select-queue'
                     placeholder={t('security.tenant.queue_name_tips')}
                     options={this.model.generalOptions}
                     v-model={[this.model.queueId, 'value']}
@@ -139,6 +143,7 @@ const TenantModal = defineComponent({
                   path='description'
                 >
                   <NInput
+                    class='input-description'
                     placeholder={t('security.tenant.description_tips')}
                     v-model={[this.model.description, 'value']}
                     type='textarea'
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
index 507313733b..80745b2e3e 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.module.scss
@@ -21,10 +21,6 @@
   .header {
     display: flex;
     justify-content: space-between;
-
-    .search {
-      display: flex;
-    }
   }
 
   .table-card {
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
index 86bc241142..ab374e46ea 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
@@ -22,7 +22,8 @@ import {
   NIcon,
   NDataTable,
   NPagination,
-  NCard
+  NCard,
+  NSpace
 } from 'naive-ui'
 import styles from './index.module.scss'
 import { useTable } from './use-table'
@@ -95,31 +96,38 @@ const tenementManage = defineComponent({
       <div class={styles.container}>
         <NCard>
           <div class={styles.header}>
-            <div>
-              <NButton size='small' onClick={this.handleModalChange}>
-                {t('security.tenant.create_tenant')}
-              </NButton>
-            </div>
-            <div class={styles.search}>
+            <NButton
+              size='small'
+              onClick={this.handleModalChange}
+              type='primary'
+              class='btn-create-tenant'
+            >
+              {t('security.tenant.create_tenant')}
+            </NButton>
+            <NSpace>
               <NInput
                 size='small'
                 v-model={[this.searchVal, 'value']}
                 placeholder={t('security.tenant.search_tips')}
                 clearable
               />
-              <NButton size='small' onClick={this.handleSearch}>
+              <NButton size='small' type='primary' onClick={this.handleSearch}>
                 <NIcon>
                   <SearchOutlined />
                 </NIcon>
               </NButton>
-            </div>
+            </NSpace>
           </div>
         </NCard>
         <Card
           title={t('security.tenant.tenant_manage')}
           class={styles['table-card']}
         >
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable
+            columns={this.columns}
+            data={this.tableData}
+            row-class-name='items'
+          />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
index feec7e18eb..18b8a04503 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
@@ -55,7 +55,8 @@ export function useTable() {
       },
       {
         title: t('security.tenant.tenant_code'),
-        key: 'tenantCode'
+        key: 'tenantCode',
+        className: 'tenant-code'
       },
       {
         title: t('security.tenant.description'),
@@ -90,6 +91,7 @@ export function useTable() {
                         circle: true,
                         type: 'info',
                         size: 'small',
+                        class: 'edit',
                         onClick: () => {
                           handleEdit(row)
                         }
@@ -120,7 +122,8 @@ export function useTable() {
                             {
                               circle: true,
                               type: 'error',
-                              size: 'small'
+                              size: 'small',
+                              class: 'delete'
                             },
                             {
                               icon: () => h(DeleteOutlined)