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

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

@@ -8,41 +8,110 @@
  */
 
 import { useApp } from '../../../flow-compat';
+import type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
 import React from 'react';
+import type { AdminLayoutModel } from './AdminLayoutModel';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+import type { AppSwitcherActionPanelModel } from './AppSwitcherActionPanelModel';
 
-export const useApplications = () => {
+export const APP_SWITCHER_ACTION_PANEL_MODEL_UID = `${ADMIN_LAYOUT_MODEL_UID}-app-switcher-actions`;
+
+function getErrorStatus(error: unknown) {
+  if (!error || typeof error !== 'object') {
+    return;
+  }
+  const errorLike = error as { response?: { status?: unknown }; status?: unknown };
+  const status = errorLike.response?.status ?? errorLike.status;
+  return typeof status === 'number' ? status : undefined;
+}
+
+export const useApplications = (adminLayoutModel?: AdminLayoutModel) => {
   const app = useApp();
   const loadAppList = app.apps.loadAppList;
-  const [appList, setAppList] = React.useState([]);
+  const [legacyAppList, setLegacyAppList] = React.useState<AppListProps>([]);
+  const [appSwitcherModel, setAppSwitcherModel] = React.useState<AppSwitcherActionPanelModel>();
+
+  React.useEffect(() => {
+    let canceled = false;
+    let modelWithLayoutContext: AppSwitcherActionPanelModel | undefined;
+
+    if (!adminLayoutModel) {
+      setAppSwitcherModel(undefined);
+      return;
+    }
+
+    const load = async () => {
+      try {
+        const model = await adminLayoutModel.flowEngine.loadOrCreateModel<AppSwitcherActionPanelModel>({
+          uid: APP_SWITCHER_ACTION_PANEL_MODEL_UID,
+          use: 'AppSwitcherActionPanelModel',
+          parentId: adminLayoutModel.uid,
+          subKey: 'appSwitcher',
+          subType: 'object',
+        });
+        if (canceled || !model) {
+          return;
+        }
+        model.context.addDelegate(adminLayoutModel.context);
+        modelWithLayoutContext = model;
+        setAppSwitcherModel(model);
+      } catch (error) {
+        if (canceled) {
+          return;
+        }
+        if (getErrorStatus(error) !== 404) {
+          throw error;
+        }
+        setAppSwitcherModel(undefined);
+      }
+    };
+    load();
+
+    return () => {
+      canceled = true;
+      modelWithLayoutContext?.context.removeDelegate(adminLayoutModel.context);
+    };
+  }, [adminLayoutModel]);
 
   React.useEffect(() => {
     let canceled = false;
 
+    if (adminLayoutModel) {
+      setLegacyAppList([]);
+      return;
+    }
+
     if (!loadAppList) {
-      setAppList([]);
+      setLegacyAppList([]);
       return;
     }
 
-    void Promise.resolve(loadAppList(app))
-      .then((list) => {
+    const load = async () => {
+      try {
+        const list = await Promise.resolve(loadAppList(app));
         if (!canceled) {
-          setAppList(Array.isArray(list) ? list : []);
+          setLegacyAppList(Array.isArray(list) ? list : []);
         }
-      })
-      .catch((error) => {
+      } catch (error) {
         console.error('[NocoBase] Failed to load application switcher list.', error);
         if (!canceled) {
-          setAppList([]);
+          setLegacyAppList([]);
         }
-      });
+      }
+    };
+    load();
 
     return () => {
       canceled = true;
     };
-  }, [app, loadAppList]);
+  }, [adminLayoutModel, app, loadAppList]);
+
+  const shouldRenderConfiguredSwitcher =
+    !!appSwitcherModel && (appSwitcherModel.hasActions() || app.flowEngine.context.flowSettingsEnabled);
 
   return {
     Component: app.apps.Component,
-    appList,
+    appList: shouldRenderConfiguredSwitcher ? [{ title: '', url: '#' }] : legacyAppList,
+    appSwitcherModel,
   };
 };

package/src/flow/common/Markdown/Display.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/css';
 import { createRoot } from 'react-dom/client';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import Vditor from 'vditor';
+import { removeMarkdownIframes, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -51,8 +52,15 @@ function DisplayInner(props: { value: string; style?: CSSProperties; loadImages?
       Vditor.preview(containerRef.current, props.value ?? '', {
         mode: 'light',
         cdn,
-      });
+        markdown: {
+          sanitize: true,
+        },
+        transform: stripMarkdownIframes,
+      })
+        .then(() => removeMarkdownIframes(containerRef.current))
+        .catch(() => removeMarkdownIframes(containerRef.current));
       setTimeout(() => {
+        removeMarkdownIframes(containerRef.current);
         containerRef.current?.querySelectorAll('img').forEach((img: HTMLImageElement) => {
           img.style.cursor = 'zoom-in';
           img.addEventListener('click', () => {
@@ -129,13 +137,16 @@ export const Display = (props) => {
       Vditor.md2html(props.value, {
         mode: 'light',
         cdn,
+        markdown: {
+          sanitize: true,
+        },
       })
         .then((html) => {
-          setText(convertToText(html));
+          setText(convertToText(stripMarkdownIframes(html)));
         })
         .catch(() => setText(''));
     }
-  }, [props.value, textOnly]);
+  }, [props.value, textOnly, cdn]);
 
   const isOverflowTooltip = useCallback(() => {
     if (!elRef.current) return false;

package/src/flow/common/Markdown/Edit.tsx

@@ -17,6 +17,7 @@ import React, { useEffect, useCallback, useLayoutEffect, useMemo, useRef, useSta
 import { useTranslation } from 'react-i18next';
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
+import { stripMarkdownIframeTags, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -102,13 +103,20 @@ const Edit = (props) => {
     if (!containerRef.current) return;
 
     const toolbarConfig = placeToolbarTooltipsBelow(toolbar ?? defaultToolbar);
+    const safeValue = stripMarkdownIframeTags(value ?? '');
     const vditor = new Vditor(containerRef.current, {
-      value: value ?? '',
+      value: safeValue,
       lang,
       cache: { enable: false },
       undoDelay: 0,
       mode: props.mode || 'ir',
-      preview: { math: { engine: 'KaTeX' } },
+      preview: {
+        markdown: {
+          sanitize: true,
+        },
+        math: { engine: 'KaTeX' },
+        transform: stripMarkdownIframes,
+      },
       toolbar: toolbarConfig,
       fullscreen: { index: 1200 },
       cdn,
@@ -117,7 +125,6 @@ const Edit = (props) => {
       after: () => {
         vdRef.current = vditor;
         setEditorReady(true); // Notify that the editor is ready
-        vditor.setValue(value ?? '');
         if (disabled) {
           vditor.disabled();
         } else {
@@ -131,8 +138,12 @@ const Edit = (props) => {
           });
         }
       },
-      input(value) {
-        onChange(value);
+      input(nextValue) {
+        const safeNextValue = stripMarkdownIframeTags(nextValue);
+        if (safeNextValue !== nextValue) {
+          vditor.setValue(safeNextValue);
+        }
+        onChange(safeNextValue);
       },
       upload: {
         multiple: false,
@@ -229,8 +240,9 @@ const Edit = (props) => {
   useEffect(() => {
     if (editorReady && vdRef.current) {
       const editor = vdRef.current;
-      if (value !== editor.getValue()) {
-        editor.setValue(value ?? '');
+      const safeValue = stripMarkdownIframeTags(value ?? '');
+      if (safeValue !== editor.getValue()) {
+        editor.setValue(safeValue);
 
         const preArea = containerRef.current?.querySelector(
           'div.vditor-content > div.vditor-ir > pre',

package/src/flow/components/FlowRoute.tsx

@@ -10,10 +10,13 @@
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { deviceType } from 'react-device-detect';
-import { useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
-import { NocoBaseDesktopRouteType } from '../../flow-compat';
-import { resolveAdminRouteRuntimeTarget } from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
+import {
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
 import { getAdminLayoutModel, type AdminLayoutModel } from '../admin-shell/admin-layout/AdminLayoutModel';
 import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutModel';
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
@@ -21,6 +24,7 @@ import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
 
 type FlowRouteGuardState = {
+  pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
@@ -35,6 +39,14 @@ type FlowRouteLayoutContext = {
   uid?: string;
 };
 
+type FlowRouteRepositoryLike = {
+  refreshAccessible?: () => Promise<unknown>;
+  isAccessibleLoaded?: () => boolean;
+  ensureAccessibleLoaded?: () => Promise<unknown>;
+  getRouteBySchemaUid?: (schemaUid: string) => NocoBaseDesktopRoute | undefined;
+  listAccessible?: () => NocoBaseDesktopRoute[];
+};
+
 export type FlowRouteProps = {
   pageUid?: string;
   active?: boolean;
@@ -70,6 +82,44 @@ const getDefaultLegacyPageBehavior = (
 
 const shouldRequireAccessibleRoute = (contextLayout?: FlowRouteLayoutContext) => contextLayout?.authCheck !== false;
 
+const findAccessibleRouteByIdentity = (
+  routes: NocoBaseDesktopRoute[] | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  if (!Array.isArray(routes)) {
+    return undefined;
+  }
+
+  for (const route of routes) {
+    if (
+      (route.type !== NocoBaseDesktopRouteType.group && route.schemaUid === pageUid) ||
+      (route.type === NocoBaseDesktopRouteType.group && route.id != null && String(route.id) === pageUid)
+    ) {
+      return route;
+    }
+
+    const matched = findAccessibleRouteByIdentity(route.children, pageUid);
+    if (matched) {
+      return matched;
+    }
+  }
+
+  return undefined;
+};
+
+const getAccessibleRouteByPageUid = (
+  routeRepository: FlowRouteRepositoryLike | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  const routeBySchemaUid = routeRepository?.getRouteBySchemaUid?.(pageUid);
+
+  if (routeBySchemaUid && routeBySchemaUid.type !== NocoBaseDesktopRouteType.group) {
+    return routeBySchemaUid;
+  }
+
+  return findAccessibleRouteByIdentity(routeRepository?.listAccessible?.(), pageUid);
+};
+
 const hasFlowModel = async (flowEngine: FlowEngine, pageUid: string) => {
   if (flowEngine.getModel(pageUid)) {
     return true;
@@ -197,11 +247,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
   );
   const legacyPageBehavior = legacyPageBehaviorProp || getDefaultLegacyPageBehavior(flowEngine, routeLayout);
   const app = useApp();
-  const routeRepository = flowEngine.context.routeRepository;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const routeRepository = flowEngine.context.routeRepository as FlowRouteRepositoryLike | undefined;
   const params = useParams();
   const pageUid = pageUidProp || params?.name;
+  const hasNestedRoutePath = typeof params?.tabUid !== 'undefined' || typeof params?.['*'] !== 'undefined';
   const skipRouteRepositoryCheck = !routeRepository;
   const [guardState, setGuardState] = useState<FlowRouteGuardState>({
+    pageUid: undefined,
     pending: true,
     allowBridge: false,
     notFound: false,
@@ -213,19 +267,23 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     throw new Error('[NocoBase] FlowRoute requires pageUid or route.params.name.');
   }
 
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.hash, location.pathname, location.search, pageUid]);
+
   useEffect(() => {
     let active = true;
     const requestId = ++requestIdRef.current;
 
     const run = async () => {
-      setGuardState({ pending: true, allowBridge: false, notFound: false });
+      setGuardState({ pageUid, pending: true, allowBridge: false, notFound: false });
 
       if (!skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
         try {
           await routeRepository?.ensureAccessibleLoaded?.();
         } catch (_error) {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: true, notFound: false });
+            setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           }
           return;
         }
@@ -235,28 +293,64 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
         return;
       }
 
-      const route = skipRouteRepositoryCheck ? undefined : routeRepository?.getRouteBySchemaUid?.(pageUid);
+      const route = skipRouteRepositoryCheck ? undefined : getAccessibleRouteByPageUid(routeRepository, pageUid);
       if (!route && !skipRouteRepositoryCheck && shouldRequireAccessibleRoute(routeLayout)) {
-        setGuardState({ pending: false, allowBridge: false, notFound: true });
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (!route && legacyPageBehavior === 'notFound') {
         const flowModelExists = await hasFlowModel(flowEngine, pageUid);
         if (active && requestId === requestIdRef.current) {
-          setGuardState({ pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+          setGuardState({ pageUid, pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+        }
+        return;
+      }
+
+      if (route?.type === NocoBaseDesktopRouteType.group) {
+        if (hasNestedRoutePath) {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+          return;
+        }
+
+        const target = resolveAdminRouteRuntimeTarget({
+          app,
+          route,
+          layout: routeLayout,
+        });
+
+        if (target.reason === 'emptyGroup') {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+          return;
+        }
+
+        if (target.runtimePath) {
+          if (replaceTriggeredRef.current) {
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+            return;
+          }
+
+          replaceTriggeredRef.current = true;
+          if (target.navigationMode === 'document') {
+            window.location.replace(target.runtimePath);
+            return;
+          }
+          navigate(toRouterNavigationPath(target.runtimePath, app.router?.getBasename?.()), { replace: true });
+          return;
         }
+
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (route?.type === NocoBaseDesktopRouteType.page) {
         if (legacyPageBehavior === 'notFound') {
-          setGuardState({ pending: false, allowBridge: false, notFound: true });
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           return;
         }
 
         if (legacyPageBehavior === 'bridge') {
-          setGuardState({ pending: false, allowBridge: true, notFound: false });
+          setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           return;
         }
 
@@ -279,14 +373,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: false, notFound: true });
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           }
           return;
         }
       }
 
       if (active && requestId === requestIdRef.current) {
-        setGuardState({ pending: false, allowBridge: true, notFound: false });
+        setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
       }
     };
 
@@ -295,10 +389,20 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return () => {
       active = false;
     };
-  }, [app, flowEngine, legacyPageBehavior, pageUid, routeLayout, routeRepository, skipRouteRepositoryCheck]);
+  }, [
+    app,
+    flowEngine,
+    hasNestedRoutePath,
+    legacyPageBehavior,
+    navigate,
+    pageUid,
+    routeLayout,
+    routeRepository,
+    skipRouteRepositoryCheck,
+  ]);
 
   const content = useMemo(() => {
-    if (guardState.pending) {
+    if (guardState.pageUid !== pageUid || guardState.pending) {
       return null;
     }
 
@@ -311,7 +415,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     }
 
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
-  }, [active, getLayoutModel, guardState.allowBridge, guardState.notFound, guardState.pending, pageUid]);
+  }, [
+    active,
+    getLayoutModel,
+    guardState.allowBridge,
+    guardState.notFound,
+    guardState.pageUid,
+    guardState.pending,
+    pageUid,
+  ]);
 
   return content;
 };

package/src/flow/getViewDiffAndUpdateHidden.tsx

@@ -33,6 +33,7 @@ export const getKey = (viewItem: ViewItem) => {
     stableStringify(params.viewUid),
     stableStringify(params.sourceId),
     stableStringify(params.filterByTk),
+    stableStringify(params.openViewRouteState),
     String(index),
   ];
 

package/src/flow/internal/components/Markdown/util.ts

@@ -9,13 +9,14 @@
 
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import { stripMarkdownIframes } from '../../../../utils/markdownSanitize';
 
 export const parseMarkdown = _.memoize(async (text: string) => {
   if (!text) {
     return text;
   }
   const m = await import('./md');
-  return m.default.render(text);
+  return stripMarkdownIframes(m.default.render(text));
 });
 
 export function useParseMarkdown(text: string) {

package/src/flow/models/base/ActionModel.tsx

@@ -20,7 +20,7 @@ import { ActionModel } from './ActionModelCore';
 
 function getMobileDefaultProps(ctx) {
   const defaultProps = ctx.model.defaultProps || {};
-  if (ctx.isMobileLayout && defaultProps.icon) {
+  if (ctx.isMobileLayout && defaultProps.icon && ctx.model.enableEditIconOnly !== false) {
     return {
       ...defaultProps,
       iconOnly: true,
@@ -43,6 +43,7 @@ ActionModel.registerFlow({
                 'x-decorator': 'FormItem',
                 'x-component': 'Input',
                 title: tExpr('Button title'),
+                description: ctx.model.getTitleFieldDescription?.(),
               }
             : undefined,
           tooltip: ctx.model.enableEditTooltip
@@ -59,13 +60,14 @@ ActionModel.registerFlow({
                 title: tExpr('Button icon'),
               }
             : undefined,
-          iconOnly: ctx.model.enableEditIcon
-            ? {
-                'x-decorator': 'FormItem',
-                'x-component': 'Switch',
-                title: tExpr('Icon only'),
-              }
-            : undefined,
+          iconOnly:
+            ctx.model.enableEditIcon && ctx.model.enableEditIconOnly !== false
+              ? {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Switch',
+                  title: tExpr('Icon only'),
+                }
+              : undefined,
           type: ctx.model.enableEditType
             ? {
                 'x-decorator': 'FormItem',

package/src/flow/models/base/ActionModelCore.tsx

@@ -25,7 +25,7 @@ export function ActionWithoutPermission(props) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} ` : '';
     return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, t]);
   const { actionName } = props?.forbidden || model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -62,6 +62,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   enableEditTooltip = true;
   enableEditTitle = true;
   enableEditIcon = true;
+  enableEditIconOnly = true;
   enableEditType = true;
   enableEditDanger = true;
   enableEditColor = false;
@@ -136,6 +137,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return this.props.title;
   }
 
+  getTitleFieldDescription() {
+    return undefined;
+  }
+
   getIcon() {
     return this.props.icon;
   }
@@ -143,10 +148,11 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderButton() {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {iconOnly ? null : props.children || this.getTitle()}
+        {titleContent}
       </Button>
     );
   }
@@ -162,11 +168,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderHiddenInConfig(): React.ReactNode | undefined {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {iconOnly ? null : props.children || this.getTitle()}
+            {titleContent}
           </Button>
         </ActionWithoutPermission>
       );
@@ -174,7 +181,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return (
       <Tooltip title={this.context.t('The button is hidden and only visible when the UI Editor is active')}>
         <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-          {iconOnly ? null : props.children || this.getTitle()}
+          {titleContent}
         </Button>
       </Tooltip>
     );

package/src/flow/models/base/__tests__/ActionModelCore.render.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@nocobase/test/client';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class NoIconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'link' as const,
+    title: 'Open details',
+  };
+}
+
+describe('ActionModel rendering', () => {
+  it('shows the title when iconOnly is true but no icon is configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: {
+        title: 'Open details',
+        iconOnly: true,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{model.render()}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open details' })).toBeInTheDocument();
+  });
+});

package/src/flow/models/blocks/filter-form/fields/FilterFormCustomFieldModel.tsx

@@ -210,7 +210,7 @@ FilterFormCustomFieldModel.registerFlow({
           'x-decorator': 'FormItem',
           required: true,
           description:
-            '{{t("Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.")}}',
+            '{{t("Randomly generated and can be modified. Support letters, numbers and underscores, must start with a letter.")}}',
         },
         source: {
           type: 'array',

package/src/flow/models/blocks/form/FormActionModel.tsx

@@ -117,7 +117,7 @@ FormSubmitActionModel.registerFlow({
         try {
           ctx.model.setProps('loading', true);
           const { submitHandler } = await import('./submitHandler');
-          await submitHandler(ctx, params);
+          return await submitHandler(ctx, params);
         } catch (error) {
           ctx.model.setProps('loading', false);
           if (error instanceof FlowExitAllException) {