Extract style overrides for dashboard

src/apps/dashboard/App.tsx

@@ -34,7 +34,7 @@ export const DASHBOARD_APP_PATHS = {
 const DashboardApp = () => (
     <Routes>
         <Route element={<ConnectionRequired isAdminRequired />}>
-            <Route element={<AppLayout />}>
+            <Route element={<AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />}>
                 <Route path={DASHBOARD_APP_PATHS.Dashboard}>
                     {ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)}
                     {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}

src/apps/dashboard/AppLayout.tsx

@@ -1,10 +1,11 @@
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
+import AppToolbar from 'components/toolbar/AppToolbar';
 import ElevationScroll from 'components/ElevationScroll';
 import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
 import { useApi } from 'hooks/useApi';
@@ -12,9 +13,11 @@ import { useLocalStorage } from 'hooks/useLocalStorage';
 
 import AppDrawer from './components/drawer/AppDrawer';
 
-// FIXME: Remove main app override styles
-import '../experimental/AppOverrides.scss';
-import AppToolbar from 'components/toolbar/AppToolbar';
+import './AppOverrides.scss';
+
+interface AppLayoutProps {
+    drawerlessPaths: string[]
+}
 
 interface DashboardAppSettings {
     isDrawerPinned: boolean
@@ -24,15 +27,16 @@ const DEFAULT_APP_SETTINGS: DashboardAppSettings = {
     isDrawerPinned: false
 };
 
-const AppLayout = () => {
+const AppLayout: FC<AppLayoutProps> = ({
+    drawerlessPaths
+}) => {
     const [ appSettings, setAppSettings ] = useLocalStorage<DashboardAppSettings>('DashboardAppSettings', DEFAULT_APP_SETTINGS);
     const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
     const location = useLocation();
     const theme = useTheme();
     const { user } = useApi();
 
-    // FIXME: Use const for metadata editor
-    const isDrawerAvailable = !location.pathname.startsWith('/metadata');
+    const isDrawerAvailable = !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
     const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
 
     useEffect(() => {

src/apps/dashboard/AppOverrides.scss

@@ -0,0 +1,22 @@
+// Default MUI breakpoints
+// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
+$mui-bp-sm: 600px;
+$mui-bp-md: 900px;
+$mui-bp-lg: 1200px;
+$mui-bp-xl: 1536px;
+
+// Fix dashboard pages layout to work with drawer
+.dashboardDocument {
+    .mainAnimatedPage {
+        position: relative;
+    }
+
+    .skinBody {
+        position: unset !important;
+    }
+
+    // Fix the padding of dashboard pages
+    .content-primary.content-primary {
+        padding-top: 3.25rem !important;
+    }
+}

src/apps/experimental/AppOverrides.scss

@@ -10,11 +10,6 @@ $mui-bp-xl: 1536px;
     position: relative;
 }
 
-// Fix dashboard pages layout to work with drawer
-.dashboardDocument .skinBody {
-    position: unset;
-}
-
 // Hide some items from the user "settings" page that are in the drawer
 #myPreferencesMenuPage {
     .lnkQuickConnectPreferences,
@@ -26,8 +21,7 @@ $mui-bp-xl: 1536px;
 
 // Fix the padding of some pages
 .homePage.libraryPage, // Home page
-.libraryPage:not(.withTabs), // Tabless library pages
-.content-primary.content-primary { // Dashboard pages
+.libraryPage:not(.withTabs) { // Tabless library pages
     padding-top: 3.25rem !important;
 }