[Feature][UI Next] Add e2e to datasource page. (#8380)

dolphinscheduler-ui-next/docs/e2e/data-source.md

@@ -1,24 +1,23 @@
 ### data source
 
-class:
-- [ ] data-source-items
-- [ ] el-popconfirm
-- [ ] el-button--primary
-- [ ] options-datasource-type
-
-id:
-- [ ] btnCreateDataSource
-- [ ] dialogCreateDataSource
-- [ ] btnDelete
-- [ ] btnDataSourceTypeDropDown
-- [ ] inputDataSourceName
-- [ ] inputDataSourceDescription
-- [ ] inputIP
-- [ ] inputPort
-- [ ] inputUserName
-- [ ] inputPassword
-- [ ] inputDataBase
-- [ ] inputJdbcParams
-- [ ] btnSubmit
-- [ ] btnCancel
-- [ ] btnTestConnection
+| check              | class                          |
+|--------------------|--------------------------------|
+| :white_check_mark: | data-source-items              |
+|  | el-popconfirm                  |
+|  | el-button--primary             |
+| :white_check_mark: | options-datasource-type        |
+| :white_check_mark: | btn-create-data-source         |
+| :white_check_mark: | dialog-create-data-source      |
+| :white_check_mark: | btn-delete                     |
+| :white_check_mark: | btn-data-source-type-drop-down |
+| :white_check_mark: | input-data-source-name         |
+| :white_check_mark: | input-data-source-description  |
+| :white_check_mark: | input-ip                       |
+| :white_check_mark: | input-port                     |
+| :white_check_mark: | input-username                 |
+| :white_check_mark: | input-password                 |
+| :white_check_mark: | input-data-base                |
+| :white_check_mark: | input-jdbc-params              |
+| :white_check_mark: | btn-submit                     |
+| :white_check_mark: | btn-cancel                     |
+| :white_check_mark: | btn-test-connection            |

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

@@ -1,7 +1,7 @@
 ### login
 
-| check              | id | class          |
-|--------------------| --- |----------------|
-| :white_check_mark: | inputUsername | input-user-name |
-| :white_check_mark: | inputPassword | input-password |
-| :white_check_mark: | btnLogin | btn-login |
+| check              | class          |
+|--------------------|----------------|
+| :white_check_mark: | input-user-name |
+| :white_check_mark: | input-password |
+| :white_check_mark: | btn-login |

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -39,6 +39,14 @@ const props = {
   confirmText: {
     type: String as PropType<string>
   },
+  confirmClassName: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  cancelClassName: {
+    type: String as PropType<string>,
+    default: ''
+  },
   confirmDisabled: {
     type: Boolean as PropType<boolean>,
     default: false
@@ -91,13 +99,19 @@ const Modal = defineComponent({
             footer: () => (
               <NSpace justify='end'>
                 {this.cancelShow && (
-                  <NButton quaternary size='small' onClick={onCancel}>
+                  <NButton
+                    class={this.cancelClassName}
+                    quaternary
+                    size='small'
+                    onClick={onCancel}
+                  >
                     {this.cancelText || t('modal.cancel')}
                   </NButton>
                 )}
                 {/* TODO: Add left and right slots later */}
                 {renderSlot($slots, 'btn-middle')}
                 <NButton
+                  class={this.confirmClassName}
                   type='info'
                   size='small'
                   onClick={onConfirm}

dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts

@@ -243,55 +243,57 @@ export function useDataList() {
         label: t('menu.security'),
         key: 'security',
         icon: renderIcon(SafetyCertificateOutlined),
-        children: 
-        (userStore.getUserInfo as UserInfoRes).userType === 'ADMIN_USER' ? [
-          {
-            label: t('menu.tenant_manage'),
-            key: `/security/tenant-manage`,
-            icon: renderIcon(UsergroupAddOutlined)
-          },
-          {
-            label: t('menu.user_manage'),
-            key: `/security/user-manage`,
-            icon: renderIcon(UserAddOutlined)
-          },
-          {
-            label: t('menu.alarm_group_manage'),
-            key: `/security/alarm-group-manage`,
-            icon: renderIcon(WarningOutlined)
-          },
-          {
-            label: t('menu.alarm_instance_manage'),
-            key: `/security/alarm-instance-manage`,
-            icon: renderIcon(InfoCircleOutlined)
-          },
-          {
-            label: t('menu.worker_group_manage'),
-            key: `/security/worker-group-manage`,
-            icon: renderIcon(ControlOutlined)
-          },
-          {
-            label: t('menu.yarn_queue_manage'),
-            key: `/security/yarn-queue-manage`,
-            icon: renderIcon(SlackOutlined)
-          },
-          {
-            label: t('menu.environment_manage'),
-            key: `/security/environment-manage`,
-            icon: renderIcon(EnvironmentOutlined)
-          },
-          {
-            label: t('menu.token_manage'),
-            key: `/security/token-manage`,
-            icon: renderIcon(SafetyOutlined)
-          }
-        ] : [
-          {
-            label: t('menu.token_manage'),
-            key: `/security/token-manage`,
-            icon: renderIcon(SafetyOutlined)
-          }
-        ]
+        children:
+          (userStore.getUserInfo as UserInfoRes).userType === 'ADMIN_USER'
+            ? [
+                {
+                  label: t('menu.tenant_manage'),
+                  key: `/security/tenant-manage`,
+                  icon: renderIcon(UsergroupAddOutlined)
+                },
+                {
+                  label: t('menu.user_manage'),
+                  key: `/security/user-manage`,
+                  icon: renderIcon(UserAddOutlined)
+                },
+                {
+                  label: t('menu.alarm_group_manage'),
+                  key: `/security/alarm-group-manage`,
+                  icon: renderIcon(WarningOutlined)
+                },
+                {
+                  label: t('menu.alarm_instance_manage'),
+                  key: `/security/alarm-instance-manage`,
+                  icon: renderIcon(InfoCircleOutlined)
+                },
+                {
+                  label: t('menu.worker_group_manage'),
+                  key: `/security/worker-group-manage`,
+                  icon: renderIcon(ControlOutlined)
+                },
+                {
+                  label: t('menu.yarn_queue_manage'),
+                  key: `/security/yarn-queue-manage`,
+                  icon: renderIcon(SlackOutlined)
+                },
+                {
+                  label: t('menu.environment_manage'),
+                  key: `/security/environment-manage`,
+                  icon: renderIcon(EnvironmentOutlined)
+                },
+                {
+                  label: t('menu.token_manage'),
+                  key: `/security/token-manage`,
+                  icon: renderIcon(SafetyOutlined)
+                }
+              ]
+            : [
+                {
+                  label: t('menu.token_manage'),
+                  key: `/security/token-manage`,
+                  icon: renderIcon(SafetyOutlined)
+                }
+              ]
       }
     ]
   }

dolphinscheduler-ui-next/src/router/index.ts

@@ -38,7 +38,7 @@ const router = createRouter({
 
 interface metaData {
   title?: string
-  showSide?: boolean,
+  showSide?: boolean
   auth?: Array<string>
 }
 
@@ -56,13 +56,17 @@ router.beforeEach(
     const userStore = useUserStore()
     const metaData: metaData = to.meta
     menuStore.setShowSideStatus(metaData.showSide || false)
-    if (metaData.auth?.includes('ADMIN_USER') && (userStore.getUserInfo as UserInfoRes).userType !== 'ADMIN_USER' && menuStore.getMenuKey === 'security') {
+    if (
+      metaData.auth?.includes('ADMIN_USER') &&
+      (userStore.getUserInfo as UserInfoRes).userType !== 'ADMIN_USER' &&
+      menuStore.getMenuKey === 'security'
+    ) {
       to.fullPath = '/security/token-manage'
-      next({name: 'token-manage'})
+      next({ name: 'token-manage' })
     } else {
       next()
     }
-    
+
     NProgress.done()
   }
 )

dolphinscheduler-ui-next/src/views/datasource/list/detail.tsx

@@ -123,6 +123,7 @@ const DetailModal = defineComponent({
     } = this
     return (
       <Modal
+        class='dialog-create-data-source'
         show={show}
         title={`${t(id ? 'datasource.edit' : 'datasource.create')}${t(
           'datasource.datasource'
@@ -130,6 +131,8 @@ const DetailModal = defineComponent({
         onConfirm={onSubmit}
         confirmLoading={saving || loading}
         onCancel={onCancel}
+        confirmClassName='btn-submit'
+        cancelClassName='btn-cancel'
       >
         {{
           default: () => (
@@ -148,6 +151,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NSelect
+                    class='btn-data-source-type-drop-down'
                     v-model={[detailForm.type, 'value']}
                     options={datasourceTypeList}
                     disabled={!!id}
@@ -160,6 +164,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                    class='input-data-source-name'
                     v-model={[detailForm.name, 'value']}
                     maxlength={60}
                     placeholder={t('datasource.datasource_name_tips')}
@@ -167,6 +172,7 @@ const DetailModal = defineComponent({
                 </NFormItem>
                 <NFormItem label={t('datasource.description')} path='note'>
                   <NInput
+                    class='input-data-source-description'
                     v-model={[detailForm.note, 'value']}
                     type='textarea'
                     placeholder={t('datasource.description_tips')}
@@ -178,6 +184,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                    class='input-ip'
                     v-model={[detailForm.host, 'value']}
                     type='text'
                     maxlength={255}
@@ -190,6 +197,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInputNumber
+                    class='input-port'
                     v-model={[detailForm.port, 'value']}
                     show-button={false}
                     placeholder={t('datasource.port_tips')}
@@ -248,6 +256,7 @@ const DetailModal = defineComponent({
                   show-require-mark
                 >
                   <NInput
+                    class='input-username'
                     v-model={[detailForm.userName, 'value']}
                     type='text'
                     maxlength={60}
@@ -259,6 +268,7 @@ const DetailModal = defineComponent({
                   path='password'
                 >
                   <NInput
+                    class='input-password'
                     v-model={[detailForm.password, 'value']}
                     type='password'
                     placeholder={t('datasource.user_password_tips')}
@@ -270,6 +280,7 @@ const DetailModal = defineComponent({
                   show-require-mark={requiredDataBase}
                 >
                   <NInput
+                    class='input-data-base'
                     v-model={[detailForm.database, 'value']}
                     type='text'
                     maxlength={60}
@@ -298,6 +309,7 @@ const DetailModal = defineComponent({
                   path='other'
                 >
                   <NInput
+                    class='input-jdbc-params'
                     v-model={[detailForm.other, 'value']}
                     type='textarea'
                     autosize={{
@@ -315,6 +327,7 @@ const DetailModal = defineComponent({
           ),
           'btn-middle': () => (
             <NButton
+              class='btn-test-connection'
               type='primary'
               size='small'
               onClick={onTest}

dolphinscheduler-ui-next/src/views/datasource/list/index.tsx

@@ -95,10 +95,13 @@ const list = defineComponent({
           {{
             default: () => (
               <div class={styles['conditions']}>
-                <NButton onClick={onCreate} type='primary'>{`${t(
-                  'datasource.create_datasource'
-                )}`}</NButton>
-
+                <NButton
+                  onClick={onCreate}
+                  type='primary'
+                  class='btn-create-data-source'
+                >
+                  {t('datasource.create_datasource')}
+                </NButton>
                 <NSpace
                   class={styles['conditions-search']}
                   justify='end'
@@ -122,6 +125,7 @@ const list = defineComponent({
         </Card>
         <Card title='' class={styles['mt-8']}>
           <NDataTable
+            row-class-name='data-source-items'
             columns={columnsRef}
             data={list}
             loading={loading}

dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts

@@ -112,7 +112,8 @@ export function useColumns(onCallback: Function) {
                     NButton,
                     {
                       circle: true,
-                      type: 'error'
+                      type: 'error',
+                      class: 'btn-delete'
                     },
                     {
                       default: () =>

dolphinscheduler-ui-next/src/views/datasource/list/use-form.ts

@@ -205,5 +205,11 @@ const datasourceType: IDataBaseOptionKeys = {
   }
 }
 
-export const datasourceTypeList: IDataBaseOption[] =
-  Object.values(datasourceType)
+console.log(Object.values(datasourceType))
+
+export const datasourceTypeList: IDataBaseOption[] = Object.values(
+  datasourceType
+).map((item) => {
+  item.class = 'options-datasource-type'
+  return item
+})