test/nocobase2
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2024-11-29 18:58:26 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix(zIndex): fix edit profile drawer being covered by supage issue (#5409)

Browse Source 
* test: add e2e test

* fix(zIndex): fix the issue of edit profile drawer being covered by subpages

* fix: change password

* chore: fix comment
This commit is contained in:
Zeke Zhang 2024-10-14 18:18:09 +08:00 committed by GitHub
parent 4d0c45f8d4
commit 1523a9a0f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 272 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
packages/core/client/src/modules/popup/__e2e__/templatesOfBug.ts
View File

@ -5124,3 +5124,236 @@ export const zIndexOfSubpage = {
'x-index': 1,
},
};
export const zIndexEditProfile = {
pageSchema: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Page',
'x-app-version': '1.3.32-beta',
properties: {
'17v3l3wra1q': {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'page:addBlock',
'x-app-version': '1.3.32-beta',
properties: {
tpentznu41j: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Row',
'x-app-version': '1.3.32-beta',
properties: {
'16wj734kw8c': {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Col',
'x-app-version': '1.3.32-beta',
properties: {
gh2evps4nft: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableBlockProvider',
'x-acl-action': 'users:list',
'x-use-decorator-props': 'useTableBlockDecoratorProps',
'x-decorator-props': {
collection: 'users',
dataSource: 'main',
action: 'list',
params: {
pageSize: 20,
},
rowKey: 'id',
showIndex: true,
dragSort: false,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:table',
'x-component': 'CardItem',
'x-filter-targets': [],
'x-app-version': '1.3.32-beta',
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-initializer': 'table:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 'var(--nb-spacing)',
},
},
'x-app-version': '1.3.32-beta',
'x-uid': 'jlclfunyxlo',
'x-async': false,
'x-index': 1,
},
juqs9wupfcc: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'array',
'x-initializer': 'table:configureColumns',
'x-component': 'TableV2',
'x-use-component-props': 'useTableBlockProps',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
},
'x-app-version': '1.3.32-beta',
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("Actions") }}',
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-initializer': 'table:configureItemActions',
'x-settings': 'fieldSettings:TableColumn',
'x-toolbar-props': {
initializer: 'table:configureItemActions',
},
'x-app-version': '1.3.32-beta',
properties: {
onge8etkwkq: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
'x-app-version': '1.3.32-beta',
properties: {
'44abnpgy9hl': {
'x-uid': '2m4j1wrmt2k',
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: 'open subpage',
'x-action': 'view',
'x-toolbar': 'ActionSchemaToolbar',
'x-settings': 'actionSettings:view',
'x-component': 'Action.Link',
'x-component-props': {
openMode: 'page',
iconColor: '#1677FF',
danger: false,
},
'x-action-context': {
dataSource: 'main',
collection: 'users',
},
'x-decorator': 'ACLActionProvider',
'x-designer-props': {
linkageAction: true,
},
properties: {
drawer: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("View record") }}',
'x-component': 'Action.Container',
'x-component-props': {
className: 'nb-action-popup',
},
properties: {
tabs: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Tabs',
'x-component-props': {},
'x-initializer': 'popup:addTab',
properties: {
tab1: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{t("Details")}}',
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
'x-component-props': {},
properties: {
grid: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'popup:common:addBlock',
'x-uid': 'pncs8uoz02h',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'i1n4wf3wqt8',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '537y7twqq1x',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'j652bs2ocx7',
'x-async': false,
'x-index': 1,
},
},
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'lmmfco4ti1k',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'qxsdgdxd7zd',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'rxecd82tr2t',
'x-async': false,
'x-index': 2,
},
},
'x-uid': '8mdf3toqg65',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'x2e6vc3l16a',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'eqlzylp6c53',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '2e8trd4olie',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'ay7xv8zc868',
'x-async': true,
'x-index': 1,
},
};

30
packages/core/client/src/modules/popup/__e2e__/zIndex.test.ts
View File

@ -8,7 +8,7 @@
*/
import { expect, test } from '@nocobase/test/e2e';
import { T2797, T2838, zIndexOfSubpage } from './templatesOfBug';
import { T2797, T2838, zIndexEditProfile, zIndexOfSubpage } from './templatesOfBug';
test.describe('z-index of dialog', () => {
test('edit block title', async ({ page, mockPage }) => {
@ -73,4 +73,32 @@ test.describe('z-index of dialog', () => {
.click();
await expect(page.getByText('Add condition', { exact: true })).toBeVisible();
});
test('edit profile', async ({ page, mockPage }) => {
await mockPage(zIndexEditProfile).goto();
// open subpage, and then open the Edit Profile drawer
await page.getByLabel('action-Action.Link-open').click();
await page.getByTestId('user-center-button').hover();
await page.getByRole('menuitem', { name: 'Edit profile' }).click();
await expect(page.getByTestId('drawer-Action.Drawer-Edit profile')).toBeVisible();
// click the Cancel button to close the drawer
await page.getByLabel('action-Action-Cancel').click();
await expect(page.getByTestId('drawer-Action.Drawer-Edit profile')).not.toBeVisible();
});
test('change password', async ({ page, mockPage }) => {
await mockPage(zIndexEditProfile).goto();
// open subpage, and then open the Change password drawer
await page.getByLabel('action-Action.Link-open').click();
await page.getByTestId('user-center-button').hover();
await page.getByRole('menuitem', { name: 'Change password' }).click();
await expect(page.getByTestId('drawer-Action.Drawer-Change password')).toBeVisible();
// click the Cancel button to close the drawer
await page.getByLabel('action-Action-Cancel').click();
await expect(page.getByTestId('drawer-Action.Drawer-Change password')).not.toBeVisible();
});
});

4
packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
View File

@ -37,7 +37,7 @@ const openSizeWidthMap = new Map<OpenSize, string>([
]);
export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
(props) => {
const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
const { footerNodeName = 'Action.Drawer.Footer', zIndex: _zIndex, ...others } = props;
const { visible, setVisible, openSize = 'middle', drawerProps, modalProps } = useActionContext();
const schema = useFieldSchema();
const field = useField();
@ -63,7 +63,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
useSetAriaLabelForDrawer(visible);
}
const zIndex = parentZIndex + (props.level || 0);
const zIndex = _zIndex || parentZIndex + (props.level || 0);
return (
<zIndexContext.Provider value={zIndex}>

4
packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
View File

@ -39,7 +39,7 @@ const openSizeWidthMap = new Map<OpenSize, string>([
export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = observer(
(props) => {
const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
const { footerNodeName = 'Action.Modal.Footer', width, zIndex: _zIndex, ...others } = props;
const { visible, setVisible, openSize = 'middle', modalProps } = useActionContext();
const actualWidth = width ?? openSizeWidthMap.get(openSize);
const schema = useFieldSchema();
@ -71,7 +71,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
useSetAriaLabelForModal(visible);
}
const zIndex = parentZIndex + (props.level || 0);
const zIndex = _zIndex || parentZIndex + (props.level || 0);
return (
<zIndexContext.Provider value={zIndex}>

3
packages/core/client/src/user/ChangePassword.tsx
View File

@ -50,6 +50,9 @@ const schema: ISchema = {
[uid()]: {
'x-decorator': 'Form',
'x-component': 'Action.Drawer',
'x-component-props': {
zIndex: 10000,
},
type: 'void',
title: '{{t("Change password")}}',
properties: {

3
packages/core/client/src/user/EditProfile.tsx
View File

@ -71,6 +71,9 @@ const schema: ISchema = {
useValues: '{{ useCurrentUserValues }}',
},
'x-component': 'Action.Drawer',
'x-component-props': {
zIndex: 10000,
},
type: 'void',
title: '{{t("Edit profile")}}',
properties: {