[PoC] React Router migration (preview)

packages/application-components/package.json

@@ -69,7 +69,8 @@
     "history": "4.10.1",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "raf-schd": "^4.0.3"
+    "raf-schd": "^4.0.3",
+    "react-router-dom-v5-compat": "6.30.0"
   },
   "devDependencies": {
     "@apollo/client": "3.12.4",

packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx

@@ -1,4 +1,5 @@
-import { Switch, Route, Redirect, useHistory } from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
 import { warning } from '@commercetools-uikit/utils';
@@ -52,7 +53,7 @@ const renderTabularDetailPage = (additionalProps = {}) =>
   );
 
 const TabularDetailPageWithHistory = (additionalProps = {}) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <TabularDetailPage
       title="Test page"
@@ -64,7 +65,7 @@ const TabularDetailPageWithHistory = (additionalProps = {}) => {
           <TabHeader to="/tab-three" label="Disabled tab" isDisabled />
         </>
       }
-      onPreviousPathClick={() => history.push('/start')}
+      onPreviousPathClick={() => navigate('/start')}
       {...additionalProps}
     >
       <Content />

packages/application-components/src/test-utils/test-utils.tsx

@@ -7,6 +7,7 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory, type MemoryHistory } from 'history';
 import { IntlProvider } from 'react-intl';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import {
   createApolloClient,
   ApplicationContextProvider,
@@ -71,7 +72,9 @@ const customRender = (
           >
             <IntlProvider locale={locale}>
               <Suspense fallback={<LoadingFallback />}>
-                <Router history={history}>{node}</Router>
+                <Router history={history}>
+                  <CompatRouter>{node}</CompatRouter>
+                </Router>
               </Suspense>
             </IntlProvider>
           </ApplicationContextProvider>

packages/application-shell/package.json

@@ -97,6 +97,7 @@
     "prop-types": "15.8.1",
     "qss": "2.0.3",
     "react-required-if": "1.0.3",
+    "react-router-dom-v5-compat": "6.30.0",
     "react-select": "5.10.1",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.2",

packages/application-shell/src/components/application-shell-authenticated/application-shell-authenticated.tsx

@@ -72,6 +72,24 @@ const getHasUserBeenDeletedError = (
       gqlError.message.includes('was not found.')
   );
 
+const PreviewMarker = () => {
+  return (
+    <div
+      css={css`
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 6px 10px;
+        background-color: red;
+        font-style: bold;
+        color: #fff;
+      `}
+    >
+      <span>React Router preview</span>
+    </div>
+  );
+};
+
 export const MainContainer = styled.main`
   grid-column: 2/3;
   grid-row: 3/4;
@@ -346,6 +364,7 @@ export const ApplicationShellAuthenticated = (
                           </MainContainer>
                         ) : (
                           <MainContainer role="main">
+                            <PreviewMarker />
                             <div ref={notificationsPageRef}>
                               <NotificationsList domain={DOMAINS.PAGE} />
                             </div>

packages/application-shell/src/components/application-shell-provider/application-shell-provider.tsx

@@ -3,6 +3,7 @@ import { ApolloClient, type NormalizedCacheObject } from '@apollo/client';
 import { ApolloProvider } from '@apollo/client/react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import {
   createApolloClient,
   ApplicationContextProvider,
@@ -46,31 +47,33 @@ const ApplicationShellProvider = (props: TApplicationShellProviderProps) => {
           <ReduxProvider store={internalReduxStore}>
             <ApolloProvider client={apolloClient}>
               <Router history={getBrowserHistory()}>
-                <ApplicationPageTitle />
-                <Authenticated
-                  locale={browserLocale}
-                  applicationMessages={props.applicationMessages}
-                  render={({ isAuthenticated }) => {
-                    if (isAuthenticated)
-                      return props.children({ isAuthenticated });
+                <CompatRouter>
+                  <ApplicationPageTitle />
+                  <Authenticated
+                    locale={browserLocale}
+                    applicationMessages={props.applicationMessages}
+                    render={({ isAuthenticated }) => {
+                      if (isAuthenticated)
+                        return props.children({ isAuthenticated });
 
-                    return (
-                      <AsyncLocaleData
-                        locale={browserLocale}
-                        applicationMessages={props.applicationMessages}
-                      >
-                        {({ locale, messages }) => (
-                          <ConfigureIntlProvider
-                            locale={locale}
-                            messages={messages}
-                          >
-                            {props.children({ isAuthenticated })}
-                          </ConfigureIntlProvider>
-                        )}
-                      </AsyncLocaleData>
-                    );
-                  }}
-                />
+                      return (
+                        <AsyncLocaleData
+                          locale={browserLocale}
+                          applicationMessages={props.applicationMessages}
+                        >
+                          {({ locale, messages }) => (
+                            <ConfigureIntlProvider
+                              locale={locale}
+                              messages={messages}
+                            >
+                              {props.children({ isAuthenticated })}
+                            </ConfigureIntlProvider>
+                          )}
+                        </AsyncLocaleData>
+                      );
+                    }}
+                  />
+                </CompatRouter>
               </Router>
             </ApolloProvider>
           </ReduxProvider>

packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   PublicPageLayout,
   themesOverrides,
@@ -39,7 +39,7 @@ const Divider = styled.div`
 `;
 
 const AuthCallbackErrorPage = (props: TProps) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <AsyncLocaleData
       locale={props.locale}
@@ -77,7 +77,7 @@ const AuthCallbackErrorPage = (props: TProps) => {
                         label="Try log in again"
                         icon={<AngleLeftIcon />}
                         onClick={() => {
-                          history.push('/');
+                          navigate('/');
                         }}
                       />
                     </Spacings.Stack>

packages/application-shell/src/components/navbar/main-navbar.styles.ts

@@ -217,6 +217,10 @@ const getMenuItemLinkStyles = (isSubmenuLink: boolean) => [
       padding: ${uiKitDesignTokens.spacing25} ${uiKitDesignTokens.spacing25}
         ${uiKitDesignTokens.spacing25} ${uiKitDesignTokens.spacing30};
       transition: padding 150ms ease-out;
+      &.active {
+        color: ${uiKitDesignTokens.colorSurface};
+        font-weight: ${uiKitDesignTokens.fontWeight600};
+      }
     `,
   !isSubmenuLink &&
     css`

packages/application-shell/src/components/navbar/menu-items.styles.ts

@@ -177,12 +177,6 @@ const MenuList = styled.ul<
         }
       `,
   ]}
-
-  & .highlighted,
-  & .highlighted ${Title} {
-    color: ${uiKitDesignTokens.colorSurface} !important;
-    font-weight: ${uiKitDesignTokens.fontWeight600};
-  }
 `;
 
 const SublistItem = styled.li<{ isActive: boolean }>`

packages/application-shell/src/components/navbar/menu-items.tsx

@@ -14,7 +14,7 @@ import { useFlagVariation } from '@flopflip/react-broadcast';
 import type { TFlagVariation } from '@flopflip/types';
 import classnames from 'classnames';
 import { useIntl } from 'react-intl';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-dom-v5-compat';
 import type {
   TNormalizedMenuVisibilities,
   TNormalizedPermissions,
@@ -312,11 +312,10 @@ const MenuItemLink = ({ exactMatch = false, ...props }: MenuItemLinkProps) => {
   if (props.linkTo) {
     const linkLevel = props.isSubmenuLink ? 'text-link-sublist' : 'text-link';
     return (
-      <NavLinkWrapper exactMatch={exactMatch} {...props}>
+      <NavLinkWrapper {...props}>
         <NavLink
           to={props.linkTo}
-          exact={exactMatch}
-          activeClassName="highlighted"
+          end={exactMatch}
           data-link-level={linkLevel}
           css={getMenuItemLinkStyles(Boolean(props.isSubmenuLink))}
           tabIndex={props.isSubmenuLink && !props.isSubmenuFocused ? -1 : 0}
@@ -331,7 +330,7 @@ const MenuItemLink = ({ exactMatch = false, ...props }: MenuItemLinkProps) => {
             }
           }}
         >
-          <NavLinkClickableContentWrapper exactMatch={exactMatch} {...props}>
+          <NavLinkClickableContentWrapper {...props}>
             {props.children}
           </NavLinkClickableContentWrapper>
         </NavLink>

packages/application-shell/src/components/quick-access/quick-access.tsx

@@ -4,7 +4,7 @@ import { useFeatureToggles } from '@flopflip/react-broadcast';
 import { oneLineTrim } from 'common-tags';
 import debounce from 'debounce-async';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import {
   GRAPHQL_TARGETS,
@@ -104,7 +104,7 @@ const QuickAccess = (props: Props) => {
     saveHistoryEntries(entries);
     setHistoryEntries(entries);
   }, []);
-  const history = useHistory();
+  const navigate = useNavigate();
   const apolloClient = useApolloClient();
   const intl = useIntl();
   const [
@@ -502,10 +502,10 @@ const QuickAccess = (props: Props) => {
       } else if (applicationContext.environment.useFullRedirectsForLinks) {
         location.replace(command.action.to);
       } else {
-        history.push(command.action.to);
+        navigate(command.action.to);
       }
     },
-    [applicationContext.environment.useFullRedirectsForLinks, history]
+    [applicationContext.environment.useFullRedirectsForLinks, navigate]
   );
 
   return (

packages/application-shell/src/components/suspended-route/index.ts

@@ -1,3 +1,6 @@
-export { SuspendedRoute } from './suspended-route';
-export { SuspendedProtectedRoute } from './suspended-protected-route';
-export { ProtectedRoute } from './protected-route';
+export { SuspendedRoute, Suspended } from './suspended-route';
+export {
+  SuspendedProtectedRoute,
+  SuspendedProtected,
+} from './suspended-protected-route';
+export { ProtectedRoute, Protected } from './protected-route';

packages/application-shell/src/components/suspended-route/protected-route.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Route, RouteProps } from 'react-router-dom';
 import { PageUnauthorized } from '@commercetools-frontend/application-components';
 
@@ -20,3 +21,17 @@ const ProtectedRoute: React.FC<TProtectedRouteProps> = ({
 };
 
 export { ProtectedRoute, type TProtectedRouteProps };
+
+export type TProtectedProps = {
+  condition: boolean;
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+export function Protected(props: TProtectedProps) {
+  return props.condition ? (
+    <>{props.children}</>
+  ) : (
+    <>{props.fallback || <PageUnauthorized />}</>
+  );
+}

packages/application-shell/src/components/suspended-route/suspended-protected-route.tsx

@@ -1,7 +1,12 @@
 import { Suspense } from 'react';
 import { PageUnauthorized } from '@commercetools-frontend/application-components';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
-import { ProtectedRoute, type TProtectedRouteProps } from './protected-route';
+import {
+  ProtectedRoute,
+  type TProtectedRouteProps,
+  type TProtectedProps,
+  Protected,
+} from './protected-route';
 
 type TSuspendedProtectedRouteProps = TProtectedRouteProps & {
   loading?: React.ReactNode;
@@ -21,3 +26,16 @@ const SuspendedProtectedRoute: React.FC<TSuspendedProtectedRouteProps> = ({
 };
 
 export { SuspendedProtectedRoute, type TSuspendedProtectedRouteProps };
+
+type TSuspendedProtectedProps = TProtectedProps & {
+  loading?: React.ReactNode;
+  fallback?: React.ReactNode;
+};
+
+export function SuspendedProtected(props: TSuspendedProtectedProps) {
+  return (
+    <Suspense fallback={props.loading || <LoadingSpinner />}>
+      <Protected {...props} />
+    </Suspense>
+  );
+}

packages/application-shell/src/components/suspended-route/suspended-route.tsx

@@ -14,4 +14,17 @@ const SuspendedRoute = (props: TSuspendedRouteProps) => (
 
 SuspendedRoute.displayName = 'SuspendedRoute';
 
-export { SuspendedRoute };
+export { SuspendedRoute, type TSuspendedRouteProps };
+
+type TSuspendedProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+export function Suspended(props: TSuspendedProps) {
+  return (
+    <Suspense fallback={props.fallback || <LoadingSpinner />}>
+      {props.children}
+    </Suspense>
+  );
+}

packages/application-shell/src/index.ts

@@ -18,6 +18,9 @@ export {
   SuspendedRoute,
   ProtectedRoute,
   SuspendedProtectedRoute,
+  Suspended,
+  SuspendedProtected,
+  Protected,
 } from './components/suspended-route';
 export { default as getPreviousProjectKey } from './utils/get-previous-project-key';
 export { default as setupGlobalErrorListener } from './utils/setup-global-error-listener';