@nocobase/client-v2 3.0.0-alpha.1 → 3.0.0-alpha.12

package/src/flow/actions/__tests__/linkageRules.actionStates.test.ts

@@ -0,0 +1,33 @@
+/**
+ * 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, expect, it } from 'vitest';
+import { getActionLinkageStateOptions } from '../linkageRules';
+
+describe('getActionLinkageStateOptions', () => {
+  const t = (key: string) => key;
+
+  it('returns all states for regular action models', () => {
+    expect(getActionLinkageStateOptions({}, t).map((option) => option.value)).toEqual([
+      'visible',
+      'hidden',
+      'hiddenText',
+      'enabled',
+      'disabled',
+    ]);
+  });
+
+  it('filters states declared unsupported by the action model', () => {
+    expect(
+      getActionLinkageStateOptions({ supportedActionLinkageStates: ['visible', 'hidden'] }, t).map(
+        (option) => option.value,
+      ),
+    ).toEqual(['visible', 'hidden']);
+  });
+});

package/src/flow/actions/__tests__/linkageRules.subFormSetFieldProps.test.ts

@@ -18,6 +18,7 @@ import {
   subFormFieldLinkageRules,
   subFormLinkageSetFieldProps,
 } from '../linkageRules';
+import { CreateFormModel, EditFormModel, FormGridModel, FormItemModel, JSItemModel } from '../../models';
 
 const createSubFormFieldModel = ({
   uid,
@@ -1056,6 +1057,77 @@ describe('linkageSetFieldProps action', () => {
     expect(await screen.findByText('Published')).toBeTruthy();
   });
 
+  it.each([
+    ['create form', CreateFormModel, linkageSetFieldProps, false],
+    ['edit form', EditFormModel, linkageSetFieldProps, false],
+    ['to-one subform', FlowModel, subFormLinkageSetFieldProps, false],
+    ['to-many subform row', FlowModel, subFormLinkageSetFieldProps, true],
+  ])('should exclude JS items from %s field state options', async (_, ModelClass, action, useGridFork) => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      CreateFormModel,
+      EditFormModel,
+      FormGridModel,
+      FormItemModel,
+      JSItemModel,
+    });
+    const model = new ModelClass({
+      flowEngine: engine,
+      uid: 'form-model',
+      use: ModelClass.name,
+    }) as FlowModel;
+    const grid = engine.createModel<FormGridModel>({
+      use: 'FormGridModel',
+      uid: 'form-grid',
+    });
+    const fieldModel = engine.createModel<FormItemModel>({
+      use: 'FormItemModel',
+      uid: 'name-field',
+      props: { label: 'Name' },
+      subModels: {
+        field: {
+          use: 'FlowModel',
+          uid: 'name-field-component',
+        },
+      },
+    });
+    const jsItemModel = engine.createModel<JSItemModel>({
+      use: 'JSItemModel',
+      uid: 'js-item',
+      props: { label: 'JS item' },
+    });
+    Object.assign(model.subModels, {
+      grid: useGridFork
+        ? grid.createFork({}, 'row-0')
+        : Object.assign(grid, {
+            subModels: {
+              ...grid.subModels,
+              items: [fieldModel, jsItemModel],
+            },
+          }),
+    });
+    Object.assign(model.subModels.grid.subModels, {
+      items: [fieldModel, jsItemModel],
+    });
+    const ctx = model.context;
+    const Comp: any = action.uiSchema.value['x-component'];
+    const view = render(
+      React.createElement(
+        FlowSettingsContextProvider,
+        { value: ctx },
+        React.createElement(Comp, {
+          value: { fields: [] },
+          onChange: () => {},
+        }),
+      ),
+    );
+
+    fireEvent.mouseDown(view.container.querySelector('.ant-select-selector') as Element);
+
+    expect(await screen.findByText('Name')).toBeTruthy();
+    expect(screen.queryByText('JS item')).toBeNull();
+  });
+
   it('should only show options state for supported single field selection', () => {
     const supportedField: any = {
       uid: 'status-field',

package/src/flow/actions/linkageRules.tsx

@@ -120,11 +120,16 @@ const isActionFlowModel = (model: any): boolean => {
   return false;
 };
 
+const isFormFieldModel = (model: unknown): model is FlowModel => {
+  if (!model || typeof model !== 'object') return false;
+  return !!(model as FlowModel).subModels?.field;
+};
+
 // 获取表单中所有字段的 model 实例的通用函数
 const getFormFields = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => ({
+    return fieldModels.filter(isFormFieldModel).map((model) => ({
       label: model.props.label || model.props.name,
       value: model.uid,
       model,
@@ -346,8 +351,8 @@ const FieldStateEditor = ({
 const getFormFieldsByForkModel = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => {
-      const forkModel = Array.from(model.forks)[0] as any;
+    return fieldModels.filter(isFormFieldModel).map((model) => {
+      const forkModel = Array.from(model.forks)[0] as FlowModel | undefined;
 
       if (forkModel) {
         return {
@@ -660,6 +665,30 @@ export const linkageSetBlockProps = defineAction({
   },
 });
 
+const ACTION_LINKAGE_STATE_OPTIONS = [
+  { label: 'Visible', value: 'visible' },
+  { label: 'Hidden', value: 'hidden' },
+  { label: 'Hidden text', value: 'hiddenText' },
+  { label: 'Enabled', value: 'enabled' },
+  { label: 'Disabled', value: 'disabled' },
+] as const;
+
+type ActionLinkageState = (typeof ACTION_LINKAGE_STATE_OPTIONS)[number]['value'];
+
+export function getActionLinkageStateOptions(
+  model: { supportedActionLinkageStates?: readonly ActionLinkageState[] },
+  t: (key: string) => string,
+) {
+  const supportedStates = model.supportedActionLinkageStates ? new Set(model.supportedActionLinkageStates) : undefined;
+
+  return ACTION_LINKAGE_STATE_OPTIONS.filter((option) => !supportedStates || supportedStates.has(option.value)).map(
+    (option) => ({
+      label: t(option.label),
+      value: option.value,
+    }),
+  );
+}
+
 export const linkageSetActionProps = defineAction({
   name: 'linkageSetActionProps',
   title: tExpr('Set button state'),
@@ -680,13 +709,7 @@ export const linkageSetActionProps = defineAction({
             onChange={onChange}
             placeholder={t('Please select state')}
             style={{ width: '100%' }}
-            options={[
-              { label: t('Visible'), value: 'visible' },
-              { label: t('Hidden'), value: 'hidden' },
-              { label: t('Hidden text'), value: 'hiddenText' },
-              { label: t('Enabled'), value: 'enabled' },
-              { label: t('Disabled'), value: 'disabled' },
-            ]}
+            options={getActionLinkageStateOptions(ctx.model, t)}
             allowClear
           />
         );

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 }}',