From c129889df6971e5d02e4456a1901bb6d9ceabf1c Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Tue, 19 Dec 2023 07:50:53 +0800
Subject: [PATCH] fix: fix switch role and input style (#3226)

* fix: fix switch role and input style

* refactor: remove useless code
---
 .../client/src/common/SelectWithTitle.tsx     | 44 +++++++++++
 packages/core/client/src/common/index.ts      |  1 +
 packages/core/client/src/index.ts             |  5 +-
 .../user-center/__e2e__/settings.test.ts      |  9 +++
 .../items/DataBlockInitializer.tsx            |  4 +-
 .../src/schema-settings/SchemaSettings.tsx    | 42 +----------
 .../core/client/src/user/ChangePassword.tsx   |  1 -
 packages/core/client/src/user/CurrentUser.tsx |  3 -
 packages/core/client/src/user/EditProfile.tsx |  3 +-
 .../core/client/src/user/LanguageSettings.tsx |  1 -
 packages/core/client/src/user/SwitchRole.tsx  | 74 ++++++-------------
 11 files changed, 83 insertions(+), 104 deletions(-)
 create mode 100644 packages/core/client/src/common/SelectWithTitle.tsx
 create mode 100644 packages/core/client/src/common/index.ts
 create mode 100644 packages/core/client/src/modules/user-center/__e2e__/settings.test.ts

diff --git a/packages/core/client/src/common/SelectWithTitle.tsx b/packages/core/client/src/common/SelectWithTitle.tsx
new file mode 100644
index 0000000000..9e515d1aac
--- /dev/null
+++ b/packages/core/client/src/common/SelectWithTitle.tsx
@@ -0,0 +1,44 @@
+import { Select } from 'antd';
+import React, { useRef, useState } from 'react';
+
+export interface SelectWithTitleProps {
+  title?: any;
+  defaultValue?: any;
+  options?: any;
+  fieldNames?: any;
+  onChange?: (...args: any[]) => void;
+}
+
+export function SelectWithTitle({ title, defaultValue, onChange, options, fieldNames }: SelectWithTitleProps) {
+  const [open, setOpen] = useState(false);
+  const timerRef = useRef<any>(null);
+  return (
+    <div
+      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen((v) => !v);
+      }}
+      onMouseLeave={() => {
+        timerRef.current = setTimeout(() => {
+          setOpen(false);
+        }, 200);
+      }}
+    >
+      {title}
+      <Select
+        open={open}
+        popupMatchSelectWidth={false}
+        bordered={false}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        fieldNames={fieldNames}
+        options={options}
+        style={{ textAlign: 'right', minWidth: 100 }}
+        onMouseEnter={() => {
+          clearTimeout(timerRef.current);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/packages/core/client/src/common/index.ts b/packages/core/client/src/common/index.ts
new file mode 100644
index 0000000000..394b92eb99
--- /dev/null
+++ b/packages/core/client/src/common/index.ts
@@ -0,0 +1 @@
+export * from './SelectWithTitle';
diff --git a/packages/core/client/src/index.ts b/packages/core/client/src/index.ts
index b22e9c8235..77e942de01 100644
--- a/packages/core/client/src/index.ts
+++ b/packages/core/client/src/index.ts
@@ -22,9 +22,11 @@ export * from './auth';
 export * from './block-provider';
 export * from './china-region';
 export * from './collection-manager';
+export * from './common';
 export * from './css-variable';
 export * from './document-title';
 export * from './filter-provider';
+export * from './flag-provider';
 export * from './formula';
 export * from './global-theme';
 export * from './hooks';
@@ -44,7 +46,6 @@ export * from './schema-settings';
 export * from './schema-templates';
 export * from './style';
 export * from './system-settings';
+export * from './testUtils';
 export * from './user';
 export * from './variables';
-export * from './flag-provider';
-export * from './testUtils';
diff --git a/packages/core/client/src/modules/user-center/__e2e__/settings.test.ts b/packages/core/client/src/modules/user-center/__e2e__/settings.test.ts
new file mode 100644
index 0000000000..21dd2e68e1
--- /dev/null
+++ b/packages/core/client/src/modules/user-center/__e2e__/settings.test.ts
@@ -0,0 +1,9 @@
+import { test } from '@nocobase/test/client';
+
+test('switch role', async ({ page, mockPage }) => {
+  await mockPage().goto();
+
+  await page.getByTestId('user-center-button').hover();
+  await page.getByRole('menuitem', { name: 'Switch role' }).click();
+  await page.getByRole('option', { name: 'Member' }).click();
+});
diff --git a/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx b/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx
index 3b35ca352c..e07651c407 100644
--- a/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/items/DataBlockInitializer.tsx
@@ -4,9 +4,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next';
 import {
   SchemaInitializerItem,
+  SchemaInitializerMenu,
   useSchemaInitializer,
   useSchemaInitializerMenuItems,
-  SchemaInitializerMenu,
 } from '../../application';
 import { useCompile } from '../../schema-component';
 import { useSchemaTemplateManager } from '../../schema-templates';
@@ -48,7 +48,7 @@ export const SearchCollections = ({ value: outValue, onChange }) => {
       <Input
         ref={inputRef}
         allowClear
-        style={{ padding: '0 4px 6px' }}
+        style={{ padding: '0 4px 6px', boxShadow: 'none' }}
         bordered={false}
         placeholder={t('Search and select collection')}
         value={value}
diff --git a/packages/core/client/src/schema-settings/SchemaSettings.tsx b/packages/core/client/src/schema-settings/SchemaSettings.tsx
index 82161edd94..20a490936e 100644
--- a/packages/core/client/src/schema-settings/SchemaSettings.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettings.tsx
@@ -18,7 +18,6 @@ import {
   MenuProps,
   Modal,
   ModalFuncProps,
-  Select,
   Space,
   Switch,
 } from 'antd';
@@ -33,7 +32,6 @@ import React, {
   useMemo,
   // @ts-ignore
   useTransition as useReactTransition,
-  useRef,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -77,6 +75,7 @@ import {
   useFormActiveFields,
 } from '../block-provider/hooks';
 import { useCollectionFilterOptionsV2 } from '../collection-manager/action-hooks';
+import { SelectWithTitle, SelectWithTitleProps } from '../common/SelectWithTitle';
 import {
   FilterBlockType,
   getSupportFieldsByAssociation,
@@ -1976,45 +1975,6 @@ export const isPatternDisabled = (fieldSchema: Schema) => {
   return fieldSchema?.['x-component-props']?.['pattern-disable'] == true;
 };
 
-interface SelectWithTitleProps {
-  title?: any;
-  defaultValue?: any;
-  options?: any;
-  onChange?: (...args: any[]) => void;
-}
-export function SelectWithTitle({ title, defaultValue, onChange, options }: SelectWithTitleProps) {
-  const [open, setOpen] = useState(false);
-  const timerRef = useRef<any>(null);
-  return (
-    <div
-      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
-      onClick={(e) => {
-        e.stopPropagation();
-        setOpen((v) => !v);
-      }}
-      onMouseLeave={() => {
-        timerRef.current = setTimeout(() => {
-          setOpen(false);
-        }, 200);
-      }}
-    >
-      {title}
-      <Select
-        open={open}
-        popupMatchSelectWidth={false}
-        bordered={false}
-        defaultValue={defaultValue}
-        onChange={onChange}
-        options={options}
-        style={{ textAlign: 'right', minWidth: 100 }}
-        onMouseEnter={() => {
-          clearTimeout(timerRef.current);
-        }}
-      />
-    </div>
-  );
-}
-
 function getFieldDefaultValue(fieldSchema: ISchema, collectionField: CollectionFieldOptions) {
   const result = fieldSchema?.default ?? collectionField?.defaultValue;
   return result;
diff --git a/packages/core/client/src/user/ChangePassword.tsx b/packages/core/client/src/user/ChangePassword.tsx
index 542a4cdcd2..c3ac598c68 100644
--- a/packages/core/client/src/user/ChangePassword.tsx
+++ b/packages/core/client/src/user/ChangePassword.tsx
@@ -120,7 +120,6 @@ export const useChangePassword = () => {
 
   return useMemo<MenuProps['items'][0]>(() => {
     return {
-      role: 'button',
       key: 'password',
       eventKey: 'ChangePassword',
       onClick: () => {
diff --git a/packages/core/client/src/user/CurrentUser.tsx b/packages/core/client/src/user/CurrentUser.tsx
index a9b109b0eb..4309069002 100644
--- a/packages/core/client/src/user/CurrentUser.tsx
+++ b/packages/core/client/src/user/CurrentUser.tsx
@@ -76,7 +76,6 @@ export const SettingsMenu: React.FC<{
 
     return [
       {
-        role: 'button',
         key: 'cache',
         label: t('Clear cache'),
         onClick: async () => {
@@ -85,7 +84,6 @@ export const SettingsMenu: React.FC<{
         },
       },
       {
-        role: 'button',
         key: 'reboot',
         label: t('Restart application'),
         onClick: async () => {
@@ -129,7 +127,6 @@ export const SettingsMenu: React.FC<{
       },
       ...controlApp,
       {
-        role: 'button',
         key: 'signout',
         label: t('Sign out'),
         onClick: async () => {
diff --git a/packages/core/client/src/user/EditProfile.tsx b/packages/core/client/src/user/EditProfile.tsx
index a08289c17c..6aae561fcb 100644
--- a/packages/core/client/src/user/EditProfile.tsx
+++ b/packages/core/client/src/user/EditProfile.tsx
@@ -126,7 +126,6 @@ export const useEditProfile = () => {
 
   return useMemo<MenuProps['items'][0]>(() => {
     return {
-      role: 'button',
       key: 'profile',
       eventKey: 'EditProfile',
       onClick: () => {
@@ -134,7 +133,7 @@ export const useEditProfile = () => {
         ctx?.setVisible(false);
       },
       label: (
-        <div aria-label="edit-profile">
+        <div>
           {t('Edit profile')}
           <ActionContextProvider value={{ visible, setVisible }}>
             <div onClick={(e) => e.stopPropagation()}>
diff --git a/packages/core/client/src/user/LanguageSettings.tsx b/packages/core/client/src/user/LanguageSettings.tsx
index 092e9da7bc..8da30ddd71 100644
--- a/packages/core/client/src/user/LanguageSettings.tsx
+++ b/packages/core/client/src/user/LanguageSettings.tsx
@@ -11,7 +11,6 @@ export const useLanguageSettings = () => {
   const enabledLanguages: string[] = useMemo(() => data?.data?.enabledLanguages || [], [data?.data?.enabledLanguages]);
   const result = useMemo<MenuProps['items'][0]>(() => {
     return {
-      role: 'button',
       key: 'language',
       eventKey: 'LanguageSettings',
       label: (
diff --git a/packages/core/client/src/user/SwitchRole.tsx b/packages/core/client/src/user/SwitchRole.tsx
index ca91a5f574..3a2e19fa6c 100644
--- a/packages/core/client/src/user/SwitchRole.tsx
+++ b/packages/core/client/src/user/SwitchRole.tsx
@@ -1,7 +1,8 @@
-import { MenuProps, Select } from 'antd';
-import React, { useMemo, useRef, useState } from 'react';
+import { MenuProps } from 'antd';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { APIClient, useAPIClient } from '../api-client';
+import { useAPIClient } from '../api-client';
+import { SelectWithTitle } from '../common';
 import { useCurrentRoles } from './CurrentUserProvider';
 
 export const useSwitchRole = () => {
@@ -10,12 +11,27 @@ export const useSwitchRole = () => {
   const { t } = useTranslation();
   const result = useMemo<MenuProps['items'][0]>(() => {
     return {
-      role: 'button',
       key: 'role',
       eventKey: 'SwitchRole',
-      label: <SelectWithTitle {...{ t, roles, api }} />,
+      label: (
+        <SelectWithTitle
+          title={t('Switch role')}
+          fieldNames={{
+            label: 'title',
+            value: 'name',
+          }}
+          options={roles}
+          defaultValue={api.auth.role}
+          onChange={async (roleName) => {
+            api.auth.setRole(roleName);
+            await api.resource('users').setDefaultRole({ values: { roleName } });
+            location.reload();
+            window.location.reload();
+          }}
+        />
+      ),
     };
-  }, [api, history, roles]);
+  }, [api, roles, t]);
 
   if (roles.length <= 1) {
     return null;
@@ -23,49 +39,3 @@ export const useSwitchRole = () => {
 
   return result;
 };
-
-function SelectWithTitle({ t, roles, api }: { t; roles: any; api: APIClient }) {
-  const [open, setOpen] = useState(false);
-  const timerRef = useRef<any>(null);
-
-  return (
-    <div
-      aria-label="switch-role"
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-      onClick={() => setOpen((v) => !v)}
-      onMouseLeave={() => {
-        timerRef.current = setTimeout(() => {
-          setOpen(false);
-        }, 200);
-      }}
-    >
-      {t('Switch role')}
-      <Select
-        style={{ textAlign: 'right', minWidth: 100 }}
-        open={open}
-        data-testid="select-switch-role"
-        bordered={false}
-        popupMatchSelectWidth={false}
-        fieldNames={{
-          label: 'title',
-          value: 'name',
-        }}
-        options={roles}
-        value={api.auth.role}
-        onChange={async (roleName) => {
-          api.auth.setRole(roleName);
-          await api.resource('users').setDefaultRole({ values: { roleName } });
-          location.reload();
-          window.location.reload();
-        }}
-        onMouseEnter={() => {
-          clearTimeout(timerRef.current);
-        }}
-      />
-    </div>
-  );
-}