@nocobase/flow-engine 2.0.0-alpha.10

package/src/views/ViewNavigation.ts

@@ -0,0 +1,122 @@
+/**
+ * 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 { FlowEngineContext } from '../flowContext';
+
+interface ViewParam {
+  /** 视图唯一标识符，一般为某个 Model 实例的 uid */
+  viewUid?: string;
+  /** 标签页唯一标识符 */
+  tabUid?: string;
+  /** 弹窗记录的 id */
+  filterByTk?: string;
+  /** source Id */
+  sourceId?: string;
+}
+
+/**
+ * 将 ViewParam 数组转换为 pathname
+ *
+ * @param viewParams - ViewParam 数组
+ * @returns 生成的 pathname
+ *
+ * @example
+ * ```typescript
+ * generatePathnameFromViewParams([{ viewUid: 'xxx' }]) // '/admin/xxx'
+ * generatePathnameFromViewParams([{ viewUid: 'xxx', tabUid: 'yyy' }]) // '/admin/xxx/tab/yyy'
+ * generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy' }]) // '/admin/xxx/view/yyy'
+ * ```
+ */
+export function generatePathnameFromViewParams(viewParams: ViewParam[]): string {
+  if (!viewParams || viewParams.length === 0) {
+    return '/admin';
+  }
+
+  const segments = ['admin'];
+
+  viewParams.forEach((viewParam, index) => {
+    // 如果不是第一个视图，添加 'view' 关键字
+    if (index > 0) {
+      segments.push('view');
+    }
+
+    // 添加视图 UID
+    segments.push(viewParam.viewUid);
+
+    // 添加参数
+    if (viewParam.tabUid) {
+      segments.push('tab', viewParam.tabUid);
+    }
+    if (viewParam.filterByTk) {
+      segments.push('filterbytk', viewParam.filterByTk);
+    }
+    if (viewParam.sourceId) {
+      segments.push('sourceid', viewParam.sourceId);
+    }
+  });
+
+  return '/' + segments.join('/');
+}
+
+export class ViewNavigation {
+  viewStack: ViewParam[];
+  ctx: FlowEngineContext;
+
+  constructor(ctx: FlowEngineContext, viewParams: ViewParam[]) {
+    this.viewStack = [...viewParams];
+    this.ctx = ctx;
+  }
+
+  changeTo(viewParam: ViewParam) {
+    // 1. 根据传入的参数，改变当前视图的参数。当前视图的参数是 viewStack 中最后一个元素
+    if (this.viewStack.length === 0) {
+      this.viewStack.push(viewParam);
+    } else {
+      this.viewStack[this.viewStack.length - 1] = { ...this.viewStack[this.viewStack.length - 1], ...viewParam };
+    }
+
+    // 2. 根据 viewStack 生成新的 pathname
+    const newPathname = generatePathnameFromViewParams(this.viewStack);
+
+    // 3. 触发一次跳转。使用 replace 的方式
+    this.ctx.router.navigate(newPathname, { replace: true });
+  }
+
+  navigateTo(viewParam: ViewParam, opts?: { replace?: boolean; state?: any }) {
+    // 1. 基于当前 viewStack 生成一个 pathname
+    // 2. 将当前传入的参数转为 path string
+    const newViewPathname = generatePathnameFromViewParams([...this.viewStack, viewParam]);
+
+    // 3. 与 pathname 拼接成新的 pathname（这里直接使用新生成的 pathname）
+    const newPathname = newViewPathname;
+
+    // 4. 判断新的 pathname 是否与当前 location.pathname 的结尾一致。防止出现重复路径
+    //    不用 this.ctx.route.pathname 是因为它的值可能不是最新的，会导致判断失误
+    if (location.pathname.endsWith(newPathname)) {
+      return this.ctx.router.navigate(-1); // 避免点击按钮没反应的问题
+    }
+
+    // 5. 如果新的 pathname 与当前 ctx.route.pathname 不同，则触发一次跳转。使用 push 的方式
+    this.ctx.router.navigate(newPathname, opts);
+
+    // 6. 当 viewStack 为空时，把当前参数 push 到 viewStack 中
+    if (this.viewStack.length === 0) {
+      this.viewStack.push(viewParam);
+    }
+  }
+
+  back() {
+    const pathname = generatePathnameFromViewParams(this.viewStack);
+
+    // 防止重复触发返回操作
+    if (location.pathname.endsWith(pathname)) {
+      this.ctx.router.navigate(-1);
+    }
+  }
+}

package/src/views/__tests__/FlowView.test.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { FlowViewer } from '../FlowView';
+
+describe('FlowViewer', () => {
+  const ctx: any = { t: (k: string) => k };
+  const open = vi.fn();
+  const types = { drawer: { open }, popover: { open }, dialog: { open }, embed: { open } } as any;
+
+  it('delegates to concrete viewer types with type field', () => {
+    const viewer = new FlowViewer(ctx, types);
+    viewer.dialog({ content: 'x' });
+    viewer.drawer({ content: 'x' });
+    viewer.popover({ content: 'x', title: 'p' } as any);
+    viewer.embed({ content: 'x' });
+    expect(open).toHaveBeenCalledTimes(4);
+  });
+
+  it('throws on unknown type in open', () => {
+    const viewer = new FlowViewer(ctx, { ...types, drawer: undefined } as any);
+    expect(() => viewer.open({ type: 'drawer', content: 'x' } as any)).toThrow(/Unknown view type/);
+  });
+});

package/src/views/__tests__/ViewNavigation.test.ts

@@ -0,0 +1,191 @@
+/**
+ * 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 { ViewNavigation, generatePathnameFromViewParams } from '../ViewNavigation';
+
+describe('ViewNavigation', () => {
+  let mockCtx: any;
+  let viewNavigation: ViewNavigation;
+
+  beforeEach(() => {
+    mockCtx = {
+      router: {
+        navigate: vi.fn(),
+      },
+      route: {
+        pathname: '/admin/test',
+      },
+    };
+  });
+
+  describe('changeTo', () => {
+    it('should replace current view when viewStack is empty', () => {
+      viewNavigation = new ViewNavigation(mockCtx, []);
+
+      viewNavigation.changeTo({ viewUid: 'new-view' });
+
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'new-view' }]);
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/new-view', { replace: true });
+    });
+
+    it('should replace last view in viewStack', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'old-view' }]);
+
+      viewNavigation.changeTo({ viewUid: 'new-view', tabUid: 'tab1' });
+
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'new-view', tabUid: 'tab1' }]);
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith('/admin/new-view/tab/tab1', { replace: true });
+    });
+
+    it('should replace last view with complex parameters', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }, { viewUid: 'view2', tabUid: 'tab1' }]);
+
+      viewNavigation.changeTo({
+        viewUid: 'new-view',
+        tabUid: 'new-tab',
+        filterByTk: '123',
+        sourceId: 'source1',
+      });
+
+      expect(viewNavigation.viewStack).toEqual([
+        { viewUid: 'view1' },
+        { viewUid: 'new-view', tabUid: 'new-tab', filterByTk: '123', sourceId: 'source1' },
+      ]);
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith(
+        '/admin/view1/view/new-view/tab/new-tab/filterbytk/123/sourceid/source1',
+        { replace: true },
+      );
+    });
+
+    it('should allow omitting viewUid', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
+
+      viewNavigation.changeTo({ tabUid: 'new-tab' });
+
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1', tabUid: 'new-tab' }]);
+    });
+  });
+
+  describe('navigateTo', () => {
+    it('should navigate to new view', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'current-view' }]);
+
+      viewNavigation.navigateTo({ viewUid: 'new-view' });
+
+      // viewStack 保持不变
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'current-view' }]);
+      const call = (mockCtx.router.navigate as any).mock.calls[0];
+      expect(call[0]).toBe('/admin/current-view/view/new-view');
+      expect(call[1]).toBeUndefined();
+    });
+
+    it('should navigate back when pathname is the same', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
+      // set browser location to match the generated pathname
+      window.history.pushState({}, '', '/admin/view1/view/view2');
+
+      viewNavigation.navigateTo({ viewUid: 'view2' });
+
+      // when same pathname, navigate(-1) to avoid "no reaction" UX
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith(-1);
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1' }]);
+    });
+
+    it('should navigate with complex parameters', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1', tabUid: 'tab1' }]);
+
+      viewNavigation.navigateTo({
+        viewUid: 'view2',
+        tabUid: 'tab2',
+        filterByTk: '456',
+        sourceId: 'source2',
+      });
+
+      // viewStack 保持不变
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'view1', tabUid: 'tab1' }]);
+      const call = (mockCtx.router.navigate as any).mock.calls[0];
+      expect(call[0]).toBe('/admin/view1/tab/tab1/view/view2/tab/tab2/filterbytk/456/sourceid/source2');
+      expect(call[1]).toBeUndefined();
+    });
+
+    it('should navigate from empty viewStack', () => {
+      viewNavigation = new ViewNavigation(mockCtx, []);
+
+      viewNavigation.navigateTo({ viewUid: 'first-view' });
+
+      expect(viewNavigation.viewStack).toEqual([{ viewUid: 'first-view' }]);
+      const call = (mockCtx.router.navigate as any).mock.calls[0];
+      expect(call[0]).toBe('/admin/first-view');
+      expect(call[1]).toBeUndefined();
+    });
+  });
+
+  describe('back', () => {
+    it('should call router navigate with -1', () => {
+      viewNavigation = new ViewNavigation(mockCtx, [{ viewUid: 'view1' }]);
+      // set browser location to current stack pathname so back() triggers
+      window.history.pushState({}, '', '/admin/view1');
+
+      viewNavigation.back();
+
+      expect(mockCtx.router.navigate).toHaveBeenCalledWith(-1);
+    });
+  });
+});
+
+describe('generatePathnameFromViewParams', () => {
+  it('should handle empty array', () => {
+    expect(generatePathnameFromViewParams([])).toBe('/admin');
+    expect(generatePathnameFromViewParams(null as any)).toBe('/admin');
+    expect(generatePathnameFromViewParams(undefined as any)).toBe('/admin');
+  });
+
+  it('should generate single view path', () => {
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }])).toBe('/admin/xxx');
+  });
+
+  it('should generate view with tab', () => {
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx', tabUid: 'yyy' }])).toBe('/admin/xxx/tab/yyy');
+  });
+
+  it('should generate multiple views', () => {
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy' }])).toBe('/admin/xxx/view/yyy');
+  });
+
+  it('should generate complex path with all parameters', () => {
+    expect(
+      generatePathnameFromViewParams([
+        { viewUid: 'xxx', tabUid: 'tab1' },
+        { viewUid: 'yyy', tabUid: 'tab2', filterByTk: '123', sourceId: 'source1' },
+      ]),
+    ).toBe('/admin/xxx/tab/tab1/view/yyy/tab/tab2/filterbytk/123/sourceid/source1');
+  });
+
+  it('should handle filterByTk and sourceId without tab', () => {
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx', filterByTk: '1', sourceId: '2' }])).toBe(
+      '/admin/xxx/filterbytk/1/sourceid/2',
+    );
+  });
+
+  it('should match parsePathnameToViewParams test cases', () => {
+    // Test cases from parsePathnameToViewParams.test.ts
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }])).toBe('/admin/xxx');
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx', tabUid: 'yyy' }])).toBe('/admin/xxx/tab/yyy');
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy' }])).toBe('/admin/xxx/view/yyy');
+    expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy', tabUid: 'zzz' }])).toBe(
+      '/admin/xxx/view/yyy/tab/zzz',
+    );
+    expect(
+      generatePathnameFromViewParams([
+        { viewUid: 'xxx', tabUid: 'yyy' },
+        { viewUid: 'zzz', tabUid: 'aaa' },
+      ]),
+    ).toBe('/admin/xxx/tab/yyy/view/zzz/tab/aaa');
+  });
+});

package/src/views/__tests__/usePatchElement.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import usePatchElement from '../usePatchElement';
+
+describe('usePatchElement', () => {
+  it('adds and removes elements', () => {
+    const { result } = renderHook(() => usePatchElement<JSX.Element>());
+    const el = <div>Hi</div>;
+    let dispose: () => void;
+    act(() => {
+      const [_, patch] = result.current;
+      dispose = patch(el);
+    });
+    expect(result.current[0].length).toBe(1);
+    act(() => dispose());
+    expect(result.current[0].length).toBe(0);
+  });
+});