box-ui-elements 23.4.0 → 23.5.0-beta.2

package/es/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.d.ts

@@ -4,5 +4,6 @@ type Story = StoryObj<typeof ContentExplorer>;
 export declare const metadataView: Story;
 export declare const metadataViewV2: Story;
 export declare const metadataViewV2WithCustomActions: Story;
+export declare const metadataViewV2WithInitialFilterValues: Story;
 declare const meta: Meta<typeof ContentExplorer>;
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0",
+    "version": "23.5.0-beta.2",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -132,15 +132,15 @@
         "@box/blueprint-web-assets": "4.61.5",
         "@box/box-ai-agent-selector": "^0.52.0",
         "@box/box-ai-content-answers": "^0.124.1",
-        "@box/box-item-type-selector": "^0.61.12",
+        "@box/box-item-type-selector": "^0.63.12",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/frontend": "^11.0.1",
-        "@box/item-icon": "^0.17.0",
+        "@box/item-icon": "^0.17.15",
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^0.122.12",
-        "@box/metadata-filter": "^1.16.12",
-        "@box/metadata-view": "^0.29.4",
+        "@box/metadata-filter": "^1.19.2",
+        "@box/metadata-view": "^0.41.2",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
@@ -301,13 +301,13 @@
         "@box/blueprint-web-assets": "4.61.5",
         "@box/box-ai-agent-selector": "^0.52.0",
         "@box/box-ai-content-answers": "^0.124.1",
-        "@box/box-item-type-selector": "^0.61.12",
+        "@box/box-item-type-selector": "^0.63.12",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
-        "@box/item-icon": "^0.17.0",
+        "@box/item-icon": "^0.17.15",
         "@box/metadata-editor": "^0.122.12",
-        "@box/metadata-filter": "^1.16.12",
-        "@box/metadata-view": "^0.29.4",
+        "@box/metadata-filter": "^1.19.2",
+        "@box/metadata-view": "^0.41.2",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
         "@hapi/address": "^2.1.4",

package/src/elements/common/routing/__tests__/withRouterIfEnabled.test.js

@@ -0,0 +1,55 @@
+// @flow
+import * as React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '../../../../test-utils/testing-library';
+import withRouterIfEnabled from '../withRouterIfEnabled';
+
+const TestComponent = (props: any) => {
+    const { history, location, match, routerDisabled } = props;
+    return (
+        <div
+            data-testid="test-component"
+            data-router-disabled={routerDisabled ? 'true' : undefined}
+            data-has-history={history ? 'true' : undefined}
+            data-has-location={location ? 'true' : undefined}
+            data-has-match={match ? 'true' : undefined}
+        />
+    );
+};
+TestComponent.displayName = 'TestComponent';
+
+const WithRouterIfEnabled = withRouterIfEnabled(TestComponent);
+
+test('injects router props when wrapped in a Router', () => {
+    const { getByTestId } = render(
+        <MemoryRouter initialEntries={[{ pathname: '/foo' }]}> 
+            <WithRouterIfEnabled />
+        </MemoryRouter>,
+    );
+
+    const component = getByTestId('test-component');
+    expect(component).toHaveAttribute('data-has-history', 'true');
+    expect(component).toHaveAttribute('data-has-location', 'true');
+    expect(component).toHaveAttribute('data-has-match', 'true');
+    expect(component).not.toHaveAttribute('data-router-disabled');
+});
+
+test('renders without Router and without router props (routerDisabled prop)', () => {
+    const { getByTestId } = render(<WithRouterIfEnabled routerDisabled />);
+    const component = getByTestId('test-component');
+    expect(component).not.toHaveAttribute('data-has-history');
+    expect(component).not.toHaveAttribute('data-has-location');
+    expect(component).not.toHaveAttribute('data-has-match');
+    expect(component).toHaveAttribute('data-router-disabled', 'true');
+});
+
+test('renders without Router and without router props (feature flag)', () => {
+    const features = { routerDisabled: { value: true } };
+    const { getByTestId } = render(<WithRouterIfEnabled features={features} />);
+
+    const component = getByTestId('test-component');
+    expect(component).not.toHaveAttribute('data-has-history');
+    expect(component).not.toHaveAttribute('data-has-location');
+    expect(component).not.toHaveAttribute('data-has-match');
+});
+

package/src/elements/common/routing/index.js

@@ -1,2 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
+// @flow
 export { default as withRouterAndRef } from './withRouterAndRef';
+export { default as withRouterIfEnabled } from './withRouterIfEnabled';

package/src/elements/common/routing/withRouterIfEnabled.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { isFeatureEnabled } from '../feature-checking';
+
+export default function withRouterIfEnabled(Wrapped: React.ComponentType<any>) {
+
+    const WrappedWithRouter = withRouter(Wrapped);
+
+    const WithRouterIfEnabled = (props: any) => {
+        const routerDisabled =
+            props?.routerDisabled === true || isFeatureEnabled(props?.features, 'routerDisabled.value');
+            
+        const Component = routerDisabled ? Wrapped : WrappedWithRouter;
+
+        return <Component {...props} />;
+    };
+
+    const name = Wrapped.displayName || Wrapped.name || 'Component';
+    WithRouterIfEnabled.displayName = `withRouterIfEnabled(${name})`;
+
+    return WithRouterIfEnabled;
+}
+

package/src/elements/content-explorer/ContentExplorer.tsx

@@ -338,7 +338,7 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
      * @return {void}
      */
     componentDidMount() {
-        const { currentFolderId, defaultView, metadataQuery }: ContentExplorerProps = this.props;
+        const { currentFolderId, defaultView }: ContentExplorerProps = this.props;
         this.rootElement = document.getElementById(this.id) as HTMLElement;
         this.appElement = this.rootElement.firstElementChild as HTMLElement;
 
@@ -348,7 +348,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
                 break;
             case DEFAULT_VIEW_METADATA:
                 this.showMetadataQueryResults();
-                this.fetchFolderName(metadataQuery?.ancestor_folder_id);
                 break;
             default:
                 this.fetchFolder(currentFolderId);
@@ -390,12 +389,14 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         metadataTemplate: MetadataTemplate,
     ): void => {
         const { nextMarker } = metadataQueryCollection;
+        const { metadataQuery, features } = this.props;
         const { currentCollection, currentPageNumber, markers }: State = this.state;
         const cloneMarkers = [...markers];
         if (nextMarker) {
             cloneMarkers[currentPageNumber + 1] = nextMarker;
         }
-        this.setState({
+
+        const nextState = {
             currentCollection: {
                 ...currentCollection,
                 ...metadataQueryCollection,
@@ -403,7 +404,25 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
             },
             markers: cloneMarkers,
             metadataTemplate,
-        });
+        };
+
+        // if v2, fetch folder name and add to state
+        if (metadataQuery?.ancestor_folder_id && isFeatureEnabled(features, 'contentExplorer.metadataViewV2')) {
+            this.api.getFolderAPI().getFolderFields(
+                metadataQuery.ancestor_folder_id,
+                ({ name }) => {
+                    this.setState({
+                        ...nextState,
+                        rootName: name || '',
+                    });
+                },
+                this.errorCallback,
+                { fields: [FIELD_NAME] },
+            );
+        } else {
+            // No folder name to fetch, update state immediately with just metadata
+            this.setState(nextState);
+        }
     };
 
     /**
@@ -1628,27 +1647,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         this.setState({ selectedItemIds: new Set() });
     };
 
-    /**
-     * Fetches the folder name and stores it in state rootName if successful
-     *
-     * @private
-     * @return {void}
-     */
-    fetchFolderName = (folderId?: string) => {
-        if (!folderId) {
-            return;
-        }
-
-        this.api.getFolderAPI(false).getFolderFields(
-            folderId,
-            ({ name }) => {
-                this.setState({ rootName: name });
-            },
-            this.errorCallback,
-            { fields: [FIELD_NAME] },
-        );
-    };
-
     /**
      * Renders the file picker
      *

package/src/elements/content-explorer/MetadataViewContainer.tsx

@@ -1,9 +1,58 @@
 import * as React from 'react';
+import type { EnumType, FloatType, MetadataFormFieldValue, RangeType } from '@box/metadata-filter';
 import { MetadataView, type MetadataViewProps } from '@box/metadata-view';
-import type { MetadataTemplate } from '../../common/types/metadata';
+
 import type { Collection } from '../../common/types/core';
+import type { MetadataTemplate } from '../../common/types/metadata';
+
+// Public-friendly version of MetadataFormFieldValue from @box/metadata-filter
+// (string[] for enum type, range/float objects stay the same)
+type EnumToStringArray<T> = T extends EnumType ? string[] : T;
+type ExternalMetadataFormFieldValue = EnumToStringArray<MetadataFormFieldValue>;
+
+type ExternalFilterValues = Record<
+    string,
+    {
+        value: ExternalMetadataFormFieldValue;
+    }
+>;
 
-export interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items'> {
+type ActionBarProps = Omit<
+    MetadataViewProps['actionBarProps'],
+    'initialFilterValues' | 'onFilterSubmit' | 'filterGroups'
+> & {
+    initialFilterValues?: ExternalFilterValues;
+    onFilterSubmit?: (filterValues: ExternalFilterValues) => void;
+};
+
+function transformInitialFilterValuesToInternal(
+    publicValues?: ExternalFilterValues,
+): Record<string, { value: MetadataFormFieldValue }> | undefined {
+    if (!publicValues) return undefined;
+
+    return Object.entries(publicValues).reduce<Record<string, { value: MetadataFormFieldValue }>>(
+        (acc, [key, { value }]) => {
+            acc[key] = Array.isArray(value) ? { value: { enum: value } } : { value };
+            return acc;
+        },
+        {},
+    );
+}
+
+function transformInternalFieldsToPublic(
+    fields: Record<string, { value: MetadataFormFieldValue }>,
+): ExternalFilterValues {
+    return Object.entries(fields).reduce<ExternalFilterValues>((acc, [key, { value }]) => {
+        acc[key] =
+            'enum' in value && Array.isArray(value.enum)
+                ? { value: value.enum }
+                : { value: value as RangeType | FloatType };
+        return acc;
+    }, {});
+}
+
+export interface MetadataViewContainerProps extends Omit<MetadataViewProps, 'items' | 'actionBarProps'> {
+    actionBarProps?: ActionBarProps;
     currentCollection: Collection;
     metadataTemplate: MetadataTemplate;
 }
@@ -16,6 +65,7 @@ const MetadataViewContainer = ({
     ...rest
 }: MetadataViewContainerProps) => {
     const { items = [] } = currentCollection;
+    const { initialFilterValues: initialFilterValuesProp, onFilterSubmit: onFilterSubmitProp } = actionBarProps ?? {};
 
     const filterGroups = React.useMemo(
         () => [
@@ -36,17 +86,32 @@ const MetadataViewContainer = ({
         [metadataTemplate],
     );
 
-    return (
-        <MetadataView
-            actionBarProps={{
-                ...actionBarProps,
-                filterGroups,
-            }}
-            columns={columns}
-            items={items}
-            {...rest}
-        />
+    // Transform initial filter values to internal field format
+    const initialFilterValues = React.useMemo(
+        () => transformInitialFilterValuesToInternal(initialFilterValuesProp),
+        [initialFilterValuesProp],
     );
+
+    // Transform field values to public-friendly format
+    const onFilterSubmit = React.useCallback(
+        (fields: Record<string, { value: MetadataFormFieldValue }>) => {
+            if (!onFilterSubmitProp) return;
+            const transformed = transformInternalFieldsToPublic(fields);
+            onFilterSubmitProp(transformed);
+        },
+        [onFilterSubmitProp],
+    );
+
+    const transformedActionBarProps = React.useMemo(() => {
+        return {
+            ...actionBarProps,
+            initialFilterValues,
+            onFilterSubmit,
+            filterGroups,
+        };
+    }, [actionBarProps, initialFilterValues, onFilterSubmit, filterGroups]);
+
+    return <MetadataView actionBarProps={transformedActionBarProps} columns={columns} items={items} {...rest} />;
 };
 
 export default MetadataViewContainer;

package/src/elements/content-explorer/__tests__/MetadataViewContainer.test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { render, screen } from '../../../test-utils/testing-library';
-import MetadataViewContainer, { MetadataViewContainerProps } from '../MetadataViewContainer';
+
 import type { Collection } from '../../../common/types/core';
 import type { MetadataTemplate, MetadataTemplateField } from '../../../common/types/metadata';
+import { render, screen, userEvent, waitFor, within } from '../../../test-utils/testing-library';
+import MetadataViewContainer, { type MetadataViewContainerProps } from '../MetadataViewContainer';
 
 describe('elements/content-explorer/MetadataViewContainer', () => {
     const mockItems = [
@@ -18,7 +19,7 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
             type: 'string',
         },
         {
-            id: 'field1',
+            id: 'field2',
             key: 'industry',
             displayName: 'Industry',
             type: 'enum',
@@ -80,4 +81,38 @@ describe('elements/content-explorer/MetadataViewContainer', () => {
         expect(screen.getByText('File 1.txt')).toBeInTheDocument();
         expect(screen.getByText('File 2.pdf')).toBeInTheDocument();
     });
+
+    test('should pass values as string[] on submit', async () => {
+        const onFilterSubmit = jest.fn();
+        const template: MetadataTemplate = {
+            ...mockMetadataTemplate,
+            fields: [
+                {
+                    id: 'ms1',
+                    key: 'role',
+                    displayName: 'Contact Role',
+                    type: 'multiSelect',
+                    options: [
+                        { id: 'r1', key: 'Developer' },
+                        { id: 'r2', key: 'Marketing' },
+                        { id: 'r3', key: 'Sales' },
+                    ],
+                },
+            ],
+        };
+
+        renderComponent({ metadataTemplate: template, actionBarProps: { onFilterSubmit } });
+
+        await userEvent().click(screen.getByRole('button', { name: /Contact Role/ }));
+        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Developer' }));
+        // Re-open the chip to select a second value (menu closes after submit)
+        await userEvent().click(screen.getByRole('button', { name: /Contact Role/ }));
+        await userEvent().click(within(screen.getByRole('menu')).getByRole('menuitemcheckbox', { name: 'Marketing' }));
+
+        await waitFor(() => expect(onFilterSubmit).toHaveBeenCalledTimes(2));
+        const firstCall = onFilterSubmit.mock.calls[0][0];
+        const secondCall = onFilterSubmit.mock.calls[1][0];
+        expect(firstCall['role-filter'].value).toEqual(['Developer']);
+        expect(secondCall['role-filter'].value).toEqual(['Developer', 'Marketing']);
+    });
 });

package/src/elements/content-explorer/stories/MetadataView.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ContentExplorer from '../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../constants';
 import { mockMetadata, mockSchema } from '../../common/__mocks__/mockMetadata';
+import { mockRootFolder } from '../../common/__mocks__/mockRootFolder';
 
 const EID = '0';
 const templateName = 'templateName';
@@ -120,6 +121,9 @@ const meta: Meta<typeof ContentExplorer> = {
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
                     return HttpResponse.json(mockSchema);
                 }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
+                    return HttpResponse.json(mockRootFolder);
+                }),
             ],
         },
     },

package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -1,12 +1,14 @@
-import { http, HttpResponse } from 'msw';
 import type { Meta, StoryObj } from '@storybook/react';
+import { http, HttpResponse } from 'msw';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { Download, SignMeOthers } from '@box/blueprint-web-assets/icons/Fill/index';
 import { Sign } from '@box/blueprint-web-assets/icons/Line';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
 import noop from 'lodash/noop';
+
 import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
+import { mockRootFolder } from '../../../common/__mocks__/mockRootFolder';
 
 // The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.
 const { scope: templateScope, templateKey } = mockSchema;
@@ -126,13 +128,42 @@ export const metadataViewV2WithCustomActions: Story = {
         await waitFor(() => {
             expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
         });
-
         const firstRow = canvas.getByRole('row', { name: /Child 2/i });
         const ellipsesButton = within(firstRow).getByRole('button', { name: 'Action menu' });
         userEvent.click(ellipsesButton);
     },
 };
 
+const initialFilterActionBarProps = {
+    initialFilterValues: {
+        'industry-filter': { value: ['Legal'] },
+        'mimetype-filter': { value: ['boxnoteType', 'documentType', 'threedType'] },
+        'role-filter': { value: ['Developer', 'Business Owner', 'Marketing'] },
+    },
+};
+
+export const metadataViewV2WithInitialFilterValues: Story = {
+    args: {
+        ...metadataViewV2ElementProps,
+        metadataViewProps: {
+            columns,
+            actionBarProps: initialFilterActionBarProps,
+        },
+    },
+    play: async ({ canvas }) => {
+        // Wait for chips to update with initial values
+        await waitFor(() => {
+            expect(canvas.getByRole('button', { name: /Industry/i })).toHaveTextContent(/\(1\)/);
+        });
+        // Other chips should reflect initialized values
+        const contactRoleChip = canvas.getByRole('button', { name: /Contact Role/i });
+        expect(contactRoleChip).toHaveTextContent(/\(3\)/);
+
+        const fileTypeChip = canvas.getByRole('button', { name: /Box Note/i });
+        expect(fileTypeChip).toHaveTextContent(/\+2/);
+    },
+};
+
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,
@@ -150,6 +181,9 @@ const meta: Meta<typeof ContentExplorer> = {
                 http.get(`${DEFAULT_HOSTNAME_API}/2.0/metadata_templates/enterprise/templateName/schema`, () => {
                     return HttpResponse.json(mockSchema);
                 }),
+                http.get(`${DEFAULT_HOSTNAME_API}/2.0/folders/:id`, () => {
+                    return HttpResponse.json(mockRootFolder);
+                }),
             ],
         },
     },

package/src/elements/content-sidebar/AddTaskButton.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import { withRouter, type RouterHistory } from 'react-router-dom';
+import { type RouterHistory } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 
 import AddTaskMenu from './AddTaskMenu';
 import TaskModal from './TaskModal';
@@ -11,7 +12,7 @@ import type { ElementsXhrError } from '../../common/types/api';
 import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {|
-    history: RouterHistory,
+    history?: RouterHistory,
     internalSidebarNavigation?: InternalSidebarNavigation,
     internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isDisabled: boolean,
@@ -54,7 +55,7 @@ class AddTaskButton extends React.Component<Props, State> {
                 },
                 true,
             );
-        } else {
+        } else if (history) {
             history.replace({ state: { open: true } });
         }
 
@@ -103,4 +104,4 @@ class AddTaskButton extends React.Component<Props, State> {
 }
 
 export { AddTaskButton as AddTaskButtonComponent };
-export default withRouter(AddTaskButton);
+export default withRouterIfEnabled(AddTaskButton);

package/src/elements/content-sidebar/SidebarToggle.js

@@ -5,7 +5,8 @@
  */
 
 import * as React from 'react';
-import { withRouter, type RouterHistory } from 'react-router-dom';
+import { type RouterHistory } from 'react-router-dom';
+import { withRouterIfEnabled } from '../common/routing';
 import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarToggleButton';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
@@ -53,4 +54,4 @@ const SidebarToggle = ({
 };
 
 export { SidebarToggle as SidebarToggleComponent };
-export default withRouter(SidebarToggle);
+export default withRouterIfEnabled(SidebarToggle);

package/src/elements/content-sidebar/__tests__/__snapshots__/ActivitySidebar.test.js.snap

@@ -4,7 +4,7 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
 <SidebarContent
   actions={
     <React.Fragment>
-      <withRouter(AddTaskButton)
+      <withRouterIfEnabled(AddTaskButton)
         isDisabled={false}
         onTaskModalClose={[Function]}
         taskFormProps={

package/src/elements/content-sidebar/versions/VersionsSidebarContainer.js

@@ -9,7 +9,7 @@ import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import merge from 'lodash/merge';
 import noop from 'lodash/noop';
-import { generatePath, withRouter } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 import type { Match, RouterHistory } from 'react-router-dom';
 import type { MessageDescriptor } from 'react-intl';
 import { withFeatureConsumer, isFeatureEnabled } from '../../common/feature-checking';
@@ -21,6 +21,7 @@ import StaticVersionsSidebar from './StaticVersionSidebar';
 import VersionsSidebar from './VersionsSidebar';
 import VersionsSidebarAPI from './VersionsSidebarAPI';
 import { withAPIContext } from '../../common/api-context';
+import { withRouterIfEnabled } from '../../common/routing';
 import type { FeatureConfig } from '../../common/feature-checking';
 import type { VersionActionCallback, VersionChangeCallback, SidebarLoadCallback } from './flowTypes';
 import type { BoxItemVersion, BoxItem, FileVersions } from '../../../common/types/core';
@@ -36,7 +37,7 @@ type Props = {
     features: FeatureConfig,
     fileId: string,
     hasSidebarInitialized?: boolean,
-    history: RouterHistory,
+    history?: RouterHistory,
     internalSidebarNavigation?: InternalSidebarNavigation,
     internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     match: Match,
@@ -283,7 +284,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
                 delete navigationUpdate.versionId;
             }
             internalSidebarNavigationHandler(navigationUpdate);
-        } else {
+        } else if (history) {
             history.push(generatePath(match.path, { ...match.params, versionId }));
         }
     };
@@ -349,4 +350,4 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
 
 export type VersionsSidebarProps = Props;
 export { VersionsSidebarContainer as VersionsSidebarContainerComponent };
-export default flow([withRouter, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);
+export default flow([withRouterIfEnabled, withAPIContext, withFeatureConsumer])(VersionsSidebarContainer);