@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.21

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/components/FieldAssignValueInput.tsx

@@ -71,6 +71,8 @@ interface Props {
   enableDateVariableAsConstant?: boolean;
   /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
   allowRunJS?: boolean;
+  /** 是否允许在变量选择器中使用内置日期变量。默认 true。 */
+  allowDateVariables?: boolean;
   maxAssociationFieldDepth?: number;
   disabled?: boolean;
   variableConverters?: VariableInputProps['converters'];
@@ -444,6 +446,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   preferFormItemFieldModel,
   associationFieldNamesOverride,
   allowRunJS = true,
+  allowDateVariables = true,
   maxAssociationFieldDepth = 2,
   disabled = false,
   variableConverters,
@@ -972,6 +975,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       style={{ width: '100%' }}
       clearValue={''}
       allowRunJS={allowRunJS}
+      allowDateVariables={allowDateVariables}
       disabled={disabled}
       converters={variableConverters}
     />

package/src/flow/components/field-value-variable/FieldValueVariableInput.tsx

@@ -71,6 +71,7 @@ export type FieldValueVariableInputProps = Omit<
   isDateLikeField: boolean;
   dateComponentProps: DateVariableComponentProps;
   allowRunJS?: boolean;
+  allowDateVariables?: boolean;
   converters?: VariableInputProps['converters'];
 };
 
@@ -149,6 +150,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
   isDateLikeField,
   dateComponentProps,
   allowRunJS = true,
+  allowDateVariables = true,
   converters,
   clearValue = '',
   disabled = false,
@@ -168,7 +170,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
     return Component;
   }, [dateComponentProps, isDateLikeField]);
 
-  const parsedDateConfig = parseCtxDateExpressionConfig(value);
+  const parsedDateConfig = allowDateVariables ? parseCtxDateExpressionConfig(value) : undefined;
   const restoreLegacyNowForPureDate =
     dateComponentProps.exactNormalizeMode === 'date' &&
     parsedDateConfig?.kind === 'preset' &&
@@ -230,14 +232,18 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           paths: ['null'],
           render: (props) => <NullComponent {...props} />,
         },
-        {
-          title: tExpr('Date'),
-          name: 'date',
-          type: 'date',
-          paths: ['date'],
-          selectable: false,
-          children: dateChildren,
-        },
+        ...(allowDateVariables
+          ? [
+              {
+                title: tExpr('Date'),
+                name: 'date',
+                type: 'date',
+                paths: ['date'],
+                selectable: false,
+                children: dateChildren,
+              } satisfies MetaTreeNode,
+            ]
+          : []),
         ...(allowRunJS
           ? [
               {
@@ -257,6 +263,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
     DateEditor,
     NullComponent,
     RunJSComponent,
+    allowDateVariables,
     allowRunJS,
     baseMetaTree,
     dateComponentProps.exactNormalizeMode,
@@ -294,7 +301,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           const firstPath = meta?.paths?.[0];
           if (firstPath === 'constant') return ConstantComponent;
           if (firstPath === 'null') return NullComponent;
-          if (firstPath === 'date') return DateEditor;
+          if (allowDateVariables && firstPath === 'date') return DateEditor;
           if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
           return null;
         },
@@ -304,7 +311,7 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           const firstPath = item?.paths?.[0];
           if (firstPath === 'constant') return '';
           if (firstPath === 'null') return null;
-          if (firstPath === 'date') {
+          if (allowDateVariables && firstPath === 'date') {
             return createInitialDateConfig(item.paths[1], isDateLikeField, dateComponentProps);
           }
           if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
@@ -315,7 +322,9 @@ export const FieldValueVariableInput: React.FC<FieldValueVariableInputProps> = (
           if (external !== undefined) return external;
           if (currentValue === null) return ['null'];
           if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
-          if (isDateVariableEditConfig(currentValue)) return ['date', getDateNodeName(currentValue)];
+          if (allowDateVariables && isDateVariableEditConfig(currentValue)) {
+            return ['date', getDateNodeName(currentValue)];
+          }
           return typeof currentValue === 'string' && isVariableExpression(currentValue)
             ? parseValueToPath(currentValue)
             : ['constant'];

package/src/flow/components/field-value-variable/__tests__/FieldValueVariableInput.test.tsx

@@ -50,6 +50,7 @@ function renderInput(options?: {
   value?: unknown;
   isDateLikeField?: boolean;
   dateComponentProps?: DateVariableComponentProps;
+  allowDateVariables?: boolean;
 }) {
   const onChange = vi.fn();
   render(
@@ -62,6 +63,7 @@ function renderInput(options?: {
       runJSComponent={RunJSComponent}
       isDateLikeField={options?.isDateLikeField ?? false}
       dateComponentProps={options?.dateComponentProps ?? DEFAULT_DATE_VARIABLE_COMPONENT_PROPS}
+      allowDateVariables={options?.allowDateVariables}
     />,
   );
   return onChange;
@@ -110,6 +112,13 @@ describe('FieldValueVariableInput', () => {
     expect(tree[4].name).toBe('currentUser');
   });
 
+  it('omits the built-in Date variables when they are disabled', async () => {
+    renderInput({ isDateLikeField: true, allowDateVariables: false });
+
+    const tree = await resolveMetaTree();
+    expect(tree.map((node) => node.name)).toEqual(['constant', 'null', 'runjs', 'currentUser']);
+  });
+
   it('does not allow Now for pure date fields', async () => {
     const dateComponentProps: DateVariableComponentProps = {
       ...DEFAULT_DATE_VARIABLE_COMPONENT_PROPS,

package/src/flow/components/filter/VariableFilterItem.tsx

@@ -130,7 +130,9 @@ export interface VariableFilterItemProps {
   rightAsVariable?: boolean;
   /**
    * 右侧 VariableInput 的 metaTree 提供器；
-   * 默认使用整棵 ctx 的 metaTree：model.context.getPropertyMetaTree()
+   * 默认使用视图上下文的 metaTree：useFlowViewContext().getPropertyMetaTree()。
+   * 注意它取自视图上下文而非 `model.context`：当调用方传入的 model 与打开设置弹窗的模型不是同一个时，
+   * 右侧变量不会跟随 model 变化，需要显式传入本属性。
    */
   rightMetaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   /**
@@ -139,9 +141,16 @@ export interface VariableFilterItemProps {
   rightVariableConverters?: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'>;
   ignoreFieldNames?: string[];
   maxAssociationFieldDepth?: number;
+  /**
+   * 右侧变量树的关联层级上限，默认与 `maxAssociationFieldDepth` 一致。
+   * 传 `null` 表示不限制：右侧是变量树而非集合字段树，其深度可能已由调用方约束
+   * （例如工作流的变量树由触发器的「预加载关系数据」决定），此时再按左侧的层级上限裁剪
+   * 会让已配置好的深层变量选不到。
+   */
+  rightMaxAssociationFieldDepth?: number | null;
 }
 
-function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number) {
+function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number | null) {
   if (typeof maxAssociationFieldDepth !== 'number') {
     return nodes;
   }
@@ -367,6 +376,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
     rightVariableConverters,
     ignoreFieldNames,
     maxAssociationFieldDepth,
+    rightMaxAssociationFieldDepth = maxAssociationFieldDepth,
   }) => {
     // 使用 View 上下文，确保可访问 ctx.view 的异步子树
     const ctx = useFlowViewContext();
@@ -685,10 +695,10 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
             { title: t('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
             ...nodes,
           ],
-          maxAssociationFieldDepth,
+          rightMaxAssociationFieldDepth,
         );
       };
-    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, maxAssociationFieldDepth]);
+    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, rightMaxAssociationFieldDepth]);
 
     // 当启用右侧变量输入时，构造 VariableInput 的 converters：
     // - 变量模式：返回 null 让 VariableInput 渲染 VariableTag

package/src/flow/components/filter/__tests__/VariableFilterItem.rightMetaTree.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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 { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { MetaTreeNode } from '@nocobase/flow-engine';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { VariableFilterItem } from '../VariableFilterItem';
+import { createMockFlowApp, TestCollectionFieldInterface } from '../../../__tests__/helpers/mockFlowApp';
+
+const captured = vi.hoisted(() => ({ metaTrees: [] as any[] }));
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<any>('@nocobase/flow-engine');
+  const MockVariableInput = ({ onChange, metaTree }: any) => {
+    if (metaTree) {
+      captured.metaTrees.push(metaTree);
+    }
+    return (
+      <button
+        type="button"
+        data-testid="variable-input"
+        onClick={() =>
+          onChange?.('title', {
+            interface: 'input',
+            uiSchema: { 'x-component': 'Input' },
+            paths: ['collection', 'title'],
+          })
+        }
+      >
+        mock-variable-input
+      </button>
+    );
+  };
+  return { ...actual, VariableInput: MockVariableInput };
+});
+
+// $context.data (not an association) -> category (m2o) -> book (m2o) -> createdBy (not counted) -> departments (m2m).
+// Mirrors a workflow collection-event trigger that preloads `category.book.createdBy.departments`.
+function buildRightMetaTree(): MetaTreeNode[] {
+  const departments: MetaTreeNode = {
+    name: 'departments',
+    title: 'Departments',
+    type: 'object',
+    interface: 'm2m',
+    paths: ['$context', 'data', 'category', 'book', 'createdBy', 'departments'],
+  };
+  const createdBy: MetaTreeNode = {
+    name: 'createdBy',
+    title: 'Created by',
+    type: 'object',
+    interface: 'createdBy',
+    paths: ['$context', 'data', 'category', 'book', 'createdBy'],
+    children: async () => [departments],
+  };
+  const book: MetaTreeNode = {
+    name: 'book',
+    title: 'Book',
+    type: 'object',
+    interface: 'obo',
+    paths: ['$context', 'data', 'category', 'book'],
+    children: async () => [createdBy],
+  };
+  const category: MetaTreeNode = {
+    name: 'category',
+    title: 'Category',
+    type: 'object',
+    interface: 'm2o',
+    paths: ['$context', 'data', 'category'],
+    children: async () => [book],
+  };
+  const data: MetaTreeNode = {
+    name: 'data',
+    title: 'Trigger data',
+    type: 'object',
+    paths: ['$context', 'data'],
+    children: async () => [category],
+  };
+  return [{ name: '$context', title: 'Trigger variables', type: '', paths: ['$context'], children: [data] }];
+}
+
+async function resolveChildren(node: MetaTreeNode | undefined) {
+  const children = node?.children;
+  if (typeof children === 'function') {
+    return (await (children as () => Promise<MetaTreeNode[]>)()) ?? [];
+  }
+  return Array.isArray(children) ? children : [];
+}
+
+async function walkToCreatedByChildren(metaTree: any) {
+  const roots: MetaTreeNode[] = typeof metaTree === 'function' ? await metaTree() : metaTree;
+  const context = roots.find((node) => node.name === '$context');
+  const data = (await resolveChildren(context)).find((node) => node.name === 'data');
+  const category = (await resolveChildren(data)).find((node) => node.name === 'category');
+  const book = (await resolveChildren(category)).find((node) => node.name === 'book');
+  const createdBy = (await resolveChildren(book)).find((node) => node.name === 'createdBy');
+  return (await resolveChildren(createdBy)).map((node) => node.name);
+}
+
+function createModel() {
+  const engine = new FlowEngine();
+  const model = new FlowModel({ uid: 'm-variable-filter-right', flowEngine: engine });
+  const app = createMockFlowApp();
+  model.context.defineProperty('app', { value: app });
+
+  class InputInterface extends TestCollectionFieldInterface {
+    name = 'input';
+    group = 'basic';
+    filterable = { operators: [{ value: '$eq', label: 'Equals' }] };
+  }
+  app.addFieldInterfaces([InputInterface]);
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    fields: [{ name: 'title', type: 'string', interface: 'input', uiSchema: { 'x-component': 'Input' } }],
+  });
+  model.context.defineProperty('collection', { get: () => ds.getCollection('posts') });
+
+  return model as any;
+}
+
+function renderItem(props: Record<string, unknown>) {
+  const value = { path: 'title', operator: '$eq', value: '' } as any;
+  const model = createModel();
+  render(
+    <VariableFilterItem value={value} model={model} rightAsVariable rightMetaTree={buildRightMetaTree()} {...props} />,
+  );
+  fireEvent.click(screen.getAllByTestId('variable-input')[0]);
+  return captured.metaTrees.at(-1);
+}
+
+describe('VariableFilterItem right-side association depth', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    captured.metaTrees = [];
+  });
+
+  it('applies maxAssociationFieldDepth to the right tree by default', async () => {
+    const metaTree = renderItem({ maxAssociationFieldDepth: 2 });
+    // `departments` is the third association down the path, so the default cap removes it.
+    expect(await walkToCreatedByChildren(metaTree)).toEqual([]);
+  });
+
+  // The right side is a variable tree whose depth is decided by its provider (in workflow, by the trigger's
+  // "Preload associations" config). Capping it by the left-side field-picker limit hid preloaded variables.
+  it('leaves the right tree untouched when rightMaxAssociationFieldDepth is null', async () => {
+    const metaTree = renderItem({ maxAssociationFieldDepth: 2, rightMaxAssociationFieldDepth: null });
+    expect(await walkToCreatedByChildren(metaTree)).toEqual(['departments']);
+  });
+});

package/src/flow/internal/components/Markdown/DisplayMarkdown.tsx

@@ -7,16 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useRef, useState, useEffect } from 'react';
-import { useParseMarkdown, convertToText } from './util';
-import { useMarkdownStyles } from './style';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
+import { useMarkdownStyles } from './style';
+import { convertToText, useParseMarkdown } from './util';
 
 export const DisplayMarkdown = (props) => {
-  const { textOnly, overflowMode, style } = props;
+  const { textOnly, overflowMode, sanitizeHtml, style } = props;
   const markdownClass = useMarkdownStyles();
   const { html = '' } = useParseMarkdown(props.value);
-  const text: any = convertToText(html);
+  const displayHtml = sanitizeHtml ? sanitizeHtml(html) : html;
+  const text = convertToText(displayHtml);
   const isEllipsis = overflowMode === 'ellipsis';
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -29,7 +30,7 @@ export const DisplayMarkdown = (props) => {
       const overflowed = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
       setIsOverflowed(overflowed);
     }
-  }, [html, style, overflowMode]);
+  }, [displayHtml, style, overflowMode]);
 
   // 通用样式（用于 ellipsis 模式）
   const baseStyle: React.CSSProperties = {
@@ -48,11 +49,15 @@ export const DisplayMarkdown = (props) => {
       : {}),
   };
 
-  const content = (
+  const content = textOnly ? (
+    <div ref={contentRef} className={`${markdownClass} nb-markdown`} style={baseStyle}>
+      {text}
+    </div>
+  ) : (
     <div
       ref={contentRef}
       className={`${markdownClass} nb-markdown`}
-      dangerouslySetInnerHTML={{ __html: textOnly ? text : html }}
+      dangerouslySetInnerHTML={{ __html: displayHtml }}
       style={baseStyle}
     />
   );
@@ -61,7 +66,7 @@ export const DisplayMarkdown = (props) => {
     <Tooltip
       title={
         <div
-          dangerouslySetInnerHTML={{ __html: html }}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
           style={{
             maxHeight: 500,
             overflowY: 'auto',

package/src/flow/internal/components/Markdown/__tests__/DisplayMarkdown.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { DisplayMarkdown } from '../DisplayMarkdown';
+
+vi.mock('../util', () => ({
+  useParseMarkdown: (value: string) => ({ html: value }),
+  convertToText: (value: string) => {
+    const element = document.createElement('div');
+    element.innerHTML = value;
+    return element.textContent || '';
+  },
+}));
+
+describe('DisplayMarkdown', () => {
+  it('sanitizes HTML mode', () => {
+    const { container } = render(
+      <DisplayMarkdown
+        value={'<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>'}
+        sanitizeHtml={sanitizeRichTextHtml}
+        textOnly={false}
+      />,
+    );
+
+    expect(container.querySelector('p')).toHaveTextContent('safe');
+    expect(container.querySelector('img')).not.toHaveAttribute('onerror');
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('renders decoded text as a text node', () => {
+    const payload = '&lt;img src=x onerror=alert(document.domain)&gt;';
+    const { container } = render(<DisplayMarkdown value={payload} sanitizeHtml={sanitizeRichTextHtml} textOnly />);
+
+    expect(container).toHaveTextContent('<img src=x onerror=alert(document.domain)>');
+    expect(container.querySelector('img')).toBeNull();
+  });
+});