From 33102149c21d4b50e3527e012124342cb84963c9 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 1 Jun 2023 12:12:16 -0400
Subject: [PATCH 1/2] Refactor routes to use layout elements

---
 src/apps/experimental/App.tsx              | 144 ++++++---------------
 src/apps/experimental/AppLayout.tsx        | 114 ++++++++++++++++
 src/apps/experimental/routes/AppRoutes.tsx |  42 ------
 src/apps/stable/App.tsx                    |  49 ++++++-
 src/apps/stable/routes/AppRoutes.tsx       |  41 ------
 5 files changed, 196 insertions(+), 194 deletions(-)
 create mode 100644 src/apps/experimental/AppLayout.tsx
 delete mode 100644 src/apps/experimental/routes/AppRoutes.tsx
 delete mode 100644 src/apps/stable/routes/AppRoutes.tsx

diff --git a/src/apps/experimental/App.tsx b/src/apps/experimental/App.tsx
index 3b58bb6aa60..9e7a5f0da70 100644
--- a/src/apps/experimental/App.tsx
+++ b/src/apps/experimental/App.tsx
@@ -1,114 +1,46 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import { ThemeProvider } from '@mui/material/styles';
-import { useLocation } from 'react-router-dom';
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
-import AppHeader from 'components/AppHeader';
-import Backdrop from 'components/Backdrop';
-import { useApi } from 'hooks/useApi';
-import { useLocalStorage } from 'hooks/useLocalStorage';
+import ConnectionRequired from 'components/ConnectionRequired';
+import ServerContentPage from 'components/ServerContentPage';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 
-import AppToolbar from './components/AppToolbar';
-import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
-import ElevationScroll from './components/ElevationScroll';
-import { ExperimentalAppRoutes } from './routes/AppRoutes';
-import theme from './theme';
-
-import './AppOverrides.scss';
-
-interface ExperimentalAppSettings {
-    isDrawerPinned: boolean
-}
-
-const DEFAULT_EXPERIMENTAL_APP_SETTINGS: ExperimentalAppSettings = {
-    isDrawerPinned: false
-};
+import AppLayout from './AppLayout';
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
+import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
 
 const ExperimentalApp = () => {
-    const [ appSettings, setAppSettings ] = useLocalStorage<ExperimentalAppSettings>('ExperimentalAppSettings', DEFAULT_EXPERIMENTAL_APP_SETTINGS);
-    const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
-    const { user } = useApi();
-    const location = useLocation();
-
-    const isDrawerAvailable = isDrawerPath(location.pathname);
-    const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
-
-    useEffect(() => {
-        if (isDrawerActive !== appSettings.isDrawerPinned) {
-            setAppSettings({
-                ...appSettings,
-                isDrawerPinned: isDrawerActive
-            });
-        }
-    }, [ appSettings, isDrawerActive, setAppSettings ]);
-
-    const onToggleDrawer = useCallback(() => {
-        setIsDrawerActive(!isDrawerActive);
-    }, [ isDrawerActive, setIsDrawerActive ]);
-
     return (
-        <ThemeProvider theme={theme}>
-            <Backdrop />
-
-            <div style={{ display: 'none' }}>
-                {/*
-                  * TODO: These components are not used, but views interact with them directly so the need to be
-                  * present in the dom. We add them in a hidden element to prevent errors.
-                  */}
-                <AppHeader />
-            </div>
-
-            <Box sx={{ display: 'flex' }}>
-                <ElevationScroll elevate={isDrawerOpen}>
-                    <AppBar
-                        position='fixed'
-                        sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
-                    >
-                        <AppToolbar
-                            isDrawerOpen={isDrawerOpen}
-                            onDrawerButtonClick={onToggleDrawer}
-                        />
-                    </AppBar>
-                </ElevationScroll>
-
-                <AppDrawer
-                    open={isDrawerOpen}
-                    onClose={onToggleDrawer}
-                    onOpen={onToggleDrawer}
-                />
-
-                <Box
-                    component='main'
-                    sx={{
-                        width: '100%',
-                        flexGrow: 1,
-                        transition: theme.transitions.create('margin', {
-                            easing: theme.transitions.easing.sharp,
-                            duration: theme.transitions.duration.leavingScreen
-                        }),
-                        marginLeft: 0,
-                        ...(isDrawerAvailable && {
-                            marginLeft: {
-                                sm: `-${DRAWER_WIDTH}px`
-                            }
-                        }),
-                        ...(isDrawerActive && {
-                            transition: theme.transitions.create('margin', {
-                                easing: theme.transitions.easing.easeOut,
-                                duration: theme.transitions.duration.enteringScreen
-                            }),
-                            marginLeft: 0
-                        })
-                    }}
-                >
-                    <div className='mainAnimatedPages skinBody' />
-                    <div className='skinBody'>
-                        <ExperimentalAppRoutes />
-                    </div>
-                </Box>
-            </Box>
-        </ThemeProvider>
+        <Routes>
+            <Route element={<AppLayout />}>
+                {/* User routes */}
+                <Route path='/' element={<ConnectionRequired />}>
+                    {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
+                    {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
+                </Route>
+
+                {/* Admin routes */}
+                <Route path='/' element={<ConnectionRequired isAdminRequired />}>
+                    {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                    {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
+
+                    <Route path='configurationpage' element={
+                        <ServerContentPage view='/web/configurationpage' />
+                    } />
+                </Route>
+
+                {/* Public routes */}
+                <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
+                    <Route index element={<Navigate replace to='/home.html' />} />
+
+                    {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
+                </Route>
+
+                {/* Suppress warnings for unhandled routes */}
+                <Route path='*' element={null} />
+            </Route>
+        </Routes>
     );
 };
 
diff --git a/src/apps/experimental/AppLayout.tsx b/src/apps/experimental/AppLayout.tsx
new file mode 100644
index 00000000000..71824e0d73f
--- /dev/null
+++ b/src/apps/experimental/AppLayout.tsx
@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import { useApi } from 'hooks/useApi';
+import { useLocalStorage } from 'hooks/useLocalStorage';
+
+import AppToolbar from './components/AppToolbar';
+import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
+import ElevationScroll from './components/ElevationScroll';
+import theme from './theme';
+
+import './AppOverrides.scss';
+
+interface ExperimentalAppSettings {
+    isDrawerPinned: boolean
+}
+
+const DEFAULT_EXPERIMENTAL_APP_SETTINGS: ExperimentalAppSettings = {
+    isDrawerPinned: false
+};
+
+const AppLayout = () => {
+    const [ appSettings, setAppSettings ] = useLocalStorage<ExperimentalAppSettings>('ExperimentalAppSettings', DEFAULT_EXPERIMENTAL_APP_SETTINGS);
+    const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
+    const { user } = useApi();
+    const location = useLocation();
+
+    const isDrawerAvailable = isDrawerPath(location.pathname);
+    const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
+
+    useEffect(() => {
+        if (isDrawerActive !== appSettings.isDrawerPinned) {
+            setAppSettings({
+                ...appSettings,
+                isDrawerPinned: isDrawerActive
+            });
+        }
+    }, [ appSettings, isDrawerActive, setAppSettings ]);
+
+    const onToggleDrawer = useCallback(() => {
+        setIsDrawerActive(!isDrawerActive);
+    }, [ isDrawerActive, setIsDrawerActive ]);
+
+    return (
+        <ThemeProvider theme={theme}>
+            <Backdrop />
+
+            <div style={{ display: 'none' }}>
+                {/*
+                  * TODO: These components are not used, but views interact with them directly so the need to be
+                  * present in the dom. We add them in a hidden element to prevent errors.
+                  */}
+                <AppHeader />
+            </div>
+
+            <Box sx={{ display: 'flex' }}>
+                <ElevationScroll elevate={isDrawerOpen}>
+                    <AppBar
+                        position='fixed'
+                        sx={{ zIndex: (muiTheme) => muiTheme.zIndex.drawer + 1 }}
+                    >
+                        <AppToolbar
+                            isDrawerOpen={isDrawerOpen}
+                            onDrawerButtonClick={onToggleDrawer}
+                        />
+                    </AppBar>
+                </ElevationScroll>
+
+                <AppDrawer
+                    open={isDrawerOpen}
+                    onClose={onToggleDrawer}
+                    onOpen={onToggleDrawer}
+                />
+
+                <Box
+                    component='main'
+                    sx={{
+                        width: '100%',
+                        flexGrow: 1,
+                        transition: theme.transitions.create('margin', {
+                            easing: theme.transitions.easing.sharp,
+                            duration: theme.transitions.duration.leavingScreen
+                        }),
+                        marginLeft: 0,
+                        ...(isDrawerAvailable && {
+                            marginLeft: {
+                                sm: `-${DRAWER_WIDTH}px`
+                            }
+                        }),
+                        ...(isDrawerActive && {
+                            transition: theme.transitions.create('margin', {
+                                easing: theme.transitions.easing.easeOut,
+                                duration: theme.transitions.duration.enteringScreen
+                            }),
+                            marginLeft: 0
+                        })
+                    }}
+                >
+                    <div className='mainAnimatedPages skinBody' />
+                    <div className='skinBody'>
+                        <Outlet />
+                    </div>
+                </Box>
+            </Box>
+        </ThemeProvider>
+    );
+};
+
+export default AppLayout;
diff --git a/src/apps/experimental/routes/AppRoutes.tsx b/src/apps/experimental/routes/AppRoutes.tsx
deleted file mode 100644
index 8c01a026757..00000000000
--- a/src/apps/experimental/routes/AppRoutes.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import ConnectionRequired from 'components/ConnectionRequired';
-import ServerContentPage from 'components/ServerContentPage';
-import { toAsyncPageRoute } from 'components/router/AsyncRoute';
-import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
-
-import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './asyncRoutes';
-import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
-
-export const ExperimentalAppRoutes = () => (
-    <Routes>
-        <Route path='/'>
-            {/* User routes */}
-            <Route path='/' element={<ConnectionRequired />}>
-                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
-                {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
-            </Route>
-
-            {/* Admin routes */}
-            <Route path='/' element={<ConnectionRequired isAdminRequired />}>
-                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
-                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
-
-                <Route path='configurationpage' element={
-                    <ServerContentPage view='/web/configurationpage' />
-                } />
-            </Route>
-
-            {/* Public routes */}
-            <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
-                <Route index element={<Navigate replace to='/home.html' />} />
-
-                {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
-            </Route>
-
-            {/* Suppress warnings for unhandled routes */}
-            <Route path='*' element={null} />
-        </Route>
-    </Routes>
-);
diff --git a/src/apps/stable/App.tsx b/src/apps/stable/App.tsx
index 7d619f62305..bbaec1b922a 100644
--- a/src/apps/stable/App.tsx
+++ b/src/apps/stable/App.tsx
@@ -1,19 +1,58 @@
 import React from 'react';
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 
-import AppHeader from '../../components/AppHeader';
-import Backdrop from '../../components/Backdrop';
-import { AppRoutes } from './routes/AppRoutes';
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import ServerContentPage from 'components/ServerContentPage';
+import ConnectionRequired from 'components/ConnectionRequired';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 
-const StableApp = () => (
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './routes/asyncRoutes';
+import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+
+const Layout = () => (
     <>
         <Backdrop />
         <AppHeader />
 
         <div className='mainAnimatedPages skinBody' />
         <div className='skinBody'>
-            <AppRoutes />
+            <Outlet />
         </div>
     </>
 );
 
+const StableApp = () => (
+    <Routes>
+        <Route element={<Layout />}>
+            {/* User routes */}
+            <Route path='/' element={<ConnectionRequired />}>
+                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
+                {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
+            </Route>
+
+            {/* Admin routes */}
+            <Route path='/' element={<ConnectionRequired isAdminRequired />}>
+                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
+
+                <Route path='configurationpage' element={
+                    <ServerContentPage view='/web/configurationpage' />
+                } />
+            </Route>
+
+            {/* Public routes */}
+            <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
+                <Route index element={<Navigate replace to='/home.html' />} />
+
+                {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
+            </Route>
+
+            {/* Suppress warnings for unhandled routes */}
+            <Route path='*' element={null} />
+        </Route>
+    </Routes>
+);
+
 export default StableApp;
diff --git a/src/apps/stable/routes/AppRoutes.tsx b/src/apps/stable/routes/AppRoutes.tsx
deleted file mode 100644
index fb3527da75b..00000000000
--- a/src/apps/stable/routes/AppRoutes.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import ConnectionRequired from '../../../components/ConnectionRequired';
-import ServerContentPage from '../../../components/ServerContentPage';
-import { toAsyncPageRoute } from '../../../components/router/AsyncRoute';
-import { toViewManagerPageRoute } from '../../../components/router/LegacyRoute';
-import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES } from './asyncRoutes';
-import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
-
-export const AppRoutes = () => (
-    <Routes>
-        <Route path='/'>
-            {/* User routes */}
-            <Route path='/' element={<ConnectionRequired />}>
-                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
-                {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
-            </Route>
-
-            {/* Admin routes */}
-            <Route path='/' element={<ConnectionRequired isAdminRequired />}>
-                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
-                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
-
-                <Route path='configurationpage' element={
-                    <ServerContentPage view='/web/configurationpage' />
-                } />
-            </Route>
-
-            {/* Public routes */}
-            <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
-                <Route index element={<Navigate replace to='/home.html' />} />
-
-                {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
-            </Route>
-
-            {/* Suppress warnings for unhandled routes */}
-            <Route path='*' element={null} />
-        </Route>
-    </Routes>
-);

From 186dd44da67c92bdc50fcec7530f4b3ce8e0e93a Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 7 Jun 2023 17:11:27 -0400
Subject: [PATCH 2/2] Fix root path warnings

---
 src/apps/experimental/App.tsx                         | 11 ++++-------
 .../experimental/components/drawers/AppDrawer.tsx     |  3 ---
 src/apps/experimental/components/tabs/AppTabs.tsx     |  3 ---
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/apps/experimental/App.tsx b/src/apps/experimental/App.tsx
index 9e7a5f0da70..0013ef04301 100644
--- a/src/apps/experimental/App.tsx
+++ b/src/apps/experimental/App.tsx
@@ -13,15 +13,15 @@ import { LEGACY_ADMIN_ROUTES, LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from '.
 const ExperimentalApp = () => {
     return (
         <Routes>
-            <Route element={<AppLayout />}>
+            <Route path='/*' element={<AppLayout />}>
                 {/* User routes */}
-                <Route path='/' element={<ConnectionRequired />}>
+                <Route element={<ConnectionRequired />}>
                     {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
                     {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
                 </Route>
 
                 {/* Admin routes */}
-                <Route path='/' element={<ConnectionRequired isAdminRequired />}>
+                <Route element={<ConnectionRequired isAdminRequired />}>
                     {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
                     {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
 
@@ -31,14 +31,11 @@ const ExperimentalApp = () => {
                 </Route>
 
                 {/* Public routes */}
-                <Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
+                <Route element={<ConnectionRequired isUserRequired={false} />}>
                     <Route index element={<Navigate replace to='/home.html' />} />
 
                     {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
                 </Route>
-
-                {/* Suppress warnings for unhandled routes */}
-                <Route path='*' element={null} />
             </Route>
         </Routes>
     );
diff --git a/src/apps/experimental/components/drawers/AppDrawer.tsx b/src/apps/experimental/components/drawers/AppDrawer.tsx
index 49ccab09fd9..ffd9ba119ea 100644
--- a/src/apps/experimental/components/drawers/AppDrawer.tsx
+++ b/src/apps/experimental/components/drawers/AppDrawer.tsx
@@ -80,9 +80,6 @@ const AppDrawer: FC<ResponsiveDrawerProps> = ({
                 />
             ))
         }
-
-        {/* Suppress warnings for unhandled routes */}
-        <Route path='*' element={null} />
     </Routes>
 );
 
diff --git a/src/apps/experimental/components/tabs/AppTabs.tsx b/src/apps/experimental/components/tabs/AppTabs.tsx
index 383bf8ab21f..02eec57077b 100644
--- a/src/apps/experimental/components/tabs/AppTabs.tsx
+++ b/src/apps/experimental/components/tabs/AppTabs.tsx
@@ -83,9 +83,6 @@ const AppTabs: FC<AppTabsParams> = ({
                     />
                 ))
             }
-
-            {/* Suppress warnings for unhandled routes */}
-            <Route path='*' element={null} />
         </Routes>
     );
 };