Skip to content

Commit

Permalink
More testing and cleanup of legacy components (#1039)
Browse files Browse the repository at this point in the history
* Remove low resolution custom behaviors

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* robot decommission

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* icons

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Remove unused components, test and storybook robot decommission and mutext table

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Test mock posts

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* robot-summary

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* robots-table

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* cleaned up robots/utils, test compose-clean

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* custom-compose

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* patrol

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* delivery

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* delivery custom

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task form, removed task details card, task logs app

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task-inspector

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task-summary

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task-schedule

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task-schedule-utils

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* tasks-window

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* alert-manager

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* alert-dialog

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* workspace and locally-persistent-workspace

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* task utils

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* cleanup negotiation manager

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* rmf-dashboard

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Cleanup workcell-panel

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* utils geometry

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* favorite tasks, day selector switch, get default task request

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

---------

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
  • Loading branch information
aaronchongth authored Jan 2, 2025
1 parent 1a9d593 commit c7ef8d6
Show file tree
Hide file tree
Showing 70 changed files with 2,770 additions and 1,368 deletions.
Original file line number Diff line number Diff line change
@@ -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>,
);
});
});
31 changes: 16 additions & 15 deletions packages/rmf-dashboard-framework/src/components/alert-manager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
DialogTitle,
Divider,
TextField,
useMediaQuery,
useTheme,
} from '@mui/material';
import {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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}
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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);
Expand All @@ -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();
Expand Down
6 changes: 3 additions & 3 deletions packages/rmf-dashboard-framework/src/components/appbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -392,7 +392,7 @@ export const AppBar = React.memo(
color="inherit"
onClick={(event) => setAnchorEl(event.currentTarget)}
>
<AccountCircle fontSize="inherit" />
<AccountCircle />
</ToolbarIconButton>
</Tooltip>
<Menu
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = (() => {
Expand All @@ -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'}
Expand Down Expand Up @@ -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.',
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
DialogTitle,
Grid,
styled,
useMediaQuery,
} from '@mui/material';
import clsx from 'clsx';
import React from 'react';
Expand Down Expand Up @@ -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' } : {}),
},
}}
>
Expand All @@ -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>
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 = (() => {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
>
Expand All @@ -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}
>
Expand Down Expand Up @@ -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.',
}}
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export * from './CloseFullscreen';
export * from './OpenInFull';
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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.
Expand All @@ -36,7 +35,7 @@ export function LiftControls({
}}
sx={{
minWidth: 'auto',
fontSize: isScreenHeightLessThan800 ? 10 : 16,
fontSize: 16,
}}
>
Request
Expand Down
Loading

0 comments on commit c7ef8d6

Please sign in to comment.