@nocobase/client-v2 2.2.0-beta.8 → 2.2.0

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/__tests__/TableBlockModel.quickEditRefresh.test.ts

@@ -9,8 +9,20 @@
 
 import { FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
 import { describe, expect, it } from 'vitest';
+import { TableBlockModel } from '../TableBlockModel';
 
 describe('TableBlockModel quick edit refresh', () => {
+  it('requests record-level ACL metadata for table data', () => {
+    const engine = new FlowEngine();
+    const model = {
+      context: engine.context,
+    };
+
+    const resource = TableBlockModel.prototype.createResource.call(model, {}, {});
+
+    expect(resource.getRequestOptions().headers['X-With-ACL-Meta']).toBe('true');
+  });
+
   it('updates table data through a new array reference after quick editing a flat row', () => {
     const engine = new FlowEngine();
     const resource = engine.context.createResource(MultiRecordResource);

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

@@ -66,6 +66,39 @@ describe('TableColumnModel sorter settings', () => {
     expect(setProps).toHaveBeenCalledWith('editable', false);
   });
 
+  it('checks record update scope and field permission before enabling quick edit', () => {
+    const can = vi.fn(() => false);
+    const model = {
+      props: { editable: true },
+      collectionField: { name: 'title' },
+      context: {
+        skipAclCheck: false,
+        acl: { can },
+        blockModel: {
+          collection: {
+            dataSourceKey: 'main',
+            name: 'posts',
+            getFilterByTK: () => 2,
+          },
+          resource: {
+            getResourceName: () => 'posts',
+            getMeta: () => ({ update: [1] }),
+          },
+        },
+      },
+    };
+
+    expect(TableColumnModel.prototype.canQuickEdit.call(model, { id: 2 })).toBe(false);
+    expect(can).toHaveBeenCalledWith({
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      recordPkValue: 2,
+      allowedActions: { update: [1] },
+      fields: ['title'],
+    });
+  });
+
   it('hides sortable setting for association fields', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-association-sorter', flowEngine: engine } as any);
@@ -327,6 +360,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/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/PopupSubTableFieldModel/PopupSubTableFieldModel.tsx

@@ -28,6 +28,7 @@ import { observer } from '@formily/reactive-react';
 import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { buildRecordPickerPopupContextInputArgs, RecordPickerContent } from '../RecordPickerFieldModel';
+import { buildOpenerUids } from '../recordSelectShared';
 import { AssociationFieldModel } from '../AssociationFieldModel';
 import { adjustColumnOrder } from '../../../blocks/table/utils';
 import { isSubTableColumnFieldComponentContext } from '../SubTableFieldModel/SubTableColumnModel';
@@ -102,7 +103,7 @@ const RenderCell = observer<any>((props) => {
               transform: translateY(-50%);
             }
             &:hover {
-              background: rgba(24, 144, 255, 0.1) !important;
+              box-shadow: inset 0 0 0 9999px rgba(24, 144, 255, 0.1);
             }
             &:hover .edit-icon {
               display: inline-flex;
@@ -126,6 +127,7 @@ const RenderCell = observer<any>((props) => {
                 fieldPath: dataIndex,
                 record: record,
                 fieldProps: { ...columnModel.props, ...columnModel.subModels.field.props },
+                sourceFieldModelUid: columnModel.subModels.field.uid,
                 onOk: (values) => {
                   record[dataIndex] = values[dataIndex];
                   // 仅重渲染单元格
@@ -652,6 +654,11 @@ PopupSubTableFieldModel.registerFlow({
         const parentItemOptions = ctx?.getPropertyOptions?.('item');
         const itemIndex = Array.isArray(ctx.model?.props?.value) ? ctx.model.props.value.length : 0;
         const itemLength = itemIndex + 1;
+        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],
@@ -662,12 +669,14 @@ PopupSubTableFieldModel.registerFlow({
             scene: 'subForm',
             dataSourceKey: ctx.collection.dataSourceKey,
             collectionName: ctx.collectionField?.target,
+            ...(associationName && sourceId != null ? { associationName, sourceId } : {}),
             collectionField: ctx.collectionField,
             parentItem,
             parentItemMeta: parentItemOptions?.meta,
             parentItemResolver: parentItemOptions?.resolveOnServer,
             itemIndex,
             itemLength,
+            openerUids,
           },
           content: () => <EditFormContent model={ctx.model} scene="create" />,
           styles: {

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,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',
     },