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

package/src/flow/components/__tests__/DynamicFlowsIcon.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
-import { FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID } from '@nocobase/flow-engine';
+import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID } from '@nocobase/flow-engine';
 import { DynamicFlowsIcon } from '../DynamicFlowsIcon';
 
 const mockState = vi.hoisted(() => ({
@@ -30,15 +30,31 @@ vi.mock('antd', async (importOriginal) => {
   const actual = await importOriginal<typeof import('antd')>();
   return {
     ...actual,
-    Button: ({ children, onClick, ...props }: any) => (
+    Button: ({ children, onClick, icon: _icon, loading: _loading, ...props }: any) => (
       <button type="button" onClick={onClick} {...props}>
         {children}
       </button>
     ),
     Collapse: ({ items }: any) => (
-      <div data-testid="collapse">{items?.map((item: any) => <div key={item.key}>{item.children}</div>)}</div>
+      <div data-testid="collapse">
+        {items?.map((item: any) => (
+          <div key={item.key}>
+            {item.label}
+            {item.children}
+          </div>
+        ))}
+      </div>
+    ),
+    Dropdown: ({ children, menu }: any) => (
+      <div>
+        {children}
+        {menu?.items?.map((item: any) => (
+          <button key={item.key} type="button" onClick={item.onClick}>
+            {item.label}
+          </button>
+        ))}
+      </div>
     ),
-    Dropdown: ({ children }: any) => <div>{children}</div>,
     Empty: ({ description }: any) => <div>{description}</div>,
     Input: (props: any) => <input {...props} />,
     Select: (props: any) => {
@@ -70,10 +86,16 @@ const openDynamicFlowsEditor = async (model: FlowModel) => {
   const embedCall = (model.context.viewer.embed as any).mock.calls.at(-1)?.[0];
   expect(embedCall?.content).toBeTruthy();
 
-  render(embedCall.content);
+  const editor = render(embedCall.content);
+
+  return {
+    embedCall,
+    view: mockState.flowContextValue.view,
+    editor,
+  };
 };
 
-const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean } = {}) => {
+const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean; saveStepParams?: any } = {}) => {
   const engine = new FlowEngine();
   engine.translate = vi.fn((key: string) => key) as any;
   engine.flowSettings.renderStepForm = vi.fn(() => null) as any;
@@ -95,6 +117,14 @@ const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean }
       handler: vi.fn(),
     },
   });
+  LocalTestModel.registerActions({
+    notify: {
+      name: 'notify',
+      title: 'Notify',
+      scene: ActionScene.DYNAMIC_EVENT_FLOW,
+      handler: vi.fn(),
+    },
+  });
 
   const model = new LocalTestModel({
     uid: `test-model-${Math.random().toString(36).slice(2, 8)}`,
@@ -122,17 +152,55 @@ const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean }
       destroy: vi.fn(),
     },
   });
+  model.context.defineProperty('message', {
+    value: {
+      error: vi.fn(),
+      success: vi.fn(),
+    },
+  });
+  vi.spyOn(model, 'saveStepParams').mockImplementation(options.saveStepParams || vi.fn(async () => undefined));
 
   return model;
 };
 
+const createView = () => {
+  let destroyed = false;
+  let closingPromise: Promise<boolean | void> | undefined;
+  const view = {
+    close: vi.fn(function () {
+      if (destroyed) {
+        return Promise.resolve(true);
+      }
+      if (closingPromise) {
+        return closingPromise;
+      }
+      closingPromise = (async () => {
+        const allowed = await view.beforeClose?.({});
+        if (allowed === false) {
+          closingPromise = undefined;
+          return false;
+        }
+        view.destroy();
+        return true;
+      })();
+      return closingPromise;
+    }),
+    destroy: vi.fn(() => {
+      destroyed = true;
+    }),
+    beforeClose: undefined as any,
+  };
+  return view;
+};
+
 describe('DynamicFlowsIcon', () => {
   beforeEach(() => {
     mockState.capturedSelectProps.length = 0;
     mockState.flowContextValue = {
-      view: {
-        destroy: vi.fn(),
+      modal: {
+        confirm: vi.fn(),
       },
+      view: createView(),
     };
     document.body.innerHTML = `<div id="${GLOBAL_EMBED_CONTAINER_ID}"></div>`;
   });
@@ -190,4 +258,123 @@ describe('DynamicFlowsIcon', () => {
       expect(screen.getByTestId('collapse')).toBeInTheDocument();
     });
   });
+
+  it('keeps added event flows in draft until saved', async () => {
+    const model = createModel();
+
+    await openDynamicFlowsEditor(model);
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+
+    expect(model.flowRegistry.getFlows().size).toBe(1);
+    expect(model.flowRegistry.hasFlow('flow1')).toBe(true);
+  });
+
+  it('blocks cancel when draft has unsaved changes and confirmation is rejected', async () => {
+    const model = createModel();
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(false);
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(mockState.flowContextValue.modal.confirm).toHaveBeenCalledWith({
+      title: 'Unsaved changes',
+      content: "Are you sure you don't want to save?",
+      okText: 'Confirm',
+      cancelText: 'Cancel',
+    });
+    expect(view.destroy).not.toHaveBeenCalled();
+    expect(model.flowRegistry.getFlows().size).toBe(1);
+  });
+
+  it('runs only one unsaved confirmation while cancel is pending', async () => {
+    const model = createModel();
+    let resolveConfirm: (value: boolean) => void;
+    mockState.flowContextValue.modal.confirm.mockImplementation(
+      () => new Promise<boolean>((resolve) => (resolveConfirm = resolve)),
+    );
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    await userEvent.click(cancelButton);
+    await userEvent.click(cancelButton);
+
+    expect(mockState.flowContextValue.modal.confirm).toHaveBeenCalledTimes(1);
+
+    resolveConfirm(true);
+    await waitFor(() => expect(view.destroy).toHaveBeenCalledTimes(1));
+  });
+
+  it('discards draft changes after confirmed cancel', async () => {
+    const model = createModel();
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(true);
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlows().size).toBe(1);
+    expect(model.flowRegistry.hasFlow('flow1')).toBe(true);
+  });
+
+  it('discards existing event flow edits after confirmed cancel', async () => {
+    const model = createModel();
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(true);
+    const { view } = await openDynamicFlowsEditor(model);
+
+    const titleInput = screen.getByPlaceholderText('Enter flow title');
+    await userEvent.clear(titleInput);
+    await userEvent.type(titleInput, 'Changed flow');
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlow('flow1')?.title).toBe('Event flow');
+  });
+
+  it('discards added draft steps after confirmed cancel', async () => {
+    const model = createModel();
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(true);
+    const { view } = await openDynamicFlowsEditor(model);
+
+    expect(model.flowRegistry.getFlow('flow1')?.getSteps().size).toBe(0);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Notify' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlow('flow1')?.getSteps().size).toBe(0);
+  });
+
+  it('does not keep discarded draft changes after reopening the editor', async () => {
+    const model = createModel();
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(true);
+
+    const firstEditor = await openDynamicFlowsEditor(model);
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    firstEditor.editor.unmount();
+
+    mockState.capturedSelectProps.length = 0;
+    mockState.flowContextValue.view = createView();
+    const secondEditor = await openDynamicFlowsEditor(model);
+
+    expect(secondEditor.editor.container.querySelectorAll('input[placeholder="Enter flow title"]')).toHaveLength(1);
+    expect(model.flowRegistry.getFlows().size).toBe(1);
+  });
+
+  it('saves draft event flows into the real registry', async () => {
+    const saveStepParams = vi.fn(async () => undefined);
+    const model = createModel({ saveStepParams });
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(saveStepParams).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlows().size).toBe(2);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.context.message.success).toHaveBeenCalledWith('Configuration saved');
+  });
 });

package/src/flow/components/code-editor/index.tsx

@@ -42,6 +42,7 @@ interface CodeEditorProps {
   language?: string;
   scene?: string | string[];
   RightExtra?: React.FC<any>;
+  showLogs?: boolean;
 }
 
 export * from './types';
@@ -64,6 +65,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   language,
   scene,
   RightExtra,
+  showLogs = true,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -249,14 +251,16 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
         completionSource={completionSource}
         viewRef={viewRef}
       />
-      <LogsPanel
-        logs={logs}
-        onJumpTo={(line, column) => {
-          const view = viewRef.current;
-          if (view) jumpTo(view, line, column);
-        }}
-        tr={tr}
-      />
+      {showLogs ? (
+        <LogsPanel
+          logs={logs}
+          onJumpTo={(line, column) => {
+            const view = viewRef.current;
+            if (view) jumpTo(view, line, column);
+          }}
+          tr={tr}
+        />
+      ) : null}
       <SnippetsDrawer
         open={snippetOpen}
         onClose={() => setSnippetOpen(false)}

package/src/flow/models/blocks/form/FormActionModel.tsx

@@ -94,8 +94,6 @@ FormSubmitActionModel.registerFlow({
           ctx.model.setProps('loading', true);
           const { submitHandler } = await import('./submitHandler');
           await submitHandler(ctx, params);
-          ctx.message.success(ctx.t('Saved successfully'));
-          ctx.model.setProps('loading', false);
         } catch (error) {
           ctx.model.setProps('loading', false);
           // 显示保存失败提示
@@ -107,12 +105,8 @@ FormSubmitActionModel.registerFlow({
         }
       },
     },
-    refreshAndClose: {
-      async handler(ctx) {
-        if (ctx.view) {
-          ctx.view.close();
-        }
-      },
+    afterSuccess: {
+      use: 'afterSuccess',
     },
   },
 });

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -32,9 +32,11 @@ import { ErrorBoundary } from 'react-error-boundary';
 import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
+import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
 import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
+import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
 
 export const SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT = 'subTableColumn';
 
@@ -218,6 +220,41 @@ function shouldCommitImmediately(value: any) {
   return false;
 }
 
+export function isSubTableColumnReadPretty(parent: any) {
+  return !!parent?.props?.readPretty || parent?.props?.pattern === 'readPretty';
+}
+
+export function isSubTableColumnConfiguredReadPretty(parent: any) {
+  return (
+    isSubTableColumnReadPretty(parent) ||
+    parent?.getStepParams?.('subTableColumnSettings', 'pattern')?.pattern === 'readPretty'
+  );
+}
+
+export function getSubTableColumnTitleField(parent: any) {
+  return (
+    parent?.props?.titleField ||
+    parent?.subModels?.field?.props?.titleField ||
+    parent?.subModels?.field?.props?.fieldNames?.label ||
+    parent?.collectionField?.targetCollectionTitleFieldName
+  );
+}
+
+export function getSubTableColumnReadPrettyFieldProps(parent: any, value: any) {
+  const fieldProps: Record<string, any> = { value };
+  const titleField = getSubTableColumnTitleField(parent);
+  const fieldNames = parent?.props?.fieldNames || parent?.subModels?.field?.props?.fieldNames;
+
+  if (titleField) {
+    fieldProps.titleField = titleField;
+  }
+  if (fieldNames) {
+    fieldProps.fieldNames = fieldNames;
+  }
+
+  return fieldProps;
+}
+
 const FieldModelRendererOptimize = React.memo((props: any) => {
   const { model, onChange, value, commitOnChange, ...rest } = props;
   const pendingValueRef = React.useRef<any>(props?.value);
@@ -337,8 +374,8 @@ const MemoCell: React.FC<CellProps> = React.memo(
             });
           }
 
-          if (parent.props.readPretty) {
-            fork.setProps({ value });
+          if (isSubTableColumnReadPretty(parent)) {
+            fork.setProps(getSubTableColumnReadPrettyFieldProps(parent, value));
             return <React.Fragment key={id}>{fork.render()}</React.Fragment>;
           }
 
@@ -598,6 +635,24 @@ export class SubTableColumnModel<
         (this.parent as any)?.collection?.filterTargetKey ?? (this.parent as any)?.context?.collection?.filterTargetKey;
       const rowIdentity = getSubTableRowIdentity(record, filterTargetKey) ?? `row:${String(rowIdx)}`;
       const rowForkKey = `row:${baseIndexKey}:${rowIdentity}:${String(rowIdx)}`;
+      const fieldModel: any = this.subModels.field;
+      const cellModeKey = [
+        rowForkKey,
+        this.props.pattern,
+        this.props.readPretty,
+        this.props.titleField,
+        this.props.__displayFieldRefreshKey,
+        fieldModel?.uid,
+        fieldModel?.use,
+        fieldModel?.constructor?.name,
+        fieldModel?.props?.clickToOpen,
+        fieldModel?.props?.displayStyle,
+        fieldModel?.props?.overflowMode,
+        fieldModel?.props?.titleField,
+        fieldModel?.props?.fieldNames?.label,
+      ]
+        .filter((item) => item !== undefined && item !== null)
+        .join(':');
       const rowFork: any = (() => {
         const fork = this.createFork({}, rowForkKey);
         fork.context.defineProperty('subTableRowFork', {
@@ -651,7 +706,7 @@ export class SubTableColumnModel<
           parentFieldIndex={baseArr}
           parentItem={parentItem}
           rowFork={rowFork}
-          memoKey={rowForkKey}
+          memoKey={cellModeKey}
           width={this.props.width}
           commitOnChange={this.hasFormulaColumn}
         />
@@ -683,6 +738,7 @@ SubTableColumnModel.registerFlow({
         ctx.model.setProps(collectionField.getComponentProps());
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
+        await ctx.model.applySubModelsBeforeRenderFlows('field');
         const currentBlockModel = ctx.model.context.blockModel;
         // 避免强依赖 EditFormModel（减少循环依赖风险）：仅在存在该能力时调用
         currentBlockModel?.addAppends?.(ctx.model.fieldPath);
@@ -896,6 +952,91 @@ SubTableColumnModel.registerFlow({
       use: 'fieldComponent',
       title: tExpr('Field component'),
     },
+    fieldNames: {
+      use: 'titleField',
+      title: tExpr('Title field'),
+      hideInSettings(ctx) {
+        return (
+          !ctx.collectionField ||
+          !ctx.collectionField.isAssociationField() ||
+          !isSubTableColumnConfiguredReadPretty(ctx.model) ||
+          (ctx.model.subModels.field as any)?.disableTitleField
+        );
+      },
+      defaultParams(ctx) {
+        return {
+          label: getSubTableColumnTitleField(ctx.model),
+        };
+      },
+      beforeParamsSave: async (ctx, params, previousParams) => {
+        if (!ctx.collectionField || !ctx.collectionField.isAssociationField()) {
+          return null;
+        }
+        if (!isSubTableColumnConfiguredReadPretty(ctx.model)) {
+          return null;
+        }
+        if (!params.label || params.label === previousParams.label) {
+          return null;
+        }
+
+        const targetCollection = ctx.collectionField.targetCollection;
+        const targetCollectionField = targetCollection?.getField(params.label);
+        if (!targetCollectionField) {
+          return null;
+        }
+
+        const binding = DetailsItemModel.getDefaultBindingByField(ctx, targetCollectionField);
+        const fieldModel: any = ctx.model.subModels.field;
+        const currentUse = getFieldBindingUse(fieldModel) || fieldModel?.use;
+        const targetUse = binding?.modelName || currentUse;
+        const fieldSettingsInit = {
+          dataSourceKey: ctx.model.collectionField.dataSourceKey,
+          collectionName: targetCollection.name,
+          fieldPath: params.label,
+        };
+        const defaultProps =
+          typeof binding?.defaultProps === 'function'
+            ? binding.defaultProps(ctx, targetCollectionField)
+            : binding?.defaultProps;
+
+        ctx.model.setProps({
+          titleField: params.label,
+          ...targetCollectionField.getComponentProps?.(),
+        });
+
+        if (targetUse && targetUse !== currentUse) {
+          await rebuildFieldSubModel({
+            parentModel: ctx.model as any,
+            targetUse,
+            defaultProps: {
+              ...(defaultProps || {}),
+              titleField: params.label,
+            },
+            fieldSettingsInit,
+          });
+        } else if (fieldModel) {
+          fieldModel.setProps({
+            ...(defaultProps || {}),
+            titleField: params.label,
+          });
+          fieldModel.setStepParams('fieldSettings', 'init', fieldSettingsInit);
+          await fieldModel.dispatchEvent('beforeRender', undefined, { useCache: false });
+        }
+      },
+      handler(ctx, params) {
+        if (
+          !ctx.collectionField ||
+          !ctx.collectionField.isAssociationField() ||
+          !isSubTableColumnConfiguredReadPretty(ctx.model)
+        ) {
+          return null;
+        }
+        ctx.model.setProps({
+          titleField: params.label,
+          ...ctx.collectionField.targetCollection?.getField(params.label)?.getComponentProps?.(),
+        });
+      },
+    },
     pattern: {
       use: 'pattern',
     },