@nocobase/client-v2 2.2.0-beta.9 → 2.2.0

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/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: {

package/src/flow/components/FieldAssignExactDatePicker.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { DatePicker, Select, Space } from 'antd';
 import { inferPickerType } from '../../flow-compat';
 import { dayjs, getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
@@ -29,6 +29,7 @@ export interface FieldAssignExactDatePickerProps {
   isRange?: boolean;
   onChange?: (value: ExactDatePickerValue) => void;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 function getRawSingleValue(value: unknown, isRange: boolean): unknown {
@@ -114,7 +115,7 @@ function parseRangeValue(value: unknown, format: string): [dayjs.Dayjs, dayjs.Da
 }
 
 export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProps> = (props) => {
-  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style } = props;
+  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style, disabled } = props;
   const flowCtx = useFlowContext();
   const t = flowCtx.model.translate.bind(flowCtx.model);
 
@@ -124,17 +125,17 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     return inferPickerFromRawValue(rawSingleValue, picker);
   });
 
-  const getResolvedFormat = (nextPicker: ExactDatePickerMode) => {
-    const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
-    const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
-    return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
-  };
-
-  const resolvedFormat = useMemo(
-    () => getResolvedFormat(targetPicker),
-    [targetPicker, format, picker, showTime, timeFormat],
+  const getResolvedFormat = useCallback(
+    (nextPicker: ExactDatePickerMode) => {
+      const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
+      const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
+      return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
+    },
+    [format, picker, showTime, timeFormat],
   );
 
+  const resolvedFormat = useMemo(() => getResolvedFormat(targetPicker), [getResolvedFormat, targetPicker]);
+
   const singleValue = useMemo(() => {
     if (isRange) return null;
     return parseDateFromRawValue(value, resolvedFormat);
@@ -156,6 +157,10 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
   );
 
   const handlePickerTypeChange = (nextPicker: ExactDatePickerMode) => {
+    if (disabled) {
+      return;
+    }
+
     setTargetPicker(nextPicker);
 
     if (!onChange) {
@@ -182,7 +187,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
     value: singleValue,
+    disabled,
     onChange: (nextDate: dayjs.Dayjs | null) => {
+      if (disabled) {
+        return;
+      }
       if (nextDate && dayjs.isDayjs(nextDate)) {
         onChange?.(nextDate);
         return;
@@ -200,7 +209,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] } : false,
     value: rangeValue,
+    disabled,
     onChange: (nextDates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
+      if (disabled) {
+        return;
+      }
       if (Array.isArray(nextDates) && nextDates[0] && nextDates[1]) {
         onChange?.([nextDates[0], nextDates[1]]);
         return;
@@ -218,6 +231,7 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
         value={targetPicker}
         options={pickerOptions}
         onChange={handlePickerTypeChange}
+        disabled={disabled}
       />
       {isRange ? <DatePicker.RangePicker {...rangePickerProps} /> : <DatePicker {...singlePickerProps} />}
     </Space.Compact>