Display an alert when low display res detected (#767)

* Display an alert when low display res detected Signed-off-by: Aaron Chong <[email protected]> * Raising e2e test resolution Signed-off-by: Aaron Chong <[email protected]> * Adding comment about raising testing resolution Signed-off-by: Aaron Chong <[email protected]> --------- Signed-off-by: Aaron Chong <[email protected]>
open-rmf · Sep 8, 2023 · 0d352fe · 0d352fe
1 parent 8a4415e
commit 0d352fe
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/packages/dashboard-e2e/wdio.conf.js b/packages/dashboard-e2e/wdio.conf.js
@@ -22,7 +22,8 @@ function browserstackOptions(opts) {
   return {
     projectName: 'rmf-web',
     buildName: `dashboard-e2e:${process.env.BROWSERSTACK_BUILD || 'local'}`,
-    resolution: '1920x1080',
+    // Resolution higher than 1080p to prevent triggering low resolution alert.
+    resolution: '2560x1600',
     localIdentifier,
     ...opts,
   };

diff --git a/packages/dashboard/src/components/app-base.tsx b/packages/dashboard/src/components/app-base.tsx
@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import React from 'react';
-import { rmfDark, rmfDarkLeaflet, rmfLight } from 'react-components';
+import { rmfDark, rmfDarkLeaflet, rmfLight, AlertDialog } from 'react-components';
 import { loadSettings, saveSettings, Settings, ThemeMode } from '../settings';
 import { AppController, AppControllerContext, SettingsContext } from './app-contexts';
 import AppBar from './appbar';
@@ -30,6 +30,7 @@ const defaultTheme = createTheme();
 export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element | null {
   const [settings, setSettings] = React.useState(() => loadSettings());
   const [showAlert, setShowAlert] = React.useState(false);
+  const [lowResolutionAlert, setLowResolutionAlert] = React.useState(false);
   const [alertSeverity, setAlertSeverity] = React.useState<AlertProps['severity']>('error');
   const [alertMessage, setAlertMessage] = React.useState('');
   const [alertDuration, setAlertDuration] = React.useState(DefaultAlertDuration);
@@ -65,13 +66,56 @@ export function AppBase({ children }: React.PropsWithChildren<{}>): JSX.Element
     [updateSettings],
   );
 
+  React.useEffect(() => {
+    const checkSize = () => {
+      if (window.innerHeight < 1080 || window.innerWidth < 1080) {
+        setLowResolutionAlert(true);
+      }
+    };
+    checkSize();
+    window.addEventListener('resize', checkSize);
+  }, []);
+
+  const dismissDisplayAlert = () => {
+    setLowResolutionAlert(false);
+  };
+
+  const lowResolutionDisplayAlert = () => {
+    return (
+      <AlertDialog
+        key="display-alert"
+        onDismiss={dismissDisplayAlert}
+        title="Low display resolution detected"
+        alertContents={[
+          {
+            title: 'Current resolution',
+            value: `${window.innerWidth} x ${window.innerHeight}`,
+          },
+          {
+            title: 'Minimum recommended resolution',
+            value: '1920 x 1080',
+          },
+          {
+            title: 'Message',
+            value:
+              'To ensure maximum compatibility, please reduce the zoom ' +
+              'level in the browser (Ctrl+Minus) or display settings, ' +
+              'or change to a higher resolution display device.',
+          },
+        ]}
+        backgroundColor={theme.palette.background.default}
+      />
+    );
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       {settings.themeMode === ThemeMode.RmfDark && <GlobalStyles styles={rmfDarkLeaflet} />}
       <SettingsContext.Provider value={settings}>
         <AppControllerContext.Provider value={appController}>
           <AlertStore />
+          {lowResolutionAlert && lowResolutionDisplayAlert()}
           <Grid
             container
             direction="column"