@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.11

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

@@ -0,0 +1,289 @@
+/**
+ * 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 { SettingOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { Icon } from '../../../components';
+import { ActionModel } from '../../models/base';
+import {
+  AddSubModelButton,
+  DndProvider,
+  DragHandler,
+  Droppable,
+  FlowModel,
+  FlowModelRenderer,
+  FlowSettingsButton,
+  mergeSubModelItems,
+  observer,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
+import { Avatar, Button, Card, Tooltip, Typography } from 'antd';
+import React from 'react';
+
+const defaultIconColors = ['#3d8bff', '#00a8b5', '#35b26b', '#f5a623', '#ff7a45', '#e85d75', '#9254de', '#597ef7'];
+
+function getDefaultIconColor(title?: React.ReactNode) {
+  const source = typeof title === 'string' ? title : '';
+  const hash = Array.from(source).reduce((sum, char) => sum + char.charCodeAt(0), 0);
+  return defaultIconColors[hash % defaultIconColors.length];
+}
+
+type AppSwitcherActionPanelStructure = {
+  subModels: {
+    actions?: ActionModel[];
+  };
+};
+
+function isRenderableActionModel(action: unknown): action is ActionModel {
+  if (!action || typeof action !== 'object') {
+    return false;
+  }
+
+  const candidate = action as Partial<ActionModel>;
+  return typeof candidate.getTitle === 'function' && typeof candidate.onClick === 'function';
+}
+
+type EntryActionAvailability = {
+  isEntryActionAvailable?: () => boolean;
+  getEntryActionUnavailableMessage?: () => string | undefined;
+};
+
+function isEntryActionUnavailable(action: ActionModel) {
+  const candidate = action as ActionModel & EntryActionAvailability;
+  return typeof candidate.isEntryActionAvailable === 'function' && !candidate.isEntryActionAvailable();
+}
+
+function getEntryActionUnavailableMessage(action: ActionModel) {
+  const candidate = action as ActionModel & EntryActionAvailability;
+  return candidate.getEntryActionUnavailableMessage?.();
+}
+
+export class AppSwitcherActionPanelModel extends FlowModel<AppSwitcherActionPanelStructure> {
+  getConfigureActionsItems(): SubModelItemsType {
+    const linkAction: SubModelItem = {
+      key: 'app-switcher:link',
+      label: this.context.t('Link'),
+      createModelOptions: {
+        use: 'LinkActionModel',
+      },
+    };
+    const jsAction: SubModelItem = {
+      key: 'app-switcher:js-action',
+      label: this.context.t('JS action'),
+      createModelOptions: {
+        use: 'JSActionModel',
+      },
+    };
+
+    return mergeSubModelItems([[linkAction], this.context.app.entryActionManager.getItems('app-switcher'), [jsAction]]);
+  }
+
+  renderConfigureActions() {
+    return <AppSwitcherConfigureActionsButton model={this} />;
+  }
+
+  private getRenderableActions(options: { includeHidden?: boolean; includeUnavailable?: boolean } = {}) {
+    return this.mapSubModels('actions', (action) => action)
+      .filter(isRenderableActionModel)
+      .filter((action) => options.includeUnavailable || !isEntryActionUnavailable(action))
+      .filter((action) => options.includeHidden || !action.hidden);
+  }
+
+  hasActions() {
+    return this.getRenderableActions().length > 0;
+  }
+
+  renderContent() {
+    const token = this.context.themeToken;
+    const designable = !!this.context.flowSettingsEnabled;
+    const actions = this.getRenderableActions({ includeHidden: designable, includeUnavailable: designable });
+    const columnCount = Math.min(Math.max(actions.length || 1, 1), 2);
+    const buttonResetClass = css`
+      &.ant-btn {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: none;
+        box-shadow: none;
+        background: none;
+        color: ${token.colorText};
+        text-align: left;
+      }
+      &.ant-btn > span {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .ant-btn-icon {
+        display: none;
+      }
+    `;
+    const contentClass = css`
+      max-width: calc(100vw - 48px);
+      max-height: calc(100vh - 48px);
+      overflow: auto;
+      padding: ${token.paddingXS}px;
+    `;
+    const listClass = css`
+      display: grid;
+      grid-template-columns: repeat(${columnCount}, 260px);
+      gap: ${token.marginXXS}px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    `;
+
+    return (
+      <div className={contentClass}>
+        {actions.length ? (
+          <DndProvider>
+            <ul className={listClass}>
+              {actions.map((action) => {
+                const { icon = 'AppstoreOutlined', color } = action.props;
+                const title = action.getTitle();
+                const entryActionUnavailable = isEntryActionUnavailable(action);
+                const renderActionContent = (compact = false) => (
+                  <Card
+                    bordered={false}
+                    className={css`
+                      height: 56px;
+                      border-radius: ${token.borderRadius}px;
+                      box-shadow: none !important;
+                      opacity: ${compact ? token.opacityLoading : 1};
+
+                      &:hover {
+                        background: ${token.colorBgTextHover};
+                        box-shadow: none !important;
+                      }
+
+                      .ant-card-body {
+                        height: 100%;
+                        padding: ${token.paddingXS}px;
+                        display: flex;
+                        align-items: center;
+                        gap: ${token.marginXS}px;
+                      }
+                    `}
+                    styles={{ body: { background: 'transparent' } }}
+                  >
+                    <Avatar
+                      size={32}
+                      shape="square"
+                      icon={<Icon type={icon as string} />}
+                      style={{
+                        flex: '0 0 auto',
+                        borderRadius: 6,
+                        background: color || getDefaultIconColor(title),
+                      }}
+                    />
+                    <Typography.Text
+                      ellipsis
+                      title={typeof title === 'string' ? title : undefined}
+                      style={{
+                        minWidth: 0,
+                        color: token.colorText,
+                        fontSize: token.fontSize,
+                        lineHeight: token.lineHeight,
+                      }}
+                    >
+                      {title}
+                    </Typography.Text>
+                  </Card>
+                );
+                action.enableEditDanger = false;
+                action.enableEditType = false;
+                action.enableEditIconOnly = false;
+                action.enableEditColor = true;
+                action.renderButton = () => {
+                  if (entryActionUnavailable) {
+                    return (
+                      <Tooltip title={getEntryActionUnavailableMessage(action)}>
+                        <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                          {renderActionContent(true)}
+                        </Button>
+                      </Tooltip>
+                    );
+                  }
+                  return (
+                    <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                      {renderActionContent()}
+                    </Button>
+                  );
+                };
+                action.renderHiddenInConfig = () => (
+                  <Tooltip
+                    title={
+                      entryActionUnavailable
+                        ? getEntryActionUnavailableMessage(action)
+                        : this.context.t('The button is hidden and only visible when the UI Editor is active')
+                    }
+                  >
+                    <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                      {renderActionContent(true)}
+                    </Button>
+                  </Tooltip>
+                );
+
+                return (
+                  <li key={action.uid} style={{ width: 260, height: 56, listStyle: 'none' }}>
+                    <Droppable model={action}>
+                      <FlowModelRenderer
+                        model={action}
+                        showFlowSettings={{ showBackground: false, showBorder: false, toolbarPosition: 'above' }}
+                        extraToolbarItems={
+                          designable
+                            ? [
+                                {
+                                  key: 'drag-handler',
+                                  component: DragHandler,
+                                  sort: 1,
+                                },
+                              ]
+                            : []
+                        }
+                      />
+                    </Droppable>
+                  </li>
+                );
+              })}
+            </ul>
+          </DndProvider>
+        ) : (
+          <div style={{ width: 260, minHeight: token.marginXS }} />
+        )}
+        {designable && <div style={{ marginTop: token.marginXS }}>{this.renderConfigureActions()}</div>}
+      </div>
+    );
+  }
+}
+
+AppSwitcherActionPanelModel.define({
+  label: 'App switcher actions',
+  children: false,
+  createModelOptions: {
+    use: 'AppSwitcherActionPanelModel',
+  },
+});
+
+const AppSwitcherConfigureActionsButton = observer(({ model }: { model: AppSwitcherActionPanelModel }) => {
+  const entryActionsRevision = model.context.app.entryActionManager.revision;
+  return (
+    <AddSubModelButton
+      key={`app-switcher-add-actions-${entryActionsRevision}`}
+      model={model}
+      items={model.getConfigureActionsItems()}
+      subModelKey="actions"
+      keepDropdownOpen
+    >
+      <FlowSettingsButton icon={<SettingOutlined />}>{model.context.t('Actions')}</FlowSettingsButton>
+    </AddSubModelButton>
+  );
+});

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

@@ -70,9 +70,7 @@ const SettingsMenu: React.FC = () => {
         key: 'userManual',
         label: (
           <a
-            href={
-              isSimplifiedChinese ? 'https://v2.docs.nocobase.com/cn/guide/' : 'https://v2.docs.nocobase.com/guide/'
-            }
+            href={isSimplifiedChinese ? 'https://docs.nocobase.com/cn/guide/' : 'https://docs.nocobase.com/guide/'}
             target="_blank"
             rel="noreferrer"
           >

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

@@ -0,0 +1,188 @@
+/**
+ * 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 { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { createMemoryRouter, RouterProvider, useParams } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import type { LayoutDefinition } from '../../../../layout-manager/types';
+import { AdminLayoutComponent } from '../AdminLayoutComponent';
+import { AdminLayoutModel } from '../AdminLayoutModel';
+import { AdminLayoutContent } from '../AdminLayoutSlotModels';
+
+vi.mock('@ant-design/pro-layout', async () => {
+  const ReactModule = await import('react');
+  const RouteContext = ReactModule.createContext({ isMobile: false });
+
+  return {
+    default: (props: { children?: React.ReactNode }) =>
+      ReactModule.createElement(
+        RouteContext.Provider,
+        { value: { isMobile: false } },
+        ReactModule.createElement('div', { 'data-testid': 'pro-layout' }, props.children),
+      ),
+    RouteContext,
+  };
+});
+
+vi.mock('../../../system-settings', () => ({
+  useSystemSettings: () => ({
+    loading: false,
+    data: {
+      data: {
+        title: 'NocoBase',
+      },
+    },
+  }),
+}));
+
+vi.mock('../useApplications', () => ({
+  useApplications: () => ({
+    appList: [],
+  }),
+}));
+
+vi.mock('../AppListRender', () => ({
+  useAppListRender: () => undefined,
+}));
+
+describe('AdminLayoutComponent', () => {
+  it('keeps custom admin layout pages alive by layout route name', async () => {
+    const layout: LayoutDefinition = {
+      routeName: 'admin2',
+      routePath: '/admin2',
+      rootRouteName: 'admin2',
+      uid: 'custom-admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        listAccessible: () => [],
+      },
+    });
+
+    const Page = () => {
+      const { name } = useParams();
+      useEffect(() => {
+        events.push(`mount:${name}`);
+        return () => {
+          events.push(`unmount:${name}`);
+        };
+      }, [name]);
+
+      return <div data-testid={`admin-layout-page-${name}`}>page {name}</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutContent layout={layout} />,
+          children: [
+            {
+              id: 'admin2.__page',
+              path: ':name',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin2/page-a'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('admin-layout-page-page-a')).toBeInTheDocument();
+
+    await act(async () => {
+      await router.navigate('/admin2/page-b');
+    });
+
+    expect(await screen.findByTestId('admin-layout-page-page-b')).toBeInTheDocument();
+    expect(screen.getByTestId('admin-layout-page-page-a')).toBeInTheDocument();
+    expect(events).toEqual(['mount:page-a', 'mount:page-b']);
+  });
+
+  it('activates the current layout before loading accessible routes', async () => {
+    const layout: LayoutDefinition = {
+      routeName: 'admin2',
+      routePath: '/admin2',
+      rootRouteName: 'admin2',
+      uid: 'custom-admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const deactivateLayout = vi.fn();
+    const activateLayout = vi.fn(() => deactivateLayout);
+    const ensureAccessibleLoaded = vi.fn(async () => []);
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout,
+        ensureAccessibleLoaded,
+        listAccessible: () => [],
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+        },
+      ],
+      {
+        initialEntries: ['/admin2'],
+      },
+    );
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(ensureAccessibleLoaded).toHaveBeenCalled();
+    });
+    expect(activateLayout).toHaveBeenCalledWith(layout);
+    expect(activateLayout.mock.invocationCallOrder[0]).toBeLessThan(ensureAccessibleLoaded.mock.invocationCallOrder[0]);
+
+    unmount();
+
+    expect(deactivateLayout).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -318,6 +318,50 @@ describe('AdminLayoutModel menu items', () => {
     expect(route.children[1]._model).toBe(adminLayoutModel.subModels.menuItems?.[1]);
   });
 
+  it('should generate ProLayout route tree under a custom admin layout route path', () => {
+    const adminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: 'admin2-layout-model',
+      use: AdminLayoutModel,
+      props: {
+        layout: {
+          routeName: 'admin2',
+          routePath: '/admin2',
+          uid: 'admin2-layout-model',
+          layoutModelClass: 'AdminLayoutModel',
+        },
+      },
+    });
+
+    adminLayoutModel.syncMenuRoutes([
+      {
+        id: 1,
+        title: 'Group',
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            id: 11,
+            title: 'Page 1',
+            schemaUid: 'page-1',
+            type: NocoBaseDesktopRouteType.flowPage,
+          },
+        ],
+      },
+    ]);
+
+    const route = adminLayoutModel.toProLayoutRoute({
+      designable: false,
+      isMobile: false,
+      t: (title) => title,
+    });
+
+    expect(route.children[0].path).toBe('/admin2/1');
+    expect(route.children[0].redirect).toBe('/admin2/page-1');
+    expect(route.children[0]._runtimePath).toBe('/apps/demo/v2/admin2/page-1');
+    expect(route.children[0].routes?.[0].path).toBe('/admin2/page-1');
+    expect(route.children[0].routes?.[0].redirect).toBe('/admin2/page-1');
+    expect(route.children[0].routes?.[0]._runtimePath).toBe('/apps/demo/v2/admin2/page-1');
+  });
+
   it('should filter legacy page menu routes but keep empty groups in v2 admin layout', () => {
     const adminLayoutModel = engine.createModel<AdminLayoutModel>({
       uid: 'admin-layout-model',
@@ -1128,6 +1172,46 @@ describe('AdminLayoutModel menu items', () => {
     expect(adminLayoutModel.menuRouteRefreshVersion).toBe(refreshBefore + 1);
   });
 
+  it('should refresh the owning admin layout when hiding custom layout menu routes dynamically', () => {
+    const defaultAdminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: ADMIN_LAYOUT_MODEL_UID,
+      use: AdminLayoutModel,
+    });
+    const customAdminLayoutModel = engine.createModel<AdminLayoutModel>({
+      uid: 'custom-admin-layout-model',
+      use: AdminLayoutModel,
+      props: {
+        layout: {
+          routeName: 'admin2',
+          routePath: '/admin2',
+          rootRouteName: 'admin2',
+          uid: 'custom-admin-layout-model',
+          layoutModelClass: 'AdminLayoutModel',
+          rootPageModelClass: 'RootPageModel',
+          childPageModelClass: 'ChildPageModel',
+          authCheck: true,
+        },
+      },
+    });
+    const model = engine.createModel<AdminLayoutMenuItemModel>({
+      uid: 'menu-item-custom-layout-dynamic-hidden',
+      use: AdminLayoutMenuItemModel,
+      props: {
+        route: createRoute(),
+      },
+    });
+
+    model.setParent(customAdminLayoutModel);
+
+    const defaultRefreshBefore = defaultAdminLayoutModel.menuRouteRefreshVersion;
+    const customRefreshBefore = customAdminLayoutModel.menuRouteRefreshVersion;
+
+    model.setHidden(true);
+
+    expect(customAdminLayoutModel.menuRouteRefreshVersion).toBe(customRefreshBefore + 1);
+    expect(defaultAdminLayoutModel.menuRouteRefreshVersion).toBe(defaultRefreshBefore);
+  });
+
   it('should render hidden menu item with opacity and keep original title in config mode', () => {
     const model = engine.createModel<AdminLayoutMenuItemModel>({
       uid: 'menu-item-hidden-in-config',
@@ -2222,6 +2306,21 @@ describe('AdminLayoutModel menu items', () => {
     );
   });
 
+  it('should include router basename when opening same-origin links in a new window', async () => {
+    await openAdminLayoutMenuLink({
+      context: engine.context as any,
+      href: '/admin2/page',
+      params: [{ name: 'from', value: 'admin' }],
+      openInNewWindow: true,
+      isMobile: false,
+      closeMobileMenu: vi.fn(),
+      navigate: navigateMock,
+      basenameOfCurrentRouter: '/v',
+    });
+
+    expect(window.open).toHaveBeenCalledWith('/v/admin2/page?from=admin', '_blank', 'noopener,noreferrer');
+  });
+
   it('should resolve sibling move options for non-group drag target', () => {
     const activeModel = engine.createModel<AdminLayoutMenuItemModel>({
       uid: 'drag-source-page',