fix(popup): z-index (#5373)

* fix(popup): z-index

* test: add e2e test

* chore: fix build error

* Revert "chore: fix build error"

This reverts commit d0fe9ba217.

* refactor: avoid build error

* chore: make e2e more stable

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

@@ -51,4 +51,26 @@ test.describe('z-index of dialog', () => {
     await page.getByRole('button', { name: 'Cancel' }).click({ timeout: 1000 });
     await expect(page.getByRole('dialog').getByText('Assign field values')).not.toBeVisible();
   });
+
+  test('Users & Permissions', async ({ page }) => {
+    await page.goto('/admin/settings/users-permissions/roles');
+
+    // Data source
+    await page.getByRole('tab', { name: 'Data sources' }).click();
+    await page.getByLabel('action-Action.Link-Configure-').click();
+    await page.getByRole('tab', { name: 'Action permissions', exact: true }).click();
+    await page.getByLabel('action-Action.Link-Configure-dataSourcesCollections-users', { exact: true }).click();
+    await page.getByLabel('Individual').check();
+    await page
+      .getByTestId('drawer-Action.Drawer-dataSourcesCollections-Configure permission')
+      .getByRole('cell')
+      .locator('.ant-select-selector')
+      .first()
+      .click();
+    await page
+      .getByTestId('drawer-RecordPicker.Selector-dataSourcesCollections-Select record')
+      .getByLabel('action-Action-Add new-create-')
+      .click();
+    await expect(page.getByText('Add condition', { exact: true })).toBeVisible();
+  });
 });

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

@@ -19,7 +19,7 @@ import { useStyles } from './Action.Drawer.style';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForDrawer } from './hooks/useSetAriaLabelForDrawer';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
-import { antdDrawerZIndex } from './utils';
+import { useZIndexContext, zIndexContext } from './zIndexContext';
 
 const DrawerErrorFallback: React.FC<FallbackProps> = (props) => {
   const { visible, setVisible } = useActionContext();
@@ -43,6 +43,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
     const field = useField();
     const { componentCls, hashId } = useStyles();
     const tabContext = useTabsContext();
+    const parentZIndex = useZIndexContext();
     const footerSchema = schema.reduceProperties((buf, s) => {
       if (s['x-component'] === footerNodeName) {
         return s;
@@ -62,10 +63,13 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
       useSetAriaLabelForDrawer(visible);
     }
 
+    const zIndex = parentZIndex + (props.level || 0);
+
     return (
+      <zIndexContext.Provider value={zIndex}>
         <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
           <Drawer
-          zIndex={antdDrawerZIndex + props.level}
+            zIndex={zIndex}
             width={openSizeWidthMap.get(openSize)}
             title={field.title}
             {...others}
@@ -100,6 +104,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
             />
           </Drawer>
         </TabsContextProvider>
+      </zIndexContext.Provider>
     );
   },
   { displayName: 'ActionDrawer' },

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

@@ -20,7 +20,7 @@ import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForModal } from './hooks/useSetAriaLabelForModal';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
-import { antdDrawerZIndex } from './utils';
+import { useZIndexContext, zIndexContext } from './zIndexContext';
 
 const ModalErrorFallback: React.FC<FallbackProps> = (props) => {
   const { visible, setVisible } = useActionContext();
@@ -47,6 +47,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
     const field = useField();
     const { token } = useToken();
     const tabContext = useTabsContext();
+    const parentZIndex = useZIndexContext();
     const footerSchema = schema.reduceProperties((buf, s) => {
       if (s['x-component'] === footerNodeName) {
         return s;
@@ -70,10 +71,13 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
       useSetAriaLabelForModal(visible);
     }
 
+    const zIndex = parentZIndex + (props.level || 0);
+
     return (
+      <zIndexContext.Provider value={zIndex}>
         <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
           <Modal
-          zIndex={antdDrawerZIndex + props.level}
+            zIndex={zIndex}
             width={actualWidth}
             title={field.title}
             {...(others as ModalProps)}
@@ -143,6 +147,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
             />
           </Modal>
         </TabsContextProvider>
+      </zIndexContext.Provider>
     );
   },
   { displayName: 'ActionModal' },

packages/core/client/src/schema-component/antd/action/Action.Page.tsx

@@ -15,7 +15,7 @@ import { BackButtonUsedInSubPage } from '../page/BackButtonUsedInSubPage';
 import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionPageStyle } from './Action.Page.style';
 import { usePopupOrSubpagesContainerDOM } from './hooks/usePopupSlotDOM';
-import { antdDrawerZIndex } from './utils';
+import { useZIndexContext, zIndexContext } from './zIndexContext';
 
 export function ActionPage({ level }) {
   const filedSchema = useFieldSchema();
@@ -23,12 +23,13 @@ export function ActionPage({ level }) {
   const { getContainerDOM } = usePopupOrSubpagesContainerDOM();
   const { styles } = useActionPageStyle();
   const tabContext = useTabsContext();
+  const parentZIndex = useZIndexContext();
 
   const style = useMemo(() => {
     return {
-      zIndex: antdDrawerZIndex + level,
+      zIndex: parentZIndex + (level || 0),
     };
-  }, [level]);
+  }, [parentZIndex, level]);
 
   if (!ctx.visible) {
     return null;
@@ -37,7 +38,9 @@ export function ActionPage({ level }) {
   const actionPageNode = (
     <div className={styles.container} style={style}>
       <TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />}>
+        <zIndexContext.Provider value={style.zIndex}>
           <RecursionField schema={filedSchema} onlyRenderProperties />
+        </zIndexContext.Provider>
       </TabsContextProvider>
     </div>
   );

packages/core/client/src/schema-component/antd/action/utils.ts

@@ -154,5 +154,3 @@ export const setInitialActionState = (field) => {
   field.data.hidden = false;
   field.componentProps['disabled'] = false;
 };
-
-export const antdDrawerZIndex = 100;

packages/core/client/src/schema-component/antd/action/zIndexContext.tsx

@@ -0,0 +1,16 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+
+export const zIndexContext = React.createContext(100);
+
+export const useZIndexContext = () => {
+  return React.useContext(zIndexContext);
+};