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

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

@@ -42,6 +42,7 @@ import {
   FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
   readFlowSettingsPreference,
 } from './flowSettingsPreference';
+import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
 
 const className1 = css`
@@ -284,13 +285,44 @@ function SetIsMobileLayout(props: { isMobile: boolean; children: any; model?: Ad
   const flowEngine = useFlowEngine();
   const adminLayoutModel = props.model || flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     adminLayoutModel?.setIsMobileLayout(props.isMobile);
   }, [adminLayoutModel, props.isMobile]);
 
   return props.children;
 }
 
+function AdminLayoutContentWithMobileState(props: {
+  isMobile: boolean;
+  model?: AdminLayoutModel;
+  designable?: boolean;
+  layout?: AdminLayoutModel['layout'];
+  onContentElementChange?: (element: HTMLDivElement | null) => void;
+}) {
+  const modelRef = useRef(props.model);
+  const isMobileRef = useRef(props.isMobile);
+  const onContentElementChangeRef = useRef(props.onContentElementChange);
+
+  modelRef.current = props.model;
+  isMobileRef.current = props.isMobile;
+  onContentElementChangeRef.current = props.onContentElementChange;
+
+  const handleContentElementChange = useCallback((element: HTMLDivElement | null) => {
+    if (element) {
+      modelRef.current?.setIsMobileLayout(isMobileRef.current);
+    }
+    onContentElementChangeRef.current?.(element);
+  }, []);
+
+  return (
+    <AdminLayoutContent
+      designable={props.designable}
+      layout={props.layout}
+      onContentElementChange={handleContentElementChange}
+    />
+  );
+}
+
 const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRoute?: NocoBaseDesktopRoute }> = (
   props,
 ) => {
@@ -314,25 +346,37 @@ const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRout
   );
 };
 
-const matchesRoutePath = (route: NocoBaseDesktopRoute | undefined, pathname: string): boolean => {
+const matchesRoutePath = (
+  route: NocoBaseDesktopRoute | undefined,
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+): boolean => {
   if (!route) {
     return false;
   }
 
   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 (candidates.some((candidate) => pathname === candidate || pathname.startsWith(`${candidate}/`))) {
     return true;
   }
 
-  return Array.isArray(route.children) ? route.children.some((child) => matchesRoutePath(child, pathname)) : false;
+  return Array.isArray(route.children)
+    ? route.children.some((child) => matchesRoutePath(child, pathname, layout))
+    : false;
 };
 
-const findSelectedTopGroupRoute = (routes: NocoBaseDesktopRoute[], pathname: string) => {
-  return routes.find((route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname));
+const findSelectedTopGroupRoute = (
+  routes: NocoBaseDesktopRoute[],
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+) => {
+  return routes.find(
+    (route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname, layout),
+  );
 };
 
 const renderMenuNodeWithModel = (
@@ -376,6 +420,11 @@ export const AdminLayoutComponent = observer((props: any) => {
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
+  const adminLayoutRoutePath = adminLayoutModel?.layout?.routePath;
+  const adminLayoutRoutePathLike = useMemo<AdminLayoutRoutePathLike | undefined>(
+    () => (adminLayoutRoutePath ? { routePath: adminLayoutRoutePath } : undefined),
+    [adminLayoutRoutePath],
+  );
   const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
   const isMobileSider = isMobileLayout;
   const [collapsed, setCollapsed] = useState(isMobileSider);
@@ -392,8 +441,8 @@ export const AdminLayoutComponent = observer((props: any) => {
   );
   const designable = !isMobileSider && preferredFlowSettingsEnabled;
   const { styles } = useHeaderStyle();
-  const { appList } = useApplications();
-  const appListRender = useAppListRender();
+  const { appList, appSwitcherModel } = useApplications(adminLayoutModel);
+  const appListRender = useAppListRender(appSwitcherModel);
   const flowSettingsSyncRef = useRef(0);
   const desiredFlowSettingsEnabledRef = useRef(false);
   const handleLayoutContentElementChange = useCallback(
@@ -403,8 +452,8 @@ export const AdminLayoutComponent = observer((props: any) => {
     [adminLayoutModel],
   );
   const selectedTopGroupRoute = useMemo(
-    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname),
-    [allAccessRoutes, location.pathname],
+    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname, adminLayoutRoutePathLike),
+    [adminLayoutRoutePathLike, allAccessRoutes, location.pathname],
   );
 
   const handleMenuDragEnd = useCallback(
@@ -458,6 +507,7 @@ export const AdminLayoutComponent = observer((props: any) => {
 
   useEffect(() => {
     const routeRepository = flowEngine.context.routeRepository;
+    const deactivateLayout = routeRepository?.activateLayout?.(adminLayoutModel?.layout);
     const subscriber = () => {
       const updatedRoutes = routeRepository?.listAccessible() || [];
       setAllAccessRoutes(updatedRoutes);
@@ -470,8 +520,9 @@ export const AdminLayoutComponent = observer((props: any) => {
 
     return () => {
       routeRepository?.unsubscribe(subscriber);
+      deactivateLayout?.();
     };
-  }, [flowEngine]);
+  }, [adminLayoutModel, adminLayoutModel?.layout?.uid, flowEngine]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -614,6 +665,10 @@ export const AdminLayoutComponent = observer((props: any) => {
         z-index: 2000 !important;
       }
 
+      .ant-pro-layout-apps-popover .ant-popover-content {
+        margin-top: 12px;
+      }
+
       .ant-pro-layout-apps-icon {
         color: ${customToken.colorTextHeaderMenu || 'rgba(255, 255, 255, 0.85)'};
       }
@@ -657,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}
@@ -697,7 +751,13 @@ export const AdminLayoutComponent = observer((props: any) => {
                     <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
-                        <AdminLayoutContent onContentElementChange={handleLayoutContentElementChange} />
+                        <AdminLayoutContentWithMobileState
+                          isMobile={isMobile}
+                          model={adminLayoutModel}
+                          designable={designable}
+                          layout={adminLayoutModel?.layout}
+                          onContentElementChange={handleLayoutContentElementChange}
+                        />
                       </ConfigProvider>
                     </SetIsMobileLayout>
                   );

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

@@ -0,0 +1,486 @@
+/**
+ * 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, Outlet, RouterProvider } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { NocoBaseDesktopRouteType } from '../../../flow-compat';
+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' }));
+  });
+
+  it('should redirect group id paths to the first v2 landing route', async () => {
+    const modernWindow = window as Window & { __nocobase_modern_client_prefix__?: string };
+    modernWindow.__nocobase_modern_client_prefix__ = 'v2';
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    routeRepository.setRoutes([
+      {
+        id: 1,
+        title: 'Group',
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            id: 11,
+            title: 'Flow page',
+            schemaUid: 'flow-page-1',
+            type: NocoBaseDesktopRouteType.flowPage,
+          },
+        ],
+      },
+    ]);
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/apps/demo/v2/',
+        router: {
+          getBasename: () => '/apps/demo/v2',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'admin',
+        routePath: '/admin',
+        uid: 'admin-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <Outlet />
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+          children: [
+            {
+              path: ':name',
+              id: 'admin.__page',
+              element: <div>Admin page shell</div>,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/1'],
+      },
+    );
+
+    try {
+      render(<RouterProvider router={router} />);
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/admin/flow-page-1');
+      });
+      expect(await screen.findByText('Admin page shell')).toBeInTheDocument();
+    } finally {
+      delete modernWindow.__nocobase_modern_client_prefix__;
+    }
+  });
+
+  it('should prefer schema uid routes before resolving numeric group ids', async () => {
+    const modernWindow = window as Window & { __nocobase_modern_client_prefix__?: string };
+    modernWindow.__nocobase_modern_client_prefix__ = 'v2';
+    const engine = new FlowEngine();
+    const routeRepository = {
+      activateLayout: vi.fn(() => vi.fn()),
+      ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+      isAccessibleLoaded: vi.fn(() => true),
+      getRouteBySchemaUid: vi.fn((pageUid: string) =>
+        pageUid === '1'
+          ? {
+              schemaUid: '1',
+              type: NocoBaseDesktopRouteType.flowPage,
+            }
+          : undefined,
+      ),
+      getRouteById: vi.fn((routeId: string) =>
+        routeId === '1'
+          ? {
+              id: 1,
+              type: NocoBaseDesktopRouteType.group,
+              children: [
+                {
+                  schemaUid: 'flow-page-1',
+                  type: NocoBaseDesktopRouteType.flowPage,
+                },
+              ],
+            }
+          : undefined,
+      ),
+      listAccessible: vi.fn(() => []),
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/apps/demo/v2/',
+        router: {
+          getBasename: () => '/apps/demo/v2',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'admin',
+        routePath: '/admin',
+        uid: 'admin-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <Outlet />
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+          children: [
+            {
+              path: ':name',
+              id: 'admin.__page',
+              element: <div>Admin page shell</div>,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/1'],
+      },
+    );
+
+    try {
+      render(<RouterProvider router={router} />);
+
+      await screen.findByText('Admin page shell');
+      expect(router.state.location.pathname).toBe('/admin/1');
+      expect(routeRepository.getRouteById).not.toHaveBeenCalled();
+    } finally {
+      delete modernWindow.__nocobase_modern_client_prefix__;
+    }
+  });
+});