Merge branch 'react-18-#1205' into migrate-to-vite-#1379

ral-facilities · Apr 3, 2024 · 4d80658 · 4d80658
2 parents fec13e4 + 9b1a9de
commit 4d80658
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 14 deletions.
diff --git a/src/__snapshots__/pageContainer.test.tsx.snap b/src/__snapshots__/pageContainer.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
       </div>
     </div>
     <div
-      style="width: 100%;"
+      class="MuiBox-root css-1g9g0uu"
     >
       <header
         class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorTransparent MuiAppBar-positionStatic css-1p9tt43-MuiPaper-root-MuiAppBar-root"
@@ -192,7 +192,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
       class="react-joyride"
     />
     <div
-      class="css-uuc84g"
+      class="css-frbs4c"
     >
       <div
         id="dg-homepage"
@@ -446,7 +446,7 @@ exports[`PageContainer - Tests > renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="css-1j8dxwd"
+      class="css-1dqylve"
     >
       <div
         style="text-align: left; font-weight: bold; font-size: 14px; text-indent: 16px; display: inline-block;"

diff --git a/src/footer/__snapshots__/footer.component.test.tsx.snap b/src/footer/__snapshots__/footer.component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Footer component > footer renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-1j8dxwd"
+    class="css-1dqylve"
   >
     <div
       style="text-align: left; font-weight: bold; font-size: 14px; text-indent: 16px; display: inline-block;"

diff --git a/src/footer/footer.component.tsx b/src/footer/footer.component.tsx
@@ -26,6 +26,9 @@ const RootDiv = styled('div')(({ theme }) => ({
       color: theme.colours.footerLink.active,
     },
   },
+  '@media print': {
+    display: 'none',
+  },
 }));
 
 const StyledLink = styled(Link)<{ component?: React.ElementType; to?: string }>(

diff --git a/src/mainAppBar/mainAppBar.component.tsx b/src/mainAppBar/mainAppBar.component.tsx
@@ -9,7 +9,7 @@ import HelpIcon from '@mui/icons-material/HelpOutline';
 import MenuIcon from '@mui/icons-material/Menu';
 import SettingsIcon from '@mui/icons-material/Settings';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { styled, useMediaQuery } from '@mui/material';
+import { Box, styled, useMediaQuery } from '@mui/material';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import { Theme, useTheme } from '@mui/material/styles';
 import ScigatewayLogo from '../images/scigateway-white-text-blue-mark-logo.svg';
@@ -129,7 +129,14 @@ export const MainAppBar = (
   }, [isViewportMdOrLarger]);
 
   return (
-    <div style={{ width: '100%' }}>
+    <Box
+      sx={{
+        width: '100%',
+        '@media print': {
+          display: 'none',
+        },
+      }}
+    >
       <AppBar
         position="static"
         color="transparent"
@@ -242,7 +249,7 @@ export const MainAppBar = (
           )}
         </Toolbar>
       </AppBar>
-    </div>
+    </Box>
   );
 };
 

diff --git a/src/routing/__snapshots__/routing.component.test.tsx.snap b/src/routing/__snapshots__/routing.component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Routing component > redirects to the homepage if navigating to login page while logged in 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div
       id="dg-homepage"
@@ -262,7 +262,7 @@ exports[`Routing component > redirects to the homepage if navigating to login pa
 exports[`Routing component > renders a route for a plugin when site is under maintenance and user is admin 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div>
       <div
@@ -278,7 +278,7 @@ exports[`Routing component > renders a route for a plugin when site is under mai
 exports[`Routing component > renders a route for admin page 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div>
       Mocked AdminPage
@@ -290,7 +290,7 @@ exports[`Routing component > renders a route for admin page 1`] = `
 exports[`Routing component > renders a route for maintenance page when site is under maintenance and user is not admin 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     Mocked MaintenancePage
   </div>
@@ -300,7 +300,7 @@ exports[`Routing component > renders a route for maintenance page when site is u
 exports[`Routing component > renders an unauthorised route for a plugin 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div
       id="dg-homepage"
@@ -559,7 +559,7 @@ exports[`Routing component > renders an unauthorised route for a plugin 1`] = `
 exports[`Routing component > renders component with no plugin routes 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div
       id="dg-homepage"
@@ -818,7 +818,7 @@ exports[`Routing component > renders component with no plugin routes 1`] = `
 exports[`Routing component > renders component with plugins 1`] = `
 <DocumentFragment>
   <div
-    class="css-uuc84g"
+    class="css-frbs4c"
   >
     <div
       id="dg-homepage"

diff --git a/src/routing/routing.component.tsx b/src/routing/routing.component.tsx
@@ -41,6 +41,9 @@ const ContainerDiv = styled('div', {
         ? `calc(100vh - ${theme.mainAppBarHeight})`
         : `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight})`,
       overflow: 'auto',
+      '@media print': {
+        overflow: 'visible',
+      },
       marginLeft: isMobileViewport ? 0 : theme.drawerWidth,
       transition: theme.transitions.create(['margin', 'width'], {
         easing: theme.transitions.easing.easeOut,
@@ -55,6 +58,9 @@ const ContainerDiv = styled('div', {
       ? `calc(100vh - ${theme.mainAppBarHeight})`
       : `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight})`,
     overflow: 'auto',
+    '@media print': {
+      overflow: 'visible',
+    },
     transition: theme.transitions.create(['margin', 'width'], {
       easing: theme.transitions.easing.easeIn,
       duration: theme.transitions.duration.leavingScreen,