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

package/src/flow/admin-shell/admin-layout/AdminLayoutEntryGuard.test.tsx

@@ -0,0 +1,310 @@
+/**
+ * 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 { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { RouteRepository } from '../../../RouteRepository';
+import { AdminLayoutEntryGuard } from './AdminLayoutEntryGuard';
+import type { AdminLayoutModel } from './AdminLayoutModel';
+
+describe('AdminLayoutEntryGuard', () => {
+  it('should ensure accessible routes for the active layout before resolving the landing route', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    routeRepository.setRoutes([], 'admin-layout-model');
+    const deactivateLayout = routeRepository.activateLayout({
+      uid: 'mobile-layout-model',
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        router: {
+          getBasename: () => '',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'mobile',
+        routePath: '/mobile',
+        uid: 'mobile-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/mobile',
+          id: 'mobile',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <div>Mobile layout shell</div>
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+        },
+      ],
+      {
+        initialEntries: ['/mobile'],
+      },
+    );
+
+    render(<RouterProvider router={router} />);
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith({
+        url: '/desktopRoutes:listAccessible',
+        params: {
+          tree: true,
+          sort: 'sort',
+          layout: 'mobile-layout-model',
+        },
+      });
+    });
+    expect(screen.getByText('Mobile layout shell')).toBeInTheDocument();
+    deactivateLayout();
+  });
+
+  it('should activate the guard layout before loading accessible routes', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        router: {
+          getBasename: () => '',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'mobile',
+        routePath: '/mobile',
+        uid: 'mobile-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/mobile',
+          id: 'mobile',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <div>Mobile layout shell</div>
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+        },
+      ],
+      {
+        initialEntries: ['/mobile'],
+      },
+    );
+
+    render(<RouterProvider router={router} />);
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith({
+        url: '/desktopRoutes:listAccessible',
+        params: {
+          tree: true,
+          sort: 'sort',
+          layout: 'mobile-layout-model',
+        },
+      });
+    });
+    expect(screen.getByText('Mobile layout shell')).toBeInTheDocument();
+  });
+
+  it('should keep guard stable when layout getter returns a new object with the same fields', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    const activateLayout = vi.spyOn(routeRepository, 'activateLayout');
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        router: {
+          getBasename: () => '',
+        },
+      },
+    });
+
+    const model = {
+      get layout() {
+        return {
+          authCheck: true,
+          routeName: 'admin',
+          routePath: '/admin',
+          uid: 'admin-layout-model',
+        };
+      },
+    } as AdminLayoutModel;
+    let forceRerender = () => {};
+    const GuardShell = () => {
+      const [, setVersion] = React.useState(0);
+      forceRerender = () => setVersion((version) => version + 1);
+      return (
+        <AdminLayoutEntryGuard model={model}>
+          <div>Admin layout shell</div>
+        </AdminLayoutEntryGuard>
+      );
+    };
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <GuardShell />
+            </FlowEngineProvider>
+          ),
+        },
+      ],
+      {
+        initialEntries: ['/admin'],
+      },
+    );
+
+    render(<RouterProvider router={router} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Admin layout shell')).toBeInTheDocument();
+    });
+    expect(activateLayout).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      forceRerender();
+    });
+
+    expect(activateLayout).toHaveBeenCalledTimes(1);
+    expect(request).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reactivate the guard when stable layout fields change', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    const activateLayout = vi.spyOn(routeRepository, 'activateLayout');
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        router: {
+          getBasename: () => '',
+        },
+      },
+    });
+
+    let layoutUid = 'admin-layout-model';
+    const model = {
+      get layout() {
+        return {
+          authCheck: true,
+          routeName: 'admin',
+          routePath: '/admin',
+          uid: layoutUid,
+        };
+      },
+    } as AdminLayoutModel;
+    let forceRerender = () => {};
+    const GuardShell = () => {
+      const [, setVersion] = React.useState(0);
+      forceRerender = () => setVersion((version) => version + 1);
+      return (
+        <AdminLayoutEntryGuard model={model}>
+          <div>Admin layout shell</div>
+        </AdminLayoutEntryGuard>
+      );
+    };
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <GuardShell />
+            </FlowEngineProvider>
+          ),
+        },
+      ],
+      {
+        initialEntries: ['/admin'],
+      },
+    );
+
+    render(<RouterProvider router={router} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Admin layout shell')).toBeInTheDocument();
+    });
+    expect(activateLayout).toHaveBeenCalledWith(expect.objectContaining({ uid: 'admin-layout-model' }));
+
+    await act(async () => {
+      layoutUid = 'admin-layout-next';
+      forceRerender();
+    });
+
+    expect(activateLayout).toHaveBeenCalledTimes(2);
+    expect(activateLayout).toHaveBeenLastCalledWith(expect.objectContaining({ uid: 'admin-layout-next' }));
+  });
+});

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

@@ -13,13 +13,23 @@ import { useLocation, useMatches, useNavigate } from 'react-router-dom';
 import { NocoBaseDesktopRouteType } from '../../../flow-compat';
 import { useApp } from '../../../hooks/useApp';
 import { isLayoutContentRouteName } from '../../../layout-manager/utils';
+import type { LayoutDefinition } from '../../../layout-manager/types';
 import {
   findFirstV2LandingRoute,
+  getAdminLayoutRoutePath,
   resolveAdminRouteRuntimeTarget,
+  type AdminLayoutRoutePathLike,
   toRouterNavigationPath,
 } from './resolveAdminRouteRuntimeTarget';
+import type { AdminLayoutModel } from './AdminLayoutModel';
 
-export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ children }) => {
+type StableAdminEntryLayout = AdminLayoutRoutePathLike &
+  Partial<Pick<LayoutDefinition, 'authCheck' | 'routeName' | 'uid'>>;
+
+export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode; model?: AdminLayoutModel }> = ({
+  children,
+  model,
+}) => {
   const flowEngine = useFlowEngine();
   const app = useApp();
   const navigate = useNavigate();
@@ -28,24 +38,44 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ child
   const [ready, setReady] = useState(false);
   const replaceTriggeredRef = useRef(false);
   const routeRepository = flowEngine.context.routeRepository;
+  const rawLayout = model?.layout;
+  const layoutUid = rawLayout?.uid;
+  const layoutRouteNameValue = rawLayout?.routeName;
+  const layoutRoutePathValue = rawLayout?.routePath;
+  const layoutAuthCheck = rawLayout?.authCheck;
+  const layout = useMemo<StableAdminEntryLayout | undefined>(() => {
+    if (!layoutUid && !layoutRouteNameValue && !layoutRoutePathValue && typeof layoutAuthCheck === 'undefined') {
+      return undefined;
+    }
+
+    return {
+      authCheck: layoutAuthCheck,
+      routeName: layoutRouteNameValue,
+      routePath: layoutRoutePathValue || '',
+      uid: layoutUid,
+    };
+  }, [layoutAuthCheck, layoutRouteNameValue, layoutRoutePathValue, layoutUid]);
+  const layoutRoutePath = getAdminLayoutRoutePath(layout);
+  const layoutRouteName = layout?.routeName || 'admin';
+  const layoutRuntime = useMemo(() => ({ routePath: layoutRoutePath }), [layoutRoutePath]);
   const isAdminRoot = useMemo(() => {
     const pathname = toRouterNavigationPath(location.pathname, app.router.getBasename());
-    return pathname === '/admin';
-  }, [app, location.pathname]);
+    return pathname === layoutRoutePath;
+  }, [app, layoutRoutePath, location.pathname]);
   const pageUid = useMemo(() => {
     const lastMatch = matches[matches.length - 1];
-    if (!isLayoutContentRouteName('admin', lastMatch?.id)) {
+    if (!isLayoutContentRouteName(layoutRouteName, lastMatch?.id)) {
       return '';
     }
-    const adminMatch = matches.find((match) => match.id === 'admin');
+    const adminMatch = matches.find((match) => match.id === layoutRouteName);
     return (
       (lastMatch.params?.name as string) ||
       parsePathnameToViewParams(location.pathname, {
-        basePath: adminMatch?.pathname || '/admin',
+        basePath: adminMatch?.pathname || layoutRoutePath,
       })[0]?.viewUid ||
       ''
     );
-  }, [location.pathname, matches]);
+  }, [layoutRouteName, layoutRoutePath, location.pathname, matches]);
 
   useEffect(() => {
     replaceTriggeredRef.current = false;
@@ -53,6 +83,7 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ child
 
   useEffect(() => {
     let active = true;
+    const deactivateLayout = routeRepository?.activateLayout?.(layout);
 
     const run = async () => {
       setReady(false);
@@ -85,6 +116,7 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ child
           const target = resolveAdminRouteRuntimeTarget({
             app,
             route: currentRoute,
+            layout: layoutRuntime,
             location: {
               pathname: window.location.pathname,
               search: window.location.search,
@@ -117,6 +149,7 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ child
       const target = resolveAdminRouteRuntimeTarget({
         app,
         route: firstAccessibleRoute,
+        layout: layoutRuntime,
       });
 
       if (!target.runtimePath) {
@@ -135,15 +168,18 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ child
       navigate(toRouterNavigationPath(target.runtimePath, app.router.getBasename()), { replace: true });
     };
 
-    void run();
+    run();
 
     return () => {
       active = false;
+      deactivateLayout?.();
     };
   }, [
     app,
     flowEngine,
     isAdminRoot,
+    layout,
+    layoutRuntime,
     location.hash,
     location.pathname,
     location.search,

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

@@ -17,6 +17,7 @@ import {
   getAdminLayoutMenuMovePositionOptions,
 } from './AdminLayoutMenuUtils';
 import { getFlowPageMenuSchema, getPageMenuSchema, isVariable } from './AdminLayoutCompat';
+import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 
 const buildLinkSettingSchema = (t: (title: any) => any) => ({
   href: {
@@ -298,6 +299,7 @@ export const matchesRoutePath = (
   route: NocoBaseDesktopRoute | undefined,
   pathname: string,
   basename = '/',
+  layout?: AdminLayoutRoutePathLike | null,
 ): boolean => {
   if (!route) {
     return false;
@@ -310,8 +312,8 @@ export const matchesRoutePath = (
       : pathname;
 
   const candidates = [
-    route.id != null ? `/admin/${route.id}` : null,
-    route.schemaUid ? `/admin/${route.schemaUid}` : null,
+    route.id != null ? joinAdminLayoutRoutePath(layout, route.id) : null,
+    route.schemaUid ? joinAdminLayoutRoutePath(layout, route.schemaUid) : null,
   ].filter(Boolean) as string[];
 
   if (
@@ -321,7 +323,7 @@ export const matchesRoutePath = (
   }
 
   return Array.isArray(route.children)
-    ? route.children.some((child) => matchesRoutePath(child, normalizedPathname, '/'))
+    ? route.children.some((child) => matchesRoutePath(child, normalizedPathname, '/', layout))
     : false;
 };
 

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

@@ -42,9 +42,11 @@ import {
 } from './AdminLayoutMenuFlowUtils';
 import { ADMIN_LAYOUT_MODEL_UID } from './constants';
 import {
+  type AdminLayoutRoutePathLike,
   findFirstAccessiblePageRoute,
   findFirstV2LandingRoute,
   isV2AdminRuntime,
+  joinAdminLayoutRoutePath,
   resolveAdminRouteRuntimeTarget,
   toRouterNavigationPath,
 } from './resolveAdminRouteRuntimeTarget';
@@ -64,6 +66,26 @@ const omitMenuRuntimeProps = (props: Record<string, unknown> = {}) => {
   return persistableProps;
 };
 
+type MenuRouteTreeRefreshableModel = FlowModel & {
+  refreshMenuRouteTree?: () => void;
+};
+
+function isMenuRouteTreeRefreshableModel(model: FlowModel | undefined): model is MenuRouteTreeRefreshableModel {
+  return typeof (model as MenuRouteTreeRefreshableModel | undefined)?.refreshMenuRouteTree === 'function';
+}
+
+function getOwnerMenuRouteTreeRefreshModel(model: FlowModel) {
+  let current = model.parent as FlowModel | undefined;
+  while (current) {
+    if (isMenuRouteTreeRefreshableModel(current)) {
+      return current;
+    }
+    current = current.parent as FlowModel | undefined;
+  }
+
+  return undefined;
+}
+
 export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStructure> {
   private creationPersisted = false;
   private persistedStateHydrated = false;
@@ -129,6 +151,24 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     return this.context.routeRepository;
   }
 
+  getLayout(): AdminLayoutRoutePathLike | undefined {
+    const contextLayout = this.context.layout as AdminLayoutRoutePathLike | undefined;
+    if (contextLayout?.routePath) {
+      return contextLayout;
+    }
+
+    let current: FlowModel | undefined = this;
+    while (current) {
+      const propsLayout = current.props?.layout as AdminLayoutRoutePathLike | undefined;
+      if (propsLayout?.routePath) {
+        return propsLayout;
+      }
+      current = current.parent as FlowModel | undefined;
+    }
+
+    return undefined;
+  }
+
   hasPersistedMenuInstanceFlowFlag(route = this.getRoute()) {
     return route?.options?.hasPersistedMenuInstanceFlow === true;
   }
@@ -280,7 +320,12 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     const previous = this.hidden;
     super.setHidden(value);
     if (previous !== this.hidden) {
-      (this.flowEngine.getModel?.(ADMIN_LAYOUT_MODEL_UID) as any)?.refreshMenuRouteTree?.();
+      const defaultLayoutModel = this.flowEngine.getModel?.(ADMIN_LAYOUT_MODEL_UID);
+      const refreshableModel =
+        getOwnerMenuRouteTreeRefreshModel(this) ||
+        (isMenuRouteTreeRefreshableModel(defaultLayoutModel) ? defaultLayoutModel : undefined);
+
+      refreshableModel?.refreshMenuRouteTree?.();
     }
   }
 
@@ -533,9 +578,10 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       return false;
     }
 
+    const layout = this.getLayout();
     const allAccessRoutes = this.getRouteRepository().listAccessible();
     const pathname = this.context.location?.pathname || window.location.pathname;
-    const shouldNavigate = matchesRoutePath(route, pathname, this.context.router?.basename);
+    const shouldNavigate = matchesRoutePath(route, pathname, this.context.router?.basename, layout);
     const prevSibling = findPrevSiblingRoute(allAccessRoutes, route);
     const nextSibling = findNextSiblingRoute(allAccessRoutes, route);
 
@@ -554,6 +600,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
     const target = resolveAdminRouteRuntimeTarget({
       app: this.context.app,
       route: sibling,
+      layout,
     });
 
     if (!target.runtimePath) {
@@ -584,6 +631,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
 
     const shouldShowIconInTitle = shouldRenderIconInTitle({ depth, isMobile: options.isMobile });
     const { name, icon } = buildMenuTitleWithIcon(route, options.t, shouldShowIconInTitle);
+    const layout = this.getLayout();
 
     if (route.type === NocoBaseDesktopRouteType.link) {
       const identity = route.id ?? route.schemaUid ?? route.menuSchemaUid ?? route.title ?? this.uid;
@@ -591,7 +639,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       return {
         name,
         icon,
-        path: getAdminLayoutMenuVirtualPath('link', identity),
+        path: getAdminLayoutMenuVirtualPath('link', identity, layout),
         hideInMenu: route.hideInMenu,
         _route: route,
         _parentRoute: parentRoute,
@@ -604,6 +652,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       const runtimeTarget = resolveAdminRouteRuntimeTarget({
         app: this.context.app,
         route,
+        layout,
       });
 
       if (runtimeTarget.reason === 'unsupportedV2Runtime') {
@@ -611,14 +660,14 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       }
 
       const path = route.schemaUid
-        ? `/admin/${route.schemaUid}`
-        : getAdminLayoutMenuVirtualPath('link', `${this.uid}-invalid`);
+        ? joinAdminLayoutRoutePath(layout, route.schemaUid)
+        : getAdminLayoutMenuVirtualPath('link', `${this.uid}-invalid`, layout);
 
       return {
         name,
         icon,
         path,
-        redirect: route.schemaUid ? `/admin/${route.schemaUid}` : undefined,
+        redirect: route.schemaUid ? joinAdminLayoutRoutePath(layout, route.schemaUid) : undefined,
         hideInMenu: route.hideInMenu,
         disabled: !runtimeTarget.runtimePath,
         _runtimePath: runtimeTarget.runtimePath,
@@ -644,7 +693,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
           .filter(Boolean) || [];
 
       if (options.designable && depth === 0) {
-        children.push(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-side', this, route));
+        children.push(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-side', this, route, layout));
       }
 
       const landingRoute = isV2AdminRuntime(this.context.app)
@@ -653,14 +702,17 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
       const runtimeTarget = resolveAdminRouteRuntimeTarget({
         app: this.context.app,
         route: isV2AdminRuntime(this.context.app) && landingRoute ? landingRoute : route,
+        layout,
       });
 
       const groupRoute: AdminLayoutMenuNode = {
         name,
         icon,
-        path: `/admin/${route.id}`,
+        path: joinAdminLayoutRoutePath(layout, route.id),
         redirect:
-          children[0]?.key === 'x-designer-button' ? undefined : `/admin/${landingRoute?.schemaUid || route.id}`,
+          children[0]?.key === 'x-designer-button'
+            ? undefined
+            : joinAdminLayoutRoutePath(layout, landingRoute?.schemaUid || route.id),
         hideInMenu: route.hideInMenu,
         _runtimePath: runtimeTarget.runtimePath,
         _navigationMode: runtimeTarget.navigationMode,