@nocobase/client-v2 2.1.0-beta.30 → 2.1.0-beta.33

package/src/flow/models/fields/__tests__/ClickableFieldModel.test.ts

@@ -8,8 +8,12 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { ClickableFieldModel } from '../ClickableFieldModel';
+import { DisplayTitleFieldModel } from '../DisplayTitleFieldModel';
+import { DisplayTextFieldModel } from '../DisplayTextFieldModel';
 
 function createRolesFieldModel(sourceRecord: Record<string, any>) {
   const engine = new FlowEngine();
@@ -84,4 +88,201 @@ describe('ClickableFieldModel', () => {
       { debounce: true },
     );
   });
+
+  it('uses the parent association field when the display model is bound to the title field', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ClickableFieldModel });
+
+    const usersCollection = {
+      name: 'users',
+      filterTargetKey: 'id',
+    };
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'name',
+    };
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      targetKey: 'name',
+      type: 'belongsToMany',
+      interface: 'm2m',
+      collection: usersCollection,
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+    };
+    const titleField = {
+      name: 'title',
+      collection: rolesCollection,
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-column',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+
+    const model = engine.createModel<ClickableFieldModel>({
+      use: ClickableFieldModel,
+      uid: 'roles-title-display',
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+    model.context.defineProperty('record', { value: { id: 1 } });
+    const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      },
+      { debounce: true },
+    );
+  });
+
+  it('renders title display values as links when click-to-open is enabled', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTitleFieldModel });
+
+    const usersCollection = {
+      name: 'users',
+      filterTargetKey: 'id',
+    };
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'name',
+    };
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      targetKey: 'name',
+      type: 'belongsToMany',
+      interface: 'm2m',
+      collection: usersCollection,
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+    };
+    const titleField = {
+      name: 'title',
+      collection: rolesCollection,
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-title-column',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+
+    const model = engine.createModel<DisplayTitleFieldModel>({
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display-link',
+      props: {
+        clickToOpen: true,
+        titleField: 'name',
+        value: { name: 'admin', title: 'Admin' },
+      },
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+    model.context.defineProperty('record', { value: { id: 1 } });
+    const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+
+    render(React.createElement(React.Fragment, null, model.render()));
+    const link = screen.getByText('admin').closest('a');
+    expect(link).toBeTruthy();
+
+    fireEvent.click(link);
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      expect.objectContaining({
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      }),
+      { debounce: true },
+    );
+  });
+
+  it('renders object title field values by configured target title field', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTextFieldModel });
+
+    const model = engine.createModel<DisplayTextFieldModel>({
+      use: DisplayTextFieldModel,
+      uid: 'display-text-association-title',
+    });
+    model.context.defineProperty('collectionField', {
+      value: {
+        targetCollectionTitleFieldName: 'code',
+        isAssociationField: () => true,
+      },
+    });
+
+    render(model.renderInDisplayStyle({ id: 2, name: 'Sales', code: 'S-001' }, { id: 1 }, false));
+
+    expect(screen.getByText('S-001')).toBeInTheDocument();
+    expect(screen.queryByText('Sales')).not.toBeInTheDocument();
+  });
+
+  it('refreshes the parent column when title display click-to-open changes', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayTitleFieldModel });
+
+    const rolesField = {
+      name: 'roles',
+      target: 'roles',
+      collection: { name: 'users' },
+      targetCollection: { name: 'roles' },
+      isAssociationField: () => true,
+      getComponentProps: () => ({ titleField: 'name' }),
+    };
+    const titleField = {
+      name: 'title',
+      collection: { name: 'roles' },
+      isAssociationField: () => false,
+    };
+
+    const parent = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'roles-title-column-refresh',
+    });
+    parent.context.defineProperty('collectionField', { value: rolesField });
+    const parentSetProps = vi.spyOn(parent, 'setProps');
+    const parentRerender = vi.spyOn(parent, 'rerender').mockResolvedValue(undefined);
+
+    const model = engine.createModel<DisplayTitleFieldModel>({
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display-refresh',
+    });
+    model.setParent(parent);
+    model.context.defineProperty('collectionField', { value: titleField });
+    const modelRerender = vi.spyOn(model, 'rerender').mockResolvedValue(undefined);
+
+    const clickToOpenStep = model.getFlow('displayFieldSettings').steps.clickToOpen;
+
+    await clickToOpenStep.afterParamsSave(model.context as any, { clickToOpen: true }, { clickToOpen: false });
+
+    expect(model.props).toMatchObject({
+      clickToOpen: true,
+      titleField: 'name',
+    });
+    expect(modelRerender).toHaveBeenCalled();
+    expect(parentSetProps).toHaveBeenCalledWith({
+      __displayFieldRefreshKey: expect.any(String),
+    });
+    expect(parentRerender).toHaveBeenCalled();
+  });
 });

package/src/flow/models/fields/__tests__/DisplayEnumFieldModel.test.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 } from 'vitest';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import { DisplayEnumFieldModel } from '../DisplayEnumFieldModel';
+
+describe('DisplayEnumFieldModel', () => {
+  it('renders labels for multiple values (multipleSelect/checkboxGroup)', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayEnumFieldModel });
+
+    const model = engine.createModel<DisplayEnumFieldModel>({
+      use: DisplayEnumFieldModel,
+      uid: 'display-enum-multiple-values',
+    });
+
+    model.setProps({
+      value: ['a', 'b'],
+      options: [
+        { label: 'Option A', value: 'a' },
+        { label: 'Option B', value: 'b' },
+      ],
+    });
+
+    render(model.render());
+
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+    expect(screen.queryByText('a, b')).not.toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -13,7 +13,7 @@ import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
 export function MobileSelect(props) {
-  const { value, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -44,6 +44,7 @@ export function MobileSelect(props) {
       <div onClick={() => !disabled && setVisible(true)}>
         <Select
           {...props}
+          value={displayValue ?? value}
           open={false}
           dropdownStyle={{ display: 'none' }}
           showSearch={false}

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -178,6 +178,13 @@ describe('MobileSelect', () => {
     clickTrigger();
     expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
   });
+
+  it('prefers displayValue for trigger rendering', () => {
+    const displayValue = [{ label: 'Published', value: 'published' }];
+    renderMobileSelect({ value: ['published'], displayValue, mode: 'multiple' });
+
+    expect(mockState.selectProps?.value).toEqual(displayValue);
+  });
 });
 
 function SubTableCellHarness({ value, onCommit, mode }: { value: any; onCommit: (value: any) => void; mode?: string }) {

package/src/flow/models/utils/displayValueUtils.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 { isValidElement } from 'react';
+
+export function hasDisplayValue(value: any) {
+  return value !== undefined && value !== null && value !== '';
+}
+
+function getTitleFieldName(collectionField: any) {
+  const targetCollection = collectionField?.targetCollection;
+  return (
+    collectionField?.targetCollectionTitleFieldName ||
+    targetCollection?.titleCollectionField?.name ||
+    targetCollection?.titleField ||
+    targetCollection?.options?.titleField
+  );
+}
+
+function getTitleCollectionField(collectionField: any, titleFieldName: string) {
+  return (
+    collectionField?.targetCollection?.getField?.(titleFieldName) ||
+    collectionField?.targetCollection?.titleCollectionField
+  );
+}
+
+export function normalizeDisplayValue(value: any, options: { collectionField?: any } = {}): any {
+  if (!hasDisplayValue(value) || isValidElement(value)) {
+    return value;
+  }
+  if (['string', 'number', 'boolean'].includes(typeof value)) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    const parts = value.map((item) => normalizeDisplayValue(item, options)).filter(hasDisplayValue);
+    return parts.length ? parts.map(String).join(', ') : undefined;
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (typeof value === 'object') {
+    const titleFieldName = getTitleFieldName(options.collectionField);
+    if (titleFieldName) {
+      return normalizeDisplayValue(value[titleFieldName], {
+        collectionField: getTitleCollectionField(options.collectionField, titleFieldName),
+      });
+    }
+    return undefined;
+  }
+  return value;
+}

package/src/utils/globalDeps.ts

@@ -9,16 +9,21 @@
 
 import * as antdCssinjs from '@ant-design/cssinjs';
 import * as antdIcons from '@ant-design/icons';
+import * as antdStyle from 'antd-style';
 import * as emotionCss from '@emotion/css';
+import * as formilyAntdV5 from '@formily/antd-v5';
 import * as formilyCore from '@formily/core';
 import * as formilyReact from '@formily/react';
 import * as formilyReactive from '@formily/reactive';
 import * as formilyShared from '@formily/shared';
+import * as nocobaseEvaluators from '@nocobase/evaluators/client';
 import * as nocobaseClientUtils from '@nocobase/utils/client';
 import { dayjs } from '@nocobase/utils/client';
 import * as nocobaseFlowEngine from '@nocobase/flow-engine';
 import * as ahooks from 'ahooks';
 import * as antd from 'antd';
+import * as FileSaver from 'file-saver';
+import axios from 'axios';
 import * as i18next from 'i18next';
 import lodash from 'lodash';
 import React from 'react';
@@ -48,12 +53,14 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('antd', () => antd);
   requirejs.define('@ant-design/icons', () => antdIcons);
   requirejs.define('@ant-design/cssinjs', () => antdCssinjs);
+  requirejs.define('antd-style', () => antdStyle);
 
   // i18next
   requirejs.define('i18next', () => i18next);
   requirejs.define('react-i18next', () => reactI18next);
 
   // formily
+  requirejs.define('@formily/antd-v5', () => formilyAntdV5);
   requirejs.define('@formily/core', () => formilyCore);
   requirejs.define('@formily/react', () => formilyReact);
   requirejs.define('@formily/reactive', () => formilyReactive);
@@ -65,10 +72,14 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
+  requirejs.define('@nocobase/evaluators', () => nocobaseEvaluators);
+  requirejs.define('@nocobase/evaluators/client', () => nocobaseEvaluators);
 
   // utils
   requirejs.define('ahooks', () => ahooks);
+  requirejs.define('axios', () => axios);
   requirejs.define('dayjs', () => dayjs);
   requirejs.define('lodash', () => lodash);
   requirejs.define('@emotion/css', () => emotionCss);
+  requirejs.define('file-saver', () => FileSaver);
 }

package/src/utils/remotePlugins.ts

@@ -12,33 +12,16 @@ import type { PluginClass } from '../PluginManager';
 import type { PluginData } from '../PluginManager';
 import type { RequireJS } from './requirejs';
 
-/**
- * @internal
- */
-export function defineDevPlugins(plugins: Record<string, PluginClass>) {
-  Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(`${packageName}/client-v2`, () => plugin);
-  });
+function getClientV2ModuleId(packageName: string) {
+  return `${packageName}/client-v2`;
 }
 
 /**
  * @internal
  */
-export function definePluginClient(packageName: string) {
-  window.define(`${packageName}/client-v2`, ['exports', packageName], function (_exports: any, _pluginExports: any) {
-    Object.defineProperty(_exports, '__esModule', {
-      value: true,
-    });
-    Object.keys(_pluginExports).forEach(function (key) {
-      if (key === '__esModule') return;
-      if (key in _exports && _exports[key] === _pluginExports[key]) return;
-      Object.defineProperty(_exports, key, {
-        enumerable: true,
-        get: function () {
-          return _pluginExports[key];
-        },
-      });
-    });
+export function defineDevPlugins(plugins: Record<string, PluginClass>) {
+  Object.entries(plugins).forEach(([packageName, plugin]) => {
+    window.define(getClientV2ModuleId(packageName), () => plugin);
   });
 }
 
@@ -49,7 +32,7 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
   requirejs.requirejs.config({
     waitSeconds: 120,
     paths: pluginData.reduce<Record<string, string>>((acc, cur) => {
-      acc[cur.packageName] = cur.url;
+      acc[getClientV2ModuleId(cur.packageName)] = cur.url;
       return acc;
     }, {}),
   });
@@ -85,10 +68,7 @@ export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins
 export function getRemotePlugins(requirejs: any, pluginData: PluginData[] = []): Promise<Array<[string, PluginClass]>> {
   configRequirejs(requirejs, pluginData);
 
-  const packageNames = pluginData.map((item) => item.packageName);
-  packageNames.forEach((packageName) => {
-    definePluginClient(packageName);
-  });
+  const packageNames = pluginData.map((item) => getClientV2ModuleId(item.packageName));
 
   return new Promise((resolve, reject) => {
     requirejs.requirejs(packageNames, processRemotePlugins(pluginData, resolve), reject);