Move shared components to common layout

src/RootApp.tsx

@@ -11,6 +11,8 @@ import { HistoryRouter } from 'components/router/HistoryRouter';
 import { ApiProvider } from 'hooks/useApi';
 import { WebConfigProvider } from 'hooks/useWebConfig';
 import theme from 'themes/theme';
+import { useLocation } from 'react-router-dom';
+import { DASHBOARD_APP_PATHS } from './apps/dashboard/App';
 
 const DashboardApp = loadable(() => import('./apps/dashboard/App'));
 const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
@@ -22,10 +24,14 @@ const RootAppLayout = () => {
     const layoutMode = localStorage.getItem('layout');
     const isExperimentalLayout = layoutMode === 'experimental';
 
+    const location = useLocation();
+    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
+        .some(path => location.pathname.startsWith(`/${path}`));
+
     return (
         <>
             <Backdrop />
-            <AppHeader isHidden={isExperimentalLayout} />
+            <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
 
             {
                 isExperimentalLayout ?

src/apps/dashboard/App.tsx

@@ -25,25 +25,31 @@ const toDashboardAsyncPageRoute = (route: AsyncRoute) => (
     })
 );
 
+export const DASHBOARD_APP_PATHS = {
+    Dashboard: 'dashboard',
+    MetadataManager: 'metadata',
+    PluginConfig: 'configurationpage'
+};
+
 const DashboardApp = () => (
     <Routes>
         <Route element={<ConnectionRequired isAdminRequired />}>
             <Route element={<AppLayout />}>
-                <Route path='dashboard'>
+                <Route path={DASHBOARD_APP_PATHS.Dashboard}>
                     {ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)}
                     {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
                 </Route>
 
                 {/* TODO: Should the metadata manager be a separate app? */}
                 {toViewManagerPageRoute({
-                    path: 'metadata',
+                    path: DASHBOARD_APP_PATHS.MetadataManager,
                     pageProps: {
                         controller: 'edititemmetadata',
                         view: 'edititemmetadata.html'
                     }
                 })}
 
-                <Route path='configurationpage' element={
+                <Route path={DASHBOARD_APP_PATHS.PluginConfig} element={
                     <ServerContentPage view='/web/configurationpage' />
                 } />
 

src/apps/dashboard/AppLayout.tsx

@@ -1,29 +1,15 @@
-import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import AppHeader from 'components/AppHeader';
+import AppBody from 'components/AppBody';
-import Backdrop from 'components/Backdrop';
+
-import theme from 'themes/theme';
+import '../experimental/AppOverrides.scss';
 
 const AppLayout = () => {
     return (
-        <ThemeProvider theme={theme}>
+        <AppBody>
-            <Backdrop />
+            <Outlet />
-
+        </AppBody>
-            <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>
-
-            <div className='mainAnimatedPages skinBody' />
-            <div className='skinBody'>
-                <Outlet />
-            </div>
-        </ThemeProvider>
     );
 };
 

src/apps/experimental/App.tsx

@@ -10,6 +10,7 @@ import { toRedirectRoute } from 'components/router/Redirect';
 import AppLayout from './AppLayout';
 import { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
+import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
 
 const ExperimentalApp = () => {
     return (
@@ -33,9 +34,13 @@ const ExperimentalApp = () => {
             {REDIRECTS.map(toRedirectRoute)}
 
             {/* Ignore dashboard routes */}
-            <Route path='/configurationpage/*' element={null} />
+            {Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
-            <Route path='/dashboard/*' element={null} />
+                <Route
-            <Route path='/metadata/*' element={null} />
+                    key={key}
+                    path={`/${path}/*`}
+                    element={null}
+                />
+            ))}
         </Routes>
     );
 };

src/apps/stable/App.tsx

@@ -5,11 +5,12 @@ import AppBody from 'components/AppBody';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
+import { toRedirectRoute } from 'components/router/Redirect';
 
 import { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
 import { REDIRECTS } from './routes/_redirects';
-import { toRedirectRoute } from 'components/router/Redirect';
+import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
 
 const Layout = () => (
     <AppBody>
@@ -34,9 +35,13 @@ const StableApp = () => (
             </Route>
 
             {/* Ignore dashboard routes */}
-            <Route path='/configurationpage/*' element={null} />
+            {Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
-            <Route path='/dashboard/*' element={null} />
+                <Route
-            <Route path='/metadata/*' element={null} />
+                    key={key}
+                    path={`/${path}/*`}
+                    element={null}
+                />
+            ))}
 
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />