From 1523a9a0f7c42b839e4cb0eda91620094228cdc7 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Mon, 14 Oct 2024 18:18:09 +0800 Subject: [PATCH] fix(zIndex): fix edit profile drawer being covered by supage issue (#5409) * test: add e2e test * fix(zIndex): fix the issue of edit profile drawer being covered by subpages * fix: change password * chore: fix comment --- .../modules/popup/__e2e__/templatesOfBug.ts | 233 ++++++++++++++++++ .../src/modules/popup/__e2e__/zIndex.test.ts | 30 ++- .../antd/action/Action.Drawer.tsx | 4 +- .../antd/action/Action.Modal.tsx | 4 +- .../core/client/src/user/ChangePassword.tsx | 3 + packages/core/client/src/user/EditProfile.tsx | 3 + 6 files changed, 272 insertions(+), 5 deletions(-) diff --git a/packages/core/client/src/modules/popup/__e2e__/templatesOfBug.ts b/packages/core/client/src/modules/popup/__e2e__/templatesOfBug.ts index 2d71859186..680585837d 100644 --- a/packages/core/client/src/modules/popup/__e2e__/templatesOfBug.ts +++ b/packages/core/client/src/modules/popup/__e2e__/templatesOfBug.ts @@ -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, + }, +}; diff --git a/packages/core/client/src/modules/popup/__e2e__/zIndex.test.ts b/packages/core/client/src/modules/popup/__e2e__/zIndex.test.ts index 3d05489c24..a77e96d27f 100644 --- a/packages/core/client/src/modules/popup/__e2e__/zIndex.test.ts +++ b/packages/core/client/src/modules/popup/__e2e__/zIndex.test.ts @@ -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(); + }); }); diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx index 4a1c7da78f..9847e5c9c2 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx @@ -37,7 +37,7 @@ const openSizeWidthMap = new Map([ ]); export const InternalActionDrawer: React.FC = 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 = observer( useSetAriaLabelForDrawer(visible); } - const zIndex = parentZIndex + (props.level || 0); + const zIndex = _zIndex || parentZIndex + (props.level || 0); return ( diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx index bf054edf25..5478cc0317 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx @@ -39,7 +39,7 @@ const openSizeWidthMap = new Map([ export const InternalActionModal: React.FC> = 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> = obse useSetAriaLabelForModal(visible); } - const zIndex = parentZIndex + (props.level || 0); + const zIndex = _zIndex || parentZIndex + (props.level || 0); return ( diff --git a/packages/core/client/src/user/ChangePassword.tsx b/packages/core/client/src/user/ChangePassword.tsx index 226d9d9eb2..88fc12b6f1 100644 --- a/packages/core/client/src/user/ChangePassword.tsx +++ b/packages/core/client/src/user/ChangePassword.tsx @@ -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: { diff --git a/packages/core/client/src/user/EditProfile.tsx b/packages/core/client/src/user/EditProfile.tsx index 9ac1849aec..e60c78d87a 100644 --- a/packages/core/client/src/user/EditProfile.tsx +++ b/packages/core/client/src/user/EditProfile.tsx @@ -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: {