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

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

@@ -0,0 +1,435 @@
+/**
+ * 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, { useEffect } from 'react';
+import { createMemoryRouter, RouterProvider, useParams } from 'react-router-dom';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../../flow-compat';
+import type { LayoutDefinition } from '../../../../layout-manager/types';
+import { AdminLayoutComponent } from '../AdminLayoutComponent';
+import { AdminLayoutModel } from '../AdminLayoutModel';
+import { AdminLayoutMenuItemModel } from '../AdminLayoutMenuModels';
+import { AdminLayoutContent } from '../AdminLayoutSlotModels';
+
+const proLayoutLifecycle = vi.hoisted(() => ({
+  events: [] as string[],
+  routes: [] as Array<{ children?: Array<{ name?: React.ReactNode }> }>,
+}));
+
+vi.mock('@ant-design/pro-layout', async () => {
+  const ReactModule = await import('react');
+  const RouteContext = ReactModule.createContext({ isMobile: false });
+  const ProLayoutMock = (props: {
+    children?: React.ReactNode;
+    route?: { children?: Array<{ name?: React.ReactNode }> };
+  }) => {
+    ReactModule.useEffect(() => {
+      proLayoutLifecycle.events.push('pro-layout:mount');
+      return () => {
+        proLayoutLifecycle.events.push('pro-layout:unmount');
+      };
+    }, []);
+    proLayoutLifecycle.routes.push(props.route || {});
+
+    return ReactModule.createElement(
+      RouteContext.Provider,
+      { value: { isMobile: false } },
+      ReactModule.createElement(
+        'div',
+        { 'data-testid': 'pro-layout' },
+        ReactModule.createElement(
+          'nav',
+          { 'data-testid': 'pro-layout-menu' },
+          (props.route?.children || []).map((item) =>
+            ReactModule.createElement(
+              'span',
+              { key: String(item.name), 'data-testid': 'pro-layout-menu-item' },
+              item.name,
+            ),
+          ),
+        ),
+        props.children,
+      ),
+    );
+  };
+
+  return {
+    default: ProLayoutMock,
+    RouteContext,
+  };
+});
+
+vi.mock('../../../system-settings', () => ({
+  useSystemSettings: () => ({
+    loading: false,
+    data: {
+      data: {
+        title: 'NocoBase',
+      },
+    },
+  }),
+}));
+
+vi.mock('../useApplications', () => ({
+  useApplications: () => ({
+    appList: [],
+  }),
+}));
+
+vi.mock('../AppListRender', () => ({
+  useAppListRender: () => undefined,
+}));
+
+afterEach(() => {
+  delete (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__;
+});
+
+describe('AdminLayoutComponent', () => {
+  it('keeps custom admin layout pages alive by layout route name', async () => {
+    const layout: LayoutDefinition = {
+      routeName: 'admin2',
+      routePath: '/admin2',
+      rootRouteName: 'admin2',
+      uid: 'custom-admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        listAccessible: () => [],
+      },
+    });
+
+    const Page = () => {
+      const { name } = useParams();
+      useEffect(() => {
+        events.push(`mount:${name}`);
+        return () => {
+          events.push(`unmount:${name}`);
+        };
+      }, [name]);
+
+      return <div data-testid={`admin-layout-page-${name}`}>page {name}</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutContent layout={layout} />,
+          children: [
+            {
+              id: 'admin2.__page',
+              path: ':name',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin2/page-a'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('admin-layout-page-page-a')).toBeInTheDocument();
+
+    await act(async () => {
+      await router.navigate('/admin2/page-b');
+    });
+
+    expect(await screen.findByTestId('admin-layout-page-page-b')).toBeInTheDocument();
+    expect(screen.getByTestId('admin-layout-page-page-a')).toBeInTheDocument();
+    expect(events).toEqual(['mount:page-a', 'mount:page-b']);
+  });
+
+  it('activates the current layout before loading accessible routes', async () => {
+    const layout: LayoutDefinition = {
+      routeName: 'admin2',
+      routePath: '/admin2',
+      rootRouteName: 'admin2',
+      uid: 'custom-admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const deactivateLayout = vi.fn();
+    const activateLayout = vi.fn(() => deactivateLayout);
+    const ensureAccessibleLoaded = vi.fn(async () => []);
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout,
+        ensureAccessibleLoaded,
+        listAccessible: () => [],
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+        },
+      ],
+      {
+        initialEntries: ['/admin2'],
+      },
+    );
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(ensureAccessibleLoaded).toHaveBeenCalled();
+    });
+    expect(activateLayout).toHaveBeenCalledWith(layout);
+    expect(activateLayout.mock.invocationCallOrder[0]).toBeLessThan(ensureAccessibleLoaded.mock.invocationCallOrder[0]);
+
+    unmount();
+
+    expect(deactivateLayout).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps layout content mounted when the menu route tree refreshes', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => []),
+        listAccessible: () => [],
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      model.refreshMenuRouteTree();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+  });
+
+  it('updates ProLayout menu routes after accessible routes change without remounting the layout', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__ = 'v2';
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    let accessibleRoutes: NocoBaseDesktopRoute[] = [
+      {
+        id: 1,
+        title: 'Visible page',
+        schemaUid: 'visible-page',
+        type: NocoBaseDesktopRouteType.flowPage,
+      },
+    ];
+    let routeRepositorySubscriber: (() => void) | undefined;
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.registerModels({
+      AdminLayoutMenuItemModel,
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => accessibleRoutes),
+        listAccessible: () => accessibleRoutes,
+        subscribe: vi.fn((subscriber: () => void) => {
+          routeRepositorySubscriber = subscriber;
+        }),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v/',
+        router: {
+          getBasename: () => '/v',
+        },
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('Visible page')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      accessibleRoutes = [];
+      routeRepositorySubscriber?.();
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Visible page')).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+    expect(
+      proLayoutLifecycle.routes.some((route) => route.children?.some((item) => item.name === 'Visible page')),
+    ).toBe(true);
+    expect(proLayoutLifecycle.routes.at(-1)?.children?.some((item) => item.name === 'Visible page')).toBe(false);
+  });
+});

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -318,6 +318,50 @@ describe('AdminLayoutModel menu items', () => {
     expect(route.children[1]._model).toBe(adminLayoutModel.subModels.menuItems?.[1]);
   });
 
+  it('should generate ProLayout route tree under a custom admin layout route path', () => {
+    const adminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: 'admin2-layout-model',
+      use: AdminLayoutModel,
+      props: {
+        layout: {
+          routeName: 'admin2',
+          routePath: '/admin2',
+          uid: 'admin2-layout-model',
+          layoutModelClass: 'AdminLayoutModel',
+        },
+      },
+    });
+
+    adminLayoutModel.syncMenuRoutes([
+      {
+        id: 1,
+        title: 'Group',
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            id: 11,
+            title: 'Page 1',
+            schemaUid: 'page-1',
+            type: NocoBaseDesktopRouteType.flowPage,
+          },
+        ],
+      },
+    ]);
+
+    const route = adminLayoutModel.toProLayoutRoute({
+      designable: false,
+      isMobile: false,
+      t: (title) => title,
+    });
+
+    expect(route.children[0].path).toBe('/admin2/1');
+    expect(route.children[0].redirect).toBe('/admin2/page-1');
+    expect(route.children[0]._runtimePath).toBe('/apps/demo/v2/admin2/page-1');
+    expect(route.children[0].routes?.[0].path).toBe('/admin2/page-1');
+    expect(route.children[0].routes?.[0].redirect).toBe('/admin2/page-1');
+    expect(route.children[0].routes?.[0]._runtimePath).toBe('/apps/demo/v2/admin2/page-1');
+  });
+
   it('should filter legacy page menu routes but keep empty groups in v2 admin layout', () => {
     const adminLayoutModel = engine.createModel<AdminLayoutModel>({
       uid: 'admin-layout-model',
@@ -1128,6 +1172,46 @@ describe('AdminLayoutModel menu items', () => {
     expect(adminLayoutModel.menuRouteRefreshVersion).toBe(refreshBefore + 1);
   });
 
+  it('should refresh the owning admin layout when hiding custom layout menu routes dynamically', () => {
+    const defaultAdminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: ADMIN_LAYOUT_MODEL_UID,
+      use: AdminLayoutModel,
+    });
+    const customAdminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: 'custom-admin-layout-model',
+      use: AdminLayoutModel,
+      props: {
+        layout: {
+          routeName: 'admin2',
+          routePath: '/admin2',
+          rootRouteName: 'admin2',
+          uid: 'custom-admin-layout-model',
+          layoutModelClass: 'AdminLayoutModel',
+          rootPageModelClass: 'RootPageModel',
+          childPageModelClass: 'ChildPageModel',
+          authCheck: true,
+        },
+      },
+    });
+    const model = engine.createModel<AdminLayoutMenuItemModel>({
+      uid: 'menu-item-custom-layout-dynamic-hidden',
+      use: AdminLayoutMenuItemModel,
+      props: {
+        route: createRoute(),
+      },
+    });
+
+    model.setParent(customAdminLayoutModel);
+
+    const defaultRefreshBefore = defaultAdminLayoutModel.menuRouteRefreshVersion;
+    const customRefreshBefore = customAdminLayoutModel.menuRouteRefreshVersion;
+
+    model.setHidden(true);
+
+    expect(customAdminLayoutModel.menuRouteRefreshVersion).toBe(customRefreshBefore + 1);
+    expect(defaultAdminLayoutModel.menuRouteRefreshVersion).toBe(defaultRefreshBefore);
+  });
+
   it('should render hidden menu item with opacity and keep original title in config mode', () => {
     const model = engine.createModel<AdminLayoutMenuItemModel>({
       uid: 'menu-item-hidden-in-config',
@@ -2222,6 +2306,21 @@ describe('AdminLayoutModel menu items', () => {
     );
   });
 
+  it('should include router basename when opening same-origin links in a new window', async () => {
+    await openAdminLayoutMenuLink({
+      context: engine.context as any,
+      href: '/admin2/page',
+      params: [{ name: 'from', value: 'admin' }],
+      openInNewWindow: true,
+      isMobile: false,
+      closeMobileMenu: vi.fn(),
+      navigate: navigateMock,
+      basenameOfCurrentRouter: '/v',
+    });
+
+    expect(window.open).toHaveBeenCalledWith('/v/admin2/page?from=admin', '_blank', 'noopener,noreferrer');
+  });
+
   it('should resolve sibling move options for non-group drag target', () => {
     const activeModel = engine.createModel<AdminLayoutMenuItemModel>({
       uid: 'drag-source-page',