@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.2

package/src/components/form/filter/CollectionFilterItem.tsx

@@ -58,6 +58,16 @@ export interface CollectionFilterItemProps {
   t?: (key: string) => string;
   /** Optional v2 app registry used to resolve plugin-provided operator components. */
   app?: { getComponent?: (name: string) => React.ComponentType<any> | undefined };
+  /** Optional override for the left field picker placeholder. */
+  fieldPlaceholder?: string;
+  /** Optional override for the operator picker placeholder. */
+  operatorPlaceholder?: string;
+  /** Optional override for the value input placeholder. Pass `null` to suppress it. */
+  valuePlaceholder?: string | null;
+  /** Optional override for the left field picker width. Defaults to v2's original 200px. */
+  fieldWidth?: number;
+  /** Optional override for the operator picker min-width. Defaults to v2's original 120px. */
+  operatorMinWidth?: number;
 }
 
 const identity = (s: string) => s;
@@ -98,6 +108,12 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     const { path: leftValue, operator, value: rightValue } = props.value;
     const flowEngine = useFlowEngine({ throwError: false }) as any;
     const app = props.app || flowEngine?.context?.app;
+    const fieldPlaceholder = props.fieldPlaceholder ?? t('Select field');
+    const operatorPlaceholder = props.operatorPlaceholder ?? t('Comparision');
+    const valuePlaceholder =
+      props.valuePlaceholder === undefined ? t('Enter value') : props.valuePlaceholder || undefined;
+    const fieldWidth = props.fieldWidth ?? 200;
+    const operatorMinWidth = props.operatorMinWidth ?? 120;
 
     const options = useFilterOptions(collection, { filterableFieldNames, nonfilterableFieldNames, noIgnore, t });
 
@@ -135,8 +151,8 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
     return (
       <Space wrap>
         <Cascader
-          style={{ width: 200 }}
-          placeholder={t('Select field')}
+          style={{ width: fieldWidth }}
+          placeholder={fieldPlaceholder}
           options={cascaderOptions}
           value={fieldPath}
           onChange={handleFieldChange}
@@ -145,15 +161,15 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           popupClassName={cascaderPopupClass}
         />
         <Select
-          style={{ width: 120 }}
-          placeholder={t('Comparision')}
+          style={{ minWidth: operatorMinWidth }}
+          placeholder={operatorPlaceholder}
           value={operator || undefined}
           onChange={handleOperatorChange}
           disabled={!leftValue || operatorOptions.length === 0}
         >
           {operatorOptions.map((op) => (
             <Select.Option key={op.value} value={op.value}>
-              {op.label}
+              {typeof op.label === 'string' ? t(op.label) : op.label}
             </Select.Option>
           ))}
         </Select>
@@ -162,7 +178,7 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
           operator={selectedOperator}
           value={rightValue}
           onChange={handleValueChange}
-          placeholder={t('Enter value')}
+          placeholder={valuePlaceholder}
           t={t}
           app={app}
         />
@@ -179,7 +195,16 @@ export function createCollectionFilterItem(
   collection: Collection,
   bound?: Pick<
     CollectionFilterItemProps,
-    'filterableFieldNames' | 'nonfilterableFieldNames' | 'noIgnore' | 't' | 'app'
+    | 'filterableFieldNames'
+    | 'nonfilterableFieldNames'
+    | 'noIgnore'
+    | 't'
+    | 'app'
+    | 'fieldPlaceholder'
+    | 'operatorPlaceholder'
+    | 'valuePlaceholder'
+    | 'fieldWidth'
+    | 'operatorMinWidth'
   >,
 ) {
   const Component: FC<{ value: CollectionFilterItemValue }> = (props) => (

package/src/components/form/filter/__tests__/CollectionFilterItem.test.tsx

@@ -244,4 +244,42 @@ describe('CollectionFilterItem', () => {
       expect(value.path).toBe('username');
     });
   });
+
+  it('keeps default widths at 200/120 and honours explicit width/placeholder overrides', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container, rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    let selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '200px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '120px' });
+
+    rerender(
+      <CollectionFilterItem
+        value={observable({ path: '', operator: '', value: '' })}
+        collection={collection}
+        fieldWidth={160}
+        operatorMinWidth={110}
+        fieldPlaceholder="Choose field"
+        operatorPlaceholder="Choose operator"
+      />,
+    );
+
+    selects = container.querySelectorAll('.ant-select');
+    expect(selects[0]).toHaveStyle({ width: '160px' });
+    expect(selects[1]).toHaveStyle({ minWidth: '110px' });
+    expect(screen.getByText('Choose field')).toBeInTheDocument();
+  });
+
+  it('lets callers suppress the fallback value placeholder', () => {
+    const value = observable({ path: 'username', operator: '$eq', value: '' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { rerender } = render(<CollectionFilterItem value={value} collection={collection} />);
+    expect(screen.getByPlaceholderText('Enter value')).toBeInTheDocument();
+
+    rerender(<CollectionFilterItem value={value} collection={collection} valuePlaceholder={null} />);
+    expect(screen.queryByPlaceholderText('Enter value')).not.toBeInTheDocument();
+  });
 });

package/src/components/form/filter/index.ts

@@ -11,5 +11,7 @@
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
 export { CollectionFilterPanel } from './CollectionFilterPanel';
+export { CollectionFilterItem } from './CollectionFilterItem';
+export type { CollectionFilterItemValue } from './CollectionFilterItem';
 export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

package/src/components/form/index.tsx

@@ -19,3 +19,4 @@ export * from './RemoteSelect';
 export * from './ScanInput';
 export * from './TypedVariableInput';
 export * from './VariableInput';
+export * from './VariableJsonTextArea';

package/src/components/index.ts

@@ -9,9 +9,11 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './category-tabs';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
+export * from './KeepAlive';
 export * from './PoweredBy';
 export * from './RouterContextCleaner';
 export * from './SwitchLanguage';

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -13,6 +13,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import { FlowContextProvider, FlowEngine, FlowEngineProvider, type FlowModel } from '@nocobase/flow-engine';
 import FlowRoute from '../components/FlowRoute';
+import { RouteRepository } from '../../RouteRepository';
 
 type MockAdminLayoutModel = FlowModel & {
   registerRoutePage: ReturnType<typeof vi.fn>;
@@ -321,6 +322,94 @@ describe('FlowRoute', () => {
     });
   });
 
+  it('should ensure accessible routes for the current layout before bridging', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [
+          {
+            type: 'flowPage',
+            schemaUid: 'mobile-page',
+          },
+        ],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    routeRepository.setRoutes([], 'admin-layout-model');
+    const deactivateLayout = routeRepository.activateLayout({
+      uid: 'mobile-layout-model',
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+    const routeModel = engine.createModel({
+      uid: 'mobile-route-model',
+      use: 'FlowModel',
+    });
+    routeModel.context.defineProperty('layout', {
+      value: {
+        routeName: 'mobile',
+        routePath: '/mobile',
+        rootRouteName: 'mobile',
+        uid: 'mobile-layout-model',
+        layoutModelClass: 'MobileLayoutModel',
+        rootPageModelClass: 'MobileRootPageModel',
+        childPageModelClass: 'MobileChildPageModel',
+        authCheck: true,
+      },
+    });
+
+    const mobileLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({
+        uid: 'mobile-layout-model',
+        use: 'FlowModel',
+      }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <FlowContextProvider context={routeModel.context}>
+          <MemoryRouter initialEntries={['/mobile/mobile-page']}>
+            <Routes>
+              <Route path="/mobile/:name" element={<FlowRoute />} />
+            </Routes>
+          </MemoryRouter>
+        </FlowContextProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith({
+        url: '/desktopRoutes:listAccessible',
+        params: {
+          tree: true,
+          sort: 'sort',
+          layout: 'mobile-layout-model',
+        },
+      });
+      expect(mobileLayoutModel.registerRoutePage).toHaveBeenCalledWith('mobile-page', expect.any(Object));
+    });
+    deactivateLayout();
+  });
+
   it('should fail fast when admin-layout-model is missing', () => {
     const engine = new FlowEngine();
     engine.context.defineProperty('route', {
@@ -420,6 +509,75 @@ describe('FlowRoute', () => {
     });
   });
 
+  it('should not rerun accessible guard when layout reference changes but fields stay the same', async () => {
+    const engine = new FlowEngine();
+    const ensureAccessibleLoaded = vi.fn().mockResolvedValue([]);
+    const getRouteBySchemaUid = vi.fn(() => ({ type: 'flowPage', schemaUid: 'test-page' }));
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded,
+        getRouteBySchemaUid,
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const layoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'legacy-admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+    let layoutReadCount = 0;
+    const stableLayout = {
+      uid: 'admin-layout-model',
+      routeName: 'admin',
+      routePath: '/admin',
+      authCheck: true,
+    };
+    Object.defineProperty(layoutModel, 'layout', {
+      get: () => {
+        layoutReadCount += 1;
+        return layoutReadCount <= 2 ? { ...stableLayout } : stableLayout;
+      },
+    });
+
+    const element = (
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/flow/test-page']}>
+          <Routes>
+            <Route path="/flow/:name" element={<FlowRoute getLayoutModel={() => layoutModel as any} />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>
+    );
+    const { rerender } = render(element);
+
+    await waitFor(() => {
+      expect(layoutModel.registerRoutePage).toHaveBeenCalledWith('test-page', expect.any(Object));
+    });
+    expect(ensureAccessibleLoaded).not.toHaveBeenCalled();
+    expect(getRouteBySchemaUid).toHaveBeenCalledTimes(1);
+
+    rerender(element);
+
+    await waitFor(() => {
+      expect(layoutModel.updateRoutePage).toHaveBeenCalled();
+    });
+    expect(ensureAccessibleLoaded).not.toHaveBeenCalled();
+    expect(getRouteBySchemaUid).toHaveBeenCalledTimes(1);
+  });
+
   it('should show 404 when current route is a legacy page in v2 runtime', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
@@ -571,6 +729,22 @@ describe('FlowRoute', () => {
         },
       },
     });
+    const routeModel = engine.createModel({
+      uid: 'public-form-route-model',
+      use: 'FlowModel',
+    });
+    routeModel.context.defineProperty('layout', {
+      value: {
+        routeName: 'public-forms',
+        routePath: '/public-forms',
+        rootRouteName: 'public-forms',
+        uid: 'public-form-layout-model',
+        layoutModelClass: 'PublicFormLayoutModel',
+        rootPageModelClass: 'PublicFormPageModel',
+        childPageModelClass: 'ChildPageModel',
+        authCheck: false,
+      },
+    });
 
     const layoutModel: MockAdminLayoutModel = Object.assign(
       engine.createModel({ uid: 'public-form-layout-model', use: 'FlowModel' }),
@@ -581,13 +755,82 @@ describe('FlowRoute', () => {
       },
     );
 
+    render(
+      <FlowEngineProvider engine={engine}>
+        <FlowContextProvider context={routeModel.context}>
+          <MemoryRouter initialEntries={['/public-forms/public-form-1']}>
+            <Routes>
+              <Route
+                path="/public-forms/:name"
+                element={<FlowRoute legacyPageBehavior="notFound" getLayoutModel={() => layoutModel} />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </FlowContextProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(layoutModel.registerRoutePage).toHaveBeenCalledWith('public-form-1', expect.any(Object));
+    });
+    expect(screen.queryByText('404')).not.toBeInTheDocument();
+  });
+
+  it('should use getLayoutModel layout authCheck when FlowContext has no layout', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository({
+      findOne: vi.fn().mockResolvedValue({
+        uid: 'public-form-1',
+        use: 'FlowModel',
+      }),
+      save: vi.fn(),
+      destroy: vi.fn(),
+    } as any);
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => undefined),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const layoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'public-form-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+    Object.defineProperty(layoutModel, 'layout', {
+      value: {
+        routeName: 'public-forms',
+        routePath: '/public-forms',
+        rootRouteName: 'public-forms',
+        uid: 'public-form-layout-model',
+        layoutModelClass: 'PublicFormLayoutModel',
+        rootPageModelClass: 'PublicFormPageModel',
+        childPageModelClass: 'ChildPageModel',
+        authCheck: false,
+      },
+    });
+
     render(
       <FlowEngineProvider engine={engine}>
         <MemoryRouter initialEntries={['/public-forms/public-form-1']}>
           <Routes>
             <Route
               path="/public-forms/:name"
-              element={<FlowRoute legacyPageBehavior="notFound" getLayoutModel={() => layoutModel} />}
+              element={<FlowRoute legacyPageBehavior="notFound" getLayoutModel={() => layoutModel as any} />}
             />
           </Routes>
         </MemoryRouter>
@@ -600,6 +843,202 @@ describe('FlowRoute', () => {
     expect(screen.queryByText('404')).not.toBeInTheDocument();
   });
 
+  it('should render not found when admin route is not accessible', async () => {
+    const engine = new FlowEngine();
+    engine.setModelRepository({
+      findOne: vi.fn().mockResolvedValue({
+        uid: 'admin-denied-page',
+        use: 'FlowModel',
+      }),
+      save: vi.fn(),
+      destroy: vi.fn(),
+    } as any);
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => undefined),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+
+    const adminLayoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'admin-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/admin/admin-denied-page']}>
+          <Routes>
+            <Route path="/admin/:name" element={<FlowRoute />} />
+          </Routes>
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
+  it('should not use flowModels:findOne to bridge a missing route for protected layouts', async () => {
+    const engine = new FlowEngine();
+    const findOne = vi.fn().mockResolvedValue({
+      uid: 'mobile-denied-page',
+      use: 'FlowModel',
+    });
+    engine.setModelRepository({
+      findOne,
+      save: vi.fn(),
+      destroy: vi.fn(),
+    } as any);
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => undefined),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+    const routeModel = engine.createModel({
+      uid: 'mobile-route-model',
+      use: 'FlowModel',
+    });
+    routeModel.context.defineProperty('layout', {
+      value: {
+        routeName: 'mobile',
+        routePath: '/mobile',
+        rootRouteName: 'mobile',
+        uid: 'mobile-layout-model',
+        layoutModelClass: 'MobileLayoutModel',
+        rootPageModelClass: 'MobileRootPageModel',
+        childPageModelClass: 'MobileChildPageModel',
+        authCheck: true,
+      },
+    });
+
+    const layoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'mobile-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <FlowContextProvider context={routeModel.context}>
+          <MemoryRouter initialEntries={['/mobile/mobile-denied-page']}>
+            <Routes>
+              <Route
+                path="/mobile/:name"
+                element={<FlowRoute legacyPageBehavior="notFound" getLayoutModel={() => layoutModel} />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </FlowContextProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(findOne).not.toHaveBeenCalled();
+    expect(layoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
+  it('should not load a known page uid when a protected custom layout has no accessible route', async () => {
+    const engine = new FlowEngine();
+    const findOne = vi.fn().mockResolvedValue({
+      uid: 'known-denied-custom-page',
+      use: 'FlowModel',
+    });
+    engine.setModelRepository({
+      findOne,
+      save: vi.fn(),
+      destroy: vi.fn(),
+    } as any);
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        refreshAccessible: hookState.refresh,
+        isAccessibleLoaded: () => true,
+        ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+        getRouteBySchemaUid: vi.fn(() => undefined),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v2/',
+        router: {
+          getBasename: () => '/v2',
+        },
+      },
+    });
+    const routeModel = engine.createModel({
+      uid: 'custom-layout-route-model',
+      use: 'FlowModel',
+    });
+    routeModel.context.defineProperty('layout', {
+      value: {
+        routeName: 'admin2',
+        routePath: '/admin2',
+        rootRouteName: 'admin2',
+        uid: 'custom-protected-layout-model',
+        layoutModelClass: 'AdminLayoutModel',
+        rootPageModelClass: 'RootPageModel',
+        childPageModelClass: 'ChildPageModel',
+        authCheck: true,
+      },
+    });
+
+    const layoutModel: MockAdminLayoutModel = Object.assign(
+      engine.createModel({ uid: 'custom-protected-layout-model', use: 'FlowModel' }),
+      {
+        registerRoutePage: vi.fn(),
+        updateRoutePage: vi.fn(),
+        unregisterRoutePage: vi.fn(),
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <FlowContextProvider context={routeModel.context}>
+          <MemoryRouter initialEntries={['/admin2/known-denied-custom-page']}>
+            <Routes>
+              <Route
+                path="/admin2/:name"
+                element={<FlowRoute legacyPageBehavior="notFound" getLayoutModel={() => layoutModel} />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </FlowContextProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('404')).toBeInTheDocument();
+    expect(findOne).not.toHaveBeenCalled();
+    expect(layoutModel.registerRoutePage).not.toHaveBeenCalled();
+  });
+
   it('should check model existence without occupying the route model uid', async () => {
     const engine = new FlowEngine();
     const findOne = vi.fn().mockResolvedValue({
@@ -817,7 +1256,7 @@ describe('FlowRoute', () => {
     }
   });
 
-  it('should not redirect when route does not exist', async () => {
+  it('should render not found without redirecting when admin route does not exist', async () => {
     const originalLocation = window.location;
     const replace = vi.fn();
     Object.defineProperty(window, 'location', {
@@ -866,9 +1305,8 @@ describe('FlowRoute', () => {
         </FlowEngineProvider>,
       );
 
-      await waitFor(() => {
-        expect(adminLayoutModel.registerRoutePage).toHaveBeenCalled();
-      });
+      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(adminLayoutModel.registerRoutePage).not.toHaveBeenCalled();
       expect(replace).not.toHaveBeenCalled();
     } finally {
       Object.defineProperty(window, 'location', {

package/src/flow/__tests__/getKey.test.ts

@@ -58,4 +58,11 @@ describe('getKey', () => {
 
     expect(getKey(a)).not.toBe(getKey(b));
   });
+
+  it('distinguishes RunJS openView route state overrides', () => {
+    const a = createViewItem({ viewUid: 'v', openViewRouteState: { mode: 'drawer' } }, 0);
+    const b = createViewItem({ viewUid: 'v', openViewRouteState: { mode: 'dialog' } }, 0);
+
+    expect(getKey(a)).not.toBe(getKey(b));
+  });
 });