[Feature][UI Next] Add e2e to security token manage page. (#8392)

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

@@ -102,17 +102,16 @@ id:
 
 #### token manage
 
-class:
+| check              | class               |
-- [ ] items
+|--------------------|---------------------|
-- [ ] el-popconfirm
+| :white_check_mark: | items               |
-- [ ] el-button--primary
+|  | el-popconfirm       |
-- [ ] userName
+|  | el-button--primary  |
-- [ ] token
+| :white_check_mark: | username            |
-- [ ] edit
+| :white_check_mark: | token               |
-- [ ] delete
+| :white_check_mark: | edit                |
-
+| :white_check_mark: | delete              |
-id:
+| :white_check_mark: | btn-create-token    |
-- [ ] btnCreateToken
+| :white_check_mark: | btn-generate-token  |
-- [ ] btnGenerateToken
+| :white_check_mark: | btn-submit          |
-- [ ] btnSubmit
+| :white_check_mark: | btn-cancel          |
-- [ ] btnCancel

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

@@ -139,6 +139,8 @@ const TokenModal = defineComponent({
           confirmDisabled={
             !this.model.userId || !this.model.expireTime || !this.model.token
           }
+          confirmClassName='btn-submit'
+          cancelClassName='btn-cancel'
         >
           {{
             default: () => (
@@ -163,6 +165,7 @@ const TokenModal = defineComponent({
                   'GENERAL_USER' && (
                   <NFormItem label={t('security.token.user')} path='userId'>
                     <NSelect
+                      class='username'
                       filterable
                       placeholder={t('security.token.user_tips')}
                       options={this.model.generalOptions}
@@ -173,12 +176,14 @@ const TokenModal = defineComponent({
                 <NFormItem label={t('security.token.token')} path='token'>
                   <NSpace>
                     <NInput
+                      class='token'
                       style={{ width: '504px' }}
                       disabled
                       placeholder={t('security.token.token_tips')}
                       v-model={[this.model.token, 'value']}
                     />
                     <NButton
+                      class='btn-generate-token'
                       strong
                       secondary
                       circle

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

@@ -105,7 +105,12 @@ const tokenManage = defineComponent({
         <NCard>
           <div class={styles['search-card']}>
             <div>
-              <NButton size='small' type='primary' onClick={handleModalChange}>
+              <NButton
+                class='btn-create-token'
+                size='small'
+                type='primary'
+                onClick={handleModalChange}
+              >
                 {t('security.token.create_token')}
               </NButton>
             </div>
@@ -129,7 +134,11 @@ const tokenManage = defineComponent({
           </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/token-manage/use-table.ts

@@ -81,6 +81,7 @@ export function useTable() {
                         circle: true,
                         type: 'info',
                         size: 'small',
+                        class: 'edit',
                         onClick: () => {
                           handleEdit(row)
                         }
@@ -111,7 +112,8 @@ export function useTable() {
                             {
                               circle: true,
                               type: 'error',
-                              size: 'small'
+                              size: 'small',
+                              class: 'delete'
                             },
                             {
                               icon: () => h(DeleteOutlined)