From 35457b5abb2f4d8342bdbda942fda383c1d468a9 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 25 Sep 2023 13:54:33 -0400
Subject: [PATCH] Extract style overrides for dashboard

---
 src/apps/dashboard/App.tsx              |  2 +-
 src/apps/dashboard/AppLayout.tsx        | 18 +++++++++++-------
 src/apps/dashboard/AppOverrides.scss    | 22 ++++++++++++++++++++++
 src/apps/experimental/AppOverrides.scss |  8 +-------
 4 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/apps/dashboard/AppOverrides.scss

diff --git a/src/apps/dashboard/App.tsx b/src/apps/dashboard/App.tsx
index db1776509a..30e3eda94d 100644
--- a/src/apps/dashboard/App.tsx
+++ b/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)}
diff --git a/src/apps/dashboard/AppLayout.tsx b/src/apps/dashboard/AppLayout.tsx
index 7afe655a3d..ce74f4989b 100644
--- a/src/apps/dashboard/AppLayout.tsx
+++ b/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(() => {
diff --git a/src/apps/dashboard/AppOverrides.scss b/src/apps/dashboard/AppOverrides.scss
new file mode 100644
index 0000000000..c8597ee576
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/apps/experimental/AppOverrides.scss b/src/apps/experimental/AppOverrides.scss
index c365a5b295..cece6608c1 100644
--- a/src/apps/experimental/AppOverrides.scss
+++ b/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;
 }