Update react router to data router (#182)

* Turn Layout into pathless Route

* Migrate to router provider

* Define data routes for data router

* Lift layout route

* Add top level error boundary

* Lift redirect root route

* Lift all the remaining routes

* Reorganize configPromise

* Turn layout into root route

* Rename Layout and PulpMenu

src/app-routes.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/react/macro';
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
 import WrenchIcon from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import { type ElementType } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router';
-import { ExternalLink, NotFound } from 'src/components';
+import { Navigate, redirect, useLocation } from 'react-router';
+import { ErrorBoundary, ExternalLink, NotFound } from 'src/components';
 import {
   AboutProject,
   AnsibleRemoteDetail,
@@ -365,26 +365,47 @@ const AuthHandler = ({
   );
 };
 
-export const AppRoutes = () => (
-  <Routes>
-    {routes.map(({ beta, component, noAuth, path }, index) => (
-      <Route
-        element={
-          <AuthHandler
-            beta={beta}
-            component={component}
-            noAuth={noAuth}
-            path={path}
-          />
-        }
-        key={index}
+const appRoutes = () =>
+  routes.map(({ beta, component, noAuth, path, ...rest }) => ({
+    element: (
+      <AuthHandler
+        beta={beta}
+        component={component}
+        noAuth={noAuth}
         path={path}
       />
-    ))}
-    <Route
-      path={'/'}
-      element={<Navigate to={formatPath(Paths.core.status)} />}
-    />
-    <Route path='*' element={<NotFound />} />
-  </Routes>
-);
+    ),
+    path: path,
+    ...rest,
+  }));
+
+const convert = (m) => {
+  const {
+    default: Component,
+    clientLoader: loader,
+    clientAction: action,
+    ...rest
+  } = m;
+  return { ...rest, loader, action, Component };
+};
+
+export const dataRoutes = [
+  {
+    id: 'root',
+    lazy: () => import('src/routes/root').then((m) => convert(m)),
+    children: [
+      {
+        errorElement: <ErrorBoundary />,
+        children: [
+          {
+            index: true,
+            loader: () => redirect(formatPath(Paths.core.status)),
+          },
+          ...appRoutes(),
+          // "No matching route" is not handled by the error boundary.
+          { path: '*', element: <NotFound /> },
+        ],
+      },
+    ],
+  },
+];

src/components/error-boundary.tsx

@@ -0,0 +1,27 @@
+import { isRouteErrorResponse, useRouteError } from 'react-router';
+
+export const ErrorBoundary = () => {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <>
+        <h1>
+          {error.status} {error.statusText}
+        </h1>
+        <p>{error.data.toString()}</p>
+      </>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+    console.error(error);
+    return <div>Something went horribly wrong!</div>;
+  }
+};

src/components/index.ts

@@ -42,6 +42,7 @@ export { EmptyStateNoData } from './empty-state-no-data';
 export { EmptyStateUnauthorized } from './empty-state-unauthorized';
 export { EmptyStateNotImplemented } from './empty-state-under-construction';
 export { EmptyStateXs } from './empty-state-xs';
+export { ErrorBoundary } from './error-boundary';
 export { ExecutionEnvironmentHeader } from './execution-environment-header';
 export { ExternalLink } from './external-link';
 export { FormFieldHelper } from './form-field-helper';

src/entrypoint.tsx

@@ -6,15 +6,12 @@ import '@patternfly/patternfly/patternfly.scss';
 import { Button } from '@patternfly/react-core';
 import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router';
-import { Alert, LoadingSpinner, UIVersion } from 'src/components';
-import { AppContextProvider } from './app-context';
-import { AppRoutes } from './app-routes';
+import { RouterProvider, createBrowserRouter } from 'react-router';
+import { Alert, LoadingSpinner } from 'src/components';
+import { dataRoutes } from './app-routes';
 import './darkmode';
 import './l10n';
-import { StandaloneLayout } from './layout';
 import { configFallback, configPromise } from './ui-config';
-import { UserContextProvider } from './user-context';
 
 // App entrypoint
 
@@ -94,16 +91,9 @@ function LoadConfig(_props) {
     );
   }
 
-  return (
-    <BrowserRouter basename={config.UI_BASE_PATH}>
-      <UserContextProvider>
-        <AppContextProvider>
-          <StandaloneLayout>
-            <AppRoutes />
-          </StandaloneLayout>
-          <UIVersion />
-        </AppContextProvider>
-      </UserContextProvider>
-    </BrowserRouter>
-  );
+  const router = createBrowserRouter(dataRoutes, {
+    basename: config.UI_BASE_PATH,
+  });
+
+  return <RouterProvider router={router} />;
 }

src/layout.tsx

@@ -27,7 +27,7 @@ import {
   SmallLogo,
   StatefulDropdown,
 } from 'src/components';
-import { StandaloneMenu } from './menu';
+import { PulpMenu } from './menu';
 import { Paths, formatPath } from './paths';
 import { useUserContext } from './user-context';
 
@@ -84,7 +84,7 @@ const UserDropdown = ({
   />
 );
 
-export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
+export const Layout = ({ children }: { children: ReactNode }) => {
   const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
   const { credentials, clearCredentials } = useUserContext();
 
@@ -127,7 +127,7 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
   const Sidebar = (
     <PageSidebar>
       <PageSidebarBody>
-        <StandaloneMenu />
+        <PulpMenu />
       </PageSidebarBody>
     </PageSidebar>
   );

src/menu.tsx

@@ -286,7 +286,7 @@ function usePlugins() {
   return plugins;
 }
 
-export const StandaloneMenu = () => {
+export const PulpMenu = () => {
   const [expandedSections, setExpandedSections] = useState([]);
 
   const location = useLocation();

src/routes/root.tsx

@@ -0,0 +1,22 @@
+import { Outlet, useNavigation } from 'react-router';
+import { AppContextProvider } from 'src/app-context';
+import { LoadingSpinner, UIVersion } from 'src/components';
+import { Layout } from 'src/layout';
+import { UserContextProvider } from 'src/user-context';
+
+export default function Root() {
+  const navigation = useNavigation();
+  const isNavigating = Boolean(navigation.location);
+
+  return (
+    <UserContextProvider>
+      <AppContextProvider>
+        <Layout>
+          {isNavigating && <LoadingSpinner />}
+          <Outlet />
+        </Layout>
+        <UIVersion />
+      </AppContextProvider>
+    </UserContextProvider>
+  );
+}

src/ui-config.ts

@@ -1,13 +1,13 @@
 import defaults from '../pulp-ui-config.json';
 
-export const configPromise = fetch('/pulp-ui-config.json').then((data) =>
-  data.status > 0 && data.status < 300
-    ? data.json()
-    : Promise.reject(`${data.status}: ${data.statusText}`),
-);
+export const configPromise = fetch('/pulp-ui-config.json')
+  .then((data) =>
+    data.status > 0 && data.status < 300
+      ? data.json()
+      : Promise.reject(`${data.status}: ${data.statusText}`),
+  )
+  .then((data) => (config = data));
 
 export let config = null;
 
 export const configFallback = () => (config = defaults);
-
-configPromise.then((data) => (config = data));