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

package/src/flow/models/base/__tests__/ActionModel.test.ts

@@ -0,0 +1,83 @@
+/**
+ * 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, FlowRuntimeContext } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class IconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'default' as const,
+    title: 'Icon action',
+    icon: 'PlusOutlined',
+  };
+}
+
+class PlainActionModel extends ActionModel {
+  defaultProps = {
+    type: 'default' as const,
+    title: 'Plain action',
+  };
+}
+
+function getButtonSettingsDefaultParams(model: ActionModel) {
+  const defaultParams = model.getFlow('buttonSettings')?.getStep('general')?.defaultParams;
+  if (typeof defaultParams !== 'function') {
+    throw new Error('buttonSettings.general.defaultParams is unavailable.');
+  }
+  return defaultParams(new FlowRuntimeContext(model, 'buttonSettings', 'settings'));
+}
+
+describe('ActionModel button settings', () => {
+  it('uses icon-only buttons by default for mobile icon actions', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ IconActionModel });
+    const model = engine.createModel<IconActionModel>({
+      use: 'IconActionModel',
+      uid: 'mobile-icon-action',
+    });
+
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      icon: 'PlusOutlined',
+      iconOnly: true,
+    });
+  });
+
+  it('keeps button titles visible by default outside mobile layouts', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ IconActionModel });
+    const model = engine.createModel<IconActionModel>({
+      use: 'IconActionModel',
+      uid: 'desktop-icon-action',
+    });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      icon: 'PlusOutlined',
+    });
+    expect(getButtonSettingsDefaultParams(model)).not.toHaveProperty('iconOnly', true);
+  });
+
+  it('does not force icon-only buttons for mobile actions without icons', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ PlainActionModel });
+    const model = engine.createModel<PlainActionModel>({
+      use: 'PlainActionModel',
+      uid: 'mobile-plain-action',
+    });
+
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    expect(getButtonSettingsDefaultParams(model)).toMatchObject({
+      title: 'Plain action',
+    });
+    expect(getButtonSettingsDefaultParams(model)).not.toHaveProperty('iconOnly', true);
+  });
+});

package/src/flow/models/base/__tests__/ActionModelCore.render.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@nocobase/test/client';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class NoIconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'link' as const,
+    title: 'Open details',
+  };
+}
+
+describe('ActionModel rendering', () => {
+  it('shows the title when iconOnly is true but no icon is configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: {
+        title: 'Open details',
+        iconOnly: true,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{model.render()}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open details' })).toBeInTheDocument();
+  });
+});

package/src/flow/models/base/__tests__/BlockGridModel.selectSceneActivation.test.ts

@@ -0,0 +1,124 @@
+/**
+ * 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, type FlowModelContext, MultiRecordResource, VIEW_ACTIVATED_EVENT } from '@nocobase/flow-engine';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { BlockGridModel } from '../BlockGridModel';
+import { CollectionBlockModel } from '../CollectionBlockModel';
+
+class TestBlockGridModel extends BlockGridModel {
+  mountForTest() {
+    super.onMount();
+  }
+
+  unmountForTest() {
+    super.onUnmount();
+  }
+}
+
+class TestMultiRecordResource extends MultiRecordResource<Record<string, unknown>> {
+  refreshCalls = 0;
+
+  override async refresh(): Promise<void> {
+    this.refreshCalls += 1;
+    this.emit('refresh');
+  }
+}
+
+class TestCollectionBlockModel extends CollectionBlockModel {
+  createResource(ctx: FlowModelContext) {
+    return ctx.createResource(TestMultiRecordResource);
+  }
+
+  mountForTest() {
+    super.onMount();
+  }
+}
+
+describe('BlockGridModel - select scene activation', () => {
+  let engine: FlowEngine;
+
+  beforeEach(() => {
+    engine = new FlowEngine();
+    engine.context.defineProperty('location', { value: { search: '' } });
+    engine.registerModels({ TestBlockGridModel, TestCollectionBlockModel });
+
+    engine.dataSourceManager.getDataSource('main').addCollection({
+      name: 'roles',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number' },
+        { name: 'name', type: 'string', interface: 'input' },
+      ],
+    });
+  });
+
+  function createModels(scene = 'select') {
+    engine.context.defineProperty('view', { value: { inputArgs: { scene } } });
+    const grid = engine.createModel<TestBlockGridModel>({ use: 'TestBlockGridModel' });
+    const block = grid.addSubModel<TestCollectionBlockModel>('items', {
+      use: 'TestCollectionBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'roles',
+          },
+        },
+      },
+    });
+    const resource = block.context.resource as TestMultiRecordResource;
+
+    block.mountForTest();
+    grid.mountForTest();
+    return { grid, resource };
+  }
+
+  it('refreshes dirty collection blocks once when a nested view closes', async () => {
+    const { grid, resource } = createModels();
+
+    engine.markDataSourceDirty('main', 'roles');
+    engine.emitter.emit(VIEW_ACTIVATED_EVENT);
+    await Promise.resolve();
+
+    expect(resource.refreshCalls).toBe(1);
+
+    engine.emitter.emit(VIEW_ACTIVATED_EVENT);
+    await Promise.resolve();
+
+    expect(resource.refreshCalls).toBe(1);
+    grid.unmountForTest();
+  });
+
+  it('does not refresh without dirty data or after the grid unmounts', async () => {
+    const { grid, resource } = createModels();
+
+    engine.emitter.emit(VIEW_ACTIVATED_EVENT);
+    await Promise.resolve();
+    expect(resource.refreshCalls).toBe(0);
+
+    grid.unmountForTest();
+    engine.markDataSourceDirty('main', 'roles');
+    engine.emitter.emit(VIEW_ACTIVATED_EVENT);
+    await Promise.resolve();
+
+    expect(resource.refreshCalls).toBe(0);
+  });
+
+  it('does not handle activation outside the select scene', async () => {
+    const { grid, resource } = createModels('list');
+
+    engine.markDataSourceDirty('main', 'roles');
+    engine.emitter.emit(VIEW_ACTIVATED_EVENT);
+    await Promise.resolve();
+
+    expect(resource.refreshCalls).toBe(0);
+    grid.unmountForTest();
+  });
+});

package/src/flow/models/base/__tests__/CollectionBlockModel.addAppends.test.ts

@@ -0,0 +1,41 @@
+/**
+ * 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, FlowModelContext, MultiRecordResource } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import { CollectionBlockModel } from '../CollectionBlockModel';
+
+class AddAppendsCollectionBlockModel extends CollectionBlockModel {
+  createResource(ctx: FlowModelContext) {
+    return ctx.createResource(MultiRecordResource);
+  }
+}
+
+describe('CollectionBlockModel addAppends', () => {
+  it('does not throw for a nested field path when the collection is unavailable', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ AddAppendsCollectionBlockModel });
+
+    const model = engine.createModel<AddAppendsCollectionBlockModel>({
+      uid: 'missing-collection-add-appends-block',
+      use: 'AddAppendsCollectionBlockModel',
+      stepParams: {
+        resourceSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'missing_collection',
+          },
+        },
+      },
+    });
+
+    expect(model.collection).toBeUndefined();
+    expect(() => model.addAppends('createdBy.departments')).not.toThrow();
+  });
+});

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -10,7 +10,7 @@
 import { FlowEngine } from '@nocobase/flow-engine';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { GridModel } from '../GridModel';
+import { GridModel, transformRowsToSingleColumn } from '../GridModel';
 
 const createMockRect = ({ top, left, width, height }: { top: number; left: number; width: number; height: number }) => {
   return {
@@ -66,6 +66,83 @@ const createGridContainer = () => {
   return container;
 };
 
+const createGridContainerWithEmptyColumn = () => {
+  const container = document.createElement('div');
+  container.setAttribute('data-grid-root', '');
+  const row = document.createElement('div');
+  row.setAttribute('data-grid-row-id', 'row-1');
+  container.appendChild(row);
+
+  const firstColumn = document.createElement('div');
+  firstColumn.setAttribute('data-grid-column-row-id', 'row-1');
+  firstColumn.setAttribute('data-grid-column-index', '0');
+  row.appendChild(firstColumn);
+
+  const item = document.createElement('div');
+  item.setAttribute('data-grid-item-row-id', 'row-1');
+  item.setAttribute('data-grid-column-index', '0');
+  item.setAttribute('data-grid-item-index', '0');
+  item.setAttribute('data-grid-item-uid', 'item-1');
+  firstColumn.appendChild(item);
+
+  const secondColumn = document.createElement('div');
+  secondColumn.setAttribute('data-grid-column-row-id', 'row-1');
+  secondColumn.setAttribute('data-grid-column-index', '1');
+  row.appendChild(secondColumn);
+
+  mockRect(container, { top: 0, left: 0, width: 480, height: 280 });
+  mockRect(row, { top: 20, left: 20, width: 440, height: 120 });
+  mockRect(firstColumn, { top: 20, left: 20, width: 220, height: 120 });
+  mockRect(item, { top: 30, left: 30, width: 200, height: 100 });
+  mockRect(secondColumn, { top: 20, left: 260, width: 200, height: 120 });
+  return container;
+};
+
+const createProjectedMobileGridContainer = (rows: Record<string, string[][]>) => {
+  const container = document.createElement('div');
+  container.setAttribute('data-grid-root', '');
+  mockRect(container, { top: 0, left: 0, width: 480, height: 320 });
+
+  let top = 20;
+  Object.entries(transformRowsToSingleColumn(rows)).forEach(([rowId, columns]) => {
+    const row = document.createElement('div');
+    row.setAttribute('data-grid-row-id', rowId);
+    container.appendChild(row);
+
+    const column = document.createElement('div');
+    column.setAttribute('data-grid-column-row-id', rowId);
+    column.setAttribute('data-grid-column-index', '0');
+    row.appendChild(column);
+
+    const items = columns[0] || [];
+    items.forEach((itemUid, itemIndex) => {
+      const item = document.createElement('div');
+      item.setAttribute('data-grid-item-row-id', rowId);
+      item.setAttribute('data-grid-column-index', '0');
+      item.setAttribute('data-grid-item-index', String(itemIndex));
+      item.setAttribute('data-grid-item-uid', itemUid);
+      column.appendChild(item);
+      mockRect(item, { top: top + 10 + itemIndex * 36, left: 30, width: 420, height: 32 });
+    });
+
+    mockRect(row, { top, left: 20, width: 440, height: 52 });
+    mockRect(column, { top, left: 20, width: 440, height: 52 });
+    top += 72;
+  });
+
+  return container;
+};
+
+const setMobileGridItems = (engine: FlowEngine, model: GridModel, itemUids: string[]) => {
+  (model as any).subModels = {
+    items: itemUids.map((itemUid) => engine.createModel({ use: 'FlowModel', uid: itemUid })),
+  };
+};
+
+const getSavedTopLevelItemOrder = (model: GridModel) => {
+  return Object.values(model.props.rows || {}).map((columns: string[][]) => columns[0]?.[0]);
+};
+
 describe('GridModel drag snapshot container', () => {
   let engine: FlowEngine;
 
@@ -106,6 +183,167 @@ describe('GridModel drag snapshot container', () => {
     model.handleDragCancel({} as any);
   });
 
+  it('filters multi-column drop slots from mobile drag snapshots', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-drag-slots',
+      props: {
+        rows: {
+          'row-1': [['item-1'], []],
+        },
+        sizes: {
+          'row-1': [12, 12],
+        },
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    const container = createGridContainerWithEmptyColumn();
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    const slotTypes = ((model as any).dragState?.slots || []).map((slot) => slot.type);
+    expect(slotTypes).toContain('column');
+    expect(slotTypes).toContain('row-gap');
+    expect(slotTypes).not.toContain('column-edge');
+    expect(slotTypes).not.toContain('item-edge');
+    expect(slotTypes).not.toContain('empty-column');
+    model.handleDragCancel({} as any);
+  });
+
+  it('keeps empty-row slot available for the first mobile grid item', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-empty-drag-slots',
+      props: {},
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+
+    const container = document.createElement('div');
+    mockRect(container, { top: 0, left: 0, width: 480, height: 280 });
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    expect(((model as any).dragState?.slots || []).map((slot) => slot.type)).toEqual(['empty-row']);
+    model.handleDragCancel({} as any);
+  });
+
+  it('saves mobile vertical sorting when moving the second item above the first one', () => {
+    const rows = {
+      'row-a': [['item-a']],
+      'row-b': [['item-b']],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-sort-second-above-first',
+      props: {
+        rows,
+        sizes: {
+          'row-a': [24],
+          'row-b': [24],
+        },
+        rowOrder: ['row-a', 'row-b'],
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    setMobileGridItems(engine, model, ['item-a', 'item-b']);
+    (model as any).saveStepParams = vi.fn();
+
+    const container = createProjectedMobileGridContainer(rows);
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-b' },
+      activatorEvent: { clientX: 240, clientY: 118 },
+    } as any);
+    model.handleDragEnd({
+      delta: { x: 0, y: -112 },
+    } as any);
+
+    expect(getSavedTopLevelItemOrder(model)).toEqual(['item-b', 'item-a']);
+  });
+
+  it('saves mobile vertical sorting when moving the first item below the last one', () => {
+    const rows = {
+      'row-a': [['item-a']],
+      'row-b': [['item-b']],
+      'row-c': [['item-c']],
+    };
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-mobile-sort-first-below-last',
+      props: {
+        rows,
+        sizes: {
+          'row-a': [24],
+          'row-b': [24],
+          'row-c': [24],
+        },
+        rowOrder: ['row-a', 'row-b', 'row-c'],
+      },
+      structure: {} as any,
+    });
+    model.context.defineProperty('isMobileLayout', { value: true });
+    setMobileGridItems(engine, model, ['item-a', 'item-b', 'item-c']);
+    (model as any).saveStepParams = vi.fn();
+
+    const container = createProjectedMobileGridContainer(rows);
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-a' },
+      activatorEvent: { clientX: 240, clientY: 46 },
+    } as any);
+    model.handleDragEnd({
+      delta: { x: 0, y: 184 },
+    } as any);
+
+    expect(getSavedTopLevelItemOrder(model)).toEqual(['item-b', 'item-c', 'item-a']);
+  });
+
+  it('does not filter multi-column drop slots from desktop drag snapshots', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-desktop-drag-slots',
+      props: {
+        rows: {
+          'row-1': [['item-1'], []],
+        },
+        sizes: {
+          'row-1': [12, 12],
+        },
+      },
+      structure: {} as any,
+    });
+
+    const container = createGridContainerWithEmptyColumn();
+    (model.gridContainerRef as any).current = container;
+
+    model.handleDragStart({
+      active: { id: 'item-1' },
+      activatorEvent: { clientX: 80, clientY: 80 },
+    } as any);
+
+    const slotTypes = ((model as any).dragState?.slots || []).map((slot) => slot.type);
+    expect(slotTypes).toContain('column');
+    expect(slotTypes).toContain('row-gap');
+    expect(slotTypes).toContain('column-edge');
+    expect(slotTypes).toContain('item-edge');
+    expect(slotTypes).toContain('empty-column');
+    model.handleDragCancel({} as any);
+  });
+
   it('uses native pointer position instead of scroll-adjusted drag delta', () => {
     const model = engine.createModel<GridModel>({
       use: 'GridModel',

package/src/flow/models/base/__tests__/transformRowsToSingleColumn.test.ts

@@ -35,6 +35,36 @@ describe('transformRowsToSingleColumn', () => {
     expect(all).toEqual([['a'], ['b', 'c'], ['d'], ['e']]);
   });
 
+  it('should preserve row ids for ordinary single-column mobile rows', () => {
+    const rows = {
+      row_a: [['a']],
+      row_b: [['b']],
+    };
+
+    expect(transformRowsToSingleColumn(rows)).toEqual(rows);
+  });
+
+  it('should avoid adding another mobile prefix to ordinary single-column projected rows', () => {
+    const rows = {
+      'mobile:row_a:0': [['a']],
+    };
+
+    expect(Object.keys(transformRowsToSingleColumn(rows))).toEqual(['mobile:row_a:0']);
+  });
+
+  it('should keep split multi-column row keys stable and unique', () => {
+    const rows = {
+      row_a: [['a'], ['b']],
+    };
+    const result = transformRowsToSingleColumn(rows);
+    const keys = Object.keys(result);
+
+    expect(keys).toHaveLength(2);
+    expect(new Set(keys).size).toBe(2);
+    expect(keys.every((key) => key.startsWith('mobile:'))).toBe(true);
+    expect(Object.values(result).map((row) => row[0])).toEqual([['a'], ['b']]);
+  });
+
   it('should skip columns that only contain EMPTY_COLUMN_UID', () => {
     const rows = buildRows([[[EMPTY_COLUMN_UID], ['a']]]);
     const result = transformRowsToSingleColumn(rows);
@@ -55,4 +85,22 @@ describe('transformRowsToSingleColumn', () => {
     const all = Object.values(result).map((r) => r[0]);
     expect(all).toEqual([['x'], ['y']]);
   });
+
+  it('should keep generated row keys stable for the same input', () => {
+    const rows = buildRows([
+      [['a'], ['b']],
+      [['c'], ['d']],
+    ]);
+
+    expect(Object.keys(transformRowsToSingleColumn(rows))).toEqual(Object.keys(transformRowsToSingleColumn(rows)));
+  });
+
+  it('should keep existing row keys stable when appending new mobile rows', () => {
+    const before = buildRows([[['a'], ['b']]]);
+    const after = buildRows([[['a'], ['b']], [['c']]]);
+    const beforeKeys = Object.keys(transformRowsToSingleColumn(before));
+    const afterKeys = Object.keys(transformRowsToSingleColumn(after));
+
+    expect(afterKeys.slice(0, beforeKeys.length)).toEqual(beforeKeys);
+  });
 });