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

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/__tests__/popupContext.test.ts

@@ -0,0 +1,120 @@
+/**
+ * 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 { PopupSubTableFieldModel } from '../PopupSubTableFieldModel';
+import { PopupSubTableEditActionModel } from '../actions/PopupSubTableEditActionModel';
+
+function getOpenViewHandler(modelClass: typeof PopupSubTableFieldModel | typeof PopupSubTableEditActionModel) {
+  const flow = modelClass.globalFlowRegistry.getFlow('popupSettings');
+  const step = flow?.getStep('openView');
+  const handler = step?.serialize().handler;
+
+  if (!handler) {
+    throw new Error('popupSettings.openView handler is not registered');
+  }
+
+  return handler;
+}
+
+function createContext(record?: Record<string, unknown>, parentRecord: Record<string, unknown> = { id: 1 }) {
+  const open = vi.fn();
+  const sourceCollection = {
+    getFilterByTK: vi.fn((sourceRecord: Record<string, unknown>) => sourceRecord.id),
+  };
+  const model = {
+    uid: 'popup-subtable-uid',
+    props: {
+      value: record ? [record] : [],
+    },
+    context: {
+      inputArgs: {},
+    },
+    flowEngine: {
+      context: {
+        themeToken: {
+          colorBgLayout: '#fff',
+        },
+      },
+    },
+  };
+
+  return {
+    open,
+    context: {
+      inputArgs: {},
+      item: {
+        value: parentRecord,
+      },
+      view: {
+        inputArgs: {
+          viewUid: 'parent-popup-uid',
+          openerUids: ['root-page-uid'],
+        },
+      },
+      viewer: { open },
+      layoutContentElement: {},
+      model,
+      associationModel: model,
+      collection: {
+        dataSourceKey: 'main',
+        filterTargetKey: 'id',
+      },
+      collectionField: {
+        target: 'roles',
+        resourceName: 'users.roles',
+        collection: sourceCollection,
+      },
+      record,
+      getFormValues: () => ({ id: 1 }),
+      getPropertyOptions: () => undefined,
+    },
+  };
+}
+
+describe('PopupSubTable popup context', () => {
+  it('passes popup and parent record context to the add-new popup', () => {
+    const { context, open } = createContext();
+    const handler = getOpenViewHandler(PopupSubTableFieldModel);
+
+    handler(context, { mode: 'drawer', size: 'medium' });
+
+    expect(open).toHaveBeenCalledOnce();
+    expect(open.mock.calls[0][0].inputArgs).toMatchObject({
+      openerUids: ['root-page-uid', 'parent-popup-uid'],
+      associationName: 'users.roles',
+      sourceId: 1,
+    });
+  });
+
+  it('passes popup and parent record context to the edit popup', () => {
+    const { context, open } = createContext({ id: 2, name: 'Member' });
+    const handler = getOpenViewHandler(PopupSubTableEditActionModel);
+
+    handler(context, { mode: 'dialog', size: 'medium' });
+
+    expect(open).toHaveBeenCalledOnce();
+    expect(open.mock.calls[0][0].inputArgs).toMatchObject({
+      openerUids: ['root-page-uid', 'parent-popup-uid'],
+      associationName: 'users.roles',
+      sourceId: 1,
+    });
+  });
+
+  it('does not expose a parent record reference before the parent record is persisted', () => {
+    const { context, open } = createContext(undefined, { nickname: 'Draft user' });
+    const handler = getOpenViewHandler(PopupSubTableFieldModel);
+
+    handler(context, { mode: 'drawer', size: 'medium' });
+
+    expect(open).toHaveBeenCalledOnce();
+    expect(open.mock.calls[0][0].inputArgs).not.toHaveProperty('associationName');
+    expect(open.mock.calls[0][0].inputArgs).not.toHaveProperty('sourceId');
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/actions/PopupSubTableEditActionModel.tsx

@@ -17,6 +17,7 @@ import { capitalize } from 'lodash';
 import '../../../../base/ActionModel';
 import { ActionModel, ActionWithoutPermission } from '../../../../base/ActionModelCore';
 import { SkeletonFallback } from '../../../../../components/SkeletonFallback';
+import { buildOpenerUids } from '../../recordSelectShared';
 import { bindPopupSubTableBeforeClose } from './popupSubTableBeforeClose';
 
 function FieldWithoutPermissionPlaceholder({ targetModel, children }) {
@@ -29,7 +30,7 @@ function FieldWithoutPermissionPlaceholder({ targetModel, children }) {
     const dataSourcePrefix = `${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 } = fieldModel.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
@@ -39,7 +40,7 @@ function FieldWithoutPermissionPlaceholder({ targetModel, children }) {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return <Tooltip title={messageValue}>{children}</Tooltip>;
 }
 
@@ -347,6 +348,11 @@ PopupSubTableEditActionModel.registerFlow({
             return undefined;
           }
         })();
+        const associationName = ctx.collectionField?.resourceName;
+        const sourceId = parentItem?.value
+          ? ctx.collectionField?.collection?.getFilterByTK?.(parentItem.value)
+          : undefined;
+        const openerUids = buildOpenerUids(ctx, ctx.inputArgs);
         ctx.viewer.open({
           type: openMode,
           width: sizeToWidthMap[openMode][size],
@@ -357,6 +363,7 @@ PopupSubTableEditActionModel.registerFlow({
             scene: 'subForm',
             dataSourceKey: ctx.collection.dataSourceKey,
             collectionName: ctx.collectionField?.target,
+            ...(associationName && sourceId != null ? { associationName, sourceId } : {}),
             collectionField: ctx.collectionField,
             record: ctx.record,
             parentItem,
@@ -364,6 +371,7 @@ PopupSubTableEditActionModel.registerFlow({
             parentItemResolver: parentItemOptions?.resolveOnServer,
             itemIndex,
             itemLength,
+            openerUids,
           },
           content: () => <EditFormContent model={ctx.model} />,
           styles: {

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

@@ -9,6 +9,7 @@
 
 import {
   CollectionField,
+  MultiRecordResource,
   EditableItemModel,
   tExpr,
   FlowModel,
@@ -31,7 +32,13 @@ import {
   createRootItemChain,
   type ItemChain,
 } from './itemChain';
-import { buildOpenerUids, LabelByField, type AssociationFieldNames } from './recordSelectShared';
+import {
+  buildOpenerUids,
+  LabelByField,
+  normalizeAssociationFieldNames,
+  type AssociationFieldNames,
+  useAssociationValueHydration,
+} from './recordSelectShared';
 
 const MULTIPLE_ASSOCIATION_TYPES = ['belongsToMany', 'hasMany', 'belongsToArray'];
 
@@ -325,22 +332,31 @@ function RecordPickerField(props) {
   const { fieldNames, onClick, disabled } = props;
   const ctx = useFlowContext();
   const allowMultiple = canRecordPickerSelectMultiple(ctx.collectionField, props.allowMultiple);
+  const normalizedFieldNames = normalizeAssociationFieldNames(fieldNames, ctx.collectionField?.targetCollection);
   useEffect(() => {
     ctx.model.selectedRows.value = props.value;
   }, [ctx.model.selectedRows, props.value]);
+  useAssociationValueHydration({
+    model: ctx.model,
+    value: props.value,
+    isMultiple: allowMultiple,
+    fieldNames: normalizedFieldNames,
+    onChange: props.onChange,
+  });
 
   return (
     <Select
       {...props}
+      fieldNames={normalizedFieldNames}
       open={false}
       onClick={(e) => {
         if (!disabled) {
           onClick(e);
         }
       }}
-      value={normalizeRecordPickerValue(props.value, fieldNames, allowMultiple)}
+      value={normalizeRecordPickerValue(props.value, normalizedFieldNames, allowMultiple)}
       labelRender={(item) => {
-        return <LabelByField option={item} fieldNames={fieldNames} />;
+        return <LabelByField option={item} fieldNames={normalizedFieldNames} />;
       }}
       labelInValue
       mode={allowMultiple ? 'multiple' : undefined}
@@ -400,6 +416,7 @@ function RecordPickerField(props) {
 }
 
 export class RecordPickerFieldModel extends FieldModel {
+  declare resource: MultiRecordResource;
   selectedRows = observable.ref([]);
   _closeView;
   selectBlockModel;
@@ -564,6 +581,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 (

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -7,7 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowContext } from '@nocobase/flow-engine';
+import React from 'react';
+import { FlowContext, FlowEngine, FlowModel, FlowModelProvider } from '@nocobase/flow-engine';
+import { render, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import {
   buildCurrentItemTitle,
@@ -21,6 +23,7 @@ import {
 } from '../itemChain';
 import { injectRecordPickerPopupContext } from '@nocobase/client-v2';
 import {
+  RecordPickerFieldModel,
   canRecordPickerSelectMultiple,
   getRecordPickerClearedValue,
   getRecordPickerEmptyValue,
@@ -28,8 +31,12 @@ import {
   normalizeRecordPickerValue,
   shouldClearRecordPickerValueOnMultipleChange,
 } from '../RecordPickerFieldModel';
-import { getAssociationHydrationNamePath, getAssociationHydrationSetterContext } from '../RecordSelectFieldModel';
-
+import {
+  collectAssociationHydrationCandidates,
+  useAssociationValueHydration,
+  getAssociationHydrationNamePath,
+  getAssociationHydrationSetterContext,
+} from '../recordSelectShared';
 function createMockCollection() {
   return {
     name: 'users',
@@ -78,6 +85,141 @@ describe('RecordPickerFieldModel item context', () => {
     expect(normalizeRecordPickerValue(undefined, fieldNames, false)).toBeUndefined();
   });
 
+  it('renders existing values before field names are initialized', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RecordPickerFieldModel });
+    const field = engine.createModel<RecordPickerFieldModel>({
+      use: 'RecordPickerFieldModel',
+      uid: 'record-picker-without-field-names',
+    });
+    field.context.defineProperty('collectionField', {
+      value: {
+        type: 'hasMany',
+        targetCollection: {
+          filterTargetKey: 'id',
+          titleCollectionField: { name: 'name' },
+        },
+      },
+    });
+    field.setProps({ value: [{ id: 1, name: 'Alice' }], onClick: vi.fn(), onChange: vi.fn() });
+
+    const result = render(React.createElement(FlowModelProvider, { model: field }, field.render()));
+
+    expect(result.getByRole('combobox')).toBeTruthy();
+  });
+
+  it('queues ID-only picker values for association label hydration', () => {
+    const statusMap = new Map<string, 'pending' | 'done'>();
+    const fieldNames = { label: 'name', value: 'id' };
+
+    expect(
+      collectAssociationHydrationCandidates({
+        value: [{ id: 1 }, { id: 2, name: 'Already hydrated' }],
+        isMultiple: true,
+        valueKey: fieldNames.value,
+        labelKey: fieldNames.label,
+        statusMap,
+      }),
+    ).toEqual([{ item: { id: 1 }, tk: 1, tkKey: '1' }]);
+    expect(statusMap).toEqual(new Map([['1', 'pending']]));
+
+    expect(
+      collectAssociationHydrationCandidates({
+        value: { id: 1 },
+        isMultiple: false,
+        valueKey: fieldNames.value,
+        labelKey: fieldNames.label,
+        statusMap,
+      }),
+    ).toEqual([]);
+  });
+
+  it('hydrates an ID-only picker value back into the form', async () => {
+    const resource = {
+      get: vi.fn().mockResolvedValue({ id: 1, name: '北京启明教育' }),
+    };
+    const setFormValue = vi.fn();
+    const onChange = vi.fn();
+    const model = {
+      resource,
+      props: { name: 'company' },
+      context: {
+        fieldPathArray: ['company'],
+        setFormValue,
+      },
+    };
+
+    const { rerender } = renderHook(() =>
+      useAssociationValueHydration({
+        model,
+        value: { id: 1 },
+        isMultiple: false,
+        fieldNames: { label: 'name', value: 'id' },
+        onChange,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(setFormValue).toHaveBeenCalledWith(
+        ['company'],
+        { id: 1, name: '北京启明教育' },
+        { source: 'default', markExplicit: false, triggerEvent: false },
+      );
+    });
+    rerender();
+
+    expect(resource.get).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('initializes a target resource before hydrating an ID-only picker value', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RecordPickerFieldModel });
+
+    const formItem = engine.createModel<FlowModel>({
+      use: 'FlowModel',
+      uid: 'form-item',
+    });
+    const field = engine.createModel<RecordPickerFieldModel>({
+      use: 'RecordPickerFieldModel',
+      uid: 'company-field',
+      parentId: formItem.uid,
+    });
+    const setFormValue = vi.fn();
+    field.context.defineProperty('collectionField', {
+      value: {
+        dataSourceKey: 'main',
+        target: 'rp_na_companies',
+      },
+    });
+    field.context.defineProperty('fieldPathArray', { value: ['company'] });
+    field.context.defineProperty('setFormValue', { value: setFormValue });
+
+    await field.applyFlow('recordPickerSettings');
+    const get = vi.spyOn(field.resource, 'get').mockResolvedValue({ id: 1, name: '北京启明教育' });
+    const onChange = vi.fn();
+
+    renderHook(() =>
+      useAssociationValueHydration({
+        model: field,
+        value: { id: 1 },
+        isMultiple: false,
+        fieldNames: { label: 'name', value: 'id' },
+        onChange,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(get).toHaveBeenCalledWith(1);
+      expect(setFormValue).toHaveBeenCalledWith(
+        ['company'],
+        { id: 1, name: '北京启明教育' },
+        { source: 'default', markExplicit: false, triggerEvent: false },
+      );
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('returns the empty popup select value for the current multiple mode', () => {
     expect(getRecordPickerEmptyValue(true)).toEqual([]);
     expect(getRecordPickerEmptyValue(false)).toBeUndefined();
@@ -243,6 +385,52 @@ describe('RecordPickerFieldModel item context', () => {
     expect(associationOpts.serverOnlyWhenContextParams).toBe(true);
   });
 
+  it('builds whole-association descriptors for current and recursive parent item values', async () => {
+    const people = {
+      name: 'people',
+      dataSourceKey: 'main',
+      filterTargetKey: 'id',
+      getFields: () => [],
+      getField: () => undefined,
+    } as any;
+    const owner = {
+      name: 'owner',
+      target: 'people',
+      targetCollection: people,
+      isAssociationField: () => true,
+    } as any;
+    const collection = {
+      name: 'tasks',
+      dataSourceKey: 'main',
+      getFields: () => [owner],
+      getField: (name: string) => (name === 'owner' ? owner : undefined),
+    } as any;
+    const options = createAssociationItemChainContextPropertyOptions({
+      t: (value) => value,
+      title: 'Current item',
+      collectionAccessor: () => collection,
+      propertiesAccessor: (ctx) => ctx.item.value,
+      resolverPropertiesAccessor: () => ({ owner: { id: 7 } }),
+      parentCollectionAccessor: () => collection,
+      parentAccessors: {
+        parentPropertiesAccessor: () => ({ owner: { id: 8 } }),
+        parentItemMetaAccessor: () => undefined,
+        parentItemResolverAccessor: () => undefined,
+      },
+    });
+    const meta = await options.meta();
+    const params = await meta.buildVariablesParams({
+      item: { value: { owner: { id: 7 } }, parentItem: { value: { owner: { id: 8 } } } },
+    });
+
+    expect(params).toEqual({
+      parentItem: { value: { owner: { collection: 'people', dataSourceKey: 'main', filterByTk: 8 } } },
+      value: { owner: { collection: 'people', dataSourceKey: 'main', filterByTk: 7 } },
+    });
+    expect(options.resolveOnServer('value.owner.name')).toBe(true);
+    expect(options.resolveOnServer('parentItem.value.owner.name')).toBe(true);
+  });
+
   it('disables current item attributes for select-record popup item context', async () => {
     const parentCtx = new FlowContext();
     const departmentsCollection = {