Merge pull request #2534 from bcgov/feature/DESENG-627-use-createBrow…

…serRouter [To Main] Feature - DESENG-627 use createBrowserRouter() in-app
bcgov · Jun 6, 2024 · 67f1210 · 67f1210
2 parents ebec3bf + 12ab9cf
commit 67f1210
Show file tree

Hide file tree

Showing 21 changed files with 1,015 additions and 805 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,14 @@
+## June 6, 2024
+
+- **Feature** Use createBrowserRouter insead of \<BrowserRouter> in the App component [🎟️ DESENG-627](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-627)
+  - Updated the App component to use the more flexible createBrowserRouter function instead of the <BrowserRouter> component
+  - This enables the use of [data router](https://reactrouter.com/en/6.23.0/routers/picking-a-router) functionality and other advanced features in the future, most notably the Blocker component
+  - Added the AutoBreadcrumbs component to the common components library, which will be used to generate breadcrumbs based on the current route
+  - Updated the Tenant Admin pages as a proof of concept
+    - Tenant Admin pages now use the AutoBreadcrumbs component to generate breadcrumbs based on the current route
+    - Tenant Admin pages use data loaders to fetch data from the API instead of relying on a state or context
+    - Tenant Admin pages use useBlocker() to prompt for confirmation from users navigating away from the page when they're in the middle of editing a form
+
 ## June 3, 2024
 
 - **Bugfix** Patch button styles (follow-up to [🎟️ DESENG-583](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-583))
@@ -7,6 +18,7 @@
 ## May 30, 2024
 
 - **Feature** Remove web components [🎟️ DESENG-616](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-616)
+
   - Removed web components and all code that references it
 
 - **Feature** Remove EAO process widget [🎟️ DESENG-626](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-626)

diff --git a/met-web/package-lock.json b/met-web/package-lock.json
diff --git a/met-web/package.json b/met-web/package.json
@@ -69,7 +69,7 @@
         "react-map-gl": "^7.0.21",
         "react-player": "^2.12.0",
         "react-redux": "^7.2.8",
-        "react-router-dom": "^6.10.0",
+        "react-router-dom": "^6.23.1",
         "react-scripts": "^5.0.1",
         "react-svg": "^15.0.1",
         "recharts": "^2.4.3",

diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx
@@ -1,24 +1,22 @@
 import React, { useEffect, useState, useContext } from 'react';
 import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
 import './App.scss';
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import {
+    Route,
+    BrowserRouter as Router,
+    RouterProvider,
+    Routes,
+    createBrowserRouter,
+    createRoutesFromElements,
+} from 'react-router-dom';
 import { useAppSelector, useAppDispatch } from './hooks';
-import { MidScreenLoader, MobileToolbar } from './components/common';
-import { Box, Container, useMediaQuery, Theme } from '@mui/material';
-import InternalHeader from './components/layout/Header/InternalHeader';
-import PublicHeader from './components/layout/Header/PublicHeader';
+import { MidScreenLoader } from './components/common';
 import UnauthenticatedRoutes from './routes/UnauthenticatedRoutes';
 import AuthenticatedRoutes from './routes/AuthenticatedRoutes';
-import { Notification } from 'components/common/notification';
-import PageViewTracker from 'routes/PageViewTracker';
-import { NotificationModal } from 'components/common/modal';
-import { FeedbackModal } from 'components/feedback/FeedbackModal';
 import { AppConfig } from 'config';
 import NoAccess from 'routes/NoAccess';
 import { getTenant } from 'services/tenantService';
 import NotFound from 'routes/NotFound';
-import Footer from 'components/layout/Footer';
-import { ZIndex } from 'styles/Theme';
 import { TenantState, loadingTenant, saveTenant } from 'reduxSlices/tenantSlice';
 import { LanguageState } from 'reduxSlices/languageSlice';
 import { openNotification } from 'services/notificationService/notificationSlice';
@@ -27,14 +25,15 @@ import DocumentTitle from 'DocumentTitle';
 import { Languages } from 'constants/language';
 import { AuthKeyCloakContext } from './components/auth/AuthKeycloakContext';
 import { determinePathSegments, findTenantInPath } from './utils';
+import { AuthenticatedLayout } from 'components/appLayouts/AuthenticatedLayout';
+import { PublicLayout } from 'components/appLayouts/PublicLayout';
 
 interface Translations {
     [languageId: string]: { [key: string]: string };
 }
 
 const App = () => {
     const drawerWidth = 280;
-    const isMediumScreen: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
     const dispatch = useAppDispatch();
     const roles = useAppSelector((state) => state.user.roles);
     const authenticationLoading = useAppSelector((state) => state.user.authentication.loading);
@@ -203,71 +202,49 @@ const App = () => {
     }
 
     if (!isAuthenticated) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <PageViewTracker />
-                <Notification />
-                <NotificationModal />
-                <PublicHeader />
-                <UnauthenticatedRoutes />
-                <FeedbackModal />
-                <Footer />
-            </Router>
+        const router = createBrowserRouter(
+            [
+                {
+                    element: <PublicLayout />,
+                    children: createRoutesFromElements(UnauthenticatedRoutes()),
+                },
+            ],
+            { basename: `/${basename}` },
         );
+        return <RouterProvider router={router} />;
     }
 
     if (roles.length === 0) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <PublicHeader />
-                <Container>
-                    <NoAccess />
-                </Container>
-                <FeedbackModal />
-                <Footer />
-            </Router>
+        const router = createBrowserRouter(
+            [
+                {
+                    element: <AuthenticatedLayout drawerWidth={0} />,
+                    children: [
+                        {
+                            path: '*',
+                            element: <NoAccess />,
+                        },
+                    ],
+                },
+            ],
+            { basename: `/${basename}` },
         );
+        return <RouterProvider router={router} />;
     }
 
-    if (!isMediumScreen) {
-        return (
-            <Router basename={tenant.basename}>
-                <DocumentTitle />
-                <InternalHeader />
-                <Container sx={{ padding: { xs: 0, sm: 0, md: 0 } }}>
-                    <MobileToolbar />
-                    <AuthenticatedRoutes />
-                    <FeedbackModal />
-                    <Footer />
-                </Container>
-            </Router>
-        );
-    }
-
-    return (
-        <Router basename={tenant.basename}>
-            <DocumentTitle />
-            <Box sx={{ display: 'flex' }}>
-                <InternalHeader drawerWidth={drawerWidth} />
-                <Notification />
-                <NotificationModal />
-                <Box component="main" sx={{ flexGrow: 1, width: `calc(100% - ${drawerWidth}px)`, marginTop: '80px' }}>
-                    <AuthenticatedRoutes />
-                    <FeedbackModal />
-                </Box>
-            </Box>
-            <Box
-                sx={{
-                    backgroundColor: 'var(--bcds-surface-background-white)',
-                    zIndex: ZIndex.footer,
-                    position: 'relative',
-                }}
-            >
-                <Footer />
-            </Box>
-        </Router>
+    const router = createBrowserRouter(
+        [
+            {
+                element: <AuthenticatedLayout drawerWidth={drawerWidth} />,
+                children: createRoutesFromElements(AuthenticatedRoutes()),
+                handle: {
+                    crumb: () => ({ name: 'Dashboard', link: '/home' }),
+                },
+            },
+        ],
+        { basename: `/${basename}` },
     );
+
+    return <RouterProvider router={router} />;
 };
 export default App;
diff --git a/met-web/src/components/appLayouts/AuthenticatedLayout.tsx b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import '@bcgov/design-tokens/css-prefixed/variables.css';
+import { Outlet } from 'react-router-dom';
+import { Box } from '@mui/material';
+import InternalHeader from '../layout/Header/InternalHeader';
+import { Notification } from 'components/common/notification';
+import { NotificationModal } from 'components/common/modal';
+import { FeedbackModal } from 'components/feedback/FeedbackModal';
+import Footer from 'components/layout/Footer';
+import { ZIndex } from 'styles/Theme';
+import DocumentTitle from 'DocumentTitle';
+import ScrollToTop from 'components/scrollToTop';
+import FormioListener from 'components/FormioListener';
+
+export const AuthenticatedLayout = ({ drawerWidth = 280 }: { drawerWidth?: number }) => {
+    return (
+        <>
+            <DocumentTitle />
+            <Box sx={{ display: 'flex' }}>
+                <InternalHeader drawerWidth={drawerWidth} />
+                <Notification />
+                <NotificationModal />
+                <Box component="main" sx={{ flexGrow: 1, marginTop: '80px' }}>
+                    <ScrollToTop />
+                    <FormioListener />
+                    <Outlet />
+                    <FeedbackModal />
+                </Box>
+            </Box>
+            <Box
+                sx={{
+                    backgroundColor: 'var(--bcds-surface-background-white)',
+                    zIndex: ZIndex.footer,
+                    position: 'relative',
+                }}
+            >
+                <Footer />
+            </Box>
+        </>
+    );
+};
diff --git a/met-web/src/components/appLayouts/PublicLayout.tsx b/met-web/src/components/appLayouts/PublicLayout.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import '@bcgov/design-tokens/css-prefixed/variables.css'; // Will be available to use in all component
+import { Outlet } from 'react-router-dom';
+import PublicHeader from '../layout/Header/PublicHeader';
+import { Notification } from 'components/common/notification';
+import PageViewTracker from 'routes/PageViewTracker';
+import { NotificationModal } from 'components/common/modal';
+import { FeedbackModal } from 'components/feedback/FeedbackModal';
+import Footer from 'components/layout/Footer';
+import DocumentTitle from 'DocumentTitle';
+import ScrollToTop from 'components/scrollToTop';
+
+export const PublicLayout = () => {
+    return (
+        <>
+            <DocumentTitle />
+            <PageViewTracker />
+            <Notification />
+            <NotificationModal />
+            <PublicHeader />
+            <ScrollToTop />
+            <Outlet />
+            <FeedbackModal />
+            <Footer />
+        </>
+    );
+};