@nocobase/client-v2 2.2.0-beta.15 → 2.2.0-beta.16

package/src/flow/actions/__tests__/actionLinkageRules.forkProps.test.ts

@@ -0,0 +1,314 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { ActionModel as ConfiguredActionModel } from '../../models/base/ActionModel';
+import { ActionModel } from '../../models/base/ActionModelCore';
+import { actionLinkageRules, linkageSetActionProps, updateLinkageRules } from '../linkageRules';
+
+class TestActionModel extends ActionModel {}
+
+describe('action linkage rules on action forks', () => {
+  it('does not snapshot unrelated master props when disabling an action', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TestActionModel });
+    const master = engine.createModel<TestActionModel>({
+      use: 'TestActionModel',
+      props: { title: 'Edit' },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    const ctx = {
+      flowKey: 'buttonSettings',
+      model: fork,
+      app: {
+        jsonLogic: {
+          apply: vi.fn(() => true),
+        },
+      },
+      t: (value: string) => value,
+      resolveJsonTemplate: vi.fn(async (value: unknown) => value),
+      getAction: (name: string) => {
+        if (name !== 'linkageSetActionProps') return undefined;
+        return {
+          handler: async (_ctx: unknown, params: { setProps: Function }) => {
+            params.setProps(fork, { disabled: true });
+          },
+        };
+      },
+    } as never;
+
+    await actionLinkageRules.handler(ctx, {
+      value: [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ],
+    });
+
+    expect(fork.localProps.title).toBeUndefined();
+    expect(fork.__originalProps.title).toBeUndefined();
+    expect(fork.localProps.disabled).toBe(true);
+
+    master.setProps('title', 'Updated');
+    await actionLinkageRules.handler(ctx, {
+      value: [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ],
+    });
+
+    expect(fork.getProps().title).toBe('Updated');
+    expect(fork.serialize().props).toMatchObject({ title: 'Updated' });
+    expect(fork.serialize().props).not.toHaveProperty('disabled');
+
+    const refreshedFork = master.createFork({ className: 'row-action' });
+    expect(refreshedFork.getProps().title).toBe('Updated');
+  });
+
+  it.each(['disable', 'delete'] as const)(
+    'restores a row action when linkage rules are %sd without persisting disabled',
+    async (change) => {
+      const engine = new FlowEngine();
+      engine.registerModels({ ConfiguredActionModel });
+      engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+
+      let savedData: ReturnType<ConfiguredActionModel['serialize']> | undefined;
+      engine.setModelRepository({
+        save: async (model) => {
+          savedData = model.serialize();
+          return savedData;
+        },
+      } as Parameters<FlowEngine['setModelRepository']>[0]);
+
+      const enabledRules = [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ];
+      const master = engine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: { title: 'Edit' },
+        stepParams: {
+          buttonSettings: {
+            linkageRules: { value: enabledRules },
+          },
+        },
+      });
+      const fork = master.createFork({ className: 'row-action' });
+
+      await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+      expect(fork.getProps().disabled).toBe(true);
+
+      const nextRules =
+        change === 'disable'
+          ? updateLinkageRules(enabledRules, (rules) => {
+              rules[0].enable = false;
+            })
+          : [];
+      fork.setStepParams('buttonSettings', 'linkageRules', { value: nextRules });
+      await fork.saveStepParams();
+      await fork.rerender();
+
+      expect(savedData).toBeDefined();
+      expect(savedData?.props).not.toHaveProperty('disabled');
+      expect(savedData?.stepParams.buttonSettings.linkageRules.value).toEqual(nextRules);
+      expect(fork.getProps().disabled).toBeUndefined();
+
+      const reloadedEngine = new FlowEngine();
+      reloadedEngine.registerModels({ ConfiguredActionModel });
+      reloadedEngine.registerActions({ actionLinkageRules, linkageSetActionProps });
+      const reloadedMaster = reloadedEngine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: savedData?.props,
+        stepParams: savedData?.stepParams,
+      });
+      const reloadedFork = reloadedMaster.createFork({ className: 'row-action' });
+
+      await reloadedFork.dispatchEvent('beforeRender', undefined, { useCache: false });
+      expect(reloadedFork.getProps().disabled).toBeUndefined();
+    },
+  );
+
+  it.each(['disabled', 'deleted'] as const)(
+    'ignores a historical disabled prop after the linkage rule is %s',
+    async (state) => {
+      const engine = new FlowEngine();
+      engine.registerModels({ ConfiguredActionModel });
+      engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+      const rules =
+        state === 'disabled'
+          ? [
+              {
+                key: 'disable-edit',
+                enable: false,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ]
+          : [];
+      const master = engine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: { title: 'Edit', disabled: true },
+        stepParams: {
+          buttonSettings: {
+            linkageRules: { value: rules },
+          },
+        },
+      });
+      const fork = master.createFork({ className: 'row-action' });
+
+      expect(master.getProps()).not.toHaveProperty('disabled');
+      await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+      expect(fork.getProps().disabled).toBeUndefined();
+    },
+  );
+
+  it('still applies an enabled linkage rule after dropping a historical disabled prop', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ConfiguredActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const master = engine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: { title: 'Edit', disabled: true },
+      stepParams: {
+        buttonSettings: {
+          linkageRules: {
+            value: [
+              {
+                key: 'disable-edit',
+                enable: true,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ],
+          },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    expect(master.getProps()).not.toHaveProperty('disabled');
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+    expect(fork.getProps().disabled).toBe(true);
+  });
+
+  it('preserves a default disabled state as runtime-only state', async () => {
+    class DefaultDisabledActionModel extends ConfiguredActionModel {
+      defaultProps = { ...this.defaultProps, disabled: true };
+    }
+    const engine = new FlowEngine();
+    engine.registerModels({ DefaultDisabledActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const master = engine.createModel<DefaultDisabledActionModel>({
+      use: 'DefaultDisabledActionModel',
+      props: { title: 'Edit' },
+      stepParams: {
+        buttonSettings: {
+          linkageRules: { value: [] },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+    expect(fork.getProps().disabled).toBe(true);
+    expect(fork.serialize().props).not.toHaveProperty('disabled');
+  });
+
+  it('updates a disabled row action title through the real beforeRender flow', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ConfiguredActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    let savedData: ReturnType<ConfiguredActionModel['serialize']> | undefined;
+    engine.setModelRepository({
+      save: async (model) => {
+        savedData = model.serialize();
+        return savedData;
+      },
+    } as Parameters<FlowEngine['setModelRepository']>[0]);
+    const master = engine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: { title: 'Edit' },
+      stepParams: {
+        buttonSettings: {
+          general: { title: 'Edit' },
+          linkageRules: {
+            value: [
+              {
+                key: 'disable-edit',
+                enable: true,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ],
+          },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+    expect(fork.getProps()).toMatchObject({ title: 'Edit', disabled: true });
+
+    fork.setStepParams('buttonSettings', 'general', { title: 'Updated' });
+    await fork.saveStepParams();
+    await fork.rerender();
+
+    expect(savedData?.props).not.toHaveProperty('disabled');
+    expect(savedData?.stepParams.buttonSettings.general.title).toBe('Updated');
+    expect(fork.getProps()).toMatchObject({ title: 'Updated', disabled: true });
+
+    const reloadedEngine = new FlowEngine();
+    reloadedEngine.registerModels({ ConfiguredActionModel });
+    reloadedEngine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const reloadedMaster = reloadedEngine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: savedData?.props,
+      stepParams: savedData?.stepParams,
+    });
+    const reloadedFork = reloadedMaster.createFork({ className: 'row-action' });
+
+    await reloadedFork.dispatchEvent('beforeRender', undefined, { useCache: false });
+    expect(reloadedFork.getProps()).toMatchObject({ title: 'Updated', disabled: true });
+  });
+
+  it('creates a new rules value when disabling a linkage rule', () => {
+    const rules = [
+      {
+        key: 'disable-edit',
+        title: 'Linkage rule',
+        enable: true,
+        condition: { logic: '$and', items: [] },
+        actions: [],
+      },
+    ];
+    const nextRules = updateLinkageRules(rules, (next) => {
+      next[0].enable = false;
+    });
+
+    expect(nextRules).toEqual([expect.objectContaining({ key: 'disable-edit', enable: false })]);
+    expect(nextRules).not.toBe(rules);
+    expect(rules[0].enable).toBe(true);
+  });
+});

package/src/flow/actions/__tests__/dataScopeFormValueClear.test.ts

@@ -225,6 +225,108 @@ describe('ensureFormValueDrivenDataScopeClear', () => {
     expect(onChange).toHaveBeenCalledWith(null);
   });
 
+  it('does not clear a popup form field when data scope depends on the external parent item', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: {
+        form: {},
+        formValues: { staff_m2o: null },
+      },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 10 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'orgId', operator: '$eq', value: '{{ ctx.item.parentItem.value.org_m2o.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedPaths: [['staff_m2o']],
+      allValues: { staff_m2o: { id: 10 } },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('maps popup current item dependencies to the popup form root', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: {
+        form: {},
+        formValues: {
+          org_m2o: { id: 1 },
+          staff_m2o: { id: 10 },
+        },
+      },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 10 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'orgId', operator: '$eq', value: '{{ ctx.item.value.org_m2o.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedPaths: [['staff_m2o']],
+      allValues: {
+        org_m2o: { id: 1 },
+        staff_m2o: { id: 10 },
+      },
+    });
+    expect(onChange).not.toHaveBeenCalled();
+
+    emitter.emit('formValuesChange', {
+      changedPaths: [['org_m2o']],
+      allValues: {
+        org_m2o: { id: 2 },
+        staff_m2o: { id: 10 },
+      },
+    });
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
   it('does not clear a row field when a sibling field changes but the item dependency value is unchanged', () => {
     const emitter = new EventEmitter();
     const formBlock = {

package/src/flow/actions/linkageRules.tsx

@@ -68,6 +68,12 @@ interface LinkageRule {
   }[];
 }
 
+export function updateLinkageRules<T>(rules: T[], updater: (nextRules: T[]) => void): T[] {
+  const nextRules = _.cloneDeep(rules);
+  updater(nextRules);
+  return nextRules;
+}
+
 const previewValueForLog = (value: any) => {
   if (value == null) return value;
   const t = typeof value;
@@ -1500,13 +1506,26 @@ async function resolveLinkageRulesParamsPreservingRunJsScripts(ctx: FlowContext,
 }
 
 const LinkageRulesUI = observer(
-  (props: { readonly value: LinkageRule[]; supportedActions: string[]; title?: string }) => {
-    const { value: rules, supportedActions } = props;
+  (props: {
+    readonly value: LinkageRule[];
+    onChange?: (value: LinkageRule[]) => void;
+    supportedActions: string[];
+    title?: string;
+  }) => {
+    const { value: rules = [], onChange, supportedActions } = props;
     const ctx = useFlowContext();
     const flowEngine = useFlowEngine();
     const t = ctx.model.translate.bind(ctx.model);
     const assignPriorityTip = t('Assignment takes precedence over form field assignment');
 
+    const replaceRules = (updater: (nextRules: LinkageRule[]) => void) => {
+      if (onChange) {
+        onChange(updateLinkageRules(rules, updater));
+      } else {
+        updater(rules);
+      }
+    };
+
     // 创建新规则的默认值
     const createNewRule = (): LinkageRule => ({
       key: uid(),
@@ -1523,7 +1542,7 @@ const LinkageRulesUI = observer(
 
     // 删除规则
     const handleDeleteRule = (index: number) => {
-      rules.splice(index, 1);
+      replaceRules((nextRules) => nextRules.splice(index, 1));
     };
 
     // 上移规则
@@ -1562,7 +1581,9 @@ const LinkageRulesUI = observer(
 
     // 切换规则启用状态
     const handleToggleEnable = (index: number, enable: boolean) => {
-      rules[index].enable = enable;
+      replaceRules((nextRules) => {
+        nextRules[index].enable = enable;
+      });
     };
 
     // 获取可用的动作类型
@@ -2222,7 +2243,7 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
           }
 
           rememberOriginalProp(key, model.props?.[key]);
-          if (key === 'hiddenText') {
+          if (key === 'hiddenText' && normalizedProps[key]) {
             rememberOriginalProp('title', model.props?.title);
           }
           if (key === 'required') {
@@ -2286,7 +2307,6 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     const newProps = { ...model.__originalProps, ...patchProps };
     const prevHidden = !!model.hidden;
     const nextHidden = !!newProps.hiddenModel;
-
     model.setProps(_.omit(newProps, ['hiddenModel', 'value', 'hiddenText', LINKAGE_ASSIGN_MODE_PROP]));
     syncFieldOptionsToForks(model, patchProps);
     if (typeof model.setHidden === 'function') {

package/src/flow/common/Markdown/style.ts

@@ -26,6 +26,10 @@ export default function useStyle() {
     () => ({
       [`.${COMPONENT_CLS}`]: {
         '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
+        '.vditor-reset h2': {
+          borderBottom: 'none !important',
+          boxShadow: 'none !important',
+        },
         '.vditor': {
           borderRadius: 8,
         },

package/src/flow/components/BlockItemCard.tsx

@@ -150,7 +150,7 @@ export const BlockItemCard = React.forwardRef(
   ) => {
     const { t } = useTranslation();
     const { token } = theme.useToken();
-    const { title: blockTitle, description, children, className, heightMode, ...rest } = props;
+    const { title: blockTitle, description, children, className, heightMode, style, ...rest } = props;
     const cardRef = useRef<HTMLDivElement | null>(null);
     const setCardRef = useCallback(
       (node: HTMLDivElement | null) => {
@@ -185,7 +185,7 @@ export const BlockItemCard = React.forwardRef(
       <Card
         ref={setCardRef as any}
         title={title}
-        style={{ display: 'flex', flexDirection: 'column', height: height }}
+        style={{ display: 'flex', flexDirection: 'column', ...style, height: height ?? style?.height }}
         styles={{
           body: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' },
           header: {

package/src/flow/components/FlowRoute.tsx

@@ -8,9 +8,11 @@
  */
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
+import { Button, Result } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { getModernClientPrefix, stripModernClientPrefix } from '../../authRedirect';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
 import {
@@ -22,12 +24,14 @@ import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutM
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
 import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
+import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
   pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
+  legacyPageUnsupported?: boolean;
 };
 
 export type LegacyPageBehavior = 'redirect' | 'notFound' | 'bridge';
@@ -156,31 +160,9 @@ const BridgeFlowRoute = ({
   const layoutContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    flowEngine.context.defineProperty('deviceType', {
-      get: () => (deviceType === 'browser' ? 'computer' : deviceType),
-      cache: false,
-      meta: {
-        type: 'string',
-        title: flowEngine.translate('Current device type'),
-        interface: 'select',
-        uiSchema: {
-          enum: [
-            { label: flowEngine.translate('Computer'), value: 'computer' },
-            { label: flowEngine.translate('Mobile'), value: 'mobile' },
-            { label: flowEngine.translate('Tablet'), value: 'tablet' },
-            { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
-            { label: flowEngine.translate('Console'), value: 'console' },
-            { label: flowEngine.translate('Wearable'), value: 'wearable' },
-            { label: flowEngine.translate('Embedded'), value: 'embedded' },
-          ],
-          'x-component': 'Select',
-        },
-      },
-      info: {
-        description: 'Current device type (computer/mobile/tablet/...).',
-        detail: 'string',
-      },
-    });
+    if (!flowEngine.context.getPropertyOptions('deviceType')) {
+      registerDeviceTypeContext(flowEngine);
+    }
   }, [flowEngine]);
 
   useLayoutRoutePage({
@@ -195,11 +177,58 @@ const BridgeFlowRoute = ({
   return <div ref={layoutContentRef} />;
 };
 
+type RouteLocation = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+
+const getLegacyPageHref = (app: { getPublicPath: () => string }, location: RouteLocation) => {
+  const modernPublicPath = app.getPublicPath();
+  const browserLocationMatchesPublicPath = window.location.pathname.startsWith(modernPublicPath);
+  const currentLocation = browserLocationMatchesPublicPath ? window.location : location;
+  const pathWithinModernClient = currentLocation.pathname.startsWith(modernPublicPath)
+    ? currentLocation.pathname.slice(modernPublicPath.length)
+    : currentLocation.pathname.replace(/^\/+/, '');
+  return `${stripModernClientPrefix(modernPublicPath)}${pathWithinModernClient}${currentLocation.search}${
+    currentLocation.hash
+  }`;
+};
+
+const LegacyPageUnsupported = ({
+  app,
+  location,
+}: {
+  app: { getPublicPath: () => string };
+  location: RouteLocation;
+}) => {
+  const { t } = useTranslation();
+  const modernClientPath = `/${getModernClientPrefix()}/`;
+  const withModernClientPath = (message: string) => message.replaceAll('{{modernClientPath}}', modernClientPath);
+
+  return (
+    <Result
+      status="warning"
+      title={withModernClientPath(t('This page is not supported in the {{modernClientPath}} branch'))}
+      subTitle={withModernClientPath(
+        t(
+          'The {{modernClientPath}} branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      )}
+      extra={
+        <Button href={getLegacyPageHref(app, location)} type="primary">
+          {t('Open from the original entry')}
+        </Button>
+      }
+    />
+  );
+};
+
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx
@@ -377,7 +406,13 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+            setGuardState({
+              pageUid,
+              pending: false,
+              allowBridge: false,
+              notFound: false,
+              legacyPageUnsupported: true,
+            });
           }
           return;
         }
@@ -414,6 +449,10 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       return <AppNotFound />;
     }
 
+    if (guardState.legacyPageUnsupported) {
+      return <LegacyPageUnsupported app={app} location={location} />;
+    }
+
     if (!guardState.allowBridge) {
       return null;
     }
@@ -421,11 +460,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
   }, [
     active,
+    app,
     getLayoutModel,
     guardState.allowBridge,
+    guardState.legacyPageUnsupported,
     guardState.notFound,
     guardState.pageUid,
     guardState.pending,
+    location,
     pageUid,
   ]);