@nocobase/client-v2 2.2.0-alpha.3 → 2.2.0-alpha.5

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutModel.test.tsx

@@ -11,10 +11,12 @@ import React from 'react';
 import { observable } from '@formily/reactive';
 import { act, render, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
 
-const { flowModelRendererSpy } = vi.hoisted(() => {
+const { flowModelRendererSpy, adminLayoutContentEffectSpy } = vi.hoisted(() => {
   return {
     flowModelRendererSpy: vi.fn(),
+    adminLayoutContentEffectSpy: vi.fn(),
   };
 });
 
@@ -35,6 +37,52 @@ vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   };
 });
 
+vi.mock('@ant-design/pro-layout', async () => {
+  const ReactActual = await import('react');
+  const RouteContext = ReactActual.createContext({ isMobile: true });
+  const ProLayout = (props: { children?: React.ReactNode }) => {
+    return ReactActual.createElement(RouteContext.Provider, { value: { isMobile: true } }, props.children);
+  };
+
+  return {
+    default: ProLayout,
+    RouteContext,
+  };
+});
+
+vi.mock('../AdminLayoutSlotModels', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../AdminLayoutSlotModels')>();
+  const ReactActual = await import('react');
+
+  return {
+    ...actual,
+    AdminLayoutContent: (props: { onContentElementChange?: (element: HTMLDivElement | null) => void }) => {
+      const bindContentRef = ReactActual.useCallback(
+        (element: HTMLDivElement | null) => {
+          props.onContentElementChange?.(element);
+          if (element) {
+            adminLayoutContentEffectSpy();
+          }
+        },
+        [props.onContentElementChange],
+      );
+
+      return ReactActual.createElement('div', { ref: bindContentRef, 'data-testid': 'admin-layout-content' });
+    },
+  };
+});
+
+vi.mock('../useApplications', () => ({
+  useApplications: () => ({
+    Component: null,
+    appList: [],
+  }),
+}));
+
+vi.mock('../AppListRender', () => ({
+  useAppListRender: () => undefined,
+}));
+
 import {
   FlowEngine,
   FlowEngineProvider,
@@ -43,7 +91,8 @@ import {
   useFlowEngine,
   type FlowModel,
 } from '@nocobase/flow-engine';
-import { AdminLayoutModel, getAdminLayoutModel } from '..';
+import { AdminLayoutComponent, AdminLayoutModel, getAdminLayoutModel } from '..';
+import { NocoBaseDesktopRouteType } from '../../../../flow-compat';
 import { getLayoutPageRouteName, getLayoutPageViewRouteName } from '../../../../layout-manager/utils';
 import { TopbarActionModel } from '../../../models/topbar/TopbarActionModel';
 import { UserCenterTopbarActionModel } from '../../../models/topbar/UserCenterTopbarActionModel';
@@ -83,6 +132,7 @@ const TestAdminLayoutHost = (props) => {
 describe('AdminLayoutModel runtime', () => {
   beforeEach(() => {
     flowModelRendererSpy.mockClear();
+    adminLayoutContentEffectSpy.mockReset();
   });
 
   it('should create model via getAdminLayoutModel and update props on rerender', async () => {
@@ -142,6 +192,46 @@ describe('AdminLayoutModel runtime', () => {
     expect(model.context.layoutContentElement).toBeNull();
   });
 
+  it('should expose mobile layout state before initial layout content effects run', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        listAccessible: vi.fn(() => []),
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+        ensureAccessibleLoaded: vi.fn(() => Promise.resolve()),
+        moveRoute: vi.fn(() => Promise.resolve()),
+      },
+    });
+    const model = getAdminLayoutModel<AdminLayoutModel>(engine, { create: true });
+    if (!model) {
+      throw new Error('[NocoBase] Failed to create admin-layout-model.');
+    }
+    const modelLifecycle = model as unknown as { onMount: () => void; onUnmount: () => void };
+    modelLifecycle.onMount();
+    const observedMobileStates: boolean[] = [];
+    adminLayoutContentEffectSpy.mockImplementation(() => {
+      observedMobileStates.push(model.context.isMobileLayout);
+    });
+
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/admin/lrmg36pcahi']}>
+          <AdminLayoutComponent model={model} />
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutContentEffectSpy).toHaveBeenCalledTimes(1);
+    });
+
+    expect(observedMobileStates).toEqual([true]);
+
+    unmount();
+    modelLifecycle.onUnmount();
+  });
+
   it('should expose layout definition only while mounted', async () => {
     const engine = new FlowEngine();
     const { unmount } = render(
@@ -214,6 +304,54 @@ describe('AdminLayoutModel runtime', () => {
     });
   });
 
+  it('should keep route state when route page registers after route sync', async () => {
+    const engine = new FlowEngine();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    const routeState = {
+      __nocobaseOpenViewInputArgs: {
+        popup: {
+          formData: {
+            start: '2026-06-24',
+            end: '2026-06-25',
+          },
+        },
+      },
+    };
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageViewRouteName('admin'),
+        pathname: '/admin/page-1/view/popup',
+        layoutBasePathname: '/admin',
+        state: routeState,
+      });
+    });
+
+    const coordinator = (model as any).getCoordinator();
+    const syncRoute = vi.spyOn(coordinator, 'syncRoute').mockImplementation(() => undefined);
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+        layoutContentElement: document.createElement('div'),
+      });
+    });
+
+    expect(syncRoute).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pageUid: 'page-1',
+        pathname: '/admin/page-1/view/popup',
+        state: routeState,
+      }),
+    );
+  });
+
   it('should parse RunJS openView route params into layout route view stack state', async () => {
     const token = encodeOpenViewRouteState('popup', { mode: 'dialog', size: 'large' });
     if (!token) {
@@ -295,6 +433,82 @@ describe('AdminLayoutModel runtime', () => {
     });
   });
 
+  it('should resolve group id paths as blank root routes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteById: (routeId: string) =>
+          routeId === '1'
+            ? {
+                id: 1,
+                type: NocoBaseDesktopRouteType.group,
+              }
+            : undefined,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    expect(
+      model.resolveLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/1',
+        layoutBasePathname: '/admin',
+      }),
+    ).toMatchObject({
+      type: 'root',
+      pathname: '/admin/1',
+      relativePath: '1',
+    });
+  });
+
+  it('should prefer schema uid routes before treating numeric paths as group ids', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) =>
+          pageUid === '1'
+            ? {
+                schemaUid: '1',
+                type: NocoBaseDesktopRouteType.flowPage,
+              }
+            : undefined,
+        getRouteById: (routeId: string) =>
+          routeId === '1'
+            ? {
+                id: 1,
+                type: NocoBaseDesktopRouteType.group,
+              }
+            : undefined,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    expect(
+      model.resolveLayoutRoute({
+        name: getLayoutPageRouteName('admin'),
+        pathname: '/admin/1',
+        layoutBasePathname: '/admin',
+      }),
+    ).toMatchObject({
+      type: 'page',
+      pageUid: '1',
+    });
+  });
+
   it('should not consume global routes that belong to nested layouts', async () => {
     const engine = new FlowEngine();
     const routeRef = observable.ref({
@@ -395,6 +609,226 @@ describe('AdminLayoutModel runtime', () => {
     });
   });
 
+  it('should restore layout route from router context when a route page registers after stale cleanup', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page',
+        pathname: '/admin/page-1',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+    const routeLike = {
+      name: 'admin.page',
+      pathname: '/admin/page-1',
+      layoutRouteName: 'admin',
+      layoutBasePathname: '/admin',
+    };
+
+    act(() => {
+      model.syncLayoutRoute(routeLike);
+      model.clearLayoutRoute(routeLike);
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    const syncRouteSpy = vi.spyOn(model.getCoordinator(), 'syncRoute');
+    syncRouteSpy.mockClear();
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toMatchObject({
+        type: 'page',
+        pageUid: 'page-1',
+        pathname: '/admin/page-1',
+      });
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+    expect(syncRouteSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        layoutRouteName: 'admin',
+        pageUid: 'page-1',
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      }),
+    );
+  });
+
+  it('should restore layout route from a legacy dotted page view route name', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page.view',
+        pathname: '/admin/page-1/view/popup',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toMatchObject({
+      type: 'page',
+      pageUid: 'page-1',
+      pathname: '/admin/page-1/view/popup',
+      viewStack: [{ viewUid: 'page-1' }, { viewUid: 'popup' }],
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+  });
+
+  it('should not restore layout route from another layout when a route page registers', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.settings.publicForms.page',
+        pathname: '/admin/settings/public-forms/form-1',
+        params: { name: 'form-1' },
+        layoutRouteName: 'admin.settings.publicForms',
+        layoutBasePathname: '/admin/settings/public-forms',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('form-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    expect(model.context.currentRoute).toEqual({});
+  });
+
+  it('should not restore layout route from a nested layout route without layoutRouteName', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.settings.publicForms.page',
+        pathname: '/admin/settings/public-forms/form-1',
+        params: { name: 'form-1' },
+        layoutBasePathname: '/admin/settings/public-forms',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('form-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    expect(model.context.currentRoute).toEqual({});
+  });
+
+  it('should ignore stale layout route cleanup after a route page has registered on the same path', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page',
+        pathname: '/admin/page-1',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+    const staleRouteLike = {
+      name: 'admin.page',
+      pathname: '/admin/page-1',
+      layoutRouteName: 'admin',
+      layoutBasePathname: '/admin',
+    };
+
+    act(() => {
+      model.syncLayoutRoute(staleRouteLike);
+      model.clearLayoutRoute(staleRouteLike);
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+      model.clearLayoutRoute(staleRouteLike);
+    });
+
+    expect(model.context.layoutRoute).toMatchObject({
+      type: 'page',
+      pageUid: 'page-1',
+      pathname: '/admin/page-1',
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+  });
+
   it('should keep pageActive in sync after non-active route page updates', async () => {
     const engine = new FlowEngine();
     engine.context.defineProperty('routeRepository', {

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -222,6 +222,31 @@ describe('TopbarActionsBar helpers', () => {
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
   });
 
+  it('should open sub-app admin settings in a new tab outside sub-app admin runtime', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/admin/settings/system-settings',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/crm-amd/ekeisumx1zu');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
+  });
+
   it('should keep regular admin settings as SPA links inside admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
@@ -245,6 +270,29 @@ describe('TopbarActionsBar helpers', () => {
     expect(link).not.toHaveAttribute('target', '_blank');
   });
 
+  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'routes',
+          name: 'routes',
+          title: 'Routes',
+          path: '/admin/settings/routes',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
+
+    const link = screen.getByRole('link', { name: 'Routes' });
+    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
+    expect(link).not.toHaveAttribute('target', '_blank');
+  });
+
   it('should not treat admin-like paths as admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,

package/src/flow/admin-shell/admin-layout/index.ts

@@ -9,6 +9,7 @@
 
 export * from './AdminLayoutComponent';
 export * from './AdminLayoutModel';
+export * from './AppSwitcherActionPanelModel';
 export * from '../BaseLayoutModel';
 export * from '../BaseLayoutRouteCoordinator';
 export * from './AdminLayoutSlotModels';

package/src/flow/admin-shell/admin-layout/useApplications.tsx

@@ -8,41 +8,110 @@
  */
 
 import { useApp } from '../../../flow-compat';
+import type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
 import React from 'react';
+import type { AdminLayoutModel } from './AdminLayoutModel';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+import type { AppSwitcherActionPanelModel } from './AppSwitcherActionPanelModel';
 
-export const useApplications = () => {
+export const APP_SWITCHER_ACTION_PANEL_MODEL_UID = `${ADMIN_LAYOUT_MODEL_UID}-app-switcher-actions`;
+
+function getErrorStatus(error: unknown) {
+  if (!error || typeof error !== 'object') {
+    return;
+  }
+  const errorLike = error as { response?: { status?: unknown }; status?: unknown };
+  const status = errorLike.response?.status ?? errorLike.status;
+  return typeof status === 'number' ? status : undefined;
+}
+
+export const useApplications = (adminLayoutModel?: AdminLayoutModel) => {
   const app = useApp();
   const loadAppList = app.apps.loadAppList;
-  const [appList, setAppList] = React.useState([]);
+  const [legacyAppList, setLegacyAppList] = React.useState<AppListProps>([]);
+  const [appSwitcherModel, setAppSwitcherModel] = React.useState<AppSwitcherActionPanelModel>();
+
+  React.useEffect(() => {
+    let canceled = false;
+    let modelWithLayoutContext: AppSwitcherActionPanelModel | undefined;
+
+    if (!adminLayoutModel) {
+      setAppSwitcherModel(undefined);
+      return;
+    }
+
+    const load = async () => {
+      try {
+        const model = await adminLayoutModel.flowEngine.loadOrCreateModel<AppSwitcherActionPanelModel>({
+          uid: APP_SWITCHER_ACTION_PANEL_MODEL_UID,
+          use: 'AppSwitcherActionPanelModel',
+          parentId: adminLayoutModel.uid,
+          subKey: 'appSwitcher',
+          subType: 'object',
+        });
+        if (canceled || !model) {
+          return;
+        }
+        model.context.addDelegate(adminLayoutModel.context);
+        modelWithLayoutContext = model;
+        setAppSwitcherModel(model);
+      } catch (error) {
+        if (canceled) {
+          return;
+        }
+        if (getErrorStatus(error) !== 404) {
+          throw error;
+        }
+        setAppSwitcherModel(undefined);
+      }
+    };
+    load();
+
+    return () => {
+      canceled = true;
+      modelWithLayoutContext?.context.removeDelegate(adminLayoutModel.context);
+    };
+  }, [adminLayoutModel]);
 
   React.useEffect(() => {
     let canceled = false;
 
+    if (adminLayoutModel) {
+      setLegacyAppList([]);
+      return;
+    }
+
     if (!loadAppList) {
-      setAppList([]);
+      setLegacyAppList([]);
       return;
     }
 
-    void Promise.resolve(loadAppList(app))
-      .then((list) => {
+    const load = async () => {
+      try {
+        const list = await Promise.resolve(loadAppList(app));
         if (!canceled) {
-          setAppList(Array.isArray(list) ? list : []);
+          setLegacyAppList(Array.isArray(list) ? list : []);
         }
-      })
-      .catch((error) => {
+      } catch (error) {
         console.error('[NocoBase] Failed to load application switcher list.', error);
         if (!canceled) {
-          setAppList([]);
+          setLegacyAppList([]);
         }
-      });
+      }
+    };
+    load();
 
     return () => {
       canceled = true;
     };
-  }, [app, loadAppList]);
+  }, [adminLayoutModel, app, loadAppList]);
+
+  const shouldRenderConfiguredSwitcher =
+    !!appSwitcherModel && (appSwitcherModel.hasActions() || app.flowEngine.context.flowSettingsEnabled);
 
   return {
     Component: app.apps.Component,
-    appList,
+    appList: shouldRenderConfiguredSwitcher ? [{ title: '', url: '#' }] : legacyAppList,
+    appSwitcherModel,
   };
 };