@nocobase/flow-engine 2.0.0-alpha.2

package/src/action-registry/__tests__/modelActionRegistry.test.ts

@@ -0,0 +1,107 @@
+/**
+ * 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 { FlowEngine } from '../../flowEngine';
+import { FlowModel } from '../../models/flowModel';
+
+describe('ModelActionRegistry (class-level)', () => {
+  it('warns and overrides when registering duplicate actions on same class', () => {
+    class X extends FlowModel {}
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const h1 = vi.fn();
+    const h2 = vi.fn();
+    X.registerAction({ name: 'dup', handler: h1 });
+    X.registerAction({ name: 'dup', handler: h2 });
+    const engine = new FlowEngine();
+    engine.registerModels({ X });
+    const m = engine.createModel<X>({ use: 'X' });
+    expect(m.getAction('dup')?.handler).toBe(h2);
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('merges inheritance and respects override', () => {
+    class A extends FlowModel {}
+    class B extends A {}
+
+    const a1 = vi.fn();
+    const b1 = vi.fn();
+    const dupA = vi.fn();
+    const dupB = vi.fn();
+
+    A.registerAction({ name: 'a1', handler: a1 });
+    A.registerAction({ name: 'dup', handler: dupA });
+    B.registerAction({ name: 'b1', handler: b1 });
+    B.registerAction({ name: 'dup', handler: dupB });
+    const engine = new FlowEngine();
+    engine.registerModels({ A, B });
+    const a = engine.createModel<A>({ use: 'A' });
+    const b = engine.createModel<B>({ use: 'B' });
+    // Parent instance sees a1/dup but not b1
+    const aMap = a.getActions();
+    expect(aMap.has('a1')).toBe(true);
+    expect(aMap.has('dup')).toBe(true);
+    expect(aMap.has('b1')).toBe(false);
+    // Child instance sees merged + override
+    const bMap = b.getActions();
+    expect(bMap.has('a1')).toBe(true);
+    expect(bMap.has('b1')).toBe(true);
+    expect(b.getAction('dup')?.handler).toBe(dupB);
+  });
+
+  it('lazy invalidation along chain when ancestor updates', () => {
+    class M1 extends FlowModel {}
+    class M2 extends M1 {}
+    class M3 extends M2 {}
+    class M4 extends M3 {}
+    class M5 extends M4 {}
+
+    const engine = new FlowEngine();
+    engine.registerModels({ M1, M2, M3, M4, M5 });
+    const m5 = engine.createModel<M5>({ use: 'M5' });
+    // warm up cache via instance path
+    m5.getActions();
+    // register on ancestor M1
+    const handler = vi.fn();
+    M1.registerAction({ name: 'pNew', handler });
+    // Next call should include the new parent action
+    expect(m5.getActions().has('pNew')).toBe(true);
+  });
+
+  it('child registration does not affect parent set', () => {
+    class P extends FlowModel {}
+    class C extends P {}
+    const engine = new FlowEngine();
+    engine.registerModels({ P, C });
+    const p = engine.createModel<P>({ use: 'P' });
+    const c = engine.createModel<C>({ use: 'C' });
+    const childH = vi.fn();
+    C.registerAction({ name: 'onlyChild', handler: childH });
+    expect(p.getActions().has('onlyChild')).toBe(false);
+    expect(c.getActions().has('onlyChild')).toBe(true);
+  });
+
+  it('deep override: parent change does not override child override', () => {
+    class A extends FlowModel {}
+    class B extends A {}
+    const aV1 = vi.fn();
+    const aV2 = vi.fn();
+    const bV = vi.fn();
+    A.registerAction({ name: 'k', handler: aV1 });
+    B.registerAction({ name: 'k', handler: bV });
+    // Update parent
+    A.registerAction({ name: 'k', handler: aV2 });
+    const engine = new FlowEngine();
+    engine.registerModels({ A, B });
+    const b = engine.createModel<B>({ use: 'B' });
+    expect(b.getAction('k')?.handler).toBe(bV);
+  });
+});

package/src/components/DynamicFlowsEditor.tsx

@@ -0,0 +1,318 @@
+/**
+ * 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 { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { uid } from '@nocobase/utils/client';
+import { Collapse, Space, Button, Tabs, Input, Modal, Form, Empty, Select } from 'antd';
+import type { FormInstance } from 'antd';
+import { observer } from '@formily/react';
+import React from 'react';
+import { FlowModel } from '../models';
+import { FlowDefinition } from '../FlowDefinition';
+import { FlowDefinitionOptions } from '../types';
+
+const Panel = Collapse.Panel;
+
+/**
+ * 动态流编辑器（纯组件）
+ * - 使用 Tabs 分隔多个 Flow
+ * - 每个 Flow 下方显示：事件名输入框（编辑 flow.on）+ Steps 折叠面板
+ * - 每个 Step 面板内部：一个 JSON 文本框编辑 defaultParams
+ * - 支持新增/删除 Flow 与 Step；所有改动直接作用于传入的响应式 value
+ */
+// export const DynamicFlowsEditor = observer(
+//   (props: { value: FlowDefinitionOptions[]; model: FlowModel }) => {
+//     const { value, model } = props;
+//     const eventList = (model.constructor as any).meta?.eventList || [];
+
+//     // 活动 tab
+//     const [activeKey, setActiveKey] = React.useState<string>(() => {
+//       return value?.[0]?.key || 'flow-1';
+//     });
+
+//     // 工具：生成唯一 flow key（使用 uid()，如冲突则重试）
+//     const getNextFlowKey = React.useCallback(() => {
+//       const exists = (k: string) => value.some((f) => f.key === k);
+//       let key = `flow-${uid()}`;
+//       let guard = 10;
+//       while (exists(key) && guard--) {
+//         key = `flow-${uid()}`;
+//       }
+//       return key;
+//     }, [value]);
+
+//     const getNextStepKey = React.useCallback((flow: FlowDefinition) => {
+//       const keys = Object.keys(flow.steps || {});
+//       let idx = keys.length + 1;
+//       let k = `step-${idx}`;
+//       while (keys.includes(k)) {
+//         idx += 1;
+//         k = `step-${idx}`;
+//       }
+//       return k;
+//     }, []);
+
+//     const addFlowWithTitle = React.useCallback(
+//       (title?: string) => {
+//         const key = getNextFlowKey();
+//         value.push({ key, title: title?.trim() || `Flow ${value.length + 1}`, steps: {} });
+//         setActiveKey(key);
+//       },
+//       [getNextFlowKey, setActiveKey, value],
+//     );
+
+//     const promptAddFlow = React.useCallback(() => {
+//       let tempTitle = '';
+//       const modal = Modal.confirm({
+//         title: 'Flow title',
+//         icon: null,
+//         content: (
+//           <Input
+//             autoFocus
+//             placeholder="Untitled flow"
+//             onChange={(e: any) => (tempTitle = e.target.value)}
+//             onPressEnter={() => {
+//               modal.update({ okButtonProps: { loading: true } });
+//               // 模拟点击 OK
+//               modal.destroy();
+//               addFlowWithTitle(tempTitle);
+//             }}
+//           />
+//         ),
+//         okText: 'OK',
+//         cancelText: 'Cancel',
+//         onOk: () => addFlowWithTitle(tempTitle),
+//       });
+//     }, [addFlowWithTitle]);
+
+//     const updateFlowOn = React.useCallback((flow: FlowDefinition, onStr: string) => {
+//       // 简化为字符串形式
+//       (flow as any).on = onStr || undefined;
+//     }, []);
+
+//     const addStep = React.useCallback(
+//       (flow: FlowDefinition) => {
+//         const key = getNextStepKey(flow);
+//         // flow.steps = flow.steps || {};
+//         (flow.steps as any)[key] = { defaultParams: {} } as any;
+//       },
+//       [getNextStepKey],
+//     );
+
+//     const removeStep = React.useCallback((flow: FlowDefinition, stepKey: string) => {
+//       if (!flow.steps) return;
+//       delete (flow.steps as any)[stepKey];
+//     }, []);
+
+//     const StepEditor: React.FC<{ flow: FlowDefinition; stepKey: string; form: FormInstance }> = ({
+//       flow,
+//       stepKey,
+//       form,
+//     }) => {
+//       return (
+//         <>
+//           <Form.Item name={['steps', stepKey, 'targetUid']} label="Target UID">
+//             <Input
+//               placeholder="Enter target uid"
+//               onChange={(e: any) => {
+//                 const v = e?.target?.value;
+//                 (flow.steps as any)[stepKey] = (flow.steps as any)[stepKey] || ({} as any);
+//                 (flow.steps as any)[stepKey].defaultParams = (flow.steps as any)[stepKey].defaultParams || {};
+//                 (flow.steps as any)[stepKey].defaultParams.targetUid = v;
+//               }}
+//             />
+//           </Form.Item>
+//           <Form.Item name={['steps', stepKey, 'action']} label="Action">
+//             <Select
+//               placeholder="Select an action"
+//               options={[]}
+//               allowClear
+//               onChange={(val: any) => {
+//                 (flow.steps as any)[stepKey] = (flow.steps as any)[stepKey] || ({} as any);
+//                 (flow.steps as any)[stepKey].defaultParams = (flow.steps as any)[stepKey].defaultParams || {};
+//                 (flow.steps as any)[stepKey].defaultParams.action = val;
+//               }}
+//             />
+//           </Form.Item>
+//         </>
+//       );
+//     };
+
+//     const FlowTab: React.FC<{ flow: FlowDefinition }> = observer(
+//       ({ flow }) => {
+//         const [form] = Form.useForm();
+//         const stepKeys = Object.keys(flow.steps || {});
+//         const initialValues = React.useMemo(() => {
+//           const stepsInitial: Record<string, any> = {};
+//           for (const sk of stepKeys) {
+//             const params = (flow.steps as any)[sk]?.defaultParams || {};
+//             stepsInitial[sk] = {
+//               targetUid: params.targetUid ?? '',
+//               action: params.action ?? undefined,
+//             };
+//           }
+//           return {
+//             eventName: typeof (flow as any).on === 'string' ? (flow as any).on : (flow as any).on?.eventName ?? '',
+//             steps: stepsInitial,
+//           } as any;
+//         }, [flow, stepKeys]);
+
+//         // 生成 Step 折叠项
+//         const items = stepKeys.map((sk) => {
+//           const headerEl = (
+//             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+//               <Input
+//                 size="small"
+//                 variant="borderless"
+//                 style={{ width: 240, padding: 0, background: 'transparent' }}
+//                 value={(flow.steps as any)[sk]?.title ?? sk}
+//                 placeholder="请输入步骤标题"
+//                 onClick={(e: any) => e.stopPropagation()}
+//                 onChange={(e: any) => {
+//                   (flow.steps as any)[sk] = (flow.steps as any)[sk] || ({} as any);
+//                   (flow.steps as any)[sk].title = e.target.value;
+//                 }}
+//               />
+//             </div>
+//           );
+
+//           const extraEl = (
+//             <button
+//               type="button"
+//               onClick={(e) => {
+//                 e.stopPropagation();
+//                 removeStep(flow, sk);
+//               }}
+//               style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer' }}
+//               aria-label="Delete step"
+//             >
+//               <DeleteOutlined style={{ color: 'gray' }} />
+//             </button>
+//           );
+
+//           return (
+//             <Panel header={headerEl} key={sk} extra={extraEl}>
+//               <StepEditor flow={flow} stepKey={sk} form={form} />
+//             </Panel>
+//           );
+//         });
+
+//         return (
+//           <Form
+//             layout="vertical"
+//             form={form}
+//             initialValues={initialValues}
+//             onValuesChange={(changed, all) => {
+//               if (Object.hasOwn(changed, 'eventName')) {
+//                 updateFlowOn(flow, all.eventName);
+//               }
+//             }}
+//           >
+//             <Form.Item
+//               label="Event name"
+//               name="eventName"
+//               extra="The event name used to dispatch and trigger this flow"
+//             >
+//               <Select
+//                 style={{ width: '100%' }}
+//                 placeholder="选择一个事件名称"
+//                 options={eventList}
+//                 allowClear
+//                 showSearch
+//                 optionFilterProp="label"
+//               />
+//             </Form.Item>
+
+//             <Form.Item label="Steps">
+//               <Space direction="vertical" style={{ width: '100%' }} size={16}>
+//                 {stepKeys.length === 0 ? (
+//                   <div style={{ background: '#fafafa', border: '1px dashed #d9d9d9', borderRadius: 6, padding: 24 }}>
+//                     <Empty
+//                       description="No steps. Click 'Add step' to get started."
+//                       image={Empty.PRESENTED_IMAGE_SIMPLE}
+//                     />
+//                   </div>
+//                 ) : (
+//                   <Collapse accordion defaultActiveKey={stepKeys[0]}>
+//                     {items}
+//                   </Collapse>
+//                 )}
+//                 <Button onClick={() => addStep(flow)} type="dashed" block icon={<PlusOutlined />}>
+//                   Add step
+//                 </Button>
+//               </Space>
+//             </Form.Item>
+//           </Form>
+//         );
+//       },
+//       {
+//         displayName: 'FlowTab',
+//       },
+//     );
+
+//     // 组装 Tabs items：每个 flow 一个标签，标签上放删除图标；最后追加“添加”标签
+//     const items = (value || []).map((f) => {
+//       const label = (
+//         <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+//           <span>{f.title || f.key}</span>
+//           <button
+//             type="button"
+//             onClick={(e: any) => {
+//               e.stopPropagation();
+//               // 删除当前 flow
+//               const idx = value.findIndex((x) => x.key === f.key);
+//               if (idx !== -1) {
+//                 value.splice(idx, 1);
+//                 const next = (value[idx] as any)?.key || (value[idx - 1] as any)?.key || '';
+//                 setActiveKey(next);
+//               }
+//             }}
+//             style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer' }}
+//             aria-label="Delete flow"
+//           >
+//             <DeleteOutlined style={{ color: 'gray' }} />
+//           </button>
+//         </span>
+//       );
+//       return { key: f.key, label, children: <FlowTab flow={f} /> } as any;
+//     });
+
+//     const ADD_TAB_KEY = '__add__';
+//     items.push({
+//       key: ADD_TAB_KEY,
+//       label: (
+//         <span style={{ color: '#1677ff', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+//           <PlusOutlined />
+//           Add flow
+//         </span>
+//       ),
+//       children: null,
+//     } as any);
+
+//     const TabsAny = Tabs as any;
+//     return (
+//       <TabsAny
+//         items={items}
+//         activeKey={activeKey}
+//         onChange={(key: string) => {
+//           if (key === ADD_TAB_KEY) {
+//             promptAddFlow();
+//             return;
+//           }
+//           setActiveKey(key);
+//         }}
+//       />
+//     );
+//   },
+//   {
+//     displayName: 'DynamicFlowsEditor',
+//   },
+// );
+
+export const DynamicFlowsEditor = <>Uncomment and fix issues after refactoring flow definitions</>;

package/src/components/FieldModelRenderer.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 { FlowModelRenderer, FlowModelRendererProps } from '@nocobase/flow-engine';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
+  'model',
+  'uid',
+  'fallback',
+  'key',
+  'showFlowSettings',
+  'flowSettingsVariant',
+  'hideRemoveInSettings',
+  'showTitle',
+  'skipApplyAutoFlows',
+  'inputArgs',
+  'showErrorFallback',
+  'settingsMenuLevel',
+  'extraToolbarItems',
+];
+
+export function FieldModelRenderer(props: any) {
+  const { model, ...rest } = props;
+  const composingRef = useRef(false);
+
+  const handleChange = (e: any) => {
+    const val = e?.target?.value || e;
+    model.setProps({ value: val });
+    if (!composingRef.current) {
+      props.onChange(e);
+    }
+  };
+
+  const handleCompositionStart = () => {
+    composingRef.current = true;
+  };
+
+  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+    composingRef.current = false;
+    props.onChange(e);
+  };
+
+  const modelProps = {
+    ..._.omit(rest, flowModelRendererPropKeys),
+    onChange: handleChange,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+  };
+  useEffect(() => {
+    model.setProps(modelProps);
+  }, [modelProps]);
+
+  return <FlowModelRenderer model={model} {...rest} />;
+}