@nocobase/client-v2 2.2.0-beta.17 → 2.2.0-beta.18

package/src/flow/models/blocks/form/__tests__/runJsFormSubmit.test.ts

@@ -0,0 +1,131 @@
+/**
+ * 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 } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { CreateFormModel } from '../CreateFormModel';
+import { EditFormModel } from '../EditFormModel';
+import { FormActionModel } from '../FormActionModel';
+
+function prepareFormModel<T extends CreateFormModel | EditFormModel>(model: T, publicFormRuntime = false) {
+  const engine = new FlowEngine();
+  engine.registerModels({ CreateFormModel, EditFormModel });
+  model.flowEngine = engine;
+  Object.defineProperty(model, 'context', {
+    value: {
+      publicFormRuntime,
+      message: { error: vi.fn() },
+      t: (value: string) => value,
+    },
+  });
+  return model;
+}
+
+function createSubmitAction() {
+  const onClick = vi.fn();
+  const action = {
+    getFlow: vi.fn((key: string) => (key === 'submitSettings' ? {} : undefined)),
+    onClick,
+  } as unknown as FormActionModel;
+  return { action, onClick };
+}
+
+describe('FormBlockModel.submitFromRunJs', () => {
+  it('dispatches the first action with a submitSettings flow', () => {
+    const { action, onClick } = createSubmitAction();
+    const { action: secondAction, onClick: secondOnClick } = createSubmitAction();
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: (_key: string, callback: (item: FormActionModel) => FormActionModel) => [
+          callback(action),
+          callback(secondAction),
+        ],
+      }) as CreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(onClick).toHaveBeenCalledWith(undefined);
+    expect(secondOnClick).not.toHaveBeenCalled();
+  });
+
+  it('does not dispatch an edit submit action without an available record', () => {
+    const { action, onClick } = createSubmitAction();
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(EditFormModel.prototype), {
+        hasAvailableData: () => false,
+        mapSubModels: (_key: string, callback: (item: FormActionModel) => FormActionModel) => [callback(action)],
+      }) as EditFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('falls back to the core form submit handler when no submit action exists', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as CreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('falls back to the core edit submit handler when a record exists', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(EditFormModel.prototype), {
+        hasAvailableData: () => true,
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as EditFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('uses the core fallback for specialized form subclasses', () => {
+    class SpecializedCreateFormModel extends CreateFormModel {}
+
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(SpecializedCreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as SpecializedCreateFormModel,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).toHaveBeenCalledOnce();
+  });
+
+  it('does not use the core fallback for public forms without a submit action', () => {
+    const submit = vi.fn().mockResolvedValue(undefined);
+    const blockModel = prepareFormModel(
+      Object.assign(Object.create(CreateFormModel.prototype), {
+        mapSubModels: vi.fn(() => []),
+        submit,
+      }) as CreateFormModel,
+      true,
+    );
+
+    blockModel.submitFromRunJs();
+
+    expect(submit).not.toHaveBeenCalled();
+  });
+});

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

@@ -36,7 +36,15 @@ import { BlockSceneEnum } from '../../base/BlockModel';
 import { CollectionBlockModel } from '../../base/CollectionBlockModel';
 import { QuickEditFormModel } from '../form/QuickEditFormModel';
 import { TableColumnModel } from './TableColumnModel';
-import { extractIndex, adjustColumnOrder, setNestedValue, extractIds, getRowKey, useBlockHeight } from './utils';
+import {
+  extractIndex,
+  adjustColumnOrder,
+  setNestedValue,
+  extractIds,
+  extractRowKeys,
+  getRowKey,
+  useBlockHeight,
+} from './utils';
 import { resolveTableSorterField } from './sortUtils';
 import { commonConditionHandler, ConditionBuilder } from '../../../components/ConditionBuilder';
 import { BulkDeleteActionModel } from '../../actions/BulkDeleteActionModel';
@@ -222,6 +230,22 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     return super.resource as MultiRecordResource;
   }
 
+  resetAfterFilterChange() {
+    if (!this.props.treeTable) {
+      return;
+    }
+
+    const expandAll = !!this.props.defaultExpandAllRows;
+    const expandedRowKeys = expandAll ? extractRowKeys(this.resource.getData(), this.collection.filterTargetKey) : [];
+
+    this.setProps('expandedRowKeys', expandedRowKeys);
+    this.mapSubModels('actions', (action) => {
+      if ('setExpandFlag' in action && typeof action.setExpandFlag === 'function') {
+        action.setExpandFlag(expandAll);
+      }
+    });
+  }
+
   private readonly columns = observable.ref([]);
   private disposeAutorun: () => void;
 

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

@@ -27,6 +27,7 @@ import {
   ModelRenderMode,
   useFlowModel,
 } from '@nocobase/flow-engine';
+import type { FlowModel } from '@nocobase/flow-engine';
 import { useTranslation } from 'react-i18next';
 import { TableColumnProps, Tooltip, Space, InputNumber, Button, Divider } from 'antd';
 import { get, omit, capitalize } from 'lodash';
@@ -61,19 +62,28 @@ export function FieldDeletePlaceholder(props: any) {
   );
 }
 
-function FieldWithoutPermissionPlaceholder() {
+type FieldPermissionPlaceholderModel = FlowModel & {
+  fieldPath?: string;
+  forbidden?: { actionName?: string } | null;
+};
+
+export function FieldWithoutPermissionPlaceholder({
+  targetModel,
+}: {
+  targetModel?: FieldPermissionPlaceholderModel;
+} = {}) {
   const { t } = useTranslation();
-  const model: any = useFlowModel();
-  const blockModel = model.context.blockModel;
-  const collection = model.context.collectionField?.collection || blockModel.collection;
-  const dataSource = collection.dataSource;
+  const contextModel = useFlowModel<FieldPermissionPlaceholderModel>();
+  const model = targetModel || contextModel;
+  const collection = model.context.collectionField?.collection || model.context.blockModel?.collection;
+  const dataSource = collection?.dataSource;
   const name = model.context.collectionField?.name || model.fieldPath;
   const nameValue = useMemo(() => {
-    const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
+    const dataSourcePrefix = dataSource ? `${t(dataSource.displayName || dataSource.key)} > ` : '';
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, [collection, dataSource.displayName, dataSource.key, name, t]);
-  const { actionName } = model.forbidden;
+  }, [collection, dataSource, name, t]);
+  const actionName = model.forbidden?.actionName || 'view';
   const messageValue = useMemo(() => {
     return t(
       `The current user only has the UI configuration permission, but don't have "{{actionName}}" permission for field "{{name}}"`,

package/src/flow/models/blocks/table/__tests__/TableBlockModel.filterReset.test.ts

@@ -0,0 +1,78 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { TableBlockModel } from '../TableBlockModel';
+
+describe('TableBlockModel filter reset', () => {
+  it('collapses the filtered tree when rows are not expanded by default', () => {
+    const setExpandFlag = vi.fn();
+    const setProps = vi.fn();
+    const model = {
+      props: { treeTable: true, defaultExpandAllRows: false, expandedRowKeys: [1, 2] },
+      resource: { getData: () => [{ id: 3, children: [{ id: 4 }] }] },
+      setProps,
+      mapSubModels: (_key, callback) => callback({ setExpandFlag }),
+    };
+
+    TableBlockModel.prototype.resetAfterFilterChange.call(model);
+
+    expect(setProps).toHaveBeenCalledWith('expandedRowKeys', []);
+    expect(setExpandFlag).toHaveBeenCalledWith(false);
+  });
+
+  it('expands the filtered tree when rows are expanded by default', () => {
+    const setExpandFlag = vi.fn();
+    const setProps = vi.fn();
+    const model = {
+      props: { treeTable: true, defaultExpandAllRows: true, expandedRowKeys: [1, 2] },
+      collection: { filterTargetKey: 'id' },
+      resource: { getData: () => [{ id: 3, children: [{ id: 4 }] }] },
+      setProps,
+      mapSubModels: (_key, callback) => callback({ setExpandFlag }),
+    };
+
+    TableBlockModel.prototype.resetAfterFilterChange.call(model);
+
+    expect(setProps).toHaveBeenCalledWith('expandedRowKeys', [3, 4]);
+    expect(setExpandFlag).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the collection filter target key when expanding the filtered tree', () => {
+    const setProps = vi.fn();
+    const model = {
+      props: { treeTable: true, defaultExpandAllRows: true },
+      collection: { filterTargetKey: ['tenant', 'slug'] },
+      resource: {
+        getData: () => [{ tenant: 'acme', slug: 'root', children: [{ tenant: 'acme', slug: 'child' }] }],
+      },
+      setProps,
+      mapSubModels: vi.fn(),
+    };
+
+    TableBlockModel.prototype.resetAfterFilterChange.call(model);
+
+    expect(setProps).toHaveBeenCalledWith('expandedRowKeys', ['acme-root', 'acme-child']);
+  });
+
+  it('does not change expansion state for a regular table', () => {
+    const setProps = vi.fn();
+    const mapSubModels = vi.fn();
+    const model = {
+      props: { treeTable: false },
+      setProps,
+      mapSubModels,
+    };
+
+    TableBlockModel.prototype.resetAfterFilterChange.call(model);
+
+    expect(setProps).not.toHaveBeenCalled();
+    expect(mapSubModels).not.toHaveBeenCalled();
+  });
+});

package/src/flow/models/blocks/table/utils.ts

@@ -67,6 +67,13 @@ export function extractIds(data) {
   return ids;
 }
 
+export function extractRowKeys(data: Record<string, unknown>[], key: string | string[]) {
+  return data.flatMap((item) => {
+    const children = Array.isArray(item.children) ? extractRowKeys(item.children, key) : [];
+    return [getRowKey(item, key), ...children];
+  });
+}
+
 /**
  * 生成表格行唯一 key
  * @param record 当前行数据

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

@@ -8,7 +8,13 @@
  */
 
 import { Cascader, Space, Button } from 'antd';
-import { CollectionField, EditableItemModel, tExpr, MultiRecordResource } from '@nocobase/flow-engine';
+import {
+  CollectionField,
+  EditableItemModel,
+  FilterableItemModel,
+  MultiRecordResource,
+  tExpr,
+} from '@nocobase/flow-engine';
 import { DeleteOutlined } from '@ant-design/icons';
 import { css, cx } from '@emotion/css';
 import { debounce, castArray, omit, last, isEqual } from 'lodash';
@@ -31,6 +37,23 @@ function normalizeLabelKeys(labelKeyOrKeys?: string | string[]): string[] {
   return Array.from(new Set(list.filter((item): item is string => !!item && typeof item === 'string')));
 }
 
+function normalizeCascadeFieldKey(key: unknown): string | undefined {
+  if (typeof key === 'string' && key) {
+    return key;
+  }
+  if (Array.isArray(key) && key.length === 1 && typeof key[0] === 'string') {
+    return key[0];
+  }
+  return undefined;
+}
+
+function getDefaultCascadeFieldNames(field: CollectionField) {
+  const targetCollection = field?.targetCollection;
+  const value = normalizeCascadeFieldKey(targetCollection?.filterTargetKey) || 'id';
+  const label = targetCollection?.titleCollectionField?.name || value;
+  return { label, value };
+}
+
 function getRecordDisplayLabel(item: any, labelKeyOrKeys?: string | string[]): string | null {
   if (!isPlainRecord(item)) return null;
   const labelKeys = normalizeLabelKeys(labelKeyOrKeys);
@@ -815,6 +838,15 @@ EditableItemModel.bindModelToInterface('CascadeSelectFieldModel', ['m2o', 'o2o',
   order: 60,
 });
 
+FilterableItemModel.bindModelToInterface('CascadeSelectFieldModel', ['m2o', 'o2o', 'oho', 'obo'], {
+  when: (ctx, field) => field.targetCollection?.template === 'tree',
+  isDefault: true,
+  order: 60,
+  defaultProps: (ctx, field) => ({
+    fieldNames: getDefaultCascadeFieldNames(field),
+  }),
+});
+
 EditableItemModel.bindModelToInterface('CascadeSelectListFieldModel', ['m2m', 'o2m', 'mbm'], {
   when: (ctx, field) => field.targetCollection?.template === 'tree',
   isDefault: true,

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

@@ -9,6 +9,7 @@
 
 import {
   CollectionField,
+  MultiRecordResource,
   EditableItemModel,
   tExpr,
   FlowModel,
@@ -31,7 +32,12 @@ import {
   createRootItemChain,
   type ItemChain,
 } from './itemChain';
-import { buildOpenerUids, LabelByField, type AssociationFieldNames } from './recordSelectShared';
+import {
+  buildOpenerUids,
+  LabelByField,
+  type AssociationFieldNames,
+  useAssociationValueHydration,
+} from './recordSelectShared';
 
 const MULTIPLE_ASSOCIATION_TYPES = ['belongsToMany', 'hasMany', 'belongsToArray'];
 
@@ -328,6 +334,13 @@ function RecordPickerField(props) {
   useEffect(() => {
     ctx.model.selectedRows.value = props.value;
   }, [ctx.model.selectedRows, props.value]);
+  useAssociationValueHydration({
+    model: ctx.model,
+    value: props.value,
+    isMultiple: allowMultiple,
+    fieldNames,
+    onChange: props.onChange,
+  });
 
   return (
     <Select
@@ -400,6 +413,7 @@ function RecordPickerField(props) {
 }
 
 export class RecordPickerFieldModel extends FieldModel {
+  declare resource: MultiRecordResource;
   selectedRows = observable.ref([]);
   _closeView;
   selectBlockModel;
@@ -564,6 +578,15 @@ RecordPickerFieldModel.registerFlow({
   title: tExpr('RecordPicker settings'),
   sort: 200,
   steps: {
+    init: {
+      handler(ctx) {
+        const { target, dataSourceKey } = ctx.model.collectionField;
+        const resource = ctx.createResource(MultiRecordResource);
+        resource.setDataSourceKey(dataSourceKey);
+        resource.setResourceName(target);
+        ctx.model.resource = resource;
+      },
+    },
     fieldNames: {
       use: 'titleField',
     },

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

@@ -22,7 +22,7 @@ import { css } from '@emotion/css';
 import { debounce } from 'lodash';
 import { useRequest } from 'ahooks';
 import { PlusOutlined } from '@ant-design/icons';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SkeletonFallback } from '../../../components/SkeletonFallback';
 import { AssociationFieldModel } from './AssociationFieldModel';
@@ -32,6 +32,7 @@ import {
   normalizeAssociationFieldNames,
   resolveOptions,
   toSelectValue,
+  useAssociationValueHydration,
   type AssociationOption,
   type LazySelectProps,
 } from './recordSelectShared';
@@ -41,81 +42,6 @@ import { ActionWithoutPermission } from '../../base/ActionModel';
 import { EditFormModel } from '../../blocks';
 import { hasAncestorModel } from './recordSelectSettingsUtils';
 
-function isPlainObject(val: unknown): val is Record<string, any> {
-  return !!val && typeof val === 'object' && !Array.isArray(val);
-}
-
-type HydrateStatus = 'pending' | 'done';
-
-type HydrationCandidate = {
-  item: AssociationOption;
-  tk: any;
-  tkKey: string;
-};
-
-export function collectAssociationHydrationCandidates(options: {
-  value: LazySelectProps['value'];
-  isMultiple: boolean;
-  valueKey: string;
-  labelKey: string;
-  statusMap: Map<string, HydrateStatus>;
-}): HydrationCandidate[] {
-  const { value, isMultiple, valueKey, labelKey, statusMap } = options;
-  const list = isMultiple ? (Array.isArray(value) ? value : []) : value != null ? [value] : [];
-
-  const activeTkKeys = new Set<string>();
-  for (const item of list) {
-    if (!isPlainObject(item)) continue;
-    const tk = item?.[valueKey];
-    if (tk == null) continue;
-    const tkKey = typeof tk === 'object' ? JSON.stringify(tk) : String(tk);
-    if (!tkKey) continue;
-    activeTkKeys.add(tkKey);
-  }
-
-  for (const key of Array.from(statusMap.keys())) {
-    if (!activeTkKeys.has(key)) {
-      statusMap.delete(key);
-    }
-  }
-
-  const candidates: HydrationCandidate[] = [];
-  for (const item of list) {
-    if (!isPlainObject(item)) continue;
-    const tk = item?.[valueKey];
-    if (tk == null) continue;
-    if (item?.[labelKey] != null) continue;
-
-    const tkKey = typeof tk === 'object' ? JSON.stringify(tk) : String(tk);
-    if (!tkKey) continue;
-
-    const status = statusMap.get(tkKey);
-    if (status === 'pending' || status === 'done') continue;
-
-    statusMap.set(tkKey, 'pending');
-    candidates.push({ item, tk, tkKey });
-  }
-
-  return candidates;
-}
-
-export function getAssociationHydrationNamePath(model: any) {
-  return model?.context?.fieldPathArray ?? model?.context?.fieldPath ?? model?.props?.name;
-}
-
-export function getAssociationHydrationSetterContext(model: any) {
-  if (typeof model?.context?.setFormValue === 'function') {
-    return model.context;
-  }
-
-  return model?.context?.blockModel?.context;
-}
-
-function markAssociationHydrationDone(statusMap: Map<string, HydrateStatus>, tkKey: string | null | undefined) {
-  if (!tkKey) return;
-  statusMap.set(tkKey, 'done');
-}
-
 function RemoteModelRenderer({ options }) {
   const ctx = useFlowViewContext();
   const { data, loading } = useRequest(
@@ -281,66 +207,13 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
   };
   const isConfigMode = !!model.context.flowSettingsEnabled;
   const { t } = useTranslation();
-  const hydrateStatusRef = useRef<Map<string, HydrateStatus>>(new Map());
-
-  useEffect(() => {
-    const resource: any = model?.resource;
-    if (!resource || typeof resource.get !== 'function') return;
-    const valueKey = normalizedFieldNames.value;
-    const labelKey = normalizedFieldNames.label;
-    if (!valueKey || !labelKey) return;
-
-    const current = value;
-    const candidates = collectAssociationHydrationCandidates({
-      value: current,
-      isMultiple,
-      valueKey,
-      labelKey,
-      statusMap: hydrateStatusRef.current,
-    });
-    if (!candidates.length) return;
-
-    const namePath = getAssociationHydrationNamePath(model);
-    const setterCtx: any = getAssociationHydrationSetterContext(model);
-
-    candidates.forEach(({ item, tk, tkKey }) => {
-      void (async () => {
-        try {
-          const record = await resource.get(tk);
-          if (!record || typeof record !== 'object') {
-            return;
-          }
-
-          const merge = { ...(item as any), ...(record as any) };
-          if (merge?.[labelKey] == null) {
-            return;
-          }
-
-          const nextValue = isMultiple
-            ? (Array.isArray(current) ? current : []).map((v: any) => {
-                if (!isPlainObject(v)) return v;
-                return v?.[valueKey] === tk ? merge : v;
-              })
-            : merge;
-
-          if (setterCtx && typeof setterCtx.setFormValue === 'function' && namePath != null) {
-            await setterCtx.setFormValue(namePath, nextValue, {
-              source: 'default',
-              markExplicit: false,
-              triggerEvent: false,
-            });
-            return;
-          }
-
-          onChange(nextValue as any);
-        } catch (error) {
-          // ignore
-        } finally {
-          markAssociationHydrationDone(hydrateStatusRef.current, tkKey);
-        }
-      })();
-    });
-  }, [isMultiple, model, normalizedFieldNames.label, normalizedFieldNames.value, onChange, value]);
+  useAssociationValueHydration({
+    model,
+    value,
+    isMultiple,
+    fieldNames: normalizedFieldNames,
+    onChange,
+  });
 
   const QuickAddContent = ({ searchText }) => {
     return (