More testing and cleanup of legacy components

packages/rmf-dashboard-framework/src/components/alert-manager.test.tsx

@@ -0,0 +1,74 @@
+import { AlertRequest, ApiServerModelsAlertsAlertRequestTier } from 'api-client';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { RmfApiProvider } from '../hooks';
+import { MockRmfApi, render, TestProviders } from '../utils/test-utils.test';
+import { AlertDialog, AlertManager } from './alert-manager';
+
+describe('Alert dialog', () => {
+  const rmfApi = new MockRmfApi();
+  rmfApi.alertsApi.getAlertResponseAlertsRequestAlertIdResponseGet = vi
+    .fn()
+    .mockResolvedValue({ data: [] });
+  rmfApi.tasksApi.getTaskLogTasksTaskIdLogGet = () => new Promise(() => {});
+
+  const Base = (props: React.PropsWithChildren<{}>) => {
+    return (
+      <TestProviders>
+        <RmfApiProvider value={rmfApi}>{props.children}</RmfApiProvider>
+      </TestProviders>
+    );
+  };
+
+  it('renders without crashing', () => {
+    const alertRequest: AlertRequest = {
+      id: 'test-alert',
+      unix_millis_alert_time: 0,
+      title: 'Test Alert',
+      subtitle: 'Test subtitle',
+      message: 'This is a test alert',
+      tier: ApiServerModelsAlertsAlertRequestTier.Error,
+      responses_available: ['ok'],
+      display: true,
+      task_id: 'test-task',
+      alert_parameters: [],
+    };
+    const onDismiss = vi.fn();
+
+    const root = render(
+      <Base>
+        <AlertDialog alertRequest={alertRequest} onDismiss={onDismiss} />
+      </Base>,
+    );
+    expect(root.getByText('Test Alert')).toBeTruthy();
+    expect(root.getByText('This is a test alert')).toBeTruthy();
+    expect(root.getByTestId('test-alert-ok-button')).toBeTruthy();
+    expect(root.getByTestId('task-cancel-button')).toBeTruthy();
+    expect(root.getByTestId('dismiss-button')).toBeTruthy();
+  });
+});
+
+describe('Alert manager', () => {
+  const rmfApi = new MockRmfApi();
+  rmfApi.alertsApi.getAlertResponseAlertsRequestAlertIdResponseGet = vi
+    .fn()
+    .mockResolvedValue({ data: [] });
+  rmfApi.tasksApi.getTaskLogTasksTaskIdLogGet = () => new Promise(() => {});
+
+  const Base = (props: React.PropsWithChildren<{}>) => {
+    return (
+      <TestProviders>
+        <RmfApiProvider value={rmfApi}>{props.children}</RmfApiProvider>
+      </TestProviders>
+    );
+  };
+
+  it('starts without crashing', () => {
+    render(
+      <Base>
+        <AlertManager />
+      </Base>,
+    );
+  });
+});

packages/rmf-dashboard-framework/src/components/alert-manager.tsx

@@ -6,7 +6,6 @@ import {
   DialogTitle,
   Divider,
   TextField,
-  useMediaQuery,
   useTheme,
 } from '@mui/material';
 import {
@@ -23,17 +22,16 @@ import { useAppController, useRmfApi } from '../hooks';
 import { AppEvents } from './app-events';
 import { TaskCancelButton } from './tasks/task-cancellation';
 
-interface AlertDialogProps {
+export interface AlertDialogProps {
   alertRequest: AlertRequest;
   onDismiss: () => void;
 }
 
-const AlertDialog = React.memo((props: AlertDialogProps) => {
+export const AlertDialog = React.memo((props: AlertDialogProps) => {
   const { alertRequest, onDismiss } = props;
   const [isOpen, setIsOpen] = React.useState(true);
   const { showAlert } = useAppController();
   const rmfApi = useRmfApi();
-  const isScreenHeightLessThan800 = useMediaQuery('(max-height:800px)');
   const [additionalAlertMessage, setAdditionalAlertMessage] = React.useState<string | null>(null);
 
   const respondToAlert = async (alert_id: string, response: string) => {
@@ -131,7 +129,7 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
           boxShadow: 'none',
         },
       }}
-      maxWidth={isScreenHeightLessThan800 ? 'xs' : 'sm'}
+      maxWidth="sm"
       fullWidth={true}
       open={isOpen}
       key={alertRequest.id}
@@ -148,14 +146,14 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
           variant="filled"
           sx={{
             '& .MuiFilledInput-root': {
-              fontSize: isScreenHeightLessThan800 ? '0.8rem' : '1.15',
+              fontSize: '1.15',
             },
             background: theme.palette.background.default,
             '&:hover': {
               backgroundColor: theme.palette.background.default,
             },
           }}
-          InputLabelProps={{ style: { fontSize: isScreenHeightLessThan800 ? 16 : 20 } }}
+          InputLabelProps={{ style: { fontSize: 20 } }}
           InputProps={{ readOnly: true }}
           fullWidth={true}
           margin="dense"
@@ -169,14 +167,14 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
             variant="filled"
             sx={{
               '& .MuiFilledInput-root': {
-                fontSize: isScreenHeightLessThan800 ? '0.8rem' : '1.15',
+                fontSize: '1.15',
               },
               background: theme.palette.background.default,
               '&:hover': {
                 backgroundColor: theme.palette.background.default,
               },
             }}
-            InputLabelProps={{ style: { fontSize: isScreenHeightLessThan800 ? 16 : 20 } }}
+            InputLabelProps={{ style: { fontSize: 20 } }}
             InputProps={{ readOnly: true }}
             fullWidth={true}
             multiline
@@ -198,9 +196,10 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
               variant="contained"
               autoFocus
               key={`${alertRequest.id}-${response}`}
+              data-testid={`${alertRequest.id}-${response}-button`}
               sx={{
-                fontSize: isScreenHeightLessThan800 ? '0.8rem' : '1rem',
-                padding: isScreenHeightLessThan800 ? '4px 8px' : '6px 12px',
+                fontSize: '1rem',
+                padding: '6px 12px',
               }}
               onClick={async () => {
                 await respondToAlert(alertRequest.id, response);
@@ -213,24 +212,26 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
         })}
         {alertRequest.task_id ? (
           <TaskCancelButton
+            data-testid="task-cancel-button"
             taskId={alertRequest.task_id}
             size="small"
             variant="contained"
             color="secondary"
             buttonText={'Cancel task'}
             sx={{
-              fontSize: isScreenHeightLessThan800 ? '0.8rem' : '1rem',
-              padding: isScreenHeightLessThan800 ? '4px 8px' : '6px 12px',
+              fontSize: '1rem',
+              padding: '6px 12px',
             }}
           />
         ) : null}
         <Button
+          data-testid="dismiss-button"
           size="small"
           variant="contained"
           autoFocus
           sx={{
-            fontSize: isScreenHeightLessThan800 ? '0.8rem' : '1rem',
-            padding: isScreenHeightLessThan800 ? '4px 8px' : '6px 12px',
+            fontSize: '1rem',
+            padding: '6px 12px',
           }}
           onClick={() => {
             onDismiss();

packages/rmf-dashboard-framework/src/components/appbar.tsx

@@ -372,7 +372,7 @@ export const AppBar = React.memo(
                 color="inherit"
                 onClick={() => window.open(helpLink, '_blank')}
               >
-                <Help fontSize="inherit" />
+                <Help />
               </ToolbarIconButton>
             </Tooltip>
             <Tooltip title="Report issues">
@@ -382,7 +382,7 @@ export const AppBar = React.memo(
                 color="inherit"
                 onClick={() => window.open(reportIssueLink, '_blank')}
               >
-                <Issue fontSize="inherit" />
+                <Issue />
               </ToolbarIconButton>
             </Tooltip>
             <Tooltip title="Profile">
@@ -392,7 +392,7 @@ export const AppBar = React.memo(
                 color="inherit"
                 onClick={(event) => setAnchorEl(event.currentTarget)}
               >
-                <AccountCircle fontSize="inherit" />
+                <AccountCircle />
               </ToolbarIconButton>
             </Tooltip>
             <Menu

packages/rmf-dashboard-framework/src/components/beacons/beacon-table-datagrid.tsx

@@ -1,4 +1,4 @@
-import { Box, SxProps, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, SxProps, Typography, useTheme } from '@mui/material';
 import { DataGrid, GridCellParams, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
 import { BeaconState } from 'api-client';
 import React from 'react';
@@ -9,7 +9,6 @@ export interface BeaconDataGridTableProps {
 
 export function BeaconDataGridTable({ beacons }: BeaconDataGridTableProps): JSX.Element {
   const theme = useTheme();
-  const isScreenHeightLessThan800 = useMediaQuery('(max-height:800px)');
 
   const OpModeState = (params: GridCellParams): React.ReactNode => {
     const opModeStateLabelStyle: SxProps = (() => {
@@ -30,7 +29,7 @@ export function BeaconDataGridTable({ beacons }: BeaconDataGridTableProps): JSX.
           component="p"
           sx={{
             fontWeight: 'bold',
-            fontSize: isScreenHeightLessThan800 ? 12 : 16,
+            fontSize: 16,
           }}
         >
           {params.row.online ? 'ONLINE' : 'OFFLINE'}
@@ -123,11 +122,7 @@ export function BeaconDataGridTable({ beacons }: BeaconDataGridTableProps): JSX.
       rowHeight={38}
       columns={columns}
       rowsPerPageOptions={[5]}
-      sx={{
-        fontSize: isScreenHeightLessThan800 ? '0.7rem' : 'inherit',
-      }}
-      autoPageSize={isScreenHeightLessThan800}
-      density={isScreenHeightLessThan800 ? 'compact' : 'standard'}
+      density="standard"
       localeText={{
         noRowsLabel: 'No beacons available.',
       }}

packages/rmf-dashboard-framework/src/components/confirmation-dialog.tsx

@@ -8,7 +8,6 @@ import {
   DialogTitle,
   Grid,
   styled,
-  useMediaQuery,
 } from '@mui/material';
 import clsx from 'clsx';
 import React from 'react';
@@ -51,17 +50,14 @@ export function ConfirmationDialog({
   children,
   ...otherProps
 }: ConfirmationDialogProps): JSX.Element {
-  const isScreenHeightLessThan800 = useMediaQuery('(max-height:800px)');
   return (
     <StyledDialog
       onClose={onClose}
       {...otherProps}
       PaperProps={{
         sx: {
-          maxWidth: isScreenHeightLessThan800 ? '31.25rem' : '37.5rem',
+          maxWidth: '37.5rem',
           width: '100%',
-          // Automatic width on smaller screens
-          ...(isScreenHeightLessThan800 ? { width: 'auto' } : {}),
         },
       }}
     >
@@ -87,7 +83,7 @@ export function ConfirmationDialog({
             onClick={(ev) => onClose && onClose(ev, 'escapeKeyDown')}
             disabled={submitting}
             className={clsx(dialogClasses.actionBtn, classes?.button)}
-            size={isScreenHeightLessThan800 ? 'small' : 'medium'}
+            size="medium"
           >
             {cancelText}
           </Button>
@@ -97,7 +93,7 @@ export function ConfirmationDialog({
             color="primary"
             disabled={submitting}
             className={clsx(dialogClasses.actionBtn, classes?.button)}
-            size={isScreenHeightLessThan800 ? 'small' : 'medium'}
+            size="medium"
           >
             <Loading hideChildren loading={submitting} size="1.5em" color="inherit">
               {confirmText}

packages/rmf-dashboard-framework/src/components/doors/door-table-datagrid.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, SxProps, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, SxProps, Typography, useTheme } from '@mui/material';
 import {
   DataGrid,
   GridCellParams,
@@ -41,7 +41,6 @@ export interface DoorDataGridTableProps {
 
 export function DoorDataGridTable({ doors, onDoorClick }: DoorDataGridTableProps): JSX.Element {
   const theme = useTheme();
-  const isScreenHeightLessThan800 = useMediaQuery('(max-height:800px)');
 
   const OpModeState = (params: GridCellParams): React.ReactNode => {
     const opModeStateLabelStyle: SxProps = (() => {
@@ -128,7 +127,7 @@ export function DoorDataGridTable({ doors, onDoorClick }: DoorDataGridTableProps
           component="p"
           sx={{
             fontWeight: 'bold',
-            fontSize: isScreenHeightLessThan800 ? 10 : 16,
+            fontSize: 16,
           }}
         >
           {params.row.doorState ? doorModeToString(params.row.doorState.current_mode.value) : -1}
@@ -146,8 +145,8 @@ export function DoorDataGridTable({ doors, onDoorClick }: DoorDataGridTableProps
           aria-label="open"
           sx={{
             minWidth: 'auto',
-            fontSize: isScreenHeightLessThan800 ? 10 : 16,
-            marginRight: isScreenHeightLessThan800 ? 0 : 0,
+            fontSize: 16,
+            marginRight: 0,
           }}
           onClick={params.row.onClickOpen}
         >
@@ -159,8 +158,8 @@ export function DoorDataGridTable({ doors, onDoorClick }: DoorDataGridTableProps
           aria-label="close"
           sx={{
             minWidth: 'auto',
-            fontSize: isScreenHeightLessThan800 ? 10 : 16,
-            marginRight: isScreenHeightLessThan800 ? 0 : 0,
+            fontSize: 16,
+            marginRight: 0,
           }}
           onClick={params.row.onClickClose}
         >
@@ -239,11 +238,7 @@ export function DoorDataGridTable({ doors, onDoorClick }: DoorDataGridTableProps
       rowHeight={38}
       columns={columns}
       rowsPerPageOptions={[5]}
-      sx={{
-        fontSize: isScreenHeightLessThan800 ? '0.7rem' : 'inherit',
-      }}
-      autoPageSize={isScreenHeightLessThan800}
-      density={isScreenHeightLessThan800 ? 'compact' : 'standard'}
+      density={'standard'}
       localeText={{
         noRowsLabel: 'No doors available.',
       }}

packages/rmf-dashboard-framework/src/components/icons/index.ts

@@ -1,2 +1 @@
-export * from './CloseFullscreen';
 export * from './OpenInFull';

packages/rmf-dashboard-framework/src/components/lifts/lift-controls.tsx

@@ -1,4 +1,4 @@
-import { Button, useMediaQuery } from '@mui/material';
+import { Button } from '@mui/material';
 import React from 'react';
 
 import { LiftRequestDialog, LiftRequestDialogProps } from './lift-request-dialog';
@@ -18,7 +18,6 @@ export function LiftControls({
   onClose,
   ...otherProps
 }: LiftControlsProps): JSX.Element {
-  const isScreenHeightLessThan800 = useMediaQuery('(max-height:800px)');
   const [showDialog, setShowDialog] = React.useState(false);
   // Doing `{showDialog && <Form .../>}` will unomunt it before the animations are done.
   // Instead we give a `key` to the form to make react spawn a new instance.
@@ -36,7 +35,7 @@ export function LiftControls({
         }}
         sx={{
           minWidth: 'auto',
-          fontSize: isScreenHeightLessThan800 ? 10 : 16,
+          fontSize: 16,
         }}
       >
         Request