@nocobase/client-v2 2.2.0-beta.7 → 2.2.0-beta.9

package/src/flow/models/blocks/js-block/__tests__/JSBlockModel.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 React from 'react';
+import { App, ConfigProvider } from 'antd';
+import { render } from '@nocobase/test/client';
+import { describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { JSBlockModel } from '../JSBlock';
+
+function createJSBlock(uid: string, showBlockCard?: boolean, decoratorProps?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JSBlockModel });
+  const model = engine.createModel<JSBlockModel>({
+    use: 'JSBlockModel',
+    uid,
+    stepParams:
+      typeof showBlockCard === 'boolean'
+        ? {
+            jsSettings: {
+              showBlockCard: {
+                showBlockCard,
+              },
+            },
+          }
+        : undefined,
+  });
+  model.setDecoratorProps({
+    className: 'custom-js-block-shell',
+    style: {
+      minHeight: 120,
+    },
+    ...(decoratorProps || {}),
+  });
+  return { engine, model };
+}
+
+function renderBlock(engine: FlowEngine, model: JSBlockModel) {
+  return render(
+    <FlowEngineProvider engine={engine}>
+      <ConfigProvider>
+        <App>{model.render()}</App>
+      </ConfigProvider>
+    </FlowEngineProvider>,
+  );
+}
+
+describe('JSBlockModel', () => {
+  it('renders with the outer block card by default', () => {
+    const { engine, model } = createJSBlock('js-block-with-card');
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-with-card');
+
+    expect(host).toBeTruthy();
+    expect(host?.classList.contains('ant-card')).toBe(true);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+  });
+
+  it('renders a plain host without the outer card when showBlockCard is false', () => {
+    const { engine, model } = createJSBlock('js-block-without-card', false, {
+      showCard: true,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card') as HTMLElement | null;
+
+    expect(container.querySelector('.ant-card')).toBeNull();
+    expect(host).toBeInstanceOf(HTMLDivElement);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+    expect(host?.style.minHeight).toBe('120px');
+    expect(model.context.ref.current).toBe(host?.firstElementChild);
+  });
+
+  it('keeps cardless specified-height content scrollable inside the plain host', () => {
+    const { engine, model } = createJSBlock('js-block-without-card-height', false, {
+      heightMode: 'specifyValue',
+      height: 80,
+      style: undefined,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card-height') as HTMLElement | null;
+    const overflowContent = document.createElement('div');
+    overflowContent.style.height = '200px';
+    model.context.ref.current?.appendChild(overflowContent);
+
+    expect(host?.style.height).toBe('80px');
+    expect(host?.style.minHeight).toBe('0');
+    expect(host?.style.overflow).toBe('auto');
+    expect(model.context.ref.current?.firstElementChild).toBe(overflowContent);
+  });
+
+  it('calculates cardless full-height on the plain host', () => {
+    const originalInnerHeight = window.innerHeight;
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 500,
+    });
+    const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      if ((this as HTMLElement).id === 'model-js-block-without-card-full-height') {
+        return {
+          x: 0,
+          y: 150,
+          top: 150,
+          left: 0,
+          bottom: 150,
+          right: 0,
+          width: 0,
+          height: 0,
+          toJSON: () => ({}),
+        } as DOMRect;
+      }
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        toJSON: () => ({}),
+      } as DOMRect;
+    });
+
+    try {
+      const { engine, model } = createJSBlock('js-block-without-card-full-height', false, {
+        heightMode: 'fullHeight',
+        style: undefined,
+      });
+      const { container } = renderBlock(engine, model);
+      const host = container.querySelector('#model-js-block-without-card-full-height') as HTMLElement | null;
+
+      expect(parseInt(host?.style.height || '0', 10)).toBeGreaterThan(0);
+      expect(host?.style.overflow).toBe('auto');
+    } finally {
+      rectSpy.mockRestore();
+      Object.defineProperty(window, 'innerHeight', {
+        configurable: true,
+        value: originalInnerHeight,
+      });
+    }
+  });
+});

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

@@ -22,6 +22,7 @@ import {
   observer,
 } from '@nocobase/flow-engine';
 import { Skeleton, Tooltip } from 'antd';
+import classNames from 'classnames';
 import React from 'react';
 import { ActionModel } from '../../base/ActionModel';
 import { TableCustomColumnModel } from './TableCustomColumnModel';
@@ -33,6 +34,33 @@ const rowActionButtonTypeOptions = [
   { value: 'link', label: '{{t("Link")}}' },
   { value: 'text', label: '{{t("Text")}}' },
 ];
+export const tableRowActionsClassName = css`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: inherit;
+  > div:empty {
+    display: none;
+  }
+
+  .nb-table-row-action-button.ant-btn-link,
+  .nb-table-row-action-button.ant-btn-text {
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    height: auto;
+    line-height: inherit;
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+    vertical-align: baseline;
+  }
+
+  .nb-table-row-action-button.ant-btn-link > span,
+  .nb-table-row-action-button.ant-btn-text > span {
+    line-height: inherit;
+  }
+`;
 
 const Columns = observer<any>(({ record, model, index }) => {
   const isConfigMode = !!model.context.flowSettingsEnabled;
@@ -42,17 +70,7 @@ const Columns = observer<any>(({ record, model, index }) => {
     <DndProvider>
       <div
         style={{ gap: model.context?.themeToken?.marginSM ?? 16 }}
-        className={css`
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          > div:empty {
-            display: none;
-          }
-          button {
-            padding: 0;
-          }
-        `}
+        className={`nb-table-row-actions ${tableRowActionsClassName}`}
       >
         {model.mapSubModels('actions', (action: ActionModel) => {
           // Static hidden can be skipped safely; dynamic hidden is handled by fork.beforeRender + model.render wrapper.
@@ -68,7 +86,12 @@ const Columns = observer<any>(({ record, model, index }) => {
             cachedFork.dispose();
           }
 
-          const fork = action.createFork({}, slotKey);
+          const fork = action.createFork(
+            {
+              className: classNames(action.props?.className, 'nb-table-row-action-button'),
+            },
+            slotKey,
+          );
           (fork as any).buttonTypeOptions = rowActionButtonTypeOptions;
           recordIdentityByFork.set(fork, recordIdentity);
 

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

@@ -55,6 +55,7 @@ import {
   useDragSortRowComponent,
   dragSortSettings,
   dragSortBySettings,
+  hasSortField,
 } from './dragSort';
 
 const MemoizedTable = React.memo(Table);
@@ -429,9 +430,18 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     return nextIndex;
   }
 
+  getDragSortFieldName(): string | undefined {
+    const dragSortBy = this.props.dragSortBy;
+    if (!this.props.dragSort || typeof dragSortBy !== 'string' || !hasSortField(this.collection, dragSortBy)) {
+      return undefined;
+    }
+
+    return dragSortBy;
+  }
+
   getLeftAuxiliaryColumn() {
     const showIndex = this.isShowIndexEnabled();
-    const showDragHandle = this.props.dragSort && this.props.dragSortBy;
+    const showDragHandle = !!this.getDragSortFieldName();
     if (!showIndex && !showDragHandle) {
       return null;
     }
@@ -477,7 +487,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     index = this.getRecordIndex(record, index);
     const rowKey = getRowKey(record, this.collection.filterTargetKey);
     const rowKeyString = rowKey == null ? rowKey : String(rowKey);
-    const showDragHandle = this.props.dragSort && this.props.dragSortBy;
+    const showDragHandle = !!this.getDragSortFieldName();
     return (
       <div
         role="button"
@@ -1082,11 +1092,13 @@ const HighPerformanceTable = React.memo(
       };
     }, [rowKeys]);
 
+    const dragSortFieldName = model.getDragSortFieldName();
+
     // 拖拽相关的 Body Wrapper 组件
-    const BodyWrapperComponent = useDragSortBodyWrapper(model, dataSourceRef, getRowKeyFunc);
+    const BodyWrapperComponent = useDragSortBodyWrapper(model, dataSourceRef, getRowKeyFunc, dragSortFieldName);
 
     // 行组件
-    const RowComponent = useDragSortRowComponent(model.props.dragSort);
+    const RowComponent = useDragSortRowComponent(!!dragSortFieldName);
 
     const components = useMemo(() => {
       return {
@@ -1109,15 +1121,14 @@ const HighPerformanceTable = React.memo(
         }
       `;
 
-      const selectionPaddingClass =
-        model.props.dragSort && model.props.dragSortBy
-          ? css`
-              .ant-table-thead > tr > th.ant-table-selection-column,
-              .ant-table-tbody > tr > td.ant-table-selection-column {
-                padding-left: 32px !important;
-              }
-            `
-          : undefined;
+      const selectionPaddingClass = dragSortFieldName
+        ? css`
+            .ant-table-thead > tr > th.ant-table-selection-column,
+            .ant-table-tbody > tr > td.ant-table-selection-column {
+              padding-left: 32px !important;
+            }
+          `
+        : undefined;
 
       const tableBodyMinHeightClass = tableScroll?.y
         ? css`
@@ -1128,7 +1139,7 @@ const HighPerformanceTable = React.memo(
         : undefined;
 
       return classNames(baseClass, selectionPaddingClass, tableBodyMinHeightClass);
-    }, [model.props.dragSort, model.props.dragSortBy, tableScroll?.y]);
+    }, [dragSortFieldName, tableScroll?.y]);
 
     return (
       <MemoizedTable

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

@@ -373,14 +373,18 @@ TableColumnModel.registerFlow({
               currentProps: ctx.model.props,
             })
           : undefined;
+        const collectionFieldComponentProps = collectionField.getComponentProps();
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
-                ...collectionField.getComponentProps(),
+                ...collectionFieldComponentProps,
                 ...targetCollectionField?.getComponentProps?.(),
                 ...savedDateTimeDisplayProps,
               }
-            : collectionField.getComponentProps();
+            : {
+                ...collectionFieldComponentProps,
+                ...savedDateTimeDisplayProps,
+              };
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
         // for quick edit

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

@@ -13,7 +13,7 @@ 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[] = [];
@@ -77,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',
@@ -174,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', () => {

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.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

@@ -327,6 +327,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);