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

package/src/components/form/filter/useFilterActionProps.ts

@@ -43,6 +43,14 @@ const isCondition = (item: FilterGroupItem): item is CollectionFilterItemValue =
   typeof (item as CollectionFilterItemValue).path === 'string' &&
   Object.prototype.hasOwnProperty.call(item, 'operator');
 
+const cloneFilterGroupItem = (item: FilterGroupItem): FilterGroupItem =>
+  isGroup(item) ? { logic: item.logic, items: item.items.map((child) => cloneFilterGroupItem(child)) } : { ...item };
+
+const cloneFilterGroup = (group: FilterGroupValue): FilterGroupValue => ({
+  logic: group.logic,
+  items: group.items.map((item) => cloneFilterGroupItem(item)),
+});
+
 /**
  * `true` when the rhs of a condition is "no real value yet" — covers `undefined` / `null` / empty string / empty array / empty plain object. Mirrors v1's `removeNullCondition` `isEmpty` predicate so half-filled rows ("Locked time → is → (no date picked yet)") get dropped on Submit instead of being sent to the server as `{lockedTs:{}}` and triggering a 500.
  */
@@ -164,6 +172,8 @@ export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -216,12 +226,23 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const {
+    collection,
+    initialValue,
+    defaultValue,
+    onApply,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+  } = args;
+  const seedValue = initialValue ?? defaultValue;
+  const defaultGroup = decompileFilterGroup(defaultValue) || createEmptyGroup();
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(seedValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 
@@ -240,9 +261,10 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   });
 
   const onReset = useMemoizedFn(() => {
-    value.logic = '$and';
-    value.items = [];
-    onApply(undefined, 'reset');
+    const next = cloneFilterGroup(defaultGroup);
+    value.logic = next.logic;
+    value.items = next.items;
+    onApply(compileFilterGroup(value), 'reset');
   });
 
   const translate = useMemoizedFn((key: string) => (t ? t(key) : key));
@@ -261,7 +283,16 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   );
 
   // Re-read on each render so `observer`-wrapped hosts re-render when the reactive `items` array length changes. No useMemo needed — the `value` object's identity is stable (held in a ref), but its observable `items.length` is what we actually care about, and the eslint exhaustive-deps rule rightly complains about depending on a mutable property of a stable ref.
-  const conditionCount = value.items.length;
+  const conditionCount = (() => {
+    const compiled = compileFilterGroup(value);
+    if (compiled?.$and && Array.isArray(compiled.$and)) {
+      return compiled.$and.length;
+    }
+    if (compiled?.$or && Array.isArray(compiled.$or)) {
+      return compiled.$or.length;
+    }
+    return 0;
+  })();
 
   return { value, options, FilterItem, ctx, onSubmit, onReset, conditionCount };
 }

package/src/flow/actions/dateTimeFormat.tsx

@@ -28,11 +28,11 @@ const isTableColumnFieldSubModel = (model) => {
 
 const syncTableColumnDateTimeFormatProps = (ctx, props) => {
   const model = ctx.model;
-  if (!isTableColumnFieldSubModel(model) || !model?.parent?.collectionField?.isAssociationField?.()) {
+  if (!isTableColumnFieldSubModel(model)) {
     return;
   }
 
-  model.parent.setProps(props);
+  model.parent?.setProps?.(props);
 };
 
 export const dateTimeFormat = defineAction({

package/src/flow/admin-shell/BaseLayoutModel.tsx

@@ -20,6 +20,7 @@ import {
   type BaseLayoutRouteCoordinatorOptions,
   type RoutePageMeta,
 } from './BaseLayoutRouteCoordinator';
+import { NocoBaseDesktopRouteType } from '../../flow-compat';
 import type { LayoutDefinition } from '../../layout-manager/types';
 import { isLayoutContentRouteName } from '../../layout-manager/utils';
 
@@ -322,6 +323,18 @@ export class BaseLayoutModel<
       };
     }
 
+    const routeRepository = this.flowEngine.context.routeRepository;
+    const schemaRoute = routeRepository?.getRouteBySchemaUid?.(pageUid);
+    const route = schemaRoute ? undefined : routeRepository?.getRouteById?.(pageUid);
+    if (!schemaRoute && route?.type === NocoBaseDesktopRouteType.group) {
+      return {
+        type: 'root',
+        pathname,
+        basePathname,
+        relativePath,
+      };
+    }
+
     return {
       type: 'page',
       pathname,

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

@@ -10,8 +10,9 @@
 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 { 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';
@@ -307,4 +308,179 @@ describe('AdminLayoutEntryGuard', () => {
     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__;
+    }
+  });
 });

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

@@ -132,6 +132,26 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode; model?: Admi
           }
         }
 
+        const groupRoute = currentRoute ? undefined : routeRepository?.getRouteById?.(pageUid);
+        if (!currentRoute && groupRoute?.type === NocoBaseDesktopRouteType.group) {
+          const target = resolveAdminRouteRuntimeTarget({
+            app,
+            route: groupRoute,
+            layout: layoutRuntime,
+          });
+
+          if (target.runtimePath) {
+            replaceTriggeredRef.current = true;
+            if (target.navigationMode === 'document') {
+              window.location.replace(target.runtimePath);
+              return;
+            }
+
+            navigate(toRouterNavigationPath(target.runtimePath, app.router.getBasename()), { replace: true });
+            return;
+          }
+        }
+
         if (active) {
           setReady(true);
         }

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

@@ -44,6 +44,7 @@ import {
   type FlowModel,
 } from '@nocobase/flow-engine';
 import { 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';
@@ -295,6 +296,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({

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -373,14 +373,18 @@ TableColumnModel.registerFlow({
               currentProps: ctx.model.props,
             })
           : undefined;
+        const collectionFieldComponentProps = collectionField.getComponentProps();
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
-                ...collectionField.getComponentProps(),
+                ...collectionFieldComponentProps,
                 ...targetCollectionField?.getComponentProps?.(),
                 ...savedDateTimeDisplayProps,
               }
-            : collectionField.getComponentProps();
+            : {
+                ...collectionFieldComponentProps,
+                ...savedDateTimeDisplayProps,
+              };
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
         // for quick edit

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -327,6 +327,57 @@ describe('TableColumnModel sorter settings', () => {
     );
   });
 
+  it('keeps saved ordinary datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Datetime',
+            name: 'datetime',
+            isAssociationField: () => false,
+            getComponentProps: () => ({
+              dateFormat: 'YYYY-MM-DD',
+              showTime: false,
+            }),
+          },
+        },
+        props: {},
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'HH:mm:ss',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    );
+  });
+
   it('does not update field component setting when title field refresh fails', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-title-field-component-failed', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -198,6 +198,48 @@ const useFieldPermissionMessage = (model, allowEdit) => {
   return messageValue;
 };
 
+const recordSelectClassName = css`
+  min-width: 0;
+
+  .ant-select-selector {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .ant-select-selection-search,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder,
+  .ant-select-selection-overflow,
+  .ant-select-selection-overflow-item {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-item-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const recordSelectLabelClassName = css`
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  * {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+  }
+`;
+
 const LazySelect = (props: Readonly<LazySelectProps>) => {
   const {
     fieldNames,
@@ -210,6 +252,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     onChange,
     allowCreate = true,
     allowEdit = true,
+    className,
     ...others
   } = props;
   const model: any = useFlowModel();
@@ -317,6 +360,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
       <Select
         style={{ width: '100%' }}
         {...others}
+        className={[recordSelectClassName, className].filter(Boolean).join(' ')}
         allowClear
         showSearch
         maxTagCount="responsive"
@@ -409,19 +453,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
         }}
         popupMatchSelectWidth
         labelRender={(data) => {
-          return (
-            <div
-              className={css`
-                div {
-                  white-space: nowrap !important;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              `}
-            >
-              {data.label}
-            </div>
-          );
+          return <div className={recordSelectLabelClassName}>{data.label}</div>;
         }}
         dropdownRender={(menu) => {
           const isFullMatch = realOptions.some((v) => v[normalizedFieldNames.label] === others.searchText);

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -207,6 +207,48 @@ describe('dateTimeFormat', () => {
     expect(save).toHaveBeenCalled();
   });
 
+  it('syncs ordinary table column props when date time format settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const setParentProps = vi.fn();
+    const model = {
+      context: {
+        collectionField: {
+          type: 'datetime',
+          interface: 'datetime',
+        },
+      },
+      setProps,
+      save,
+      parent: {
+        use: 'TableColumnModel',
+        setProps: setParentProps,
+      },
+    };
+    model.parent['subModels'] = {
+      field: model,
+    };
+
+    await dateTimeFormat.beforeParamsSave(
+      { model },
+      {
+        picker: 'date',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      },
+    );
+
+    expect(setParentProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'HH:mm:ss',
+      format: 'YYYY-MM-DD HH:mm:ss',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
   it('hides time format for association title date-only fields', () => {
     const ctx = {
       model: {

package/src/index.ts

@@ -30,6 +30,8 @@ export * from './layout-manager';
 export * from './hooks';
 export { default as languageCodes } from './locale/languageCodes';
 export * from './nocobase-buildin-plugin';
+export { getRouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
+export type { RouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
 export * from './collection-field-interface/CollectionFieldInterface';
 export * from './collection-field-interface/CollectionFieldInterfaceManager';
 export * from './collection-manager/field-configure';