feat(router): optional router in NavRouter and withNavRouter

src/elements/common/nav-router/NavRouter.js.flow

@@ -6,13 +6,22 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router-dom';
 import type { RouterHistory } from 'react-router-dom';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 
 type Props = {
     children: React.Node,
+    features?: FeatureConfig,
     history?: RouterHistory,
+    initialEntries?: Array<any>,
 };
 
-const NavRouter = ({ children, history, ...rest }: Props) => {
+const NavRouter = ({ children, features, history, ...rest }: Props) => {
+    const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+
+    if (isRouterDisabled) {
+        return <>{children}</>;
+    }
+
     if (history) {
         return <Router history={history}>{children}</Router>;
     }

src/elements/common/nav-router/NavRouter.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import { MemoryRouter, Router } from 'react-router';
 import { History } from 'history';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 
 type Props = {
     children: React.ReactNode;
+    features?: FeatureConfig;
     history?: History;
     initialEntries?: History.LocationDescriptor[];
 };
 
-const NavRouter = ({ children, history, ...rest }: Props) => {
+const NavRouter = ({ children, features, history, ...rest }: Props) => {
+    const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+
+    if (isRouterDisabled) {
+        return <>{children}</>;
+    }
+
     if (history) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         return <Router history={history}>{children}</Router>;
     }
 

src/elements/common/nav-router/__tests__/withNavRouter.test.tsx

@@ -1,41 +1,55 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
-import { createMemoryHistory } from 'history';
-import NavRouter from '../NavRouter';
+import { render } from '../../../../test-utils/testing-library';
 import withNavRouter from '../withNavRouter';
 import { WithNavRouterProps } from '../types';
 
+jest.mock('../NavRouter', () => ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="nav-router-wrapper">{children}</div>
+));
+
 type Props = {
     value?: string;
 };
 
 describe('src/eleemnts/common/nav-router/withNavRouter', () => {
-    const TestComponent = ({ value }: Props) => <div>{`Test ${value}`}</div>;
+    const TestComponent = ({ value }: Props) => <div data-testid="test-component">{`Test ${value}`}</div>;
     const WrappedComponent = withNavRouter(TestComponent);
 
-    const getWrapper = (props?: Props & WithNavRouterProps) => shallow(<WrappedComponent {...props} />);
+    const renderComponent = (props?: Props & WithNavRouterProps) => 
+        render(<WrappedComponent {...props} />);
 
     test('should wrap component with NavRouter', () => {
-        const wrapper = getWrapper();
+        const { getByTestId } = renderComponent();
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+        expect(getByTestId('nav-router-wrapper')).toBeInTheDocument();
+    });
 
-        expect(wrapper.find(NavRouter)).toBeTruthy();
-        expect(wrapper.find(TestComponent)).toBeTruthy();
+    test('should pass props to wrapped component', () => {
+        const { getByTestId } = renderComponent({ value: 'test-value' });
+
+        expect(getByTestId('test-component')).toBeInTheDocument();
+        expect(getByTestId('test-component')).toHaveTextContent('Test test-value');
     });
 
-    test('should provide the appropriate props to NavRouter and the wrapped component', () => {
-        const history = createMemoryHistory();
-        const initialEntries = ['foo'];
-        const value = 'foo';
-        const wrapper = getWrapper({
-            history,
-            initialEntries,
-            value,
+    describe('when routerDisabled feature flag is provided', () => {
+        test('should return unwrapped component when feature flag is true', () => {
+            const features = { routerDisabled: { value: true } };
+            const { getByTestId, queryByTestId } = renderComponent({ features });
+
+            expect(getByTestId('test-component')).toBeInTheDocument();
+            expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+            expect(queryByTestId('nav-router-wrapper')).not.toBeInTheDocument();
         });
 
-        const navRouter = wrapper.find(NavRouter);
-        expect(navRouter.prop('history')).toEqual(history);
-        expect(navRouter.prop('initialEntries')).toEqual(initialEntries);
+        test('should wrap component with NavRouter when feature flag is false', () => {
+            const features = { routerDisabled: { value: false } };
+            const { getByTestId } = renderComponent({ features });
 
-        expect(wrapper.find(TestComponent).prop('value')).toEqual(value);
+            expect(getByTestId('test-component')).toBeInTheDocument();
+            expect(getByTestId('test-component')).toHaveTextContent('Test undefined');
+            expect(getByTestId('nav-router-wrapper')).toBeInTheDocument();
+        });
     });
 });

src/elements/common/nav-router/types.ts

@@ -1,6 +1,8 @@
 import { History } from 'history';
+import { FeatureConfig } from '../feature-checking';
 
 export type WithNavRouterProps = {
+    features?: FeatureConfig;
     history?: History;
     initialEntries?: History.LocationDescriptor[];
 };

src/elements/common/nav-router/withNavRouter.js.flow

@@ -6,9 +6,14 @@
 
 import React from "react";
 import { History } from "history";
+import { type FeatureConfig } from '../feature-checking';
 import NavRouter from "./NavRouter";
+
 export type WithNavRouterProps = {
+  features?: FeatureConfig,
   history?: History,
+  initialEntries?: Array<any>,
   ...
 };
+
 declare export var withNavRouter: any; // /* NO PRINT IMPLEMENTED: ArrowFunction */ any

src/elements/common/nav-router/withNavRouter.tsx

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import NavRouter from './NavRouter';
 import { WithNavRouterProps } from './types';
+import { isFeatureEnabled } from '../feature-checking';
 
 const withNavRouter = <P extends object>(Component: React.ComponentType<P>): React.FC<P & WithNavRouterProps> => {
     function WithNavRouter({ history, initialEntries, ...rest }: P & WithNavRouterProps) {
+        const { features } = rest;
+        const isRouterDisabled = isFeatureEnabled(features, 'routerDisabled.value');
+
+        if (isRouterDisabled) {
+            return <Component {...(rest as P)} />;
+        }
+
         return (
-            <NavRouter history={history} initialEntries={initialEntries}>
+            <NavRouter history={history} initialEntries={initialEntries} features={features}>
                 <Component {...(rest as P)} />
             </NavRouter>
         );

src/elements/content-sidebar/ContentSidebar.js

@@ -349,6 +349,7 @@ class ContentSidebar extends React.Component<Props, State> {
             defaultView,
             detailsSidebarProps,
             docGenSidebarProps,
+            features,
             fileId,
             getPreview,
             getViewer,
@@ -382,7 +383,7 @@ class ContentSidebar extends React.Component<Props, State> {
         return (
             <Internationalize language={language} messages={messages}>
                 <APIContext.Provider value={(this.api: any)}>
-                    <NavRouter history={history} initialEntries={[initialPath]}>
+                    <NavRouter history={history} initialEntries={[initialPath]} features={features}>
                         <TooltipProvider>
                             <Sidebar
                                 activitySidebarProps={activitySidebarProps}