@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.10

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

@@ -17,7 +17,7 @@ import {
   FlowSettingsButton,
   observer,
 } from '@nocobase/flow-engine';
-import { Badge, Tooltip } from 'antd';
+import { Badge } from 'antd';
 import qs from 'qs';
 import React, { FC, useCallback, useContext, useEffect } from 'react';
 import { Link, useLocation, type NavigateFunction } from 'react-router-dom';
@@ -153,6 +153,24 @@ const getLayoutRoutePathFromModel = (model: FlowModel): AdminLayoutRoutePathLike
 };
 
 const menuItemStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+const siderMenuItemStyle: React.CSSProperties = { ...menuItemStyle, width: '100%', minWidth: 0 };
+const siderMenuItemContentStyle: React.CSSProperties = { flex: 1, minWidth: 0, overflow: 'hidden' };
+const siderMenuItemLinkStyle: React.CSSProperties = {
+  display: 'block',
+  flex: 1,
+  width: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+};
+const getMenuItemText = (name: React.ReactNode) => {
+  if (typeof name === 'string' || typeof name === 'number') {
+    return String(name);
+  }
+
+  if (React.isValidElement<{ title?: unknown }>(name) && typeof name.props.title === 'string') {
+    return name.props.title;
+  }
+};
 const groupLandingEntryStyle = {
   display: 'inline-flex',
   alignItems: 'center',
@@ -553,16 +571,16 @@ export function resolveAdminLayoutMenuDragMoveOptionsFromEvent(
 
 const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
   const routerBasename = useRouterBasename();
   const { closeMobileMenu } = useContext(MobileMenuControlContext);
   const ariaLabel =
-    typeof item.name === 'string' || typeof item.name === 'number'
-      ? String(item.name)
-      : typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
-        ? String(item._route.title)
-        : undefined;
+    getMenuItemText(item.name) ??
+    (typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
+      ? String(item._route.title)
+      : undefined);
   const runtimePath = item._runtimePath;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, routerBasename) : runtimePath;
 
@@ -633,7 +651,12 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div aria-label={ariaLabel} role="none" style={menuItemStyle}>
+        <div
+          aria-label={ariaLabel}
+          title={inHeader || item._route?.tooltip ? undefined : ariaLabel}
+          role="none"
+          style={inHeader ? menuItemStyle : siderMenuItemStyle}
+        >
           {content}
           {landingEntry}
           {badgeCount != null && (
@@ -650,24 +673,9 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   );
 };
 
-const WithTooltip: FC<{ title: React.ReactNode; hidden: boolean; badgeProps: any }> = (props) => {
-  const { inHeader } = useContext(HeaderContext);
-
-  if (props.hidden || inHeader) {
-    return props.children;
-  }
-
-  return (
-    <Tooltip title={props.title} placement="right">
-      <Badge {...props.badgeProps} style={{ transform: 'none', maxWidth: '10em' }} dot={false}>
-        {props.children}
-      </Badge>
-    </Tooltip>
-  );
-};
-
 const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const location = useLocation();
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
@@ -677,7 +685,10 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
   const runtimePath = item._runtimePath || path;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, basenameOfCurrentRouter) : runtimePath;
   const isDocumentNavigation = item._navigationMode === 'document';
-  const badgeProps = { ...item._route.options?.badge, count: badgeCount };
+  const { textColor: badgeTextColor, ...antdBadgeOptions } = item._route.options?.badge || {};
+  const badgeProps = { ...antdBadgeOptions, count: badgeCount };
+  const menuItemText = getMenuItemText(item.name);
+  const nativeTitle = inHeader || item._route?.tooltip ? undefined : menuItemText;
 
   const canUseNativeAnchor = !!runtimePath && isDocumentNavigation;
 
@@ -767,17 +778,25 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     return (
       <ParentRouteContext.Provider value={item._parentRoute}>
         <NocoBaseRouteContext.Provider value={item._route}>
-          <div role="none" style={menuItemStyle}>
-            <div onClick={handleClickLink}>
-              <Link to={location.pathname} aria-label={typeof item.name === 'string' ? item.name : undefined}>
+          <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
+            <div onClick={handleClickLink} style={inHeader ? undefined : siderMenuItemContentStyle}>
+              <Link
+                to={location.pathname}
+                aria-label={menuItemText}
+                title={nativeTitle}
+                style={inHeader ? undefined : siderMenuItemLinkStyle}
+              >
                 {props.children}
               </Link>
             </div>
             {badgeCount != null && (
               <Badge
-                {...item._route.options?.badge}
-                count={badgeCount}
-                style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+                {...badgeProps}
+                style={{
+                  marginLeft: 4,
+                  ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                  maxWidth: '10em',
+                }}
                 dot={false}
               ></Badge>
             )}
@@ -787,45 +806,45 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     );
   }
 
-  const itemContent = (
-    <WithTooltip
-      title={item.name}
-      hidden={
-        item._route.type === NocoBaseDesktopRouteType.group || (item._depth || 0) > 0 || !props.options?.collapsed
-      }
-      badgeProps={badgeProps}
+  const itemContent = canUseNativeAnchor ? (
+    <a
+      href={runtimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
     >
-      {canUseNativeAnchor ? (
-        <a
-          href={runtimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem as any}
-        >
-          {props.children}
-        </a>
-      ) : runtimePath ? (
-        <Link
-          to={spaRuntimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem}
-        >
-          {props.children}
-        </Link>
-      ) : (
-        <span aria-label={typeof item.name === 'string' ? item.name : undefined}>{props.children}</span>
-      )}
-    </WithTooltip>
+      {props.children}
+    </a>
+  ) : runtimePath ? (
+    <Link
+      to={spaRuntimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
+    >
+      {props.children}
+    </Link>
+  ) : (
+    <span aria-label={menuItemText} title={nativeTitle} style={inHeader ? undefined : siderMenuItemLinkStyle}>
+      {props.children}
+    </span>
   );
 
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div role="none" style={menuItemStyle}>
+        <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
           {itemContent}
           {badgeCount != null && (
             <Badge
               {...badgeProps}
-              style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+              style={{
+                marginLeft: 4,
+                ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                maxWidth: '10em',
+              }}
               dot={false}
             ></Badge>
           )}

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

@@ -19,6 +19,7 @@ import {
   AdminLayoutMenuItemModel,
   AdminLayoutModel,
   ADMIN_LAYOUT_MODEL_UID,
+  buildMenuTitleWithIcon,
   getAdminLayoutMenuMovePositionOptions,
   normalizeAdminLayoutMenuLegacyVariables,
   openAdminLayoutMenuLink,
@@ -119,6 +120,233 @@ describe('AdminLayoutModel menu items', () => {
     ...options,
   });
 
+  type MenuTitleOptions = {
+    title: string;
+    collapsed: boolean;
+    name?: React.ReactNode;
+    routeTitle?: string;
+    renderType?: 'item' | 'group';
+    tooltip?: string;
+    badgeCount?: number;
+    badgeIndicatorColor?: string;
+    badgeTextColor?: string;
+    depth?: number;
+  };
+
+  const createMenuTitle = (options: MenuTitleOptions) => {
+    const {
+      title,
+      collapsed,
+      name = title,
+      routeTitle = title,
+      renderType = 'item',
+      tooltip,
+      badgeCount,
+      badgeIndicatorColor,
+      badgeTextColor,
+      depth = 1,
+    } = options;
+
+    return React.createElement(
+      FlowEngineProvider,
+      { engine },
+      React.createElement(
+        MemoryRouter,
+        { initialEntries: ['/admin/current-page'] },
+        React.createElement(AdminLayoutMenuItemRenderer, {
+          renderType,
+          item: {
+            name,
+            path: '/admin/menu-title',
+            _runtimePath: '/apps/demo/v2/admin/menu-title',
+            _navigationMode: 'spa',
+            _isLegacy: false,
+            _depth: depth,
+            _route: {
+              type: NocoBaseDesktopRouteType.flowPage,
+              title: routeTitle,
+              tooltip,
+              schemaUid: 'menu-title',
+              options:
+                badgeCount == null
+                  ? {}
+                  : {
+                      badge: {
+                        count: badgeCount,
+                        styles: badgeIndicatorColor ? { indicator: { color: badgeIndicatorColor } } : undefined,
+                        textColor: badgeTextColor,
+                      },
+                    },
+            },
+          },
+          dom: React.createElement(
+            'span',
+            { className: 'ant-pro-base-menu-inline-item-text' },
+            collapsed ? title.slice(0, 1) : title,
+          ),
+          options: { isMobile: false, collapsed },
+        }),
+      ),
+    );
+  };
+
+  const renderMenuTitle = (options: MenuTitleOptions) => render(createMenuTitle(options));
+
+  it.each([false, true])(
+    'should use a native title without an extra tooltip trigger when collapsed is %s',
+    async (collapsed) => {
+      vi.useFakeTimers();
+      const title = 'A complete menu title that may be truncated';
+
+      try {
+        const { container } = renderMenuTitle({ title, collapsed });
+        const link = screen.getByRole('link', { name: title });
+        const menuItem = link.closest<HTMLElement>('[role="none"]');
+
+        expect(link).toHaveAttribute('title', title);
+        expect(link.parentElement).toBe(menuItem);
+        expect(menuItem).toHaveStyle({ width: '100%', minWidth: 0 });
+        expect(link).toHaveStyle({ display: 'block', width: '100%', minWidth: 0, overflow: 'hidden' });
+        expect(container.querySelector('.ant-tooltip')).not.toBeInTheDocument();
+
+        await act(async () => {
+          fireEvent.mouseEnter(link);
+          await vi.advanceTimersByTimeAsync(500);
+        });
+
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+      } finally {
+        vi.clearAllTimers();
+        vi.useRealTimers();
+      }
+    },
+  );
+
+  it('should use the translated native title for an icon-wrapped nested menu name', () => {
+    const title = 'A translated nested menu title';
+    const { name } = buildMenuTitleWithIcon(
+      { title: 'menu.nested.title', icon: 'AppstoreOutlined' },
+      () => title,
+      true,
+    );
+
+    renderMenuTitle({ title, name, collapsed: true, depth: 2 });
+
+    expect(screen.getByRole('link', { name: title })).toHaveAttribute('title', title);
+  });
+
+  it('should use the translated native title for an icon-wrapped nested group name', () => {
+    const title = 'A translated nested group title';
+    const { name } = buildMenuTitleWithIcon(
+      { title: 'menu.nested.group', icon: 'AppstoreOutlined' },
+      () => title,
+      true,
+    );
+    const { container } = renderMenuTitle({
+      title,
+      name,
+      routeTitle: 'menu.nested.group',
+      renderType: 'group',
+      collapsed: true,
+      depth: 2,
+    });
+    const group = container.querySelector('[role="none"]');
+
+    expect(group).toHaveAttribute('title', title);
+    expect(group).toHaveAttribute('aria-label', title);
+  });
+
+  it('should preserve a numeric group name as the native title', () => {
+    const { container } = renderMenuTitle({
+      title: '0',
+      name: 0,
+      routeTitle: 'menu.numeric.group',
+      renderType: 'group',
+      collapsed: true,
+    });
+    const group = container.querySelector('[role="none"]');
+
+    expect(group).toHaveAttribute('title', '0');
+    expect(group).toHaveAttribute('aria-label', '0');
+  });
+
+  it.each(['item', 'group'] as const)(
+    'should let an explicit route tooltip own hover behavior for a sider %s',
+    (renderType) => {
+      const title = 'A menu title with an explicit description';
+      const { container } = renderMenuTitle({
+        title,
+        renderType,
+        collapsed: false,
+        tooltip: 'An explicitly configured menu description',
+      });
+      const titleTarget =
+        renderType === 'item' ? screen.getByRole('link', { name: title }) : container.querySelector('[role="none"]');
+
+      expect(titleTarget).not.toHaveAttribute('title');
+      expect(screen.getByRole('img', { name: 'question-circle' })).toBeInTheDocument();
+    },
+  );
+
+  it('should keep the same menu link when the sider expands', async () => {
+    vi.useFakeTimers();
+    const title = 'A title that fits after expanding';
+
+    try {
+      const { rerender } = renderMenuTitle({ title, collapsed: true });
+      const link = screen.getByRole('link', { name: title });
+
+      await act(async () => {
+        rerender(createMenuTitle({ title, collapsed: false }));
+        await vi.runOnlyPendingTimersAsync();
+      });
+
+      expect(screen.getByRole('link', { name: title })).toBe(link);
+      expect(link).toHaveAttribute('title', title);
+    } finally {
+      vi.clearAllTimers();
+      vi.useRealTimers();
+    }
+  });
+
+  it.each([true, false])(
+    'should render one badge indicator for a nested menu title when collapsed is %s',
+    (collapsed) => {
+      const title = 'A nested menu title with a badge';
+      const { container } = renderMenuTitle({ title, collapsed, badgeCount: 7 });
+
+      expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
+    },
+  );
+
+  it('should render one badge indicator for a top-level collapsed menu title', () => {
+    const title = 'A top-level collapsed menu title with a badge';
+    const { container } = renderMenuTitle({
+      title,
+      collapsed: true,
+      badgeCount: 7,
+      badgeTextColor: 'rgb(1, 2, 3)',
+      depth: 0,
+    });
+    const indicator = container.querySelector<HTMLElement>('.ant-badge-count');
+
+    expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
+    expect(indicator).toHaveStyle({ color: 'rgb(1, 2, 3)' });
+  });
+
+  it('should preserve the Ant Design indicator color when collapsed badge textColor is unset', () => {
+    const title = 'A top-level collapsed menu title with an indicator color';
+    const { container } = renderMenuTitle({
+      title,
+      collapsed: true,
+      badgeCount: 7,
+      badgeIndicatorColor: 'rgb(4, 5, 6)',
+      depth: 0,
+    });
+
+    expect(container.querySelector('.ant-badge-count')).toHaveStyle({ color: 'rgb(4, 5, 6)' });
+  });
+
   it('should normalize legacy variables only inside template expressions', () => {
     expect(normalizeAdminLayoutMenuLegacyVariables('https://a.com?id={{ $user.id }}')).toBe(
       'https://a.com?id={{ ctx.user.id }}',

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

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, useLocation } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { allowMock, appMock, flowModelRendererSpy } = vi.hoisted(() => {
@@ -270,28 +270,47 @@ describe('TopbarActionsBar helpers', () => {
     expect(link).not.toHaveAttribute('target', '_blank');
   });
 
-  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
-    const items = getTopbarPluginSettingsItems({
-      canManagePlugins: false,
-      t: (key) => key,
-      settings: [
-        {
-          key: 'routes',
-          name: 'routes',
-          title: 'Routes',
-          path: '/admin/settings/routes',
-          icon: null,
-          componentLoader: async () => null,
-        },
-      ] as any,
-    });
-
-    renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
-
-    const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
-  });
+  it.each(['/nocobase/v', '/v', '/nocobase/v/apps/jhb20'])(
+    'should navigate sub-app settings without document navigation with basename %s',
+    (basename) => {
+      appMock.current.router.getBasename = () => basename;
+      const items = getTopbarPluginSettingsItems({
+        canManagePlugins: false,
+        t: (key) => key,
+        settings: [
+          {
+            key: 'ai',
+            name: 'ai',
+            title: 'AI employees',
+            path: '/admin/settings/ai',
+            icon: null,
+            componentLoader: async () => null,
+          },
+        ],
+      });
+      const item = items[0];
+      if (!item || !('label' in item)) {
+        throw new Error('Expected settings menu item');
+      }
+      const appBase = basename.endsWith('/apps/jhb20') ? basename : `${basename}/apps/jhb20`;
+      const targetHref = `${appBase}/admin/settings/ai`;
+      const LocationDisplay = () => <output aria-label="Current route">{useLocation().pathname}</output>;
+      render(
+        <MemoryRouter basename={basename} initialEntries={[`${appBase}/admin/a3pq1t1773a`]}>
+          {item.label}
+          <LocationDisplay />
+        </MemoryRouter>,
+      );
+
+      const link = screen.getByRole('link', { name: 'AI employees' });
+      expect(link).toHaveAttribute('href', targetHref);
+      expect(link).not.toHaveAttribute('target', '_blank');
+      const click = new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 });
+      fireEvent(link, click);
+      expect(click.defaultPrevented).toBe(true);
+      expect(screen.getByLabelText('Current route')).toHaveTextContent(targetHref.slice(basename.length));
+    },
+  );
 
   it('should not treat admin-like paths as admin runtime', () => {
     const items = getTopbarPluginSettingsItems({

package/src/flow/common/Markdown/style.ts

@@ -26,6 +26,10 @@ export default function useStyle() {
     () => ({
       [`.${COMPONENT_CLS}`]: {
         '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
+        '.vditor-reset h2': {
+          borderBottom: 'none !important',
+          boxShadow: 'none !important',
+        },
         '.vditor': {
           borderRadius: 8,
         },

package/src/flow/components/BlockItemCard.tsx

@@ -150,7 +150,7 @@ export const BlockItemCard = React.forwardRef(
   ) => {
     const { t } = useTranslation();
     const { token } = theme.useToken();
-    const { title: blockTitle, description, children, className, heightMode, ...rest } = props;
+    const { title: blockTitle, description, children, className, heightMode, style, ...rest } = props;
     const cardRef = useRef<HTMLDivElement | null>(null);
     const setCardRef = useCallback(
       (node: HTMLDivElement | null) => {
@@ -185,7 +185,7 @@ export const BlockItemCard = React.forwardRef(
       <Card
         ref={setCardRef as any}
         title={title}
-        style={{ display: 'flex', flexDirection: 'column', height: height }}
+        style={{ display: 'flex', flexDirection: 'column', ...style, height: height ?? style?.height }}
         styles={{
           body: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' },
           header: {