@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.11

package/src/flow/models/blocks/form/__tests__/QuickEditFormModel.quickEdit.test.ts

@@ -7,17 +7,365 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { FlowEngine, SingleRecordResource } from '@nocobase/flow-engine';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { FlowEngine, FlowModel, SingleRecordResource } from '@nocobase/flow-engine';
 import { QuickEditFormModel } from '../QuickEditFormModel';
 
 describe('QuickEditFormModel - quick edit save triggers API (regression)', () => {
   let engine: FlowEngine;
+  const originalMatchMediaDescriptor = Object.getOwnPropertyDescriptor(window, 'matchMedia');
 
   beforeEach(() => {
     engine = new FlowEngine();
   });
 
+  afterEach(() => {
+    if (originalMatchMediaDescriptor) {
+      Object.defineProperty(window, 'matchMedia', originalMatchMediaDescriptor);
+      return;
+    }
+    delete (window as unknown as { matchMedia?: Window['matchMedia'] }).matchMedia;
+  });
+
+  const mockMatchMedia = (matches: boolean) => {
+    const matchMediaMock = vi.fn((query: string) => {
+      return {
+        matches,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      } as unknown as MediaQueryList;
+    });
+
+    Object.defineProperty(window, 'matchMedia', {
+      ...(originalMatchMediaDescriptor || { configurable: true, writable: true }),
+      value: matchMediaMock,
+    });
+  };
+
+  const addUsersCollection = () => {
+    const ds = engine.context.dataSourceManager.getDataSource('main');
+    ds.addCollection({
+      name: 'users',
+      fields: [{ name: 'name', type: 'string', interface: 'input', uiSchema: { title: 'Name' } }],
+    });
+  };
+
+  it('uses source field context when opening quick edit', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    engine.context.defineProperty('pageActive', { value: { value: false } });
+    engine.context.defineProperty('viewer', { value: { open: vi.fn(async () => undefined) } });
+
+    const page = engine.createModel<FlowModel>({ use: 'FlowModel', uid: 'page' });
+    page.context.defineProperty('pageActive', { value: { value: true } });
+    const source = engine.createModel<FlowModel>({ use: 'FlowModel', uid: 'source-field', parentId: page.uid });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+      sourceFieldModelUid: source.uid,
+    });
+
+    let quickEditModel: QuickEditFormModel | undefined;
+    engine.forEachModel((model) => {
+      if (model instanceof QuickEditFormModel) {
+        quickEditModel = model;
+      }
+    });
+
+    expect(quickEditModel?.context.pageActive.value).toBe(true);
+  });
+
+  it('opens quick edit in a mobile drawer when the source field layout is mobile', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    const engineOpen = vi.fn(async () => undefined);
+    const sourceOpen = vi.fn(async () => undefined);
+    engine.context.defineProperty('isMobileLayout', { value: false });
+    engine.context.defineProperty('viewer', { value: { open: engineOpen } });
+    const source = engine.createModel<FlowModel>({ use: 'FlowModel', uid: 'source-field' });
+    source.context.defineProperty('isMobileLayout', { value: true });
+    source.context.defineProperty('viewer', { value: { open: sourceOpen } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+      sourceFieldModelUid: source.uid,
+    });
+
+    expect(engineOpen).not.toHaveBeenCalled();
+    expect(sourceOpen).toHaveBeenCalledTimes(1);
+    expect(sourceOpen).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'drawer',
+        title: 'Name',
+        closable: true,
+        placement: 'bottom',
+        styles: {
+          body: expect.objectContaining({
+            maxHeight: '50vh',
+          }),
+        },
+        inputArgs: {
+          isMobileLayout: true,
+        },
+      }),
+    );
+    let quickEditModel: QuickEditFormModel | undefined;
+    engine.forEachModel((model) => {
+      if (model instanceof QuickEditFormModel) {
+        quickEditModel = model;
+      }
+    });
+    expect(quickEditModel?.context.isMobileLayout).toBe(true);
+  });
+
+  it('uses the source table column title for the mobile drawer header', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    const sourceOpen = vi.fn(async () => undefined);
+    engine.context.defineProperty('viewer', { value: { open: vi.fn(async () => undefined) } });
+    const column = engine.createModel<FlowModel>({ use: 'FlowModel', uid: 'table-column' });
+    column.setProps({ title: 'Custom marital status' });
+    const source = engine.createModel<FlowModel>({ use: 'FlowModel', uid: 'source-field', parentId: column.uid });
+    source.context.defineProperty('isMobileLayout', { value: true });
+    source.context.defineProperty('viewer', { value: { open: sourceOpen } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+      sourceFieldModelUid: source.uid,
+    });
+
+    expect(sourceOpen).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'drawer',
+        title: 'Custom marital status',
+      }),
+    );
+  });
+
+  it('uses the mobile drawer fallback on narrow viewports', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    mockMatchMedia(true);
+    const viewContext = {
+      defineProperty: vi.fn(),
+    };
+    const open = vi.fn(
+      async (config: { content: (view: { close: () => void }, context: typeof viewContext) => unknown }) => {
+        config.content({ close: vi.fn() }, viewContext);
+      },
+    );
+    engine.context.defineProperty('viewer', { value: { open } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+    });
+
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(viewContext.defineProperty).toHaveBeenCalledWith('isMobileLayout', { value: true });
+    expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 768px)');
+    expect(open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'drawer',
+        title: 'Name',
+        closable: true,
+        placement: 'bottom',
+        styles: {
+          body: expect.objectContaining({
+            maxHeight: '50vh',
+          }),
+        },
+        inputArgs: {
+          isMobileLayout: true,
+        },
+      }),
+    );
+    let quickEditModel: QuickEditFormModel | undefined;
+    engine.forEachModel((model) => {
+      if (model instanceof QuickEditFormModel) {
+        quickEditModel = model;
+      }
+    });
+    expect(quickEditModel?.context.isMobileLayout).toBe(true);
+  });
+
+  it('uses the engine mobile layout context without relying on matchMedia', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    mockMatchMedia(false);
+    const open = vi.fn(async () => undefined);
+    engine.context.defineProperty('isMobileLayout', { value: true });
+    engine.context.defineProperty('viewer', { value: { open } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+    });
+
+    expect(window.matchMedia).not.toHaveBeenCalled();
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'drawer',
+        title: 'Name',
+        placement: 'bottom',
+      }),
+    );
+  });
+
+  it('keeps an explicit non-mobile layout context ahead of the narrow viewport fallback', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    mockMatchMedia(true);
+    const open = vi.fn(async () => undefined);
+    const target = document.createElement('div');
+    engine.context.defineProperty('isMobileLayout', { value: false });
+    engine.context.defineProperty('viewer', { value: { open } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target,
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+    });
+
+    expect(window.matchMedia).not.toHaveBeenCalled();
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'popover',
+        target,
+        placement: 'rightTop',
+      }),
+    );
+  });
+
+  it('keeps dynamic preventClose effective for mobile quick edit drawer containers', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    addUsersCollection();
+    mockMatchMedia(true);
+    const originalBeforeClose = vi.fn(async () => true);
+    const drawerView = {
+      close: vi.fn(),
+      update: vi.fn(),
+      beforeClose: originalBeforeClose,
+    };
+    const open = vi.fn(async (config: { content: (view: typeof drawerView) => unknown }) => {
+      config.content(drawerView);
+    });
+    engine.context.defineProperty('viewer', { value: { open } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target: document.createElement('div'),
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+    });
+
+    let quickEditModel: QuickEditFormModel | undefined;
+    engine.forEachModel((model) => {
+      if (model instanceof QuickEditFormModel) {
+        quickEditModel = model;
+      }
+    });
+
+    quickEditModel?.viewContainer.update?.({ preventClose: true });
+    expect(drawerView.update).toHaveBeenCalledWith({ preventClose: true });
+    await expect(drawerView.beforeClose?.({ force: false })).resolves.toBe(false);
+    expect(originalBeforeClose).not.toHaveBeenCalled();
+
+    quickEditModel?.viewContainer.update?.({ preventClose: false });
+    expect(drawerView.update).toHaveBeenCalledWith({ preventClose: false });
+    await expect(drawerView.beforeClose?.({ force: false })).resolves.toBe(true);
+    expect(originalBeforeClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps desktop quick edit in the existing right-top popover', async () => {
+    engine.registerModels({ QuickEditFormModel });
+    mockMatchMedia(false);
+    const open = vi.fn(async () => undefined);
+    const target = document.createElement('div');
+    engine.context.defineProperty('viewer', { value: { open } });
+
+    await QuickEditFormModel.open({
+      flowEngine: engine,
+      target,
+      dataSourceKey: 'main',
+      collectionName: 'users',
+      fieldPath: 'name',
+      record: {},
+    });
+
+    expect(open).toHaveBeenCalledTimes(1);
+    expect(open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'popover',
+        target,
+        placement: 'rightTop',
+        styles: {
+          body: expect.objectContaining({
+            width: 420,
+          }),
+        },
+      }),
+    );
+  });
+
+  it('keeps mobile quick edit content naturally sized with half-window scroll bounds', () => {
+    engine.registerModels({ QuickEditFormModel });
+    const model = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: 'quick-edit-style',
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    const result = QuickEditFormModel.prototype.render.call(model) as any;
+    const formBody = result.props.children[0];
+    const actions = result.props.children[1];
+
+    expect(formBody.props.style).toMatchObject({
+      maxHeight: 'calc(50vh - var(--nb-mobile-page-header-height, 40px) - 132px)',
+      overflowY: 'auto',
+      padding: '8px var(--nb-mobile-page-tabs-content-padding, 12px) 0',
+    });
+    expect(formBody.props.style.minHeight).toBe(0);
+    expect(actions.props.style).toMatchObject({
+      justifyContent: 'flex-end',
+      padding: '8px var(--nb-mobile-page-tabs-content-padding, 12px) calc(80px + env(safe-area-inset-bottom, 0px))',
+    });
+  });
+
   it('calls update with filterByTk and merges primary key from ctx.collection/record', async () => {
     // 1) 准备数据源与集合（含主键字段）
     const dsm = engine.context.dataSourceManager;

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

@@ -9,6 +9,7 @@
 
 import { SingleRecordResource } from '@nocobase/flow-engine';
 import { describe, expect, it, vi } from 'vitest';
+import { EditFormModel } from '../EditFormModel';
 import { submitHandler } from '../submitHandler';
 
 describe('submitHandler', () => {
@@ -52,13 +53,14 @@ describe('submitHandler', () => {
       t: (value: string) => value,
     };
 
-    await submitHandler(ctx, {
+    const responseRecord = await submitHandler(ctx, {
       assignedValues: {
         status: 'published',
         reviewer: 'Alice',
       },
     });
 
+    expect(responseRecord).toEqual({ id: 1 });
     expect(resource.save).toHaveBeenCalledWith(
       {
         title: 'Draft title',
@@ -68,4 +70,55 @@ describe('submitHandler', () => {
       undefined,
     );
   });
+
+  it('returns the refreshed record for edit forms when the save response is empty', async () => {
+    const refreshedRecord = { id: 2, title: 'Updated title' };
+    const resource = Object.create(SingleRecordResource.prototype);
+    resource.getMeta = vi.fn((key: string) => (key === 'currentFilterByTk' ? 2 : undefined));
+    resource.setFilterByTk = vi.fn(() => resource);
+    resource.save = vi.fn(async () => undefined);
+    resource.refresh = vi.fn(async () => undefined);
+    resource.getData = vi.fn(() => refreshedRecord);
+
+    const blockModel = Object.create(EditFormModel.prototype);
+    const form = {
+      validateFields: vi.fn(async () => undefined),
+      getFieldsValue: vi.fn(() => ({
+        title: 'Updated title',
+      })),
+    };
+    Object.defineProperty(blockModel, 'context', { value: { form } });
+    Object.defineProperty(blockModel, 'collection', {
+      value: {
+        name: 'posts',
+        getFilterByTK: (record: { id?: number }) => record.id,
+      },
+    });
+    blockModel.resetUserModifiedFields = vi.fn();
+
+    const responseRecord = await submitHandler(
+      {
+        resource,
+        blockModel,
+        model: {
+          getStepParams: vi.fn(),
+        },
+        message: {
+          error: vi.fn(),
+        },
+        t: (value: string) => value,
+      },
+      {},
+    );
+
+    expect(responseRecord).toBe(refreshedRecord);
+    expect(resource.setFilterByTk).toHaveBeenCalledWith(2);
+    expect(resource.save).toHaveBeenCalledWith(
+      {
+        title: 'Updated title',
+      },
+      undefined,
+    );
+    expect(resource.refresh).toHaveBeenCalled();
+  });
 });

package/src/flow/models/blocks/form/submitHandler.ts

@@ -12,6 +12,16 @@ import { mergeAssignFieldValues, resolveAssignFieldValues } from '../assign-form
 import type { FormBlockModel } from './FormBlockModel';
 import { omitHiddenModelValuesFromSubmit, shouldSkipSubmitValidation, validateSubmitForm } from './submitValues';
 
+function getResponseRecord(response: unknown) {
+  if (!response || typeof response !== 'object') {
+    return response;
+  }
+  if ('data' in response) {
+    return (response as { data?: unknown }).data;
+  }
+  return response;
+}
+
 export async function submitHandler(ctx, params, cb?: (values?: any, filterByTk?: any) => void) {
   const resource = ctx.resource;
   const blockModel = ctx.blockModel as FormBlockModel;
@@ -41,30 +51,34 @@ export async function submitHandler(ctx, params, cb?: (values?: any, filterByTk?
         resource.setFilterByTk(currentFilterByTk);
       }
     }
-    const data: any = cb ? await cb(values) : await resource.save(values, params.requestConfig);
+    const data: unknown = cb ? await cb(values) : await resource.save(values, params.requestConfig);
+    let responseRecord = getResponseRecord(data);
     if (isEditFormModel) {
       resource.isNewRecord = false;
       // 编辑表单保存成功后，表单应回到“已同步”状态：下一次刷新应允许覆盖为服务端值
       blockModel.resetUserModifiedFields?.();
       await resource.refresh();
+      responseRecord = responseRecord ?? resource.getData?.();
     } else {
       blockModel.form.resetFields();
       blockModel.emitter.emit('onFieldReset');
       blockModel.resetUserModifiedFields?.();
       blockModel.formValueRuntime?.resetAfterFormReset?.();
       if (ctx.view.inputArgs.collectionName === blockModel.collection.name && ctx.view.inputArgs.onChange) {
-        ctx.view.inputArgs.onChange(data?.data);
+        ctx.view.inputArgs.onChange(responseRecord);
       }
     }
+    return responseRecord;
   } else if (resource instanceof MultiRecordResource) {
     const currentFilterByTk = resource.getMeta('currentFilterByTk');
     if (!currentFilterByTk) {
       ctx.message.error(ctx.t('No filterByTk found for multi-record resource.'));
       return;
     }
-    (await cb)
+    const data = cb
       ? await cb(values, currentFilterByTk)
       : await resource.update(currentFilterByTk, values, params.requestConfig);
     blockModel.resetUserModifiedFields?.();
+    return getResponseRecord(data) ?? blockModel.getCurrentRecord?.();
   }
 }