From 5e1e965e2ba4453691ab95a59e7ff42ea6a89017 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Thu, 17 Feb 2022 21:17:42 +0800
Subject: [PATCH] [Feature][UI Next] Add e2e to security yarn queue manage
 page. (#8420)

---
 dolphinscheduler-ui-next/docs/e2e/security.md | 21 +++++++++----------
 .../components/yarn-queue-modal.tsx           |  4 ++++
 .../yarn-queue-manage/index.module.scss       | 11 ----------
 .../security/yarn-queue-manage/index.tsx      | 11 +++++-----
 .../security/yarn-queue-manage/use-table.ts   |  4 +++-
 5 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/dolphinscheduler-ui-next/docs/e2e/security.md b/dolphinscheduler-ui-next/docs/e2e/security.md
index 177bea45cb..48634a143a 100644
--- a/dolphinscheduler-ui-next/docs/e2e/security.md
+++ b/dolphinscheduler-ui-next/docs/e2e/security.md
@@ -69,17 +69,16 @@ id:
 
 #### queue manage
 
-class:
-- [ ] items
-- [ ] queueName
-- [ ] edit
-
-id:
-- [ ] btnCreateQueue
-- [ ] inputQueueName
-- [ ] inputQueueValue
-- [ ] btnSubmit
-- [ ] btnCancel
+| check              | class                          |
+|--------------------|--------------------------------|
+| :white_check_mark: | items                          |
+| :white_check_mark: | queue-name                     |
+| :white_check_mark: | edit                           |
+| :white_check_mark: | btn-create-queue               |
+| :white_check_mark: | input-queue-name               |
+| :white_check_mark: | input-queue-value              |
+| :white_check_mark: | btn-submit                     |
+| :white_check_mark: | btn-cancel                     |
 
 #### environment manage
 
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
index 7e58534251..9e5194ffe8 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
@@ -93,6 +93,8 @@ const YarnQueueModal = defineComponent({
           onCancel={this.cancelModal}
           onConfirm={this.confirmModal}
           confirmDisabled={!this.model.queueName || !this.model.queue}
+          confirmClassName='btn-submit'
+          cancelClassName='btn-cancel'
         >
           {{
             default: () => (
@@ -106,6 +108,7 @@ const YarnQueueModal = defineComponent({
                   path='queueName'
                 >
                   <NInput
+                    class='input-queue-name'
                     placeholder={t('security.yarn_queue.queue_name_tips')}
                     v-model={[this.model.queueName, 'value']}
                   />
@@ -115,6 +118,7 @@ const YarnQueueModal = defineComponent({
                   path='queue'
                 >
                   <NInput
+                    class='input-queue-value'
                     placeholder={t('security.yarn_queue.queue_value_tips')}
                     v-model={[this.model.queue, 'value']}
                   />
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss
index de6cf70c65..12e457b748 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-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 {
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
index 34ae02364f..95abe1386d 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-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 yarnQueueManage = 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-queue'>
                 {t('security.yarn_queue.create_queue')}
               </NButton>
             </div>
-            <div class={styles.box}>
+            <NSpace>
               <NInput
                 size='small'
                 clearable
@@ -125,11 +126,11 @@ const yarnQueueManage = 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}
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
index 17d6f8ae83..bd1ce12ffe 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
@@ -40,7 +40,8 @@ export function useTable() {
       },
       {
         title: t('security.yarn_queue.queue_name'),
-        key: 'queueName'
+        key: 'queueName',
+        className: 'queue-name'
       },
       {
         title: t('security.yarn_queue.queue_value'),
@@ -69,6 +70,7 @@ export function useTable() {
                     circle: true,
                     type: 'info',
                     size: 'small',
+                    class: 'edit',
                     onClick: () => {
                       handleEdit(row)
                     }