@nocobase/client-v2 2.1.11 → 2.2.0-alpha.2

package/src/flow-compat/Popover.tsx

@@ -8,15 +8,54 @@
  */
 
 import { Popover as AntdPopover, type PopoverProps } from 'antd';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { getZIndex, useZIndexContext, zIndexContext } from './zIndexContext';
 
 export const ICON_POPUP_Z_INDEX = 2000;
 
+function parseZIndex(value?: string | null) {
+  if (!value || value === 'auto') {
+    return;
+  }
+
+  const zIndex = Number(value);
+  return Number.isFinite(zIndex) ? zIndex : undefined;
+}
+
+function getElementZIndex(element: HTMLElement) {
+  return parseZIndex(window.getComputedStyle(element).zIndex) ?? parseZIndex(element.style.zIndex);
+}
+
+function getContainingPopupZIndex(element: HTMLElement | null) {
+  if (!element || typeof window === 'undefined') {
+    return 0;
+  }
+
+  let current: HTMLElement | null = element;
+  let maxZIndex = 0;
+
+  while (current && current !== document.documentElement) {
+    const zIndex = getElementZIndex(current);
+    if (typeof zIndex === 'number' && zIndex > maxZIndex) {
+      maxZIndex = zIndex;
+    }
+    current = current.parentElement;
+  }
+
+  return maxZIndex;
+}
+
 export const StablePopover = (props: PopoverProps) => {
   const parentZIndex = useZIndexContext();
-  const zIndex = getZIndex('drawer', parentZIndex, 1);
-  const target = useRef(null);
+  const [containingPopupZIndex, setContainingPopupZIndex] = useState(parentZIndex);
+  const target = useRef<EventTarget | null>(null);
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const zIndex = getZIndex('drawer', Math.max(parentZIndex, containingPopupZIndex), 1);
+
+  useLayoutEffect(() => {
+    const nextZIndex = Math.max(parentZIndex, getContainingPopupZIndex(triggerRef.current));
+    setContainingPopupZIndex((previousZIndex) => (previousZIndex === nextZIndex ? previousZIndex : nextZIndex));
+  }, [parentZIndex]);
 
   const avoidClose = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     target.current = e.target;
@@ -36,7 +75,7 @@ export const StablePopover = (props: PopoverProps) => {
   );
 
   return (
-    <div className="popover-with-stop-propagation" onClick={avoidClose}>
+    <div ref={triggerRef} className="popover-with-stop-propagation" onClick={avoidClose}>
       <zIndexContext.Provider value={zIndex}>
         <AntdPopover {...props} zIndex={zIndex} onOpenChange={onOpenChange} />
       </zIndexContext.Provider>

package/src/flow-compat/__tests__/Popover.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { StablePopover } from '../Popover';
+
+describe('StablePopover', () => {
+  it('renders above the containing popup layer', async () => {
+    render(
+      <div style={{ position: 'relative', zIndex: 5000 }}>
+        <StablePopover open content={<div>Icon picker popup</div>}>
+          <button type="button">Select icon</button>
+        </StablePopover>
+      </div>,
+    );
+
+    expect(screen.getByText('Icon picker popup')).toBeInTheDocument();
+
+    await waitFor(() => {
+      const popover = document.querySelector<HTMLElement>('.ant-popover');
+
+      expect(popover).toBeInTheDocument();
+      expect(Number(popover?.style.zIndex)).toBeGreaterThan(5000);
+    });
+  });
+});

package/src/index.ts

@@ -39,5 +39,12 @@ export * from './collection-manager/interfaces';
 export * from './collection-manager/template-fields';
 export * from './data-source';
 export * from './flow';
-export { DEFAULT_DATA_SOURCE_KEY, isTitleField, isTitleFieldInterface } from './flow-compat';
+export {
+  DEFAULT_DATA_SOURCE_KEY,
+  IconPicker,
+  isTitleField,
+  isTitleFieldInterface,
+  NocoBaseDesktopRouteType,
+} from './flow-compat';
+export type { NocoBaseDesktopRoute } from './flow-compat';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';

package/src/layout-manager/__tests__/LayoutRoute.test.tsx

@@ -11,7 +11,7 @@ import { FlowEngine, FlowEngineProvider, observer } from '@nocobase/flow-engine'
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { createMemoryRouter, Outlet, RouterProvider, useOutlet } from 'react-router-dom';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { BaseLayoutModel } from '../../flow/admin-shell/BaseLayoutModel';
 import { LayoutContentRoute } from '../LayoutContentRoute';
 import { LayoutRoute } from '../LayoutRoute';
@@ -106,6 +106,46 @@ describe('LayoutRoute', () => {
     });
   });
 
+  it('does not activate desktop route loading for generic layouts', async () => {
+    const activateLayout = vi.fn(() => vi.fn());
+    const engine = new FlowEngine();
+    engine.registerModels({ TestLayoutModel });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout,
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        layoutManager: {
+          getLayout: () => layout,
+        },
+      },
+    });
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <LayoutRoute layoutRouteName="test" />,
+        },
+      ],
+      {
+        initialEntries: ['/test'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('layout-route')).toHaveTextContent('test');
+    expect(activateLayout).not.toHaveBeenCalled();
+  });
+
   it('syncs nested page route before the layout renders its outlet', async () => {
     const nestedLayout: LayoutDefinition = {
       ...layout,

package/src/nocobase-buildin-plugin/index.tsx

@@ -355,7 +355,6 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       title: this.app.i18n.t('System settings'),
       icon: 'SettingOutlined',
       aclSnippet: 'pm.system-settings.system-settings',
-      sort: -100,
     });
     this.app.pluginSettingsManager.addPageTabItem({
       menuKey: 'system-settings',
@@ -363,7 +362,6 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       title: this.app.i18n.t('System settings'),
       componentLoader: () => import('../settings-center/SystemSettingsPage'),
       aclSnippet: 'pm.system-settings.system-settings',
-      sort: -100,
     });
     // Parent menu for security-related plugin settings (password policy, locked users, etc.). Registered here in the buildin plugin so any pro plugin can attach page tabs to `menuKey: 'security'` without each one re-registering the same parent.
     this.app.pluginSettingsManager.addMenuItem({

package/src/settings-center/AdminSettingsLayout.tsx

@@ -209,6 +209,9 @@ export const InternalAdminSettingsLayout = () => {
         style={{
           background: token.colorBgContainer,
           borderInlineEnd: `${token.lineWidth}px solid ${token.colorBorderSecondary}`,
+          minHeight: 0,
+          overflowY: 'auto',
+          overflowX: 'hidden',
         }}
       >
         <Menu
@@ -239,11 +242,12 @@ export const InternalAdminSettingsLayout = () => {
       <Layout.Content
         style={{
           background: token.colorBgLayout,
+          flex: 1,
           display: 'flex',
           flexDirection: 'column',
           minWidth: 0,
-          overflowY: 'auto',
-          overflowX: 'hidden',
+          minHeight: 0,
+          overflow: 'hidden',
         }}
       >
         <PageHeader
@@ -273,6 +277,10 @@ export const InternalAdminSettingsLayout = () => {
         />
         <div
           style={{
+            flex: 1,
+            minHeight: 0,
+            boxSizing: 'border-box',
+            overflow: 'auto',
             padding: token.paddingLG,
           }}
         >

package/src/settings-center/SystemSettingsPage.tsx

@@ -221,7 +221,6 @@ export const SystemSettingsPage = () => {
   return (
     <div
       style={{
-        minHeight: '100%',
         background: token.colorBgContainer,
         borderRadius: token.borderRadiusLG,
         padding: token.paddingLG,
@@ -240,7 +239,7 @@ export const SystemSettingsPage = () => {
         <Form.Item
           name="raw_title"
           label={t('System title')}
-          rules={[{ required: true, message: t('Please enter') + t('System title') }]}
+          rules={[{ required: true, message: t('Please enter') + ' ' + t('System title') }]}
         >
           <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
         </Form.Item>

package/src/settings-center/plugin-manager/PluginCard.tsx

@@ -116,7 +116,7 @@ export const PluginCard: FC<PluginCardProps> = ({ data }) => {
   });
 
   const openSettings = useMemoizedFn(() => {
-    navigate(app.pluginSettingsManager.getRoutePath(name));
+    navigate(app.pluginSettingsManager.getPluginSettingsRoutePath(name));
   });
 
   const cardClassName = useMemo(
@@ -180,7 +180,7 @@ export const PluginCard: FC<PluginCardProps> = ({ data }) => {
           <ReadOutlined /> {t('Docs')}
         </a>
       )}
-      {enabled && app.pluginSettingsManager.has(name) && (
+      {enabled && app.pluginSettingsManager.hasPluginSettings(name) && (
         <a
           onClick={(e) => {
             e.stopPropagation();

package/src/settings-center/utils.tsx

@@ -85,12 +85,6 @@ export function filterVisibleSettings(settings: readonly PluginSettingsPageType[
  */
 export function sortTopLevelSettings(settings: PluginSettingsPageType[] = []) {
   return [...settings].sort((a, b) => {
-    if (a.name === SYSTEM_SETTINGS_SETTING_NAME && b.name !== SYSTEM_SETTINGS_SETTING_NAME) {
-      return -1;
-    }
-    if (b.name === SYSTEM_SETTINGS_SETTING_NAME && a.name !== SYSTEM_SETTINGS_SETTING_NAME) {
-      return 1;
-    }
     if ((a.sort || 0) !== (b.sort || 0)) {
       return (a.sort || 0) - (b.sort || 0);
     }