@nocobase/client-v2 2.1.0-alpha.22 → 2.1.0-alpha.24

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutModel.test.tsx

@@ -0,0 +1,284 @@
+/**
+ * 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 { observable } from '@formily/reactive';
+import { act, render, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { flowModelRendererSpy } = vi.hoisted(() => {
+  return {
+    flowModelRendererSpy: vi.fn(),
+  };
+});
+
+vi.mock('@nocobase/flow-engine', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  return {
+    ...actual,
+    FlowModelRenderer: (props: any) => {
+      flowModelRendererSpy(props);
+      React.useEffect(() => {
+        props.model?.onMount?.();
+        return () => {
+          props.model?.onUnmount?.();
+        };
+      }, [props.model]);
+      return <div data-testid="flow-model-renderer" />;
+    },
+  };
+});
+
+import {
+  FlowEngine,
+  FlowEngineProvider,
+  FlowModelRenderer,
+  useFlowEngine,
+  type FlowModel,
+} from '@nocobase/flow-engine';
+import { AdminLayoutModel, getAdminLayoutModel } from '..';
+import { TopbarActionModel } from '../../../models/topbar/TopbarActionModel';
+import { UserCenterTopbarActionModel } from '../../../models/topbar/UserCenterTopbarActionModel';
+import { TopbarActionsBar } from '../TopbarActionsBar';
+
+class TestAdminLayoutModel extends AdminLayoutModel {
+  render() {
+    return null;
+  }
+}
+
+class TestTopbarActionModelA extends TopbarActionModel {
+  sort = 20;
+  actionId = 'test-topbar-a';
+}
+
+class TestTopbarActionModelB extends TopbarActionModel {
+  sort = 10;
+  actionId = 'test-topbar-b';
+}
+
+const TestAdminLayoutHost = (props) => {
+  const flowEngine = useFlowEngine();
+  const model = getAdminLayoutModel<TestAdminLayoutModel>(flowEngine, {
+    create: true,
+    props,
+    use: TestAdminLayoutModel,
+  });
+
+  if (!model) {
+    throw new Error('[NocoBase] Failed to create test admin-layout-model.');
+  }
+
+  return <FlowModelRenderer model={model} />;
+};
+
+describe('AdminLayoutModel runtime', () => {
+  beforeEach(() => {
+    flowModelRendererSpy.mockClear();
+  });
+
+  it('should create model via getAdminLayoutModel and update props on rerender', async () => {
+    const engine = new FlowEngine();
+    const { rerender } = render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost testFlag="v1" />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeInstanceOf(TestAdminLayoutModel);
+    expect(model.props.testFlag).toBe('v1');
+
+    rerender(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost testFlag="v2" />
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(model.props.testFlag).toBe('v2');
+    });
+  });
+
+  it('should throw when required model is missing', () => {
+    const engine = new FlowEngine();
+    expect(() => {
+      getAdminLayoutModel(engine, { required: true });
+    }).toThrowError(/admin-layout-model/);
+  });
+
+  it('should expose live layoutContentElement on engine context', async () => {
+    const engine = new FlowEngine();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    const element = document.createElement('div');
+
+    act(() => {
+      model.setLayoutContentElement(element);
+    });
+
+    expect(engine.context.layoutContentElement).toBe(element);
+
+    act(() => {
+      model.setLayoutContentElement(null);
+    });
+
+    expect(engine.context.layoutContentElement).toBeNull();
+  });
+
+  it('should expose live engine currentRoute when active page changes', async () => {
+    const engine = new FlowEngine();
+    const routeMap = {
+      'page-1': { title: 'Page 1' },
+      'page-2': { title: 'Page 2' },
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => routeMap[pageUid],
+      },
+    });
+    const routeRef = observable.ref({
+      params: { name: 'page-1' },
+      pathname: '/admin/page-1',
+    });
+    engine.context.defineProperty('route', {
+      get: () => routeRef.value,
+      cache: false,
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    model.registerRoutePage('page-1', {
+      active: true,
+    });
+    model.registerRoutePage('page-2', {
+      active: true,
+    });
+
+    await waitFor(() => {
+      expect(engine.context.currentRoute.title).toBe('Page 1');
+    });
+
+    act(() => {
+      routeRef.value = {
+        params: { name: 'page-2' },
+        pathname: '/admin/page-2',
+      };
+    });
+
+    await waitFor(() => {
+      expect(engine.context.currentRoute.title).toBe('Page 2');
+    });
+  });
+
+  it('should keep pageActive in sync after non-active route page updates', async () => {
+    const engine = new FlowEngine();
+    const routeRef = observable.ref({
+      params: { name: 'page-1' },
+      pathname: '/admin/page-1',
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+    engine.context.defineProperty('route', {
+      get: () => routeRef.value,
+      cache: false,
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    model.registerRoutePage('page-1', {
+      active: false,
+    });
+
+    const routeModel = engine.getModel<FlowModel>('page-1');
+
+    await waitFor(() => {
+      expect(routeModel.context.pageActive.value).toBe(true);
+    });
+
+    act(() => {
+      model.updateRoutePage('page-1', {
+        refreshDesktopRoutes: vi.fn(),
+      });
+    });
+
+    expect(routeModel.context.pageActive.value).toBe(true);
+
+    act(() => {
+      routeRef.value = {
+        params: { name: 'page-2' },
+        pathname: '/admin/page-2',
+      };
+    });
+
+    await waitFor(() => {
+      expect(routeModel.context.pageActive.value).toBe(false);
+    });
+  });
+
+  it('should expose unified TopbarActionsBar through actionsRender', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      TopbarActionModel,
+      TestTopbarActionModelA,
+      TestTopbarActionModelB,
+      UserCenterTopbarActionModel,
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    await act(async () => {
+      await model.dispatchEvent('beforeRender', undefined, { useCache: false });
+    });
+
+    expect(typeof model.props.actionsRender).toBe('function');
+
+    const rendered = model.props.actionsRender({ isMobile: false });
+    expect(rendered).toHaveLength(1);
+    expect(rendered[0].type).toBe(TopbarActionsBar);
+    expect(rendered[0].props.isMobile).toBe(false);
+    expect(rendered[0].props.actions.map((action) => action.uid)).toEqual([
+      'topbar-action-TestTopbarActionModelA',
+      'topbar-action-TestTopbarActionModelB',
+      'topbar-action-UserCenterTopbarActionModel',
+    ]);
+  });
+});

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -0,0 +1,211 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { allowMock, flowModelRendererSpy } = vi.hoisted(() => {
+  return {
+    allowMock: vi.fn(),
+    flowModelRendererSpy: vi.fn(),
+  };
+});
+
+vi.mock('../../../../acl/useAclSnippets', () => {
+  return {
+    useAclSnippets: () => ({
+      allow: allowMock,
+    }),
+  };
+});
+
+vi.mock('../HelpLite', () => {
+  return {
+    HelpLite: () => <div data-testid="help-lite" />,
+  };
+});
+
+vi.mock('@nocobase/flow-engine', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
+  return {
+    ...actual,
+    FlowModelRenderer: (props: any) => {
+      flowModelRendererSpy(props);
+
+      if (props.model?.shouldThrow) {
+        throw new Error('broken topbar action');
+      }
+
+      return <div data-testid={`flow-model-${props.model.uid}`}>{props.model.uid}</div>;
+    },
+  };
+});
+
+import { TopbarActionsBar, getVisibleTopbarActions } from '../TopbarActionsBar';
+import { getTopbarPluginSettingsItems } from '../../../models/topbar/TopbarActionModel';
+
+const createAction = (options: Record<string, any>) => {
+  return {
+    sort: 0,
+    aclSnippet: undefined,
+    hidden: false,
+    isHidden() {
+      return !!this.hidden;
+    },
+    ...options,
+  } as any;
+};
+
+describe('TopbarActionsBar helpers', () => {
+  beforeEach(() => {
+    allowMock.mockReset();
+    flowModelRendererSpy.mockClear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should filter hidden actions first and keep sort stable', () => {
+    const allow = vi.fn((snippet: string) => snippet !== 'deny');
+    const hiddenAction = createAction({
+      uid: 'hidden',
+      sort: 0,
+      aclSnippet: 'deny',
+      hidden: true,
+    });
+    const first = createAction({
+      uid: 'first',
+      sort: 0,
+    });
+    const second = createAction({
+      uid: 'second',
+      sort: 0,
+    });
+    const last = createAction({
+      uid: 'last',
+      sort: 10,
+      aclSnippet: 'allow',
+    });
+
+    const actions = getVisibleTopbarActions([last, hiddenAction, second, first], allow);
+
+    expect(actions.map((action) => action.uid)).toEqual(['second', 'first', 'last']);
+    expect(allow).toHaveBeenCalledTimes(1);
+    expect(allow).toHaveBeenCalledWith('allow');
+  });
+
+  it('should build plugin settings dropdown items with plugin manager and grouped settings', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: true,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'plugin-manager',
+          name: 'plugin-manager',
+          title: 'Plugin manager',
+          path: '/admin/settings/plugin-manager',
+          icon: null,
+          componentLoader: async () => null,
+        },
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/admin/settings/system-settings',
+          icon: null,
+          isPinned: true,
+          componentLoader: async () => null,
+        },
+        {
+          key: 'security',
+          name: 'security',
+          title: 'Security',
+          path: '/admin/settings/security',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    expect((items as any[]).map((item) => item.type || item.key)).toEqual([
+      'plugin-manager',
+      'divider',
+      'system-settings',
+      'divider',
+      'security',
+    ]);
+    expect((items as any[])[2]).toMatchObject({
+      key: 'system-settings',
+      name: 'system-settings',
+      path: '/admin/settings/system-settings',
+    });
+  });
+
+  it('should return empty dropdown items when plugin manager and settings are both unavailable', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [],
+    });
+
+    expect(items).toEqual([]);
+  });
+
+  it('should not inject hidden plugin manager into topbar dropdown', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: true,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'plugin-manager',
+          name: 'plugin-manager',
+          title: 'Plugin manager',
+          path: '/admin/settings/plugin-manager',
+          icon: null,
+          hidden: true,
+        },
+      ] as any,
+    });
+
+    expect(items).toEqual([]);
+  });
+});
+
+describe('TopbarActionsBar', () => {
+  beforeEach(() => {
+    allowMock.mockReset();
+    allowMock.mockReturnValue(true);
+    flowModelRendererSpy.mockClear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should keep HelpLite rendered when one action fails', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <TopbarActionsBar
+        actions={[
+          createAction({ uid: 'good-1' }),
+          createAction({ uid: 'bad', shouldThrow: true }),
+          createAction({ uid: 'good-2' }),
+        ]}
+      />,
+    );
+
+    expect(screen.getByTestId('flow-model-good-1')).toBeInTheDocument();
+    expect(screen.queryByTestId('flow-model-bad')).not.toBeInTheDocument();
+    expect(screen.getByTestId('flow-model-good-2')).toBeInTheDocument();
+    expect(screen.getByTestId('help-lite')).toBeInTheDocument();
+  });
+});

package/src/flow/admin-shell/admin-layout/__tests__/flowSettingsPreference.test.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT,
+  FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
+  readFlowSettingsPreference,
+  writeFlowSettingsPreference,
+} from '../flowSettingsPreference';
+
+describe('flowSettingsPreference', () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY);
+  });
+
+  afterEach(() => {
+    window.localStorage.removeItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY);
+    vi.restoreAllMocks();
+  });
+
+  it('should read disabled preference by default', () => {
+    expect(readFlowSettingsPreference()).toBe(false);
+  });
+
+  it('should write enabled preference and dispatch change event', () => {
+    const listener = vi.fn();
+    window.addEventListener(FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT, listener);
+
+    writeFlowSettingsPreference(true);
+
+    expect(window.localStorage.getItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY)).toBe('1');
+    expect(readFlowSettingsPreference()).toBe(true);
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    window.removeEventListener(FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT, listener);
+  });
+});

package/src/flow/admin-shell/admin-layout/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export const ADMIN_LAYOUT_MODEL_UID = 'admin-layout-model';

package/src/flow/admin-shell/admin-layout/flowSettingsPreference.ts

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ */
+
+export const FLOW_SETTINGS_PREFERENCE_STORAGE_KEY = 'NOCOBASE_V2_FLOW_SETTINGS_ENABLED';
+export const FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT = 'nocobase:v2:flow-settings-preference-change';
+
+/**
+ * 读取 UI Editor 本地偏好。
+ *
+ * @returns {boolean} 是否偏好开启
+ */
+export function readFlowSettingsPreference() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    return window.localStorage.getItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY) === '1';
+  } catch (error) {
+    console.error('[NocoBase] Failed to read flow settings preference.', error);
+    return false;
+  }
+}
+
+/**
+ * 写入 UI Editor 本地偏好，并广播同页事件。
+ *
+ * @param {boolean} enabled 是否开启
+ * @returns {void}
+ */
+export function writeFlowSettingsPreference(enabled: boolean) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY, enabled ? '1' : '0');
+    window.dispatchEvent(
+      new CustomEvent(FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT, {
+        detail: {
+          enabled,
+        },
+      }),
+    );
+  } catch (error) {
+    console.error('[NocoBase] Failed to write flow settings preference.', error);
+  }
+}

package/src/flow/admin-shell/admin-layout/index.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+export * from './AdminLayoutComponent';
+export * from './AdminLayoutModel';
+export * from './AdminLayoutSlotModels';
+export * from './AdminLayoutMenuModels';
+export * from './AdminLayoutMenuFlowUtils';
+export * from './resolveAdminRouteRuntimeTarget';
+export * from './constants';
+export * from './ResetThemeTokenAndKeepAlgorithm';
+export * from './useApplications';
+export * from './PinnedPluginListLite';
+export * from './mobile-layout';

package/src/flow/admin-shell/admin-layout/mobile-layout.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 { useFlowEngine } from '@nocobase/flow-engine';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+
+export const useMobileLayout = () => {
+  const flowEngine = useFlowEngine({ throwError: false });
+  if (!flowEngine) {
+    return {
+      isMobileLayout: false,
+      setIsMobileLayout: () => {},
+    };
+  }
+
+  const adminLayoutModel = flowEngine.getModel<any>(ADMIN_LAYOUT_MODEL_UID);
+
+  if (!adminLayoutModel) {
+    return {
+      isMobileLayout: false,
+      setIsMobileLayout: () => {},
+    };
+  }
+
+  return {
+    isMobileLayout: adminLayoutModel.isMobileLayout,
+    setIsMobileLayout: adminLayoutModel.setIsMobileLayout.bind(adminLayoutModel),
+  };
+};

package/src/flow/admin-shell/admin-layout/mobileMenuNavigation.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+export const MOBILE_MENU_CLOSE_DELAY_MS = 220;
+
+export const runAfterMobileMenuClosed = ({
+  isMobile,
+  closeMobileMenu,
+  callback,
+  delayMs = MOBILE_MENU_CLOSE_DELAY_MS,
+}: {
+  isMobile: boolean;
+  closeMobileMenu: () => void;
+  callback: () => void;
+  delayMs?: number;
+}) => {
+  if (!isMobile) {
+    callback();
+    return;
+  }
+
+  closeMobileMenu();
+  window.setTimeout(callback, delayMs);
+};