@nocobase/flow-engine 2.2.0-beta.9 → 2.2.1

package/src/acl/__tests__/Acl.test.tsx

@@ -71,6 +71,76 @@ describe('ACL', () => {
     expect(notOk).toBe(false);
   });
 
+  it('checks record update scope before field permission', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: { 'posts:update': { whitelist: ['title'] } },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['title'] })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2, fields: ['title'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 1, fields: ['body'] })).toBe(false);
+    expect(acl.can({ ...options, recordPkValue: 0, fields: ['title'] })).toBe(false);
+    expect(
+      acl.can({
+        dataSourceKey: 'main',
+        resourceName: 'posts',
+        actionName: 'update',
+        fields: ['title'],
+      }),
+    ).toBe(true);
+  });
+
+  it('allows every field when a scoped action has no field restriction', () => {
+    const payload = {
+      data: {
+        allowAll: false,
+        actionAlias: {},
+        resources: ['posts'],
+        actions: {
+          'posts:update': {
+            filter: { createdById: '{{ ctx.state.currentUser.id }}' },
+          },
+        },
+        strategy: { actions: [] },
+      },
+    };
+    const engine = makeEngine(payload);
+    const acl = new ACL(engine);
+    acl.setData(payload.data);
+
+    const options = {
+      dataSourceKey: 'main',
+      resourceName: 'posts',
+      actionName: 'update',
+      allowedActions: {
+        update: [1],
+      },
+      fields: ['title'],
+    };
+
+    expect(acl.can({ ...options, recordPkValue: 1 })).toBe(true);
+    expect(acl.can({ ...options, recordPkValue: 2 })).toBe(false);
+    expect(acl.can({ ...options, allowedActions: undefined, recordPkValue: undefined })).toBe(false);
+  });
+
   it('reloads permissions when auth token changes', async () => {
     const payload1 = {
       data: {

package/src/components/FlowContextSelector.tsx

@@ -40,6 +40,18 @@ type SelectedPathInfo = {
   meta?: ContextSelectorItem['meta'];
 };
 
+type MetaNodeTooltipOptions = { tooltip?: React.ReactNode };
+
+function getMetaNodeTooltip(meta?: ContextSelectorItem['meta']): React.ReactNode {
+  if (!meta) {
+    return undefined;
+  }
+
+  const metaWithTooltip = meta as ContextSelectorItem['meta'] & MetaNodeTooltipOptions;
+  const options = meta.options as MetaNodeTooltipOptions | undefined;
+  return metaWithTooltip.tooltip ?? options?.tooltip;
+}
+
 const normalizePath = (path: unknown): string[] | undefined => {
   if (!Array.isArray(path)) {
     return undefined;
@@ -85,6 +97,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -92,6 +105,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
+  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = theme.useToken();
@@ -119,17 +133,28 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
         // 文本国际化：仅当 label 为字符串时进行翻译
         const baseLabel = typeof o.label === 'string' ? flowCtx.t(o.label) : o.label;
+        const labelText = typeof baseLabel === 'string' ? baseLabel : String(o.value);
+        const tooltip = getMetaNodeTooltip(meta);
+        const tooltipTitle = disabled
+          ? disabledReason || tooltip || flowCtx.t('This variable is not available')
+          : tooltip;
 
-        const label = disabled ? (
+        const label = tooltipTitle ? (
           <span>
             {baseLabel}
             <Tooltip
-              title={disabledReason || flowCtx.t('This variable is not available')}
-              placement="right"
-              overlayClassName="flow-variable-disabled-tip"
+              title={typeof tooltipTitle === 'string' ? flowCtx.t(tooltipTitle) : tooltipTitle}
+              placement="top"
+              classNames={{ root: 'flow-variable-tip' }}
               destroyTooltipOnHide
             >
-              <QuestionCircleOutlined style={{ marginLeft: 6, color: 'rgba(0,0,0,0.35)' }} />
+              <QuestionCircleOutlined
+                aria-label={`${labelText} tooltip`}
+                style={{
+                  marginLeft: token.marginXXS,
+                  color: disabled ? token.colorTextDisabled : token.colorTextDescription,
+                }}
+              />
             </Tooltip>
           </span>
         ) : (
@@ -144,7 +169,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         };
       });
     },
-    [flowCtx],
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS],
   );
 
   // 用于强制重新渲染的状态
@@ -265,13 +290,13 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 默认按钮组件
   const defaultChildren = useMemo(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
-      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle} disabled={cascaderProps.disabled}>
         x
       </Button>
     );
-  }, [currentPath]);
+  }, [active, cascaderProps.disabled, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(
@@ -286,6 +311,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
       const path = selectedValues.map(String);
       const pathString = path.join('.');
       const isLeaf = lastOption?.isLeaf;
+      const isSelectable = lastOption?.meta?.selectable !== false;
       const now = Date.now();
 
       // 使用自定义格式化函数或默认函数
@@ -300,6 +326,10 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
       }
 
       if (isLeaf) {
+        if (!isSelectable) {
+          setTempSelectedPath(path);
+          return;
+        }
         onChange?.(formattedValue, lastOption?.meta);
         // 选中叶子节点后，可清空内部临时路径（外部 value 将驱动级联）
         setTempSelectedPath([]);
@@ -308,7 +338,8 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
       // 非叶子节点：检查双击
       const lastSelected = lastSelectedRef.current;
-      const isDoubleClick = !onlyLeafSelectable && lastSelected?.path === pathString && now - lastSelected.time < 300;
+      const isDoubleClick =
+        isSelectable && !onlyLeafSelectable && lastSelected?.path === pathString && now - lastSelected.time < 300;
 
       if (isDoubleClick) {
         // 双击：选中非叶子节点
@@ -360,12 +391,41 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
     [cascaderOnDropdownVisibleChange, open],
   );
 
+  // Footer hint at the bottom of the dropdown. Defaults to the "double click to choose entire object" hint whenever
+  // non-leaf selection is allowed (double-clicking a non-leaf selects the whole object). Callers can override with
+  // their own node, or pass `null` to hide it.
+  const footerNode = useMemo(() => {
+    if (dropdownFooter !== undefined) {
+      return dropdownFooter;
+    }
+    if (onlyLeafSelectable) {
+      return null;
+    }
+    return (
+      <div
+        className={css`
+          padding: 6px 12px;
+          color: ${token.colorTextDescription};
+          border-top: 1px solid ${token.colorSplit};
+          font-size: ${token.fontSizeSM}px;
+        `}
+      >
+        {flowCtx.t('Double click to choose entire object')}
+      </div>
+    );
+  }, [dropdownFooter, onlyLeafSelectable, token, flowCtx]);
+
   const renderDropdown = useCallback(
     (menu: React.ReactElement) => {
       const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
       const cascaderMenu = React.isValidElement(cascaderMenuNode) ? cascaderMenuNode : <>{cascaderMenuNode}</>;
       if (!isSearchEnabled || children === null) {
-        return cascaderMenu;
+        return (
+          <>
+            {cascaderMenu}
+            {footerNode}
+          </>
+        );
       }
 
       return (
@@ -381,10 +441,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
             />
           </div>
           {cascaderMenu}
+          {footerNode}
         </>
       );
     },
-    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText],
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText, footerNode],
   );
 
   const inlinePlaceholder =

package/src/components/FormItem.tsx

@@ -54,15 +54,20 @@ const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'showLabel',
 ];
 
+const modelInternalPropKeys = ['globalSort'];
+
 export const FormItem = ({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }: ExtendedFormItemProps & ChildExtraProps) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key)),
+  ) as ExtendedFormItemProps & ChildExtraProps;
   // 过滤掉 Form.Item 专用 props，只保留要传给子组件的
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
   );
 
   const processedChildren =
@@ -74,7 +79,7 @@ export const FormItem = ({
           }
           return child;
         });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
   const labelColStyle =
     layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
@@ -122,17 +127,17 @@ export const FormItem = ({
   };
   return (
     <Form.Item
-      {...rest}
-      style={{ ...formItemStyle, ...rest.style }}
+      {...forwardedRest}
+      style={{ ...formItemStyle, ...forwardedRest.style }}
       labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}
-      extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
+      extra={forwardedRest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{forwardedRest.extra}</span>}
       tooltip={
-        rest.tooltip &&
+        forwardedRest.tooltip &&
         ({
-          title: rest.tooltip,
+          title: forwardedRest.tooltip,
           overlayInnerStyle: { whiteSpace: 'pre-line' },
         } as TooltipProps)
       }

package/src/components/MobilePopup.style.ts

@@ -160,7 +160,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -172,12 +172,23 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-placeholder': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         visibility: 'hidden',
       },
 
+      '.nb-mobile-action-drawer-title': {
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+
       '.nb-mobile-action-drawer-close-icon': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         cursor: 'pointer',
       },
 

package/src/components/MobilePopup.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ConfigProvider } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo } from 'react';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
 import { lazy } from '../lazy-helper';
@@ -26,16 +26,50 @@ interface MobilePopupProps {
   footer?: ReactNode;
 }
 
+const getMobilePopupMaxHeight = () => {
+  if (typeof CSS !== 'undefined' && CSS.supports?.('height', '100dvh')) {
+    return 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+  }
+
+  return 'calc(100vh - var(--nb-mobile-page-header-height, 46px))';
+};
+
 export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight ?? defaultMaxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, defaultMaxHeight, minHeight]);
+
+  const bodyStyle = useMemo<React.CSSProperties>(() => {
+    return {
+      padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      ...bodyStyles,
+    };
+  }, [bodyStyles, defaultMaxHeight]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +91,8 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
         onClose={closePopup}
         onMaskClick={closePopup}
         bodyClassName="nb-mobile-action-drawer-body"
-        bodyStyle={{
-          padding: 0,
-        }}
-        maskStyle={style}
-        style={style}
+        bodyStyle={bodyStyle}
+        style={popupStyle}
         destroyOnClose
       >
         <div className="nb-mobile-action-drawer-header">
@@ -69,13 +100,14 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
           <span className="nb-mobile-action-drawer-placeholder">
             <CloseOutline />
           </span>
-          <span>{title}</span>
+          <span className="nb-mobile-action-drawer-title">{title}</span>
           <span
             className="nb-mobile-action-drawer-close-icon"
             onClick={closePopup}
             role="button"
             tabIndex={0}
             aria-label={t('Close')}
+            onKeyDown={handleCloseKeyDown}
           >
             <CloseOutline />
           </span>

package/src/components/__tests__/FormItem.test.tsx

@@ -7,8 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
-import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { FormItem, formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
 
 describe('FormItem', () => {
   it('keeps vertical label-to-value spacing consistent with v1', () => {
@@ -22,4 +24,17 @@ describe('FormItem', () => {
       marginBottom: 12,
     });
   });
+
+  it('does not forward model-internal globalSort props to field children', () => {
+    const Field = vi.fn(() => <input aria-label="field" />);
+
+    render(
+      <FormItem globalSort={['title']} placeholder="Title">
+        <Field />
+      </FormItem>,
+    );
+
+    expect(Field).toHaveBeenCalledWith(expect.not.objectContaining({ globalSort: expect.anything() }), {});
+    expect(Field).toHaveBeenCalledWith(expect.objectContaining({ placeholder: 'Title' }), {});
+  });
 });

package/src/components/__tests__/MobilePopup.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../MobilePopup.style', () => ({
+  useMobileActionDrawerStyle: () => ({
+    componentCls: 'nb-mobile-action-drawer',
+    hashId: 'hash',
+  }),
+}));
+
+vi.mock('../../lazy-helper', () => ({
+  lazy: (_loader: unknown, name: string) => {
+    if (name === 'Popup') {
+      const Popup = ({
+        children,
+        bodyStyle,
+        maskStyle,
+        style,
+      }: {
+        children: React.ReactNode;
+        bodyStyle?: React.CSSProperties;
+        maskStyle?: React.CSSProperties;
+        style?: React.CSSProperties;
+      }) => (
+        <div data-testid="mobile-popup" style={style}>
+          <div data-testid="mobile-popup-mask" style={maskStyle} />
+          <div data-testid="mobile-popup-body" style={bodyStyle}>
+            {children}
+          </div>
+        </div>
+      );
+
+      return { Popup };
+    }
+
+    return {
+      CloseOutline: () => <span data-testid="close-outline" />,
+    };
+  },
+}));
+
+describe('MobilePopup', () => {
+  const MobilePopupWithDrawerStyles = MobilePopup as React.ComponentType<
+    React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
+  >;
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('constrains the default popup to the dynamic viewport and keeps the body scrollable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn((property: string, value: string) => property === 'height' && value === '100dvh'),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    const maxHeight = 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({ maxHeight });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+    });
+  });
+
+  it('falls back to the layout viewport when dynamic viewport units are unavailable', () => {
+    vi.stubGlobal('CSS', {
+      supports: vi.fn(() => false),
+    });
+
+    render(
+      <MobilePopup visible title="Title" onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+    });
+  });
+
+  it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
+    render(
+      <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>
+        body
+      </MobilePopupWithDrawerStyles>,
+    );
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-mask')).not.toHaveStyle({
+      maxHeight: '50vh',
+    });
+  });
+
+  it('closes from the header close icon with Enter or Space', () => {
+    const onClose = vi.fn();
+    render(
+      <MobilePopup visible title="Title" onClose={onClose}>
+        body
+      </MobilePopup>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    fireEvent.keyDown(closeButton, { key: 'Enter' });
+    fireEvent.keyDown(closeButton, { key: ' ' });
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps long header titles in a constrained title element separate from the close button', () => {
+    const longTitle = 'A very long table column title that should not push the close button outside the drawer';
+
+    render(
+      <MobilePopup visible title={longTitle} onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByText(longTitle)).toHaveClass('nb-mobile-action-drawer-title');
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('nb-mobile-action-drawer-close-icon');
+  });
+});