@nocobase/client-v2 2.2.0-beta.8 → 2.3.0-alpha.1

package/src/components/form/filter/__tests__/useFilterActionProps.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * 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, type Collection } from '@nocobase/flow-engine';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useFilterActionProps } from '../useFilterActionProps';
+
+vi.mock('../../../flow/components/filter/useFilterOptions', () => ({
+  useFilterOptions: () => [],
+}));
+
+vi.mock('../CollectionFilterItem', () => ({
+  createCollectionFilterItem: () => undefined,
+}));
+
+function makeCollection(): Collection {
+  return {
+    getFields: () => [{ name: 'title' }, { name: 'type' }],
+  } as unknown as Collection;
+}
+
+function makeWrapper() {
+  const engine = new FlowEngine();
+  const Wrapper: React.FC = ({ children }) => <FlowEngineProvider engine={engine}>{children}</FlowEngineProvider>;
+  return Wrapper;
+}
+
+describe('useFilterActionProps', () => {
+  it('seeds the editable group from defaultValue when initialValue is missing', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+  });
+
+  it('reset restores defaultValue and emits its compiled filter', () => {
+    const onApply = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          initialValue: { $and: [{ title: { $includes: 'abc' } }] },
+          onApply,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    result.current.onReset();
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+    expect(onApply).toHaveBeenCalledWith(undefined, 'reset');
+  });
+
+  it('counts only effective compiled conditions, so empty default rows do not highlight the button', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.conditionCount).toBe(0);
+  });
+});

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

@@ -11,5 +11,7 @@
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
 export { CollectionFilterPanel } from './CollectionFilterPanel';
+export { CollectionFilterItem } from './CollectionFilterItem';
+export type { CollectionFilterItemValue } from './CollectionFilterItem';
 export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

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/components/index.ts

@@ -9,6 +9,7 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './category-tabs';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';

package/src/entry-actions/EntryActionManager.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 {
+  define,
+  observable,
+  type FlowModelContext,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
+
+export type EntryActionScope = 'action-panel' | 'app-switcher' | string;
+
+export type EntryActionProvider = (ctx: FlowModelContext) => SubModelItem[] | Promise<SubModelItem[]>;
+
+type ProviderRecord = {
+  name: string;
+  scope: EntryActionScope;
+  provider: EntryActionProvider;
+  sort: number;
+};
+
+export class EntryActionManager {
+  private readonly providers = new Map<string, ProviderRecord>();
+  revision = 0;
+
+  constructor() {
+    define(this, {
+      revision: observable.ref,
+    });
+  }
+
+  register(name: string, options: { scope: EntryActionScope; provider: EntryActionProvider; sort?: number }) {
+    this.providers.set(name, {
+      name,
+      scope: options.scope,
+      provider: options.provider,
+      sort: options.sort ?? 0,
+    });
+    this.invalidate();
+  }
+
+  unregister(name: string) {
+    this.providers.delete(name);
+    this.invalidate();
+  }
+
+  invalidate() {
+    this.revision += 1;
+  }
+
+  getItems(scope: EntryActionScope): SubModelItemsType {
+    return async (ctx) => {
+      const providers = [...this.providers.values()]
+        .filter((item) => item.scope === scope)
+        .sort((a, b) => a.sort - b.sort);
+      const groups = await Promise.all(
+        providers.map(async (item) => {
+          try {
+            return await item.provider(ctx);
+          } catch (error) {
+            console.error(`[NocoBase] Failed to load entry action provider "${item.name}".`, error);
+            return [];
+          }
+        }),
+      );
+      return groups.flat();
+    };
+  }
+}

package/src/entry-actions/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * from './EntryActionManager';

package/src/flow/FlowPage.tsx

@@ -14,7 +14,7 @@ import {
   useFlowModelById,
   useFlowViewContext,
 } from '@nocobase/flow-engine';
-import type { FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
+import type { FlowEngineContext, FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
 import { useRequest } from 'ahooks';
 import React from 'react';
 import FlowRoute from './components/FlowRoute';
@@ -57,10 +57,38 @@ type FlowPageProps = {
   showFlowSettings?: FlowModelRendererProps['showFlowSettings'];
 };
 
+type FlowPageViewContext = FlowEngineContext & {
+  view?: {
+    inputArgs?: {
+      filterByTk?: unknown;
+      isMobileLayout?: unknown;
+      sourceId?: unknown;
+    };
+  };
+};
+
+const bindViewLayoutState = (model: FlowModel, ctx?: FlowPageViewContext | null) => {
+  const hasViewMobileLayout = typeof ctx?.view?.inputArgs?.isMobileLayout === 'boolean';
+  const hasContextMobileLayout = typeof ctx?.isMobileLayout === 'boolean';
+  if (!hasViewMobileLayout && !hasContextMobileLayout) {
+    return;
+  }
+
+  model.context.defineProperty('isMobileLayout', {
+    get: () => {
+      if (typeof ctx?.isMobileLayout === 'boolean') {
+        return ctx.isMobileLayout;
+      }
+      return !!ctx?.view?.inputArgs?.isMobileLayout;
+    },
+    cache: false,
+  });
+};
+
 export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknown>) => {
   const { pageModelClass = 'ChildPageModel', parentId, onModelLoaded, defaultTabTitle, ...rest } = props;
   const flowEngine = useFlowEngine();
-  const ctx = useFlowViewContext();
+  const ctx = useFlowViewContext<FlowPageViewContext>();
   const { loading, data, error } = useRequest(
     async () => {
       const ModelClass = await flowEngine.getModelClassAsync(pageModelClass);
@@ -76,6 +104,10 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
         subType: 'object',
         use: pageModelClass,
       };
+      const isRuntimeRecordScopedPage =
+        !flowEngine.context.flowSettingsEnabled &&
+        (typeof ctx?.view?.inputArgs?.filterByTk !== 'undefined' ||
+          typeof ctx?.view?.inputArgs?.sourceId !== 'undefined');
       if (shouldInjectDefaultChildTab) {
         const tabTitle = defaultTabTitle || flowEngine.translate?.('Details');
         options['subModels'] = {
@@ -102,9 +134,12 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
           },
         };
       }
-      const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
+      const data =
+        (isRuntimeRecordScopedPage && (await flowEngine.loadModel({ ...options, refresh: true }))) ||
+        (await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled }));
       if (data?.uid && onModelLoaded) {
         data.context.addDelegate(ctx);
+        bindViewLayoutState(data, ctx);
         data.removeParentDelegate();
         onModelLoaded(data.uid, data);
       }

package/src/flow/__tests__/FlowPage.test.tsx

@@ -7,44 +7,115 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowPage } from '../FlowPage';
 
-const mocks = vi.hoisted(() => ({
-  rendererProps: undefined as any,
-  model: {
+type TestContextProperty = {
+  value?: unknown;
+  get?: () => unknown;
+};
+
+type TestModelContext = {
+  isMobileLayout: boolean;
+  themeToken: {
+    marginBlock: number;
+  };
+  addDelegate: ReturnType<typeof vi.fn>;
+  defineProperty: ReturnType<typeof vi.fn>;
+};
+
+type TestPageModel = {
+  uid: string;
+  props: {
+    showFlowSettings: boolean;
+  };
+  context: TestModelContext;
+  removeParentDelegate: ReturnType<typeof vi.fn>;
+};
+
+type RendererProps = {
+  model?: TestPageModel;
+  showFlowSettings?: boolean;
+} & Record<string, unknown>;
+
+const defineContextProperty = (context: TestModelContext, key: string, property: TestContextProperty) => {
+  Object.defineProperty(context, key, {
+    configurable: true,
+    enumerable: true,
+    get: property.get || (() => property.value),
+  });
+};
+
+const createPageModel = (): TestPageModel => {
+  const context = {
+    isMobileLayout: false,
+    themeToken: {
+      marginBlock: 16,
+    },
+    addDelegate: vi.fn(),
+    defineProperty: vi.fn((key: string, property: TestContextProperty) => {
+      defineContextProperty(context, key, property);
+    }),
+  };
+
+  return {
     uid: 'public-form-page',
     props: {
       showFlowSettings: false,
     },
-    context: {
-      isMobileLayout: false,
-      themeToken: {
-        marginBlock: 16,
-      },
-    },
-  },
+    context,
+    removeParentDelegate: vi.fn(),
+  };
+};
+
+const mocks = vi.hoisted(() => ({
+  flowSettingsEnabled: false,
+  loadModel: vi.fn(),
+  loadOrCreateModel: vi.fn(),
+  rendererMobileStates: [] as boolean[],
+  rendererProps: undefined as RendererProps | undefined,
+  model: undefined as TestPageModel | undefined,
+  viewFilterByTk: undefined as unknown,
+  viewInputMobileLayout: true as boolean | undefined,
+  viewSourceId: undefined as unknown,
+  contextMobileLayout: undefined as boolean | undefined,
 }));
 
 vi.mock('@nocobase/flow-engine', async () => {
-  const actual = await vi.importActual<any>('@nocobase/flow-engine');
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
   const ReactModule = await import('react');
+  class TestPageModelClass {}
 
   return {
     ...actual,
-    FlowModelRenderer: vi.fn((props: any) => {
+    FlowModelRenderer: vi.fn((props: RendererProps) => {
       mocks.rendererProps = props;
+      if (typeof props.model?.context.isMobileLayout === 'boolean') {
+        mocks.rendererMobileStates.push(props.model.context.isMobileLayout);
+      }
       return ReactModule.createElement('div', { 'data-testid': 'flow-model-renderer' });
     }),
     useFlowEngine: vi.fn(() => ({
-      getModelClassAsync: vi.fn(),
-      loadOrCreateModel: vi.fn(),
-      context: {},
+      getModelClassAsync: vi.fn(async () => TestPageModelClass),
+      loadModel: mocks.loadModel,
+      loadOrCreateModel: mocks.loadOrCreateModel,
+      context: {
+        flowSettingsEnabled: mocks.flowSettingsEnabled,
+      },
+      translate: vi.fn((value: string) => value),
     })),
     useFlowModelById: vi.fn(() => mocks.model),
     useFlowViewContext: vi.fn(() => ({
+      view: {
+        inputArgs: {
+          ...(typeof mocks.viewFilterByTk !== 'undefined' ? { filterByTk: mocks.viewFilterByTk } : {}),
+          ...(typeof mocks.viewInputMobileLayout === 'boolean' ? { isMobileLayout: mocks.viewInputMobileLayout } : {}),
+          ...(typeof mocks.viewSourceId !== 'undefined' ? { sourceId: mocks.viewSourceId } : {}),
+        },
+      },
+      ...(typeof mocks.contextMobileLayout === 'boolean' ? { isMobileLayout: mocks.contextMobileLayout } : {}),
       themeToken: {
         marginBlock: 16,
       },
@@ -53,27 +124,130 @@ vi.mock('@nocobase/flow-engine', async () => {
 });
 
 vi.mock('ahooks', async () => {
-  const actual = await vi.importActual<any>('ahooks');
+  const actual = await vi.importActual<typeof import('ahooks')>('ahooks');
+  const ReactModule = await import('react');
   return {
     ...actual,
-    useRequest: vi.fn(() => ({
-      loading: false,
-      data: {
-        uid: 'public-form-page',
-      },
-      error: null,
-    })),
+    useRequest: vi.fn((service: () => Promise<unknown>) => {
+      const serviceRef = ReactModule.useRef(service);
+      const [state, setState] = ReactModule.useState<{
+        loading: boolean;
+        data?: unknown;
+        error?: unknown;
+      }>({
+        loading: true,
+      });
+
+      ReactModule.useEffect(() => {
+        let active = true;
+        serviceRef
+          .current()
+          .then((data) => {
+            if (active) {
+              setState({ loading: false, data, error: null });
+            }
+          })
+          .catch((error) => {
+            if (active) {
+              setState({ loading: false, data: undefined, error });
+            }
+          });
+
+        return () => {
+          active = false;
+        };
+      }, []);
+
+      return state;
+    }),
   };
 });
 
 describe('FlowPage', () => {
+  beforeEach(() => {
+    mocks.loadModel.mockImplementation(async () => null);
+    mocks.loadOrCreateModel.mockImplementation(async () => mocks.model);
+  });
+
   afterEach(() => {
+    mocks.flowSettingsEnabled = false;
+    mocks.loadModel.mockReset();
+    mocks.loadOrCreateModel.mockReset();
+    mocks.rendererMobileStates = [];
     mocks.rendererProps = undefined;
+    mocks.model = undefined;
+    mocks.viewFilterByTk = undefined;
+    mocks.viewInputMobileLayout = true;
+    mocks.viewSourceId = undefined;
+    mocks.contextMobileLayout = undefined;
   });
 
-  it('uses showFlowSettings from page model props', () => {
+  it('uses showFlowSettings from page model props', async () => {
+    mocks.model = createPageModel();
     render(<FlowPage />);
 
-    expect(mocks.rendererProps?.showFlowSettings).toBe(false);
+    await waitFor(() => {
+      expect((mocks.rendererProps as { showFlowSettings?: boolean } | undefined)?.showFlowSettings).toBe(false);
+    });
+  });
+
+  it('exposes mobile layout state from route-managed view inputArgs before first render', async () => {
+    mocks.model = createPageModel();
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.rendererMobileStates.length).toBeGreaterThan(0);
+    });
+    expect(mocks.rendererMobileStates[0]).toBe(true);
+  });
+
+  it.each([
+    { viewInputMobileLayout: true, contextMobileLayout: false, expected: false },
+    { viewInputMobileLayout: false, contextMobileLayout: true, expected: true },
+    { viewInputMobileLayout: undefined, contextMobileLayout: true, expected: true },
+    { viewInputMobileLayout: undefined, contextMobileLayout: false, expected: false },
+    { viewInputMobileLayout: true, contextMobileLayout: undefined, expected: true },
+    { viewInputMobileLayout: false, contextMobileLayout: undefined, expected: false },
+  ])(
+    'resolves mobile layout state from view input args and layout context %#',
+    async ({ viewInputMobileLayout, contextMobileLayout, expected }) => {
+      mocks.viewInputMobileLayout = viewInputMobileLayout;
+      mocks.contextMobileLayout = contextMobileLayout;
+      mocks.model = createPageModel();
+
+      render(<FlowPage onModelLoaded={vi.fn()} />);
+
+      await waitFor(() => {
+        expect(mocks.rendererMobileStates.length).toBeGreaterThan(0);
+      });
+      expect(mocks.rendererMobileStates[0]).toBe(expected);
+    },
+  );
+
+  it('reloads runtime page models for record scoped views', async () => {
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+    mocks.loadModel.mockImplementation(async () => mocks.model);
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel.mock.calls[0]?.[0]).toMatchObject({ refresh: true });
+    expect(mocks.loadOrCreateModel).not.toHaveBeenCalled();
+  });
+
+  it('keeps configured page model cache behavior in flow settings mode', async () => {
+    mocks.flowSettingsEnabled = true;
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadOrCreateModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel).not.toHaveBeenCalled();
   });
 });