feat(content-sidebar): remove react-router-dom in favor of custom router

Co-Authored-By: tjiang@box.com <tjiang@box.com>

Author: devin-ai-integration[bot]

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

@@ -1,21 +1,66 @@
 import * as React from 'react';
-import { MemoryRouter, Router } from 'react-router';
-import { History } from 'history';
+import { createBrowserHistory, createMemoryHistory, History, Location } from 'history';
 
-type Props = {
+export interface NavRouterContextValue {
+    history: History;
+    location: Location;
+    match: {
+        params: Record<string, string>;
+        isExact: boolean;
+        path: string;
+        url: string;
+    };
+}
+
+export interface Props {
     children: React.ReactNode;
     history?: History;
-    initialEntries?: History.LocationDescriptor[];
-};
+    initialEntries?: string[];
+}
 
-const NavRouter = ({ children, history, ...rest }: Props) => {
-    if (history) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return <Router history={history}>{children}</Router>;
+export const NavRouterContext = React.createContext<NavRouterContextValue | null>(null);
+
+export const useNavRouter = () => {
+    const context = React.useContext(NavRouterContext);
+    if (!context) {
+        throw new Error('useNavRouter must be used within a NavRouter');
     }
+    return context;
+};
+
+const NavRouter = ({ children, history: providedHistory, initialEntries }: Props) => {
+    const [history] = React.useState<History>(
+        () => providedHistory || (initialEntries ? createMemoryHistory({ initialEntries }) : createBrowserHistory()),
+    );
+    const [location, setLocation] = React.useState<Location>(history.location);
+
+    React.useEffect(() => {
+        const unlisten = history.listen(update => {
+            setLocation(update);
+        });
+        return unlisten;
+    }, [history]);
+
+    const match = React.useMemo(() => {
+        const path = location.pathname;
+        return {
+            path,
+            url: path,
+            isExact: path === location.pathname,
+            params: {},
+        };
+    }, [location]);
+
+    const value = React.useMemo(
+        () => ({
+            history,
+            location,
+            match,
+        }),
+        [history, location, match],
+    );
 
-    return <MemoryRouter {...rest}>{children}</MemoryRouter>;
+    return <NavRouterContext.Provider value={value}>{children}</NavRouterContext.Provider>;
 };
 
 export default NavRouter;

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

@@ -1,41 +1,40 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
 import { createMemoryHistory } from 'history';
+import { render, screen } from '@testing-library/react';
 import NavRouter from '../NavRouter';
 import withNavRouter from '../withNavRouter';
-import { WithNavRouterProps } from '../types';
 
 type Props = {
     value?: string;
 };
 
-describe('src/eleemnts/common/nav-router/withNavRouter', () => {
-    const TestComponent = ({ value }: Props) => <div>{`Test ${value}`}</div>;
+describe('src/elements/common/nav-router/withNavRouter', () => {
+    const TestComponent = ({ value, location }: Props & { location?: { pathname: string } }) => (
+        <div>{`Test ${value} ${location?.pathname || ''}`}</div>
+    );
     const WrappedComponent = withNavRouter(TestComponent);
 
-    const getWrapper = (props?: Props & WithNavRouterProps) => shallow(<WrappedComponent {...props} />);
-
-    test('should wrap component with NavRouter', () => {
-        const wrapper = getWrapper();
-
-        expect(wrapper.find(NavRouter)).toBeTruthy();
-        expect(wrapper.find(TestComponent)).toBeTruthy();
-    });
-
-    test('should provide the appropriate props to NavRouter and the wrapped component', () => {
+    const renderComponent = (props?: Props) => {
         const history = createMemoryHistory();
-        const initialEntries = ['foo'];
-        const value = 'foo';
-        const wrapper = getWrapper({
-            history,
-            initialEntries,
-            value,
-        });
-
-        const navRouter = wrapper.find(NavRouter);
-        expect(navRouter.prop('history')).toEqual(history);
-        expect(navRouter.prop('initialEntries')).toEqual(initialEntries);
+        return render(
+            <NavRouter history={history}>
+                <WrappedComponent {...props} />
+            </NavRouter>,
+        );
+    };
+
+    test('should render wrapped component with router context', () => {
+        renderComponent({ value: 'test' });
+        expect(screen.getByText(/Test test/)).toBeInTheDocument();
+    });
 
-        expect(wrapper.find(TestComponent).prop('value')).toEqual(value);
+    test('should provide router props to wrapped component', () => {
+        const history = createMemoryHistory({ initialEntries: ['/test-path'] });
+        render(
+            <NavRouter history={history}>
+                <WrappedComponent value="test" />
+            </NavRouter>,
+        );
+        expect(screen.getByText(/Test test \/test-path/)).toBeInTheDocument();
     });
 });

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

@@ -1,3 +1,3 @@
-export { default } from './NavRouter';
+export { default as NavRouter, useNavRouter, NavRouterContext, type NavRouterContextValue } from './NavRouter';
 export { default as withNavRouter } from './withNavRouter';
 export * from './types';

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

@@ -1,6 +1,12 @@
-import { History } from 'history';
+import { History, Location } from 'history';
 
-export type WithNavRouterProps = {
-    history?: History;
-    initialEntries?: History.LocationDescriptor[];
-};
+export interface WithNavRouterProps {
+    history: History;
+    location: Location;
+    match: {
+        params: Record<string, string>;
+        isExact: boolean;
+        path: string;
+        url: string;
+    };
+}

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

@@ -0,0 +1,57 @@
+import { History } from 'history';
+import { WithNavRouterProps } from './types';
+
+export interface MatchResult {
+    isExact: boolean;
+    params: Record<string, string>;
+}
+
+export function matchPath(pathname: string, path: string | string[]): MatchResult {
+    const paths = Array.isArray(path) ? path : [path];
+    const params: Record<string, string> = {};
+
+    for (const currentPath of paths) {
+        const pathSegments = currentPath.split('/').filter(Boolean);
+        const pathnameSegments = pathname.split('/').filter(Boolean);
+
+        if (pathSegments.length <= pathnameSegments.length) {
+            let isMatch = true;
+            const segmentLength = pathSegments.length;
+
+            for (let i = 0; i < segmentLength; i += 1) {
+                const pathSegment = pathSegments[i];
+                const pathnameSegment = pathnameSegments[i];
+
+                if (pathSegment.startsWith(':')) {
+                    // This is a parameter
+                    const paramName = pathSegment.slice(1);
+                    params[paramName] = pathnameSegment;
+                } else if (pathSegment === '*') {
+                    // Wildcard matches anything
+                    params[i.toString()] = pathnameSegments.slice(i).join('/');
+                    break;
+                } else if (pathSegment !== pathnameSegment) {
+                    isMatch = false;
+                    break;
+                }
+            }
+
+            if (isMatch) {
+                return {
+                    isExact: pathSegments.length === pathnameSegments.length,
+                    params,
+                };
+            }
+        }
+    }
+
+    return { isExact: false, params: {} };
+}
+
+export function useMatch(
+    props: Partial<WithNavRouterProps> & { history: History },
+    path: string | string[],
+): MatchResult {
+    const location = props.location || props.history.location;
+    return matchPath(location.pathname, path);
+}

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

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import NavRouter from './NavRouter';
-import { WithNavRouterProps } from './types';
+import { useNavRouter } from './NavRouter';
+import type { WithNavRouterProps } from './types';
 
-const withNavRouter = <P extends object>(Component: React.ComponentType<P>): React.FC<P & WithNavRouterProps> => {
-    function WithNavRouter({ history, initialEntries, ...rest }: P & WithNavRouterProps) {
-        return (
-            <NavRouter history={history} initialEntries={initialEntries}>
-                <Component {...(rest as P)} />
-            </NavRouter>
-        );
-    }
+const withNavRouter = <P extends object>(
+    WrappedComponent: React.ComponentType<P>,
+): React.FC<Omit<P, keyof WithNavRouterProps>> => {
+    const WithNavRouterComponent: React.FC<Omit<P, keyof WithNavRouterProps>> = props => {
+        const routerProps = useNavRouter();
+        return <WrappedComponent {...(props as P)} {...routerProps} />;
+    };
 
-    WithNavRouter.displayName = `withNavRouter(${Component.displayName || Component.name || 'Component'}`;
+    WithNavRouterComponent.displayName = `WithNavRouter(${
+        WrappedComponent.displayName || WrappedComponent.name || 'Component'
+    })`;
 
-    return WithNavRouter;
+    return WithNavRouterComponent;
 };
 
 export default withNavRouter;

src/elements/content-explorer/__tests__/PreviewDialog.test.tsx

@@ -6,7 +6,14 @@ import APICache from '../../../utils/Cache';
 import PreviewDialog, { PreviewDialogProps } from '../PreviewDialog';
 
 jest.mock('react-modal', () => {
-    return jest.fn(({ children }) => <div aria-label="Preview">{children}</div>);
+    return jest.fn(({ children, onRequestClose }) => (
+        <div aria-label="Preview">
+            <button aria-label="Close" onClick={onRequestClose}>
+                Close
+            </button>
+            {children}
+        </div>
+    ));
 });
 
 describe('elements/content-explorer/PreviewDialog', () => {
@@ -41,10 +48,13 @@ describe('elements/content-explorer/PreviewDialog', () => {
     });
 
     test('calls onCancel when modal is closed', async () => {
-        renderComponent();
+        const onCancel = jest.fn();
+        renderComponent({ onCancel });
         const closeButton = screen.getByRole('button', { name: 'Close' });
+        // Ensure we have the right close button by checking its parent
+        expect(closeButton.closest('.bcpr-PreviewHeader-button-close')).toBeTruthy();
         await userEvent.click(closeButton);
-        expect(defaultProps.onCancel).toHaveBeenCalled();
+        expect(onCancel).toHaveBeenCalled();
     });
 
     test('does not render when item is null', () => {

src/elements/content-preview/ContentPreview.js

@@ -17,11 +17,10 @@ import setProp from 'lodash/set';
 import throttle from 'lodash/throttle';
 import uniqueid from 'lodash/uniqueId';
 import Measure from 'react-measure';
-import { withRouter } from 'react-router-dom';
-import type { ContextRouter } from 'react-router-dom';
+import { withNavRouter } from '../common/nav-router';
+import type { WithNavRouterProps } from '../common/nav-router/types';
 import { decode } from '../../utils/keys';
 import makeResponsive from '../common/makeResponsive';
-import { withNavRouter } from '../common/nav-router';
 import Internationalize from '../common/Internationalize';
 import AsyncLoad from '../common/async-load';
 import TokenService from '../../utils/TokenService';
@@ -129,7 +128,7 @@ type Props = {
     WithLoggerProps &
     WithAnnotationsProps &
     WithAnnotatorContextProps &
-    ContextRouter;
+    WithNavRouterProps;
 
 type State = {
     canPrint?: boolean,
@@ -1407,7 +1406,7 @@ export default flow([
     makeResponsive,
     withAnnotatorContext,
     withAnnotations,
-    withRouter,
+
     withNavRouter,
     withFeatureConsumer,
     withFeatureProvider,