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

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

@@ -35,6 +35,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { getRowKey } from './utils';
 import { getSavedAssociationTitleField, getTableColumnSortField } from './sortUtils';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../internal/utils/rebuildFieldSubModel';
+import { getSavedDateTimeFormatParams, resolveDateTimeDisplayProps } from '../../../utils/dateTimeDisplayProps';
 
 export function FieldDeletePlaceholder(props: any) {
   const { t } = useTranslation();
@@ -128,6 +129,15 @@ export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
   );
 };
 
+const resetDateTimeDisplayProps = {
+  dateOnly: undefined,
+  dateFormat: undefined,
+  format: undefined,
+  picker: undefined,
+  showTime: undefined,
+  timeFormat: undefined,
+};
+
 export class TableColumnModel extends DisplayItemModel {
   // 标记：该类的 render 返回函数， 避免错误的reactive封装
   static renderMode: ModelRenderMode = ModelRenderMode.RenderFunction;
@@ -353,11 +363,22 @@ TableColumnModel.registerFlow({
           return;
         }
         const titleField = getSavedAssociationTitleField(ctx.model);
+        const fieldModel = Array.isArray(ctx.model.subModels.field) ? undefined : ctx.model.subModels.field;
+        const targetCollectionField = collectionField.targetCollection?.getField?.(titleField);
+        const savedDateTimeDisplayProps = getSavedDateTimeFormatParams(fieldModel)
+          ? resolveDateTimeDisplayProps({
+              model: fieldModel,
+              collectionField,
+              titleField,
+              currentProps: ctx.model.props,
+            })
+          : undefined;
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
                 ...collectionField.getComponentProps(),
-                ...collectionField.targetCollection?.getField?.(titleField)?.getComponentProps?.(),
+                ...targetCollectionField?.getComponentProps?.(),
+                ...savedDateTimeDisplayProps,
               }
             : collectionField.getComponentProps();
         ctx.model.setProps('title', collectionField.title);
@@ -539,21 +560,33 @@ TableColumnModel.registerFlow({
           typeof binding?.defaultProps === 'function'
             ? binding.defaultProps(ctx, targetCollectionField)
             : binding?.defaultProps;
+        const componentProps = targetCollectionField.getComponentProps?.() || {};
+        const nextFieldProps = {
+          ...(defaultProps || {}),
+          ...componentProps,
+          titleField: params.label,
+        };
+        const nextColumnProps = {
+          ...resetDateTimeDisplayProps,
+          ...nextFieldProps,
+        };
         if (targetUse && targetUse !== currentUse) {
           await rebuildFieldSubModel({
             parentModel: ctx.model as any,
             targetUse,
-            defaultProps,
+            defaultProps: nextFieldProps,
             fieldSettingsInit,
           });
         } else if (fieldModel) {
+          fieldModel.setProps(nextColumnProps);
           fieldModel.setStepParams('fieldSettings', 'init', fieldSettingsInit);
           await fieldModel.dispatchEvent('beforeRender', undefined, { useCache: false });
+          await fieldModel.save();
         }
         if (targetUse) {
           ctx.model.setStepParams('tableColumnSettings', 'model', { use: targetUse });
         }
-        ctx.model.setProps(targetCollectionField.getComponentProps());
+        ctx.model.setProps(nextColumnProps);
       },
       defaultParams: (ctx: any) => {
         const titleField = ctx.model?.context?.collectionField?.targetCollectionTitleFieldName;

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

@@ -13,17 +13,22 @@ import { App, ConfigProvider } from 'antd';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { ActionModel } from '../../../base/ActionModel';
-import { TableActionsColumnModel } from '../TableActionsColumnModel';
+import { TableActionsColumnModel, tableRowActionsClassName } from '../TableActionsColumnModel';
 
 const capturedDroppableUids: string[] = [];
 const capturedRendererProps: any[] = [];
 let latestOnDragEnd: ((event: any) => void) | undefined;
 const capturedDndProviders: Array<{ persist: boolean }> = [];
+const capturedAddSubModelButtonProps: any[] = [];
 
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
     ...actual,
+    AddSubModelButton: (props) => {
+      capturedAddSubModelButtonProps.push(props);
+      return <button data-testid="add-sub-model-button">{props.children}</button>;
+    },
     DndProvider: ({ children, onDragEnd, persist = true, ...restProps }) => {
       const engine = actual.useFlowEngine();
       const handleDragEnd = (event: any) => {
@@ -50,6 +55,17 @@ vi.mock('@nocobase/flow-engine', async () => {
       const ActualFlowModelRenderer = actual.FlowModelRenderer;
       return <ActualFlowModelRenderer {...props} />;
     },
+    FlowsFloatContextMenu: ({ children, extraToolbarItems = [], model }) => {
+      return (
+        <div data-test-flow-context-menu>
+          {children}
+          {extraToolbarItems.map((item) => {
+            const Component = item.component;
+            return <Component key={item.key} model={model} />;
+          })}
+        </div>
+      );
+    },
   };
 });
 
@@ -61,6 +77,10 @@ class TestAlwaysActionModel extends ActionModel {
   defaultProps: any = { type: 'link', title: 'Always' };
 }
 
+class TestTextActionModel extends ActionModel {
+  defaultProps: any = { type: 'text', title: 'Text action' };
+}
+
 // 在 beforeRender 中，根据 inputArgs（即当前行 record）决定是否隐藏按钮
 TestViewActionModel.registerFlow({
   key: 'autoHideByPhone',
@@ -158,6 +178,58 @@ describe('TableActionsColumnModel: hidden action layout', () => {
     expect(wrappers).toHaveLength(0);
     expect(secondUid).toBeTruthy();
   });
+
+  it('renders row link and text actions with compact button styles', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TableActionsColumnModel, TestViewActionModel, TestTextActionModel });
+
+    const actionsCol = engine.createModel<TableActionsColumnModel>({
+      use: 'TableActionsColumnModel',
+      props: { width: 200, title: 'Actions' },
+      subModels: { actions: [{ use: 'TestViewActionModel' }, { use: 'TestTextActionModel' }] },
+    });
+
+    const colProps = actionsCol.getColumnProps();
+    const record = { id: 1, phone: '000000' } as any;
+
+    const { container } = render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{colProps.render?.(undefined, record, 0) as any}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('View')).toBeInTheDocument();
+      expect(screen.getByText('Text action')).toBeInTheDocument();
+    });
+
+    const actions = container.querySelector('.nb-table-row-actions');
+    expect(actions).toBeInTheDocument();
+    expect(actions).toHaveClass(tableRowActionsClassName);
+
+    const linkButton = actions?.querySelector('.ant-btn-link') as HTMLButtonElement;
+    const textButton = actions?.querySelector('.ant-btn-text') as HTMLButtonElement;
+
+    expect(linkButton).toBeInTheDocument();
+    expect(textButton).toBeInTheDocument();
+    expect(linkButton).toHaveClass('nb-table-row-action-button');
+    expect(textButton).toHaveClass('nb-table-row-action-button');
+
+    const actionButtonStyleText = Array.from(document.querySelectorAll('style'))
+      .map((style) => style.textContent || '')
+      .find((styleText) => styleText.includes('.nb-table-row-action-button.ant-btn-link'));
+    expect(actionButtonStyleText).toContain(tableRowActionsClassName);
+    expect(actionButtonStyleText).toContain('font:inherit');
+    expect(actionButtonStyleText).toContain('height:auto');
+    expect(actionButtonStyleText).toContain('line-height:inherit');
+    expect(actionButtonStyleText).toContain('padding:0');
+    expect(actionButtonStyleText).toContain('border:0');
+    expect(actionButtonStyleText).toContain('box-shadow:none');
+    expect(actionButtonStyleText).not.toContain('1.5714285714285714');
+    expect(actionButtonStyleText).not.toContain('!important');
+  });
 });
 
 describe('TableActionsColumnModel: drag integration', () => {
@@ -165,6 +237,7 @@ describe('TableActionsColumnModel: drag integration', () => {
     capturedDroppableUids.length = 0;
     capturedRendererProps.length = 0;
     capturedDndProviders.length = 0;
+    capturedAddSubModelButtonProps.length = 0;
     latestOnDragEnd = undefined;
   });
 
@@ -177,6 +250,7 @@ describe('TableActionsColumnModel: drag integration', () => {
       props: { width: 200, title: 'Actions' },
       subModels: { actions: [{ use: 'TestViewActionModel' }, { use: 'TestViewActionModel' }] },
     });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
 
     const colProps = actionsCol.getColumnProps();
     const record = { id: 1, phone: '000000' } as any;
@@ -279,4 +353,40 @@ describe('TableActionsColumnModel: drag integration', () => {
 
     expect(moveModelSpy).toHaveBeenCalledWith(firstUid, secondUid, { persist: true });
   });
+
+  it('disables icon-only mode when adding row actions without icons', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TableActionsColumnModel, TestViewActionModel });
+
+    const actionsCol = engine.createModel<TableActionsColumnModel>({
+      use: 'TableActionsColumnModel',
+      props: { width: 200, title: 'Actions' },
+    });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{actionsCol.getColumnProps().title as React.ReactNode}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const addButtonProps = capturedAddSubModelButtonProps.find(
+      (props) => props.subModelKey === 'actions' && props.subModelBaseClass === 'RecordActionGroupModel',
+    );
+    expect(addButtonProps).toBeDefined();
+    expect(addButtonProps.afterSubModelInit).toBeTypeOf('function');
+
+    const actionModel = {
+      setStepParams: vi.fn(),
+    };
+    await addButtonProps.afterSubModelInit(actionModel);
+
+    expect(actionModel.setStepParams).toHaveBeenCalledWith('buttonSettings', 'general', {
+      type: 'link',
+      icon: null,
+      iconOnly: false,
+    });
+  });
 });

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

@@ -0,0 +1,127 @@
+/**
+ * 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 } from 'vitest';
+import '@nocobase/client';
+import { initDragSortParams } from '../dragSort';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel() {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+      { name: 'sort', type: 'sort', interface: 'sort' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: 'posts-table',
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+describe('TableBlockModel drag sorting settings', () => {
+  it('does not keep a deleted drag sort field in resource sort', () => {
+    const model = createTableModel();
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+    model.collection.fields.delete('sort');
+
+    initDragSortParams(model);
+
+    expect(model.getDragSortFieldName()).toBeUndefined();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('hides the drag handle when the configured sort field was deleted', () => {
+    const model = createTableModel();
+
+    model.setProps('enableRowSelection', false);
+    model.setProps('showIndex', false);
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.collection.fields.delete('sort');
+
+    expect(model.getLeftAuxiliaryColumn()).toBeNull();
+  });
+
+  it('allows clearing the configured drag sort field and restores default sorting', () => {
+    const model = createTableModel();
+    const dragSortByStep = model.getFlow('tableSettings')?.steps?.dragSortBy;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+
+    const uiMode =
+      typeof dragSortByStep?.uiMode === 'function' ? dragSortByStep.uiMode({ model, t: (key: string) => key }) : null;
+    dragSortByStep?.handler({ model }, { dragSortBy: null });
+
+    expect(uiMode).toMatchObject({
+      type: 'select',
+      key: 'dragSortBy',
+      props: {
+        allowClear: true,
+      },
+    });
+    expect(model.props.dragSortBy).toBeNull();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('ignores a deleted drag sort field submitted by settings', () => {
+    const model = createTableModel();
+    const dragSortByStep = model.getFlow('tableSettings')?.steps?.dragSortBy;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+    model.collection.fields.delete('sort');
+
+    dragSortByStep?.handler({ model }, { dragSortBy: 'sort' });
+
+    expect(model.props.dragSortBy).toBeNull();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('restores default sorting when drag sorting is disabled', () => {
+    const model = createTableModel();
+    const dragSortStep = model.getFlow('tableSettings')?.steps?.dragSort;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+
+    dragSortStep?.handler({ model }, { dragSort: false });
+
+    expect(model.props.dragSort).toBe(false);
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.mobileSettingsButtons.test.tsx

@@ -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 { FlowEngine } from '@nocobase/flow-engine';
+import '@nocobase/client';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel(options: { isMobileLayout?: boolean; flowSettingsEnabled?: boolean } = {}) {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+  engine.context.defineProperty('isMobileLayout', { value: !!options.isMobileLayout });
+  engine.context.defineProperty('flowSettingsEnabled', { value: !!options.flowSettingsEnabled });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: `posts-table-${options.isMobileLayout ? 'mobile' : 'desktop'}`,
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+function getSettingsButton(element: React.ReactElement) {
+  return element.props.children as React.ReactElement;
+}
+
+describe('TableBlockModel mobile settings buttons', () => {
+  it('renders table actions and fields settings as icon-only buttons in mobile layouts', () => {
+    const model = createTableModel({ isMobileLayout: true, flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBeNull();
+    expect(actionButton.props['aria-label']).toBe('Actions');
+    expect(fieldsButton.props.children).toBeNull();
+    expect(fieldsButton.props['aria-label']).toBe('Fields');
+    expect(addColumn?.width).toBeUndefined();
+  });
+
+  it('keeps table actions and fields settings labels outside mobile layouts', () => {
+    const model = createTableModel({ flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBe('Actions');
+    expect(fieldsButton.props.children).toBe('Fields');
+    expect(addColumn?.width).toBe(100);
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.rowSelection.test.tsx

@@ -26,6 +26,7 @@ function createTableModel() {
     fields: [
       { name: 'id', type: 'integer', interface: 'number' },
       { name: 'title', type: 'string', interface: 'input' },
+      { name: 'sort', type: 'sort', interface: 'sort' },
     ],
   });
 

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

@@ -130,9 +130,14 @@ describe('TableColumnModel sorter settings', () => {
     const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
     const setStepParams = vi.fn();
     const setProps = vi.fn();
+    const setFieldProps = vi.fn();
     const dispatchEvent = vi.fn();
+    const saveFieldModel = vi.fn();
     const targetCollectionField = {
-      getComponentProps: () => ({}),
+      getComponentProps: () => ({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+      }),
     };
 
     await titleFieldStep.beforeParamsSave(
@@ -156,8 +161,10 @@ describe('TableColumnModel sorter settings', () => {
           subModels: {
             field: {
               use: 'DisplayTextFieldModel',
+              setProps: setFieldProps,
               setStepParams,
               dispatchEvent,
+              save: saveFieldModel,
             },
           },
           setStepParams,
@@ -169,6 +176,155 @@ describe('TableColumnModel sorter settings', () => {
     );
 
     expect(setStepParams).toHaveBeenCalledWith('tableColumnSettings', 'model', { use: 'DisplayTextFieldModel' });
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(saveFieldModel).toHaveBeenCalled();
+  });
+
+  it('clears stale datetime display props when association title field changes to date only', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-date-only', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const setFieldProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateOnly: true,
+        showTime: false,
+      }),
+    };
+
+    await titleFieldStep.beforeParamsSave(
+      {
+        collectionField: {
+          isAssociationField: () => true,
+          targetCollection: {
+            name: 'departments',
+            getField: () => targetCollectionField,
+          },
+        },
+        model: {
+          collectionField: {
+            dataSourceKey: 'main',
+          },
+          constructor: {
+            getDefaultBindingByField: () => ({
+              modelName: 'DisplayDateTimeFieldModel',
+            }),
+          },
+          subModels: {
+            field: {
+              use: 'DisplayDateTimeFieldModel',
+              setProps: setFieldProps,
+              setStepParams,
+              dispatchEvent: vi.fn(),
+              save: vi.fn(),
+            },
+          },
+          setStepParams,
+          setProps,
+        },
+      },
+      { label: 'dateOnly' },
+      { label: 'time' },
+    );
+
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+  });
+
+  it('keeps saved association title datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-title-field-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    };
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Shipments',
+            name: 'shipments',
+            isAssociationField: () => true,
+            getComponentProps: () => ({
+              fieldNames: {
+                label: 'shipmentsDatetime',
+              },
+            }),
+            targetCollection: {
+              getField: () => targetCollectionField,
+            },
+          },
+        },
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'h:mm a',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD h:mm a',
+        showTime: true,
+        timeFormat: 'h:mm a',
+      }),
+    );
   });
 
   it('does not update field component setting when title field refresh fails', async () => {
@@ -203,8 +359,10 @@ describe('TableColumnModel sorter settings', () => {
             subModels: {
               field: {
                 use: 'DisplayTextFieldModel',
+                setProps: vi.fn(),
                 setStepParams: vi.fn(),
                 dispatchEvent: vi.fn().mockRejectedValue(new Error('beforeRender failed')),
+                save: vi.fn(),
               },
             },
             setStepParams,