@nocobase/client-v2 2.1.0-alpha.35 → 2.1.0-alpha.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.35",
+  "version": "2.1.0-alpha.37",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,9 +24,10 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-alpha.35",
-    "@nocobase/sdk": "2.1.0-alpha.35",
-    "@nocobase/shared": "2.1.0-alpha.35",
+    "@nocobase/evaluators": "2.1.0-alpha.37",
+    "@nocobase/flow-engine": "2.1.0-alpha.37",
+    "@nocobase/sdk": "2.1.0-alpha.37",
+    "@nocobase/shared": "2.1.0-alpha.37",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -40,5 +41,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "313a9e19e84a99924c86f9855c2ae48943f450b0"
+  "gitHead": "8b45f4586ea5b386b376188cfc1012ec12e9bc8b"
 }

package/src/__tests__/globalDeps.test.ts

@@ -25,6 +25,7 @@ describe('client-v2 defineGlobalDeps', () => {
     expect(define).toHaveBeenCalledWith('@nocobase/utils/client', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@nocobase/client-v2', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@nocobase/flow-engine', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@nocobase/evaluators/client', expect.any(Function));
     expect(define).toHaveBeenCalledWith('ahooks', expect.any(Function));
     expect(define).toHaveBeenCalledWith('dayjs', expect.any(Function));
     expect(define).toHaveBeenCalledWith('lodash', expect.any(Function));

package/src/flow/actions/__tests__/pattern.test.ts

@@ -187,4 +187,138 @@ describe('pattern action', () => {
 
     getDisplayBindingSpy.mockRestore();
   });
+
+  it('falls back to the target collection title field for association display only mode', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+    });
+
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'form-item-association',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'field-association',
+          props: {},
+        },
+      },
+    });
+    const collectionField = {
+      targetCollectionTitleFieldName: 'name',
+      isAssociationField: () => true,
+    };
+    parent.collectionField = collectionField;
+
+    await pattern.beforeParamsSave?.(
+      {
+        model: parent,
+        collectionField,
+      } as any,
+      { pattern: 'readPretty' },
+      { pattern: 'editable' },
+    );
+
+    expect(parent.props).toMatchObject({
+      pattern: 'readPretty',
+      disabled: false,
+      titleField: 'name',
+    });
+    expect(parent.getStepParams('editItemSettings', 'titleField')).toEqual({
+      titleField: 'name',
+    });
+  });
+
+  it('passes the association title field to the rebuilt display field model', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+      DummyDisplayFieldModel,
+    });
+
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'form-item-association-rebuild',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'field-association-rebuild',
+          props: {},
+        },
+      },
+    });
+    const targetTitleField = { name: 'name' };
+    const collectionField = {
+      targetCollectionTitleFieldName: 'name',
+      targetCollection: {
+        getField: vi.fn(() => targetTitleField),
+      },
+      isAssociationField: () => true,
+    };
+    parent.collectionField = collectionField;
+    const getDisplayBindingSpy = vi.spyOn(DetailsItemModel, 'getDefaultBindingByField').mockReturnValue({
+      modelName: 'DummyDisplayFieldModel',
+      defaultProps: { display: true },
+    } as any);
+
+    await pattern.afterParamsSave?.(
+      {
+        model: parent,
+        collectionField,
+        engine,
+      } as any,
+      { pattern: 'readPretty' },
+      { pattern: 'editable' },
+    );
+
+    expect(parent.subModels.field).toBeInstanceOf(DummyDisplayFieldModel);
+    expect(parent.subModels.field?.props).toMatchObject({
+      display: true,
+      titleField: 'name',
+    });
+
+    getDisplayBindingSpy.mockRestore();
+  });
+
+  it('refreshes the parent model after leaving display only mode', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      DummyFormItemModel,
+      FieldModel,
+      DummyDisplayFieldModel,
+    });
+
+    const host = engine.createModel<FlowModel>({
+      use: FlowModel,
+      uid: 'sub-table-host',
+    });
+    const parent = engine.createModel<DummyFormItemModel>({
+      use: DummyFormItemModel,
+      uid: 'sub-table-column',
+      subModels: {
+        field: {
+          use: FieldModel,
+          uid: 'sub-table-column-field',
+          stepParams: {
+            fieldBinding: {
+              use: 'DummyDisplayFieldModel',
+            },
+          },
+        },
+      },
+    });
+    parent.setParent(host);
+    const hostSetPropsSpy = vi.spyOn(host, 'setProps');
+
+    await pattern.afterParamsSave?.(makeCtx(parent), { pattern: 'editable' }, { pattern: 'readPretty' });
+
+    expect(parent.subModels.field).toBeInstanceOf(FieldModel);
+    expect(parent.subModels.field?.uid).toBe('sub-table-column-field');
+    expect(hostSetPropsSpy).toHaveBeenCalledWith({
+      __patternRefreshKey: expect.any(String),
+    });
+  });
 });

package/src/flow/actions/__tests__/titleField.test.ts

@@ -0,0 +1,45 @@
+/**
+ * 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, vi } from 'vitest';
+import { titleField } from '../titleField';
+
+describe('titleField action', () => {
+  it('builds options from target field interface metadata', () => {
+    const titleableField = {
+      name: 'nickname',
+      title: 'Nickname',
+      getInterfaceOptions: vi.fn(() => ({ titleUsable: true })),
+    };
+    const nonTitleableField = {
+      name: 'profile',
+      title: 'Profile',
+      getInterfaceOptions: vi.fn(() => ({ titleUsable: false })),
+    };
+    const missingContextManager = {
+      collectionFieldInterfaceManager: {
+        getFieldInterface: vi.fn(() => undefined),
+      },
+    };
+
+    const uiMode = (titleField as any).uiMode({
+      dataSourceManager: missingContextManager,
+      collectionField: {
+        targetCollection: {
+          getFields: () => [titleableField, nonTitleableField],
+        },
+      },
+    });
+
+    expect(uiMode.props.options).toEqual([{ value: 'nickname', label: 'Nickname' }]);
+    expect(titleableField.getInterfaceOptions).toHaveBeenCalled();
+    expect(nonTitleableField.getInterfaceOptions).toHaveBeenCalled();
+    expect(missingContextManager.collectionFieldInterfaceManager.getFieldInterface).not.toHaveBeenCalled();
+  });
+});

package/src/flow/actions/pattern.tsx

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { uid } from '@formily/shared';
 import { defineAction, tExpr } from '@nocobase/flow-engine';
 import { DetailsItemModel } from '../models/blocks/details/DetailsItemModel';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../internal/utils/rebuildFieldSubModel';
@@ -19,6 +20,14 @@ type PatternAwareFieldModel = {
   scheduleApplyJsSettings?: () => void;
 };
 
+function resolveAssociationTitleField(ctx: any) {
+  return (
+    ctx.model.subModels?.field?.props?.fieldNames?.label ||
+    ctx.model.props.titleField ||
+    ctx.collectionField?.targetCollectionTitleFieldName
+  );
+}
+
 function shouldPreserveFieldModelOnPatternChange(ctx: any) {
   const fieldModel = ctx.model.subModels.field;
   const fieldUse = getFieldBindingUse(fieldModel) ?? fieldModel?.use;
@@ -27,6 +36,22 @@ function shouldPreserveFieldModelOnPatternChange(ctx: any) {
   return ((ModelClass?.meta as PatternAwareFieldModelMeta | undefined)?.preserveOnPatternChange ?? false) === true;
 }
 
+async function refreshPatternRuntime(ctx: any) {
+  ctx.model.invalidateFlowCache?.('beforeRender', true);
+  await ctx.model.rerender?.();
+
+  const parent = ctx.model.parent;
+  if (!parent) {
+    return;
+  }
+
+  parent.invalidateFlowCache?.('beforeRender', true);
+  parent.setProps?.({
+    __patternRefreshKey: uid(),
+  });
+  await parent.rerender?.();
+}
+
 export const pattern = defineAction({
   name: 'pattern',
   title: tExpr('Display mode'),
@@ -76,17 +101,25 @@ export const pattern = defineAction({
       if (params.pattern !== previousParams.pattern) {
         (ctx.model.subModels.field as PatternAwareFieldModel | undefined)?.scheduleApplyJsSettings?.();
       }
+      await refreshPatternRuntime(ctx);
       return;
     }
 
     const targetCollection = ctx.collectionField.targetCollection;
-    const targetCollectionTitleField = targetCollection?.getField(
-      ctx.model.subModels.field.props?.fieldNames?.label || ctx.model.props.titleField,
-    );
+    const associationTitleField = resolveAssociationTitleField(ctx);
+    const targetCollectionTitleField = targetCollection?.getField(associationTitleField);
     const { model } = ctx;
     const resolveDefaultProps = (binding, field = ctx.collectionField) => {
       if (!binding) return undefined;
-      return typeof binding.defaultProps === 'function' ? binding.defaultProps(ctx, field) : binding.defaultProps;
+      const defaultProps =
+        typeof binding.defaultProps === 'function' ? binding.defaultProps(ctx, field) : binding.defaultProps;
+      if (!ctx.collectionField?.isAssociationField?.() || !associationTitleField) {
+        return defaultProps;
+      }
+      return {
+        ...(defaultProps || {}),
+        titleField: associationTitleField,
+      };
     };
     if (params.pattern === 'readPretty') {
       const binding = DetailsItemModel.getDefaultBindingByField(ctx, ctx.collectionField, {
@@ -111,17 +144,19 @@ export const pattern = defineAction({
         });
       }
     }
+    await refreshPatternRuntime(ctx);
   },
   async beforeParamsSave(ctx, params, previousParams) {
     if (params.pattern === 'readPretty') {
+      const titleField = resolveAssociationTitleField(ctx);
       ctx.model.setProps({
         pattern: 'readPretty',
         disabled: false,
-        titleField: (ctx.model.subModels?.field as any)?.props.fieldNames?.label || ctx.model.props.titleField,
+        titleField,
       });
       if (ctx.collectionField.isAssociationField())
         await ctx.model.setStepParams('editItemSettings', 'titleField', {
-          titleField: (ctx.model.subModels.field as any).props?.fieldNames?.label || ctx.model.props.titleField,
+          titleField,
         });
     } else {
       ctx.model.setProps({

package/src/flow/actions/titleField.tsx

@@ -43,7 +43,9 @@ export const titleField = defineAction({
     const options = targetFields
       .filter((field) =>
         isTitleFieldInterface(
-          getFlowFieldInterfaceOptions(field.options?.interface || field.interface, dataSourceManager),
+          typeof field.getInterfaceOptions === 'function'
+            ? field.getInterfaceOptions()
+            : getFlowFieldInterfaceOptions(field.options?.interface || field.interface, dataSourceManager),
         ),
       )
       .map((field) => ({

package/src/flow/components/DynamicFlowsIcon.tsx

@@ -28,6 +28,9 @@ import {
   GLOBAL_EMBED_CONTAINER_ID,
   EMBED_REPLACING_DATA_KEY,
   shouldHideEventInSettings,
+  DetachedFlowRegistry,
+  replaceFlowRegistry,
+  serializeFlowRegistry,
 } from '@nocobase/flow-engine';
 import { Collapse, Input, Button, Space, Tooltip, Empty, Dropdown, Select } from 'antd';
 import { uid } from '@formily/shared';
@@ -35,6 +38,9 @@ import { useUpdate } from 'ahooks';
 import _ from 'lodash';
 
 type FlowOnObject = Exclude<FlowDefinition['on'], string | undefined>;
+type FlowRegistryAvailability = {
+  hasFlow(flowKey: string): boolean;
+};
 
 function isFlowOnObject(on: FlowDefinition['on']): on is FlowOnObject {
   return !!on && typeof on === 'object';
@@ -93,7 +99,7 @@ function validateFlowOnPhase(onObj: FlowOnObject): 'flowKey' | 'stepKey' | undef
 
 export const DynamicFlowsIcon: React.FC<{ model: FlowModel }> = (props) => {
   const { model } = props;
-  const t = model.translate.bind(model);
+  const t = React.useMemo(() => model.translate.bind(model), [model]);
 
   const handleClick = () => {
     const target = document.querySelector<HTMLDivElement>(`#${GLOBAL_EMBED_CONTAINER_ID}`);
@@ -190,7 +196,17 @@ const FieldLabel = ({
 
 // 事件配置组件 - 独立的 observer 组件确保响应式更新
 const EventConfigSection = observer(
-  ({ flow, model, flowEngine }: { flow: FlowDefinition; model: FlowModel; flowEngine: any }) => {
+  ({
+    flow,
+    model,
+    flowEngine,
+    flowRegistry,
+  }: {
+    flow: FlowDefinition;
+    model: FlowModel;
+    flowEngine: any;
+    flowRegistry: FlowRegistryAvailability;
+  }) => {
     const ctx = useFlowContext<FlowEngineContext>();
     const t = model.translate.bind(model);
     const refresh = useUpdate();
@@ -270,9 +286,9 @@ const EventConfigSection = observer(
       return staticFlows.map((f) => ({
         value: f.key,
         label: formatKeyWithTitle(String(f.key), f.title),
-        disabled: model.flowRegistry.hasFlow(f.key),
+        disabled: flowRegistry.hasFlow(f.key),
       }));
-    }, [formatKeyWithTitle, model.flowRegistry, staticFlows]);
+    }, [flowRegistry, formatKeyWithTitle, staticFlows]);
 
     const stepOptions = React.useMemo(() => {
       if (!flowKeyValue) return [];
@@ -446,12 +462,58 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
   const { model } = props;
   const ctx = useFlowContext<FlowEngineContext>();
   const flowEngine = model.flowEngine;
+  const latestFlows = serializeFlowRegistry(model.flowRegistry);
+  const initialFlowsRef = React.useRef(latestFlows);
+  const [draftFlowRegistry] = React.useState(() => new DetachedFlowRegistry(latestFlows));
   const [submitLoading, setSubmitLoading] = React.useState(false);
-  const t = model.translate.bind(model);
+  const t = React.useMemo(() => model.translate.bind(model), [model]);
+  const hasUnsavedChanges = React.useCallback(() => {
+    return !_.isEqual(initialFlowsRef.current, serializeFlowRegistry(draftFlowRegistry));
+  }, [draftFlowRegistry]);
+
+  React.useEffect(() => {
+    if (_.isEqual(initialFlowsRef.current, latestFlows) || hasUnsavedChanges()) {
+      return;
+    }
+
+    replaceFlowRegistry(draftFlowRegistry, latestFlows);
+    initialFlowsRef.current = latestFlows;
+  }, [draftFlowRegistry, hasUnsavedChanges, latestFlows]);
+
+  React.useEffect(() => {
+    const view = ctx.view;
+    const previousBeforeClose = view.beforeClose;
+    const beforeClose = async (payload) => {
+      if (hasUnsavedChanges()) {
+        const confirmed =
+          (await ctx.modal?.confirm?.({
+            title: t('Unsaved changes'),
+            content: t("Are you sure you don't want to save?"),
+            okText: t('Confirm'),
+            cancelText: t('Cancel'),
+          })) ?? true;
+
+        if (!confirmed) {
+          return false;
+        }
+      }
+
+      const result = await previousBeforeClose?.(payload);
+      return result !== false;
+    };
+
+    view.beforeClose = beforeClose;
+
+    return () => {
+      if (view.beforeClose === beforeClose) {
+        view.beforeClose = previousBeforeClose;
+      }
+    };
+  }, [ctx, hasUnsavedChanges, t]);
 
   // 添加新流
   const handleAddFlow = () => {
-    model.flowRegistry.addFlow(uid(), {
+    draftFlowRegistry.addFlow(uid(), {
       title: t('Event flow'),
       steps: {},
     });
@@ -516,7 +578,7 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
   );
 
   // 生成折叠面板项
-  const collapseItems = model.flowRegistry.mapFlows((flow) => {
+  const collapseItems = draftFlowRegistry.mapFlows((flow) => {
     return {
       key: flow.key,
       label: renderPanelHeader(flow),
@@ -529,7 +591,7 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
       children: (
         <div>
           {/* 事件部分 */}
-          <EventConfigSection flow={flow} model={model} flowEngine={flowEngine} />
+          <EventConfigSection flow={flow} model={model} flowEngine={flowEngine} flowRegistry={draftFlowRegistry} />
 
           {/* 步骤部分 */}
           <div>
@@ -670,13 +732,13 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
           flexShrink: 0,
         }}
       >
-        <Button onClick={() => ctx.view.destroy()}>{t('Cancel')}</Button>
+        <Button onClick={() => ctx.view.close()}>{t('Cancel')}</Button>
         <Button
           type="primary"
           loading={submitLoading}
           onClick={async () => {
             setSubmitLoading(true);
-            const invalid = model.flowRegistry
+            const invalid = draftFlowRegistry
               .mapFlows((flow) => {
                 if (!isFlowOnObject(flow.on)) return;
                 normalizeFlowOnPhase(flow.on);
@@ -695,10 +757,11 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
               setSubmitLoading(false);
               return;
             }
-            try {
-              const afterSaves: Array<() => Promise<void>> = [];
+            const previousFlows = serializeFlowRegistry(model.flowRegistry);
+            const afterSaves: Array<() => Promise<void>> = [];
 
-              for (const flow of model.flowRegistry.mapFlows((it) => it)) {
+            try {
+              for (const flow of draftFlowRegistry.mapFlows((it) => it)) {
                 for (const step of flow.mapSteps((it) => it)) {
                   const serialized = step.serialize();
                   const actionDef = step.use ? model.getAction(step.use) : undefined;
@@ -731,8 +794,19 @@ const DynamicFlowsEditor = observer((props: { model: FlowModel }) => {
                 }
               }
 
+              replaceFlowRegistry(model.flowRegistry, serializeFlowRegistry(draftFlowRegistry));
               await model.flowRegistry.save();
+            } catch (error) {
+              replaceFlowRegistry(model.flowRegistry, previousFlows);
+              setSubmitLoading(false);
+              model.context?.message?.error?.('Steps post-save hooks failed to run');
+              console.error(error);
+              return;
+            }
 
+            initialFlowsRef.current = serializeFlowRegistry(model.flowRegistry);
+
+            try {
               for (const runAfterSave of afterSaves) {
                 await runAfterSave();
               }