[Feature][UI Next] Add e2e to security user manage page. (#8443)

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

@@ -28,28 +28,25 @@ class:
 
 #### user manage
 
-class:
-
-- [ ] items
-- [ ] el-popconfirm
-- [ ] el-button--primary
-- [ ] name
-- [ ] edit
-- [ ] delete
-
-id:
-
-- [ ] btnCreateUser
-- [ ] inputUserName
-- [ ] inputUserPassword
-- [ ] selectTenant
-- [ ] selectQueue
-- [ ] inputEmail
-- [ ] inputPhone
-- [ ] radioStateEnable
-- [ ] radioStateDisable
-- [ ] 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-user     |
+| :white_check_mark: | input-username      |
+| :white_check_mark: | input-password      |
+| :white_check_mark: | select-tenant       |
+| :white_check_mark: | select-queue        |
+| :white_check_mark: | input-email         |
+| :white_check_mark: | input-phone         |
+| :white_check_mark: | radio-state-enable  |
+| :white_check_mark: | radio=state-disable |
+| :white_check_mark: | btn-submit          |
+| :white_check_mark: | btn-cancel          |
 
 #### worker group manage
 

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

@@ -57,6 +57,8 @@ export const UserModal = defineComponent({
         onCancel={this.onModalCancel}
         confirmLoading={this.confirmLoading}
         onConfirm={this.onConfirm}
+        confirmClassName='btn-submit'
+        cancelClassName='btn-cancel'
       >
         {{
           default: () => {
@@ -78,6 +80,7 @@ export const UserModal = defineComponent({
               >
                 <NFormItem label={t('security.user.username')} path='userName'>
                   <NInput
+                    class='input-username'
                     inputProps={{ autocomplete: 'off' }}
                     v-model:value={this.formValues.userName}
                   />
@@ -87,6 +90,7 @@ export const UserModal = defineComponent({
                   path='userPassword'
                 >
                   <NInput
+                    class='input-password'
                     inputProps={{ autocomplete: 'off' }}
                     type='password'
                     v-model:value={this.formValues.userPassword}
@@ -97,27 +101,39 @@ export const UserModal = defineComponent({
                   path='tenantId'
                 >
                   <NSelect
+                    class='select-tenant'
                     options={this.tenants}
                     v-model:value={this.formValues.tenantId}
                   />
                 </NFormItem>
                 <NFormItem label={t('security.user.queue')} path='queue'>
                   <NSelect
+                    class='select-queue'
                     options={this.queues}
                     v-model:value={this.formValues.queue}
                   />
                 </NFormItem>
                 <NFormItem label={t('security.user.email')} path='email'>
-                  <NInput v-model:value={this.formValues.email} />
+                  <NInput
+                    class='input-email'
+                    v-model:value={this.formValues.email}
+                  />
                 </NFormItem>
                 <NFormItem label={t('security.user.phone')} path='phone'>
-                  <NInput v-model:value={this.formValues.phone} />
+                  <NInput
+                    class='input-phone'
+                    v-model:value={this.formValues.phone}
+                  />
                 </NFormItem>
                 <NFormItem label={t('security.user.state')} path='state'>
                   <NRadioGroup v-model:value={this.formValues.state}>
                     <NSpace>
-                      <NRadio value={1}>启用</NRadio>
-                      <NRadio value={0}>停用</NRadio>
+                      <NRadio value={1} class='radio-state-enable'>
+                        启用
+                      </NRadio>
+                      <NRadio value={0} class='radio-state-disable'>
+                        停用
+                      </NRadio>
                     </NSpace>
                   </NRadioGroup>
                 </NFormItem>

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

@@ -86,7 +86,11 @@ const UsersManage = defineComponent({
           <NGridItem>
             <NCard>
               <NSpace justify='space-between'>
-                <NButton onClick={this.onAddUser} type='primary'>
+                <NButton
+                  onClick={this.onAddUser}
+                  type='primary'
+                  class='btn-create-user'
+                >
                   {t('security.user.create_user')}
                 </NButton>
                 <NInputGroup>
@@ -112,10 +116,11 @@ const UsersManage = defineComponent({
           <NGridItem>
             <NCard>
               {userListLoading ? (
-                <NSkeleton text repeat={6}></NSkeleton>
+                <NSkeleton text repeat={6} />
               ) : (
                 <NSpace v-show={!userListLoading} vertical size={20}>
                   <NDataTable
+                    row-class-name='items'
                     columns={this.columns}
                     data={this.userList}
                     scrollX={this.scrollX}

dolphinscheduler-ui-next/src/views/security/user-manage/use-table.tsx

@@ -38,7 +38,8 @@ function useColumns({ onEdit, onDelete }: UseTableProps) {
       },
       {
         title: t('security.user.username'),
-        key: 'userName'
+        key: 'userName',
+        className: 'name'
       },
       {
         title: t('security.user.tenant_code'),
@@ -92,6 +93,7 @@ function useColumns({ onEdit, onDelete }: UseTableProps) {
                       circle
                       type='info'
                       size='small'
+                      class='edit'
                       onClick={() => {
                         onEdit(rowData)
                       }}
@@ -115,6 +117,7 @@ function useColumns({ onEdit, onDelete }: UseTableProps) {
                       circle
                       type='error'
                       size='small'
+                      class='delete'
                       onClick={() => {
                         onDelete(rowData)
                       }}