@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.40

package/src/flow/FlowPage.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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, useFlowEngine, useFlowModelById, useFlowViewContext } from '@nocobase/flow-engine';
+import type { FlowModel } from '@nocobase/flow-engine';
+import { useRequest } from 'ahooks';
+import React from 'react';
+import FlowRoute from './components/FlowRoute';
+import { SkeletonFallback } from './components/SkeletonFallback';
+
+function InternalFlowPage({ uid, ...props }) {
+  const model = useFlowModelById(uid);
+  return (
+    <FlowModelRenderer
+      model={model}
+      fallback={
+        <SkeletonFallback
+          style={{ margin: model?.context.isMobileLayout ? 8 : model?.context.themeToken.marginBlock }}
+        />
+      }
+      hideRemoveInSettings
+      showFlowSettings={{ showBackground: false, showBorder: false }}
+      {...props}
+    />
+  );
+}
+
+type FlowPageProps = {
+  pageModelClass?: string;
+  parentId?: string;
+  onModelLoaded?: (uid: string, model: FlowModel) => void;
+  defaultTabTitle?: string;
+};
+
+export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknown>) => {
+  const { pageModelClass = 'ChildPageModel', parentId, onModelLoaded, defaultTabTitle, ...rest } = props;
+  const flowEngine = useFlowEngine();
+  const ctx = useFlowViewContext();
+  const { loading, data } = useRequest(
+    async () => {
+      const options = {
+        async: true,
+        parentId,
+        subKey: 'page',
+        subType: 'object',
+        use: pageModelClass,
+      };
+      if (pageModelClass === 'ChildPageModel') {
+        const tabTitle = defaultTabTitle || flowEngine.translate?.('Details');
+        options['subModels'] = {
+          tabs: [
+            {
+              use: 'ChildPageTabModel',
+              stepParams: {
+                pageTabSettings: {
+                  tab: {
+                    title: tabTitle,
+                  },
+                },
+              },
+            },
+          ],
+        };
+        // 弹窗或者子页面中，默认显示 tab
+        options['stepParams'] = {
+          pageSettings: {
+            general: {
+              displayTitle: false,
+              enableTabs: true,
+            },
+          },
+        };
+      }
+      const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
+      if (data?.uid && onModelLoaded) {
+        data.context.addDelegate(ctx);
+        data.removeParentDelegate();
+        onModelLoaded(data.uid, data);
+      }
+      return data;
+    },
+    {
+      refreshDeps: [parentId],
+    },
+  );
+  if (loading || !data?.uid) {
+    return <SkeletonFallback style={{ margin: ctx?.isMobileLayout ? 8 : ctx?.themeToken.marginBlock }} />;
+  }
+  return <InternalFlowPage uid={data.uid} {...rest} />;
+});
+
+FlowPage.displayName = 'FlowPage';
+
+export const RemoteFlowModelRenderer = (props) => {
+  const { uid, parentId, subKey, ...rest } = props;
+  const flowEngine = useFlowEngine();
+  const { loading, data } = useRequest(
+    async () => {
+      const data = await flowEngine.loadModel({ uid, parentId, subKey });
+      return data;
+    },
+    {
+      refreshDeps: [uid, parentId, subKey],
+    },
+  );
+  if (loading || !data?.uid) {
+    return <SkeletonFallback style={{ margin: 16 }} />;
+  }
+  return <InternalFlowPage uid={data.uid} {...rest} />;
+};
+
+export { FlowRoute };

package/src/flow/__tests__/FlowModelRepository.test.ts

@@ -0,0 +1,61 @@
+/**
+ * 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, it, expect, vi } from 'vitest';
+import { FlowModelRepository } from '../FlowModelRepository';
+
+describe('FlowModelRepository', () => {
+  it('dedupes concurrent findOne requests with same key', async () => {
+    const request = vi.fn(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      return {
+        data: {
+          data: {
+            uid: 'u1',
+            stepParams: { a: 1, nested: { b: 2 } },
+            subModels: { grid: { uid: 'g1', stepParams: { c: 3 } } },
+          },
+        },
+      };
+    });
+
+    const repo = new FlowModelRepository({ apiClient: { request } } as any);
+    const [a, b] = await Promise.all([repo.findOne({ uid: 'u1' }), repo.findOne({ uid: 'u1', foo: 'bar' })]);
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(a).toEqual(b);
+    expect(a).not.toBe(b);
+    expect(a.stepParams).not.toBe(b.stepParams);
+    expect(a.stepParams.nested).not.toBe(b.stepParams.nested);
+  });
+
+  it('does not cache after the in-flight promise resolves', async () => {
+    const request = vi.fn(async () => ({ data: { data: { uid: 'u1', stepParams: { a: 1 } } } }));
+    const repo = new FlowModelRepository({ apiClient: { request } } as any);
+
+    await repo.findOne({ uid: 'u1' });
+    await repo.findOne({ uid: 'u1' });
+
+    expect(request).toHaveBeenCalledTimes(2);
+  });
+
+  it('clears in-flight entry when request rejects', async () => {
+    const request = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('boom'))
+      .mockResolvedValueOnce({ data: { data: { uid: 'u1' } } });
+
+    const repo = new FlowModelRepository({ apiClient: { request } } as any);
+
+    await expect(repo.findOne({ uid: 'u1' })).rejects.toThrow('boom');
+    await expect(repo.findOne({ uid: 'u1' })).resolves.toEqual({ uid: 'u1' });
+
+    expect(request).toHaveBeenCalledTimes(2);
+  });
+});

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -0,0 +1,473 @@
+/**
+ * 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, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { FlowEngine, FlowEngineProvider, type FlowModel } from '@nocobase/flow-engine';
+import FlowRoute from '../components/FlowRoute';
+
+type MockAdminLayoutModel = FlowModel & {
+  registerRoutePage: ReturnType<typeof vi.fn>;
+  updateRoutePage: ReturnType<typeof vi.fn>;
+  unregisterRoutePage: ReturnType<typeof vi.fn>;
+};
+
+const { hookState } = vi.hoisted(() => {
+  return {
+    hookState: {
+      refresh: vi.fn(),
+    },
+  };
+});
+
+describe('FlowRoute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    hookState.refresh = vi.fn();
+  });
+
+  it('should bridge page lifecycle to admin-layout-model', async () => {
+    const engine = new FlowEngine();
+    const routeRepository = {
+      refreshAccessible: hookState.refresh,
+      isAccessibleLoaded: () => true,
+      ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+      getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+    };
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-page' },
+        pathname: '/admin/test-page',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({
+        uid: 'admin-layout-model',
+        use: 'FlowModel',
+      }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    const { rerender, unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalledWith(
+        'test-page',
+        expect.objectContaining({
+          active: false,
+          refreshDesktopRoutes: expect.any(Function),
+          layoutContentElement: expect.any(HTMLDivElement),
+        }),
+      );
+    });
+
+    await adminLayoutModel.registerRoutePage.mock.calls[0][1].refreshDesktopRoutes();
+    expect(hookState.refresh).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      expect(adminLayoutModel.updateRoutePage).toHaveBeenCalledWith(
+        'test-page',
+        expect.objectContaining({
+          refreshDesktopRoutes: expect.any(Function),
+          layoutContentElement: expect.any(HTMLDivElement),
+        }),
+      );
+    });
+
+    rerender(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    unmount();
+    expect(adminLayoutModel.unregisterRoutePage).toHaveBeenCalledWith('test-page');
+  });
+
+  it('should fail fast when admin-layout-model is missing', () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-page' },
+        pathname: '/admin/test-page',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    try {
+      expect(() => {
+        render(
+          <FlowEngineProvider engine={engine}>
+            <MemoryRouter initialEntries={['/flow/test-page']}>
+              <Routes>
+                <Route path="/flow/:name" element={<FlowRoute />} />
+              </Routes>
+            </MemoryRouter>
+          </FlowEngineProvider>,
+        );
+      }).toThrowError(/admin-layout-model/);
+    } finally {
+      consoleErrorSpy.mockRestore();
+    }
+  });
+
+  it('should wait accessible routes before bridging page lifecycle', async () => {
+    const engine = new FlowEngine();
+    let resolveAccessible!: () => void;
+    const ensureAccessibleLoaded = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveAccessible = resolve;
+        }),
+    );
+    const routeRepository = {
+      refreshAccessible: hookState.refresh,
+      isAccessibleLoaded: () => false,
+      ensureAccessibleLoaded,
+      getRouteBySchemaUid: vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' })),
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+
+    resolveAccessible();
+
+    await waitFor(() => {
+      expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+    });
+  });
+
+  it('should show 404 when current route is a legacy page in v2 runtime', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        pathname: '/v2/admin/test-page/tab/tab-1',
+        search: '?from=direct',
+        hash: '#dialog',
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => ({ type: 'page', schemaUid: 'test-page' })),
+        },
+      });
+      engine.context.defineProperty('app', {
+        value: {
+          getPublicPath: () => '/v2/',
+          router: {
+            getBasename: () => '/v2',
+          },
+        },
+      });
+
+      const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+        engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+        {
+          registerRoutePage: vi.fn(),
+          updateRoutePage: vi.fn(),
+          unregisterRoutePage: vi.fn(),
+        },
+      );
+
+      render(
+        <FlowEngineProvider engine={engine}>
+          <MemoryRouter initialEntries={['/flow/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(replace).not.toHaveBeenCalled();
+      expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+      expect(adminLayoutModel.updateRoutePage).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should not redirect when route does not exist', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => undefined),
+        },
+      });
+      engine.context.defineProperty('app', {
+        value: {
+          getPublicPath: () => '/v2/',
+          router: {
+            getBasename: () => '/v2',
+          },
+        },
+      });
+
+      const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+        engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+        {
+          registerRoutePage: vi.fn(),
+          updateRoutePage: vi.fn(),
+          unregisterRoutePage: vi.fn(),
+        },
+      );
+
+      render(
+        <FlowEngineProvider engine={engine}>
+          <MemoryRouter initialEntries={['/flow/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should keep sub app page inside spa when basename does not include /v2/', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        pathname: '/apps/demo/admin/test-page',
+        search: '?from=sub-app',
+        hash: '#panel',
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => true,
+          ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+          getRouteBySchemaUid: vi.fn(() => ({ type: 'page', schemaUid: 'test-page' })),
+        },
+      });
+      engine.context.defineProperty('app', {
+        value: {
+          getPublicPath: () => '/apps/demo/',
+          router: {
+            getBasename: () => '/apps/demo',
+          },
+        },
+      });
+
+      const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+        engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+        {
+          registerRoutePage: vi.fn(),
+          updateRoutePage: vi.fn(),
+          unregisterRoutePage: vi.fn(),
+        },
+      );
+
+      render(
+        <FlowEngineProvider engine={engine}>
+          <MemoryRouter initialEntries={['/flow/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+
+  it('should not redirect or loop when ensureAccessibleLoaded rejects', async () => {
+    const originalLocation = window.location;
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        ...originalLocation,
+        replace,
+      },
+    });
+
+    try {
+      const engine = new FlowEngine();
+      const ensureAccessibleLoaded = vi.fn().mockRejectedValue(new Error('load failed'));
+      engine.context.defineProperty('routeRepository', {
+        value: {
+          refreshAccessible: hookState.refresh,
+          isAccessibleLoaded: () => false,
+          ensureAccessibleLoaded,
+          getRouteBySchemaUid: vi.fn(),
+        },
+      });
+      engine.context.defineProperty('app', {
+        value: {
+          getPublicPath: () => '/v2/',
+          router: {
+            getBasename: () => '/v2',
+          },
+        },
+      });
+
+      const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+        engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+        {
+          registerRoutePage: vi.fn(),
+          updateRoutePage: vi.fn(),
+          unregisterRoutePage: vi.fn(),
+        },
+      );
+
+      render(
+        <FlowEngineProvider engine={engine}>
+          <MemoryRouter initialEntries={['/flow/test-page']}>
+            <Routes>
+              <Route path="/flow/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowEngineProvider>,
+      );
+
+      await waitFor(() => {
+        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
+      });
+      expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+      expect(replace).not.toHaveBeenCalled();
+    } finally {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
+});