@nocobase/client-v2 2.2.0-beta.5 → 2.2.0-beta.6

package/src/flow/actions/validation.tsx

@@ -10,6 +10,56 @@
 import { defineAction, jioToJoiSchema, tExpr } from '@nocobase/flow-engine';
 import { FieldValidation } from '../../flow-compat';
 
+type ValidationType = 'string' | 'number' | 'array' | 'boolean' | 'any';
+
+interface ValidationRule {
+  name: string;
+  args?: any;
+}
+
+interface ValidationData {
+  type: ValidationType;
+  rules?: ValidationRule[];
+}
+
+interface ValidationContext {
+  model: {
+    props: {
+      label?: string;
+    };
+  };
+  t: (key: string, options?: Record<string, unknown>) => string;
+}
+
+function buildValidationRules(ctx: ValidationContext, validation: ValidationData) {
+  const rules = [];
+  const schema = jioToJoiSchema(validation);
+  const label = ctx.model.props.label;
+  rules.push({
+    validator: (_: unknown, value: unknown) => {
+      const { error } = schema.validate(value, {
+        abortEarly: false,
+      });
+
+      if (error) {
+        const messages = error.details.map((d: { type: string; context?: Record<string, unknown> }) => {
+          return ctx.t(`${d.type}`, {
+            ...d.context,
+            ns: 'data-source-main',
+            label,
+          });
+        });
+        const div = document.createElement('div');
+        div.innerHTML = messages.join('; ');
+        return Promise.reject(div.textContent);
+      }
+
+      return Promise.resolve();
+    },
+  });
+  return rules;
+}
+
 export const validation = defineAction({
   title: tExpr('Validation'),
   name: 'validation',
@@ -29,6 +79,7 @@ export const validation = defineAction({
           type: targetInterface.validationType,
           availableValidationOptions: [...new Set(targetInterface.availableValidationOptions)],
           excludeValidationOptions: [...new Set(targetInterface.excludeValidationOptions)],
+          inheritedValue: ctx.model.collectionField.validation,
           isAssociation: targetInterface.isAssociation,
         },
       },
@@ -36,40 +87,21 @@ export const validation = defineAction({
   },
   handler(ctx, params) {
     if (params.validation) {
-      const rules = [];
-      const schema = jioToJoiSchema(params.validation);
-      const label = ctx.model.props.label;
-      rules.push({
-        validator: (_, value) => {
-          const { error } = schema.validate(value, {
-            abortEarly: false,
-          });
-
-          if (error) {
-            const messages = error.details.map((d) => {
-              return ctx.t(`${d.type}`, {
-                ...d.context,
-                ns: 'data-source-main',
-                label,
-              });
-            });
-            const div = document.createElement('div');
-            div.innerHTML = messages.join('; ');
-            return Promise.reject(div.textContent);
-          }
-
-          return Promise.resolve();
-        },
-      });
-      const hasRequiredInCollection = params.validation.rules.some((rule) => rule.name === 'required');
-      if (hasRequiredInCollection) {
+      const collectionValidation = ctx.model.collectionField?.validation;
+      const collectionRules = ctx.model.collectionField?.getComponentProps?.().rules || [];
+      const uiRules = params.validation.rules?.length
+        ? buildValidationRules(ctx as unknown as ValidationContext, params.validation)
+        : [];
+      const hasRequiredInValidation = [collectionValidation, params.validation].some(
+        (validation) => validation?.rules?.some((rule) => rule.name === 'required'),
+      );
+      if (hasRequiredInValidation) {
         ctx.model.setProps({
-          required: hasRequiredInCollection,
+          required: hasRequiredInValidation,
         });
       }
-      console.log(rules);
       ctx.model.setProps({
-        rules,
+        rules: [...collectionRules, ...uiRules],
         validation: params.validation,
       });
     }

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`
@@ -314,25 +315,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 +389,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);
@@ -403,8 +421,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 +476,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 +489,9 @@ export const AdminLayoutComponent = observer((props: any) => {
 
     return () => {
       routeRepository?.unsubscribe(subscriber);
+      deactivateLayout?.();
     };
-  }, [flowEngine]);
+  }, [adminLayoutModel, adminLayoutModel?.layout?.uid, flowEngine]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -697,7 +717,10 @@ export const AdminLayoutComponent = observer((props: any) => {
                     <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
-                        <AdminLayoutContent onContentElementChange={handleLayoutContentElementChange} />
+                        <AdminLayoutContent
+                          layout={adminLayoutModel?.layout}
+                          onContentElementChange={handleLayoutContentElementChange}
+                        />
                       </ConfigProvider>
                     </SetIsMobileLayout>
                   );

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;
 };