@nocobase/client-v2 2.1.6 → 2.1.7

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

@@ -10,19 +10,24 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
-import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID } from '@nocobase/flow-engine';
+import { ActionScene, FlowEngine, FlowModel, GLOBAL_EMBED_CONTAINER_ID, useFlowContext } from '@nocobase/flow-engine';
 import { DynamicFlowsIcon } from '../DynamicFlowsIcon';
 
 const mockState = vi.hoisted(() => ({
   capturedSelectProps: [] as any[],
+  capturedTabsProps: [] as any[],
   flowContextValue: undefined as any,
 }));
 
 vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  const React = await import('react');
   return {
     ...actual,
-    useFlowContext: () => mockState.flowContextValue,
+    useFlowContext: () => {
+      const context = React.useContext(actual.FlowReactContext);
+      return context?.view ? context : mockState.flowContextValue;
+    },
   };
 });
 
@@ -62,6 +67,33 @@ vi.mock('antd', async (importOriginal) => {
       return <div data-testid={String(props.placeholder || 'select')} />;
     },
     Space: ({ children }: any) => <div>{children}</div>,
+    Tabs: (props: any) => {
+      mockState.capturedTabsProps.push(props);
+      const { items, activeKey, onChange, tabBarStyle } = props;
+      const currentKey = activeKey || items?.[0]?.key;
+      return (
+        <div data-testid="dynamic-flow-source-tabs">
+          <div role="tablist" style={tabBarStyle}>
+            {items?.map((item: any) => (
+              <button
+                key={item.key}
+                role="tab"
+                aria-selected={item.key === currentKey}
+                type="button"
+                onClick={() => onChange?.(item.key)}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+          {items?.map((item: any) => (
+            <div key={item.key} hidden={item.key !== currentKey}>
+              {item.children}
+            </div>
+          ))}
+        </div>
+      );
+    },
     Tooltip: ({ children }: any) => <>{children}</>,
   };
 });
@@ -83,6 +115,8 @@ const openDynamicFlowsEditor = async (model: FlowModel) => {
   expect(trigger).not.toBeNull();
   await userEvent.click(trigger as Element);
 
+  await waitFor(() => expect(model.context.viewer.embed).toHaveBeenCalled());
+
   const embedCall = (model.context.viewer.embed as any).mock.calls.at(-1)?.[0];
   expect(embedCall?.content).toBeTruthy();
 
@@ -163,6 +197,38 @@ const createModel = (options: { preventClose?: boolean; hiddenClose?: boolean; s
   return model;
 };
 
+const createPeerModel = (model: FlowModel, uid: string, saveStepParams = vi.fn(async () => undefined)) => {
+  const PeerModel = model.constructor as typeof FlowModel;
+  const peer = new PeerModel({
+    uid,
+    use: PeerModel,
+    flowEngine: model.flowEngine,
+    stepParams: {},
+    subModels: {},
+    flowRegistry: {
+      flow1: {
+        title: 'Template event flow',
+        on: 'click',
+        steps: {
+          notifyStep: {
+            use: 'notify',
+          },
+        },
+      },
+    },
+  } as any);
+
+  peer.context.defineProperty('message', {
+    value: {
+      error: vi.fn(),
+      success: vi.fn(),
+    },
+  });
+  vi.spyOn(peer, 'saveStepParams').mockImplementation(saveStepParams);
+
+  return peer;
+};
+
 const createView = () => {
   let destroyed = false;
   let closingPromise: Promise<boolean | void> | undefined;
@@ -189,6 +255,9 @@ const createView = () => {
       destroyed = true;
     }),
     beforeClose: undefined as any,
+    inputArgs: {
+      pageActive: true,
+    },
   };
   return view;
 };
@@ -196,6 +265,7 @@ const createView = () => {
 describe('DynamicFlowsIcon', () => {
   beforeEach(() => {
     mockState.capturedSelectProps.length = 0;
+    mockState.capturedTabsProps.length = 0;
     mockState.flowContextValue = {
       modal: {
         confirm: vi.fn(),
@@ -377,4 +447,80 @@ describe('DynamicFlowsIcon', () => {
     expect(view.destroy).toHaveBeenCalledTimes(1);
     expect(model.context.message.success).toHaveBeenCalledWith('Configuration saved');
   });
+
+  it('renders source tabs and closes the editor when saving one source', async () => {
+    const model = createModel();
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    expect(screen.getByRole('tab', { name: 'Current block' })).toHaveAttribute('aria-selected', 'true');
+    expect(mockState.capturedTabsProps.at(-1)?.tabBarStyle?.paddingLeft).toBeGreaterThan(0);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(target.context.message.success).toHaveBeenCalledWith('Configuration saved');
+  });
+
+  it('saves all dirty sources without discard confirmation', async () => {
+    const saveStepParams = vi.fn(async () => undefined);
+    const model = createModel({ saveStepParams });
+    const targetSaveStepParams = vi.fn(async () => undefined);
+    const target = createPeerModel(model, 'target-model', targetSaveStepParams);
+    mockState.flowContextValue.modal.confirm.mockResolvedValue(false);
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-unsaved-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    const { view } = await openDynamicFlowsEditor(model);
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Current block' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add event flow' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(saveStepParams).toHaveBeenCalledTimes(1);
+    expect(targetSaveStepParams).toHaveBeenCalledTimes(1);
+    expect(mockState.flowContextValue.modal.confirm).not.toHaveBeenCalled();
+    expect(view.close).toHaveBeenCalledTimes(1);
+    expect(view.destroy).toHaveBeenCalledTimes(1);
+    expect(model.flowRegistry.getFlows().size).toBe(2);
+    expect(target.flowRegistry.getFlows().size).toBe(2);
+  });
+
+  it('provides the active source model context inside source tabs', async () => {
+    const model = createModel();
+    const target = createPeerModel(model, 'target-model');
+    const seenModelUids: string[] = [];
+    const ContextProbe = () => {
+      const ctx = useFlowContext<any>();
+      seenModelUids.push(ctx?.model?.uid);
+      return null;
+    };
+    model.flowEngine.flowSettings.renderStepForm = vi.fn(() => <ContextProbe />) as any;
+
+    model.flowEngine.flowSettings.registerDynamicFlowSourceProvider({
+      key: 'test-source-context-provider',
+      getSources: () => [{ key: 'referenced-template', label: 'Referenced template', model: target }],
+    });
+
+    await openDynamicFlowsEditor(model);
+    await userEvent.click(screen.getByRole('tab', { name: 'Referenced template' }));
+
+    await waitFor(() => expect(seenModelUids).toContain('target-model'));
+  });
 });

package/src/flow/flows/editMarkdownFlow.tsx

@@ -70,7 +70,7 @@ export const editMarkdownFlow = defineFlow<FlowModel>({
               {t('References')}:
             </span>
             <a
-              href={`https://v2.docs.nocobase.com/interface-builder/blocks/other-blocks/markdown`}
+              href={`https://docs.nocobase.com/interface-builder/blocks/other-blocks/markdown`}
               target="_blank"
               rel="noreferrer"
             >

package/src/flow/index.ts

@@ -49,7 +49,7 @@ export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplicatio
       key: 'dynamic-flows-editor',
       component: DynamicFlowsIcon,
       visible(model) {
-        return model.getEvents().size > 0;
+        return model.getEvents().size > 0 || model.flowEngine.flowSettings.hasDynamicFlowSourceProvider(model);
       },
       sort: 0,
     });

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -9,6 +9,7 @@
 
 import React, { type ComponentType, type CSSProperties, type ReactNode } from 'react';
 import { DateFilterDynamicComponent } from '../../models/blocks/filter-form/fields/date-time/components/DateFilterDynamicComponent';
+import { translateOptions } from './enumOptionsUtils';
 
 type OperatorMeta = {
   value?: string;
@@ -26,6 +27,7 @@ type OperatorComponentFieldModel = {
   props?: Record<string, unknown>;
   render?: () => ReactNode;
   __originalRender?: () => ReactNode;
+  translate?: (text: string) => string;
 };
 
 type OperatorComponentRenderOptions = {
@@ -93,6 +95,17 @@ export function restoreOperatorComponentRender(fieldModel?: unknown) {
   return true;
 }
 
+function translateComponentOptions(props: Record<string, unknown>, translate: ((text: string) => string) | undefined) {
+  if (!Array.isArray(props.options) || typeof translate !== 'function') {
+    return props;
+  }
+
+  return {
+    ...props,
+    options: translateOptions(props.options, translate),
+  };
+}
+
 export function applyOperatorComponentRender({
   app,
   fieldModel,
@@ -118,8 +131,9 @@ export function applyOperatorComponentRender({
   mutableFieldModel.render = () => {
     const fieldProps = mutableFieldModel.props || {};
     const fieldStyle = pickOperatorStyle(fieldProps.style);
-    const componentProps =
+    const mergedProps =
       propsPriority === 'operator' ? { ...fieldProps, ...operatorProps } : { ...operatorProps, ...fieldProps };
+    const componentProps = translateComponentOptions(mergedProps, mutableFieldModel.translate);
     const componentStyle =
       propsPriority === 'operator' ? { ...fieldStyle, ...operatorStyle } : { ...operatorStyle, ...fieldStyle };
     const mergedStyle = { ...(style || {}), ...componentStyle };

package/src/flow/models/blocks/filter-manager/flow-actions/__tests__/customizeFilterRender.test.tsx

@@ -18,12 +18,23 @@ type TestFieldModel = {
   setupReactiveRender: ReturnType<typeof vi.fn>;
   _reactiveWrapperCache?: unknown;
   __originalRender?: () => React.ReactNode;
+  translate?: (text: string) => string;
 };
 
 const MultipleKeywordsInput = (props: Record<string, unknown>) => {
   return <div data-testid="multiple-keywords-input" {...props} />;
 };
 
+const Select = (props: Record<string, unknown>) => {
+  return <div data-testid="select" {...props} />;
+};
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
 function createFieldModel() {
   return {
     props: {
@@ -52,7 +63,10 @@ function createFilterItemModel({
     collectionField,
     context: {
       app: {
-        getComponent: (name: string) => (name === 'MultipleKeywordsInput' ? MultipleKeywordsInput : undefined),
+        getComponent: (name: string) => {
+          if (name === 'MultipleKeywordsInput') return MultipleKeywordsInput;
+          if (name === 'Select') return Select;
+        },
       },
       collectionField,
     },
@@ -112,6 +126,47 @@ describe('customizeFilterRender action', () => {
     expect((rerenderedElement as React.ReactElement).props.placeholder).toBe('updated runtime placeholder');
   });
 
+  it('translates operator schema select options', () => {
+    const fieldModel = {
+      ...createFieldModel(),
+      translate: mockT,
+    };
+    const model = createFilterItemModel({
+      fieldModel,
+      operator: '$isTruly',
+      collectionField: {
+        interface: 'checkbox',
+        type: 'boolean',
+        filterable: {
+          operators: [
+            {
+              label: '{{t("Yes")}}',
+              value: '$isTruly',
+              schema: {
+                'x-component': 'Select',
+                'x-component-props': {
+                  options: [
+                    { label: '{{t("Yes")}}', value: true },
+                    { label: '{{t("No")}}', value: false },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    customizeFilterRender.handler?.({ model } as any);
+
+    const element = fieldModel.render();
+    expect((element as React.ReactElement).type).toBe(Select);
+    expect((element as React.ReactElement).props.options).toEqual([
+      { label: '是', value: true },
+      { label: '否', value: false },
+    ]);
+  });
+
   it('restores original render when switching to an operator without a schema component', () => {
     const fieldModel = createFieldModel();
     const originalRender = fieldModel.render;

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__/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,

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

@@ -11,7 +11,7 @@ import { FormItemModel } from '../../blocks/form/FormItemModel';
 import { FieldModel } from '../../base/FieldModel';
 export class AssociationFieldModel extends FieldModel {
   operator = '$eq';
-  updateAssociation = true;
+  updateAssociation = false;
 }
 
 AssociationFieldModel.registerFlow({