From 0fcb809fe66cf1f7d3e3c4c0db99d2a99fdc7cdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Beye?= Date: Wed, 19 Feb 2025 20:09:32 +0100 Subject: [PATCH] refactor(ui): Migrate from deprecated Grid to Grid2 --- frontend/src/HomePage.tsx | 10 +-- frontend/src/ProvisioningPage.tsx | 34 ++++----- .../src/components/DetailPageHeaderRow.tsx | 35 +++++----- frontend/src/components/FullHeightGrid.tsx | 4 +- frontend/src/components/InfoBox.tsx | 16 ++--- frontend/src/components/ReloadableCard.tsx | 27 ++++--- .../src/components/TextInformationGrid.tsx | 10 +-- frontend/src/components/ValetudoSplash.tsx | 16 ++--- .../src/components/list_menu/ListMenu.tsx | 16 ++--- frontend/src/controls/Attachments.tsx | 14 ++-- frontend/src/controls/BasicControls.tsx | 22 +++--- frontend/src/controls/ControlsBody.tsx | 6 +- frontend/src/controls/ControlsCard.tsx | 28 ++++---- frontend/src/controls/CurrentStatistics.tsx | 20 +++--- frontend/src/controls/Dock.tsx | 18 ++--- frontend/src/controls/MobileControls.tsx | 14 ++-- frontend/src/controls/PresetSelection.tsx | 55 +++++++-------- frontend/src/controls/RobotStatus.tsx | 30 ++++---- .../edit_map_actions/SegmentActions.tsx | 34 ++++----- .../VirtualRestrictionActions.tsx | 34 ++++----- .../actions/live_map_actions/GoToActions.tsx | 18 ++--- .../live_map_actions/SegmentActions.tsx | 22 +++--- .../actions/live_map_actions/ZoneActions.tsx | 26 +++---- .../options/connectivity/AuthSettingsPage.tsx | 26 +++---- .../connectivity/MQTTConnectivityPage.tsx | 42 +++++------ .../connectivity/NTPConnectivityPage.tsx | 52 +++++++------- .../NetworkAdvertisementSettingsPage.tsx | 22 +++--- .../connectivity/WifiConnectivityPage.tsx | 39 +++++------ frontend/src/robot/ManualControl.tsx | 6 +- frontend/src/robot/TotalStatistics.tsx | 58 +++++++-------- .../robot/capabilities/CapabilityLayout.tsx | 10 +-- frontend/src/robot/capabilities/Quirks.tsx | 15 ++-- frontend/src/valetudo/About.tsx | 11 ++- frontend/src/valetudo/Help.tsx | 6 +- frontend/src/valetudo/Log.tsx | 31 ++++---- frontend/src/valetudo/SystemInformation.tsx | 70 +++++++++---------- frontend/src/valetudo/Updater.tsx | 27 ++++--- .../src/valetudo/timers/PreActionControls.tsx | 22 +++--- frontend/src/valetudo/timers/TimerCard.tsx | 23 +++--- .../src/valetudo/timers/TimerEditDialog.tsx | 16 ++--- frontend/src/valetudo/timers/Timers.tsx | 43 ++++++------ 41 files changed, 497 insertions(+), 531 deletions(-) diff --git a/frontend/src/HomePage.tsx b/frontend/src/HomePage.tsx index 6618d69370b..b34bd379dd5 100644 --- a/frontend/src/HomePage.tsx +++ b/frontend/src/HomePage.tsx @@ -1,4 +1,4 @@ -import {Box, Divider, Grid, styled} from "@mui/material"; +import {Box, Divider, Grid2, styled} from "@mui/material"; import ControlsBody from "./controls"; import {useIsMobileView} from "./hooks"; import {FullHeightGrid} from "./components/FullHeightGrid"; @@ -6,7 +6,7 @@ import LiveMapPage from "./map/LiveMapPage"; import MobileControls from "./controls/MobileControls"; import React from "react"; -const ScrollableGrid = styled(Grid)({ +const ScrollableGrid = styled(Grid2)({ overflow: "auto", }); @@ -44,11 +44,11 @@ const HomePage = (): React.ReactElement => { return ( - + - + - + diff --git a/frontend/src/ProvisioningPage.tsx b/frontend/src/ProvisioningPage.tsx index e7ca0091ede..dd12db85ae9 100644 --- a/frontend/src/ProvisioningPage.tsx +++ b/frontend/src/ProvisioningPage.tsx @@ -6,7 +6,7 @@ import { DialogTitle, Divider, FormControl, - Grid, + Grid2, IconButton, Input, InputAdornment, @@ -234,18 +234,18 @@ const ProvisioningPage = (): React.ReactElement => { ]; return ( - + {items.map(([header, body]) => { return ( - + {header} {body} - + ); })} - + ); }, [robotInformation, robotInformationPending, version, versionPending]); @@ -262,11 +262,11 @@ const ProvisioningPage = (): React.ReactElement => { maxWidth: "600px" }} > - - + { }} /> - - + + { } - - + + { setNewSSID(e.target.value); }} /> - + - + PSK/Password { setNewPSK(e.target.value); }}/> - + - + { > Apply - + - + diff --git a/frontend/src/components/DetailPageHeaderRow.tsx b/frontend/src/components/DetailPageHeaderRow.tsx index 103d6b65113..b22681bc64f 100644 --- a/frontend/src/components/DetailPageHeaderRow.tsx +++ b/frontend/src/components/DetailPageHeaderRow.tsx @@ -1,4 +1,4 @@ -import {Divider, Grid, IconButton, styled, Typography} from "@mui/material"; +import {Divider, Grid2, IconButton, styled, Typography} from "@mui/material"; import React, {FunctionComponent} from "react"; import { Help as HelpIcon, @@ -32,22 +32,21 @@ const DetailPageHeaderRow: FunctionComponent = ({ return ( <> - - - + + + {icon} - - + + {title} - - - - + + + + { helpText !== undefined && <> - = ({ > - + = ({ { onRefreshClick !== undefined && - + = ({ > - + } - - - + + + ); diff --git a/frontend/src/components/FullHeightGrid.tsx b/frontend/src/components/FullHeightGrid.tsx index 843a863eeb2..0358e66cead 100644 --- a/frontend/src/components/FullHeightGrid.tsx +++ b/frontend/src/components/FullHeightGrid.tsx @@ -1,6 +1,6 @@ -import {Grid, styled} from "@mui/material"; +import {Grid2, styled} from "@mui/material"; -export const FullHeightGrid = styled(Grid)(({ theme }) => { +export const FullHeightGrid = styled(Grid2)(({ theme }) => { return { height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`, width: "100%", diff --git a/frontend/src/components/InfoBox.tsx b/frontend/src/components/InfoBox.tsx index 19f2e42b57b..e6da878876b 100644 --- a/frontend/src/components/InfoBox.tsx +++ b/frontend/src/components/InfoBox.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Grid, Paper} from "@mui/material"; +import {Grid2, Paper} from "@mui/material"; import {Announcement} from "@mui/icons-material"; const InfoBox = (props: { boxShadow: number, style?: React.CSSProperties, children: React.ReactNode}): React.ReactElement => { @@ -9,18 +9,16 @@ const InfoBox = (props: { boxShadow: number, style?: React.CSSProperties, childr style={props.style} sx={{ boxShadow: props.boxShadow }} > - - + - - + {props.children} - - + + ); }; diff --git a/frontend/src/components/ReloadableCard.tsx b/frontend/src/components/ReloadableCard.tsx index a2479b395e9..4bf85d98e73 100644 --- a/frontend/src/components/ReloadableCard.tsx +++ b/frontend/src/components/ReloadableCard.tsx @@ -1,4 +1,4 @@ -import {Card, CardContent, Divider, Grid, IconButton, styled, Typography} from "@mui/material"; +import {Card, CardContent, Divider, Grid2, IconButton, styled, Typography} from "@mui/material"; import React, {FunctionComponent} from "react"; import {Help as HelpIcon, Refresh as RefreshIcon} from "@mui/icons-material"; import {LoadingButton} from "@mui/lab"; @@ -41,22 +41,21 @@ const ReloadableCard: FunctionComponent = ({ sx={{boxShadow: boxShadow}} > - - + {title} - - - + + + {helpText && ( - = ({ > - + )} {reloadButton || (onReload && ( - + - + ))} - - - + + + {divider && } {children} diff --git a/frontend/src/components/TextInformationGrid.tsx b/frontend/src/components/TextInformationGrid.tsx index 7460c166abf..831963b3b19 100644 --- a/frontend/src/components/TextInformationGrid.tsx +++ b/frontend/src/components/TextInformationGrid.tsx @@ -1,26 +1,26 @@ import React from "react"; -import {Grid, Typography} from "@mui/material"; +import {Grid2, Typography} from "@mui/material"; const TextInformationGrid: React.FunctionComponent<{ items: Array<{ header: string, body: string }> }> = ({ items }): React.ReactElement => { return ( - {items.map((item) => { return ( - + {item.header} {item.body} - + ); })} - + ); }; diff --git a/frontend/src/components/ValetudoSplash.tsx b/frontend/src/components/ValetudoSplash.tsx index 5725fd5c58c..16d00d482d5 100644 --- a/frontend/src/components/ValetudoSplash.tsx +++ b/frontend/src/components/ValetudoSplash.tsx @@ -1,11 +1,11 @@ import {ReactComponent as SplashLogo} from "../assets/icons/valetudo_splash.svg"; -import {CircularProgress, Grid} from "@mui/material"; +import {CircularProgress, Grid2} from "@mui/material"; import React from "react"; const ValetudoSplash = (): React.ReactElement => { return ( - { alignItems="center" justifyContent="center" > - { marginLeft: "5%" }} /> - - + - - + + ); }; diff --git a/frontend/src/components/list_menu/ListMenu.tsx b/frontend/src/components/list_menu/ListMenu.tsx index e02f71c684d..292a76e11fe 100644 --- a/frontend/src/components/list_menu/ListMenu.tsx +++ b/frontend/src/components/list_menu/ListMenu.tsx @@ -1,4 +1,4 @@ -import {Divider, Grid, IconButton, List, ListItemText} from "@mui/material"; +import {Divider, Grid2, IconButton, List, ListItemText} from "@mui/material"; import React from "react"; import {SpacerListMenuItem} from "./SpacerListMenuItem"; import HelpDialog from "../HelpDialog"; @@ -28,9 +28,8 @@ export const ListMenu: React.FunctionComponent<{ width: "100%", }} subheader={ - - + - + {helpText && ( - - + )} - + } > {listItems.map((item, idx) => { diff --git a/frontend/src/controls/Attachments.tsx b/frontend/src/controls/Attachments.tsx index 9835f7681ad..548c67ba575 100644 --- a/frontend/src/controls/Attachments.tsx +++ b/frontend/src/controls/Attachments.tsx @@ -2,7 +2,7 @@ import { RobotAttributeClass, useRobotAttributeQuery, } from "../api"; -import {Grid, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; +import {Grid2, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material"; import React from "react"; import ControlsCard from "./ControlsCard"; import {Extension} from "@mui/icons-material"; @@ -32,8 +32,8 @@ const Attachments = (): React.ReactElement | null => { } return ( - - + + {attachments.map(({ type, attached }) => { return ( @@ -43,8 +43,8 @@ const Attachments = (): React.ReactElement | null => { ); })} - - + + ); }, [attachments, isAttachmentError]); @@ -54,9 +54,9 @@ const Attachments = (): React.ReactElement | null => { title="Attachments" isLoading={isAttachmentPending} > - + {attachmentDetails} - + ); }; diff --git a/frontend/src/controls/BasicControls.tsx b/frontend/src/controls/BasicControls.tsx index 6b23c287898..4667de80447 100644 --- a/frontend/src/controls/BasicControls.tsx +++ b/frontend/src/controls/BasicControls.tsx @@ -3,7 +3,7 @@ import { Button, ButtonGroup, DialogContentText, - Grid, + Grid2, Paper, Skeleton, Typography, @@ -59,25 +59,25 @@ const BasicControls = (): React.ReactElement => { if (statusPending) { return ( - + - + ); } if (status === undefined) { return ( - + Error loading basic controls - + ); } @@ -112,11 +112,11 @@ const BasicControls = (): React.ReactElement => { return ( <> - + - - + + { ); })} - - + + - + { return ( - + {basicControls && } @@ -91,7 +91,7 @@ const ControlsBody = (): React.ReactElement => { } {currentStatistics && } - + ); }; diff --git a/frontend/src/controls/ControlsCard.tsx b/frontend/src/controls/ControlsCard.tsx index 8185f981afc..5d92a7b992c 100644 --- a/frontend/src/controls/ControlsCard.tsx +++ b/frontend/src/controls/ControlsCard.tsx @@ -1,4 +1,4 @@ -import {Box, Grid, Paper, Skeleton, SvgIconProps, Typography} from "@mui/material"; +import {Box, Grid2, Paper, Skeleton, SvgIconProps, Typography} from "@mui/material"; import React, {ReactNode} from "react"; import LoadingFade from "../components/LoadingFade"; @@ -12,26 +12,26 @@ interface ControlsCardProps { } const ControlsCard: React.FC = ({ icon: Icon, title, pending = false, children, isLoading }) => ( - + - + - - - + + + {title} - - + + - - - + + + { isLoading ? ( @@ -39,11 +39,11 @@ const ControlsCard: React.FC = ({ icon: Icon, title, pending children ) } - + - + - + ); export default ControlsCard; diff --git a/frontend/src/controls/CurrentStatistics.tsx b/frontend/src/controls/CurrentStatistics.tsx index 3f5a8ac55b6..e9376b3fa09 100644 --- a/frontend/src/controls/CurrentStatistics.tsx +++ b/frontend/src/controls/CurrentStatistics.tsx @@ -1,5 +1,5 @@ import {useCurrentStatisticsQuery} from "../api"; -import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material"; +import {Box, CircularProgress, Grid2, Paper, Typography} from "@mui/material"; import {Equalizer as StatisticsIcon} from "@mui/icons-material"; import React from "react"; import {getFriendlyStatName, getHumanReadableStatValue} from "../utils"; @@ -15,9 +15,9 @@ const CurrentStatistics = (): React.ReactElement => { const body = React.useMemo(() => { if (statisticsPending) { return ( - + - + ); } @@ -33,14 +33,14 @@ const CurrentStatistics = (): React.ReactElement => { return currentStatistics.map((stat, i) => { return ( - - + + {getFriendlyStatName(stat)} - - {getHumanReadableStatValue(stat)} - + + {getHumanReadableStatValue(stat)} + ); }); }, [ @@ -51,9 +51,9 @@ const CurrentStatistics = (): React.ReactElement => { return ( - + {body} - + ); }; diff --git a/frontend/src/controls/Dock.tsx b/frontend/src/controls/Dock.tsx index 734330321d1..94694ddcaf4 100644 --- a/frontend/src/controls/Dock.tsx +++ b/frontend/src/controls/Dock.tsx @@ -8,7 +8,7 @@ import { useRobotStatusQuery } from "../api"; import {useCapabilitiesSupported} from "../CapabilitiesProvider"; -import {Button, Grid, Icon, styled, Typography} from "@mui/material"; +import {Button, Grid2, Icon, styled, Typography} from "@mui/material"; import { RestoreFromTrash as EmptyIcon, Villa as DockIcon, @@ -89,10 +89,10 @@ const Dock = (): React.ReactElement => { {dockState} - + { mopDockCleanTriggerSupported && - + - + } { mopDockDryTriggerSupported && - + - + } { triggerEmptySupported && - + - + } - + ); }, [ diff --git a/frontend/src/controls/MobileControls.tsx b/frontend/src/controls/MobileControls.tsx index 4bb0d4f2004..2bd23eaf2dd 100644 --- a/frontend/src/controls/MobileControls.tsx +++ b/frontend/src/controls/MobileControls.tsx @@ -1,4 +1,4 @@ -import {Box, Grid, Icon, Paper, styled} from "@mui/material"; +import {Box, Grid2, Icon, Paper, styled} from "@mui/material"; import ControlsBody from "./ControlsBody"; import {ReactComponent as Logo} from "../assets/icons/valetudo_logo_with_name.svg"; import {ExpandLess as OpenIcon, ExpandMore as CloseIcon,} from "@mui/icons-material"; @@ -48,7 +48,7 @@ const MobileControls: React.FunctionComponent<{ open: boolean, setOpen: (newOpen - - + - - + - - + + ); }; diff --git a/frontend/src/controls/PresetSelection.tsx b/frontend/src/controls/PresetSelection.tsx index 9e43f1094ba..c9ab3915341 100644 --- a/frontend/src/controls/PresetSelection.tsx +++ b/frontend/src/controls/PresetSelection.tsx @@ -1,6 +1,6 @@ import { Box, - Grid, + Grid2, Icon, Paper, Skeleton, @@ -122,17 +122,17 @@ const PresetSelectionControl = (props: PresetSelectionProps): React.ReactElement const body = React.useMemo(() => { if (presetsPending) { return ( - + - + ); } if (presetLoadError || preset === undefined) { return ( - + Error loading {capability} - + ); } @@ -164,12 +164,11 @@ const PresetSelectionControl = (props: PresetSelectionProps): React.ReactElement ]); return ( - + - + - - {icon} - + {icon} + {label} - - + + - - + - + { !pending && - + {preset?.value ? presetFriendlyNames[preset.value] : ""} - + } - - + - - - - + + + {body} - + - + - + ); }; diff --git a/frontend/src/controls/RobotStatus.tsx b/frontend/src/controls/RobotStatus.tsx index 09b1ab2c14e..4adcefede87 100644 --- a/frontend/src/controls/RobotStatus.tsx +++ b/frontend/src/controls/RobotStatus.tsx @@ -1,5 +1,5 @@ import { - Grid, + Grid2, LinearProgress, linearProgressClasses, styled, @@ -92,8 +92,8 @@ const RobotStatus = (): React.ReactElement => { return batteries.map((battery, index) => { return ( - - + + { > Battery{batteries.length > 1 ? ` ${index+1}`: ""}: {Math.round(battery.level)}% - - + + - - + + ); }); }, [batteries, isBatteryError]); @@ -117,18 +117,18 @@ const RobotStatus = (): React.ReactElement => { title="Robot" isLoading={isPending} > - - - + + + {stateDetails} - - + + {batteries !== undefined && batteries.length > 0 && ( - + {batteriesDetails} - + )} - + ); }; diff --git a/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx b/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx index c818d254ebc..46a827c7751 100644 --- a/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx +++ b/frontend/src/map/actions/edit_map_actions/SegmentActions.tsx @@ -13,7 +13,7 @@ import { DialogContent, DialogContentText, DialogTitle, - Grid, + Grid2, TextField, Typography } from "@mui/material"; @@ -128,13 +128,13 @@ const SegmentActions = ( return ( - + { supportedCapabilities[Capability.MapSegmentEdit] && (selectedSegmentIds.length === 1 || selectedSegmentIds.length === 2) && cuttingLine === undefined && - + )} - + } { supportedCapabilities[Capability.MapSegmentEdit] && selectedSegmentIds.length === 1 && cuttingLine !== undefined && - + )} - + } { supportedCapabilities[Capability.MapSegmentRename] && selectedSegmentIds.length === 1 && cuttingLine === undefined && - + Rename - + } { supportedCapabilities[Capability.MapSegmentEdit] && selectedSegmentIds.length === 1 && cuttingLine === undefined && - + Cutting Line - + } { ( @@ -224,7 +224,7 @@ const SegmentActions = ( cuttingLine !== undefined ) && - + Clear - + } { !canEdit && - + Editing segments requires the robot to be docked - + } { canEdit && selectedSegmentIds.length === 0 && - + Please select a segment to start editing - + } { supportedCapabilities[Capability.MapSegmentRename] && @@ -289,7 +289,7 @@ const SegmentActions = ( } - + ); }; diff --git a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx index 087bd19b219..8fa79be0bf8 100644 --- a/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx +++ b/frontend/src/map/actions/edit_map_actions/VirtualRestrictionActions.tsx @@ -7,7 +7,7 @@ import { ValetudoRestrictedZoneType } from "../../../api"; import React from "react"; -import {Box, Button, CircularProgress, Container, Grid, Typography} from "@mui/material"; +import {Box, Button, CircularProgress, Container, Grid2, Typography} from "@mui/material"; import {ActionButton} from "../../Styled"; import VirtualWallClientStructure from "../../structures/client_structures/VirtualWallClientStructure"; import NoGoAreaClientStructure from "../../structures/client_structures/NoGoAreaClientStructure"; @@ -169,11 +169,11 @@ const VirtualRestrictionActions = ( return ( - + { canEdit && - + Save - + } { canEdit && - + Wall ({virtualWalls.length}) - + } { canEdit && combinedVirtualRestrictionsProperties.supportedRestrictedZoneTypes.includes(ValetudoRestrictedZoneType.Regular) && - + No-Go ({noGoAreas.length}) - + } { canEdit && combinedVirtualRestrictionsProperties.supportedRestrictedZoneTypes.includes(ValetudoRestrictedZoneType.Mop) && - + No-Mop ({noMopAreas.length}) - + } { canEdit && - + Clear - + } { canEdit && - + Refresh - + } { !canEdit && - + Editing virtual restrictions requires the robot to be docked - + } - + ); }; diff --git a/frontend/src/map/actions/live_map_actions/GoToActions.tsx b/frontend/src/map/actions/live_map_actions/GoToActions.tsx index 8c49891a63b..e1cf4700336 100644 --- a/frontend/src/map/actions/live_map_actions/GoToActions.tsx +++ b/frontend/src/map/actions/live_map_actions/GoToActions.tsx @@ -3,7 +3,7 @@ import { useRobotStatusQuery } from "../../../api"; import React from "react"; -import {CircularProgress, Grid, Typography} from "@mui/material"; +import {CircularProgress, Grid2, Typography} from "@mui/material"; import {ActionButton} from "../../Styled"; import GoToTargetClientStructure from "../../structures/client_structures/GoToTargetClientStructure"; import IntegrationHelpDialog from "../../../components/IntegrationHelpDialog"; @@ -78,8 +78,8 @@ const GoToActions = ( return ( <> - - + + )} - - + + { goToTarget && } - + { !canGo && - + Cannot go to point while the robot is busy - + } - + { diff --git a/frontend/src/map/actions/live_map_actions/SegmentActions.tsx b/frontend/src/map/actions/live_map_actions/SegmentActions.tsx index 4a6b5f17ee0..544cca74d1f 100644 --- a/frontend/src/map/actions/live_map_actions/SegmentActions.tsx +++ b/frontend/src/map/actions/live_map_actions/SegmentActions.tsx @@ -1,6 +1,6 @@ import {Capability, useCleanSegmentsMutation, useMapSegmentationPropertiesQuery, useRobotStatusQuery} from "../../../api"; import React from "react"; -import {Box, Button, CircularProgress, Container, Grid, Typography} from "@mui/material"; +import {Box, Button, CircularProgress, Container, Grid2, Typography} from "@mui/material"; import {ActionButton} from "../../Styled"; import IntegrationHelpDialog from "../../../components/IntegrationHelpDialog"; import {useLongPress} from "use-long-press"; @@ -124,8 +124,8 @@ const SegmentActions = ( return ( <> - - + + )} - + { mapSegmentationProperties.iterationCount.max > 1 && - + - + } { didSelectSegments && - + Clear - + } { (didSelectSegments && !canClean) && - + Cannot start segment cleaning while the robot is busy - + } - + { diff --git a/frontend/src/map/actions/live_map_actions/ZoneActions.tsx b/frontend/src/map/actions/live_map_actions/ZoneActions.tsx index 2c51ccfe41e..44c3f5f2e1b 100644 --- a/frontend/src/map/actions/live_map_actions/ZoneActions.tsx +++ b/frontend/src/map/actions/live_map_actions/ZoneActions.tsx @@ -5,7 +5,7 @@ import { useZonePropertiesQuery, } from "../../../api"; import React from "react"; -import {Box, Button, CircularProgress, Container, Grid, Typography} from "@mui/material"; +import {Box, Button, CircularProgress, Container, Grid2, Typography} from "@mui/material"; import { useLongPress } from "use-long-press"; import {ActionButton} from "../../Styled"; import ZoneClientStructure from "../../structures/client_structures/ZoneClientStructure"; @@ -156,8 +156,8 @@ const ZoneActions = ( return ( <> - - + + )} - + { zoneProperties.iterationCount.max > 1 && - + - + } - + Add ({zones.length}/{zoneProperties.zoneCount.max}) - + { didSelectZones && - + Clear - + } { (didSelectZones && !canClean) && - + Cannot start zone cleaning while the robot is busy - + } - + { diff --git a/frontend/src/options/connectivity/AuthSettingsPage.tsx b/frontend/src/options/connectivity/AuthSettingsPage.tsx index 4c5f25978f1..646d281ee37 100644 --- a/frontend/src/options/connectivity/AuthSettingsPage.tsx +++ b/frontend/src/options/connectivity/AuthSettingsPage.tsx @@ -4,7 +4,7 @@ import { Divider, FormControl, FormControlLabel, - Grid, + Grid2, IconButton, Input, InputAdornment, @@ -74,8 +74,8 @@ const AuthSettings = (): React.ReactElement => { label="HTTP Basic Auth enabled" sx={{mb: 1}} /> - - + + { setConfigurationModified(true); }} /> - - + + Password { setConfigurationModified(true); }}/> - - + + { - - + + { > Save configuration - - + + ); }; @@ -172,7 +172,7 @@ const AuthSettings = (): React.ReactElement => { const AuthSettingsPage = (): React.ReactElement => { return ( - + { /> - + ); }; diff --git a/frontend/src/options/connectivity/MQTTConnectivityPage.tsx b/frontend/src/options/connectivity/MQTTConnectivityPage.tsx index 02b7110b558..124aaf7e41b 100644 --- a/frontend/src/options/connectivity/MQTTConnectivityPage.tsx +++ b/frontend/src/options/connectivity/MQTTConnectivityPage.tsx @@ -10,7 +10,7 @@ import { FormControlLabel, FormGroup, FormHelperText, - Grid, + Grid2, IconButton, Input, InputAdornment, @@ -154,12 +154,11 @@ const MQTTStatusComponent: React.FunctionComponent<{ return ( - - + + {getIconForState()} - - + {getContentForState()} - - + - @@ -191,9 +188,8 @@ const MQTTStatusComponent: React.FunctionComponent<{ {getMessageStats()} - - + @@ -208,9 +204,9 @@ const MQTTStatusComponent: React.FunctionComponent<{ {getConnectionStats()} - - - + + + ); }; @@ -828,8 +824,8 @@ const MQTTConnectivity = (): React.ReactElement => { - - + + { > Save configuration - - + + ); }; @@ -858,7 +854,7 @@ const MQTTConnectivityPage = (): React.ReactElement => { return ( - + { /> - + ); }; diff --git a/frontend/src/options/connectivity/NTPConnectivityPage.tsx b/frontend/src/options/connectivity/NTPConnectivityPage.tsx index 590c869e880..23db4e9f0af 100644 --- a/frontend/src/options/connectivity/NTPConnectivityPage.tsx +++ b/frontend/src/options/connectivity/NTPConnectivityPage.tsx @@ -3,7 +3,7 @@ import { Checkbox, Divider, FormControlLabel, - Grid, + Grid2, Skeleton, TextField, Typography, @@ -90,12 +90,11 @@ const NTPClientStatusComponent: React.FunctionComponent<{ return ( - - + + {getIconForState()} - - + {getContentForState()} - - + Current robot time: {status.robotTime} - - + + ); }; @@ -185,8 +183,8 @@ const NTPConnectivity = (): React.ReactElement => { label="NTP enabled" sx={{mb: 1}} /> - - + + { setConfigurationModified(true); }} /> - - + + { setConfigurationModified(true); }} /> - - + + { setConfigurationModified(true); }} /> - - + + { setConfigurationModified(true); }} /> - - + + { - - + + { > Save configuration - - + + ); }; @@ -297,7 +295,7 @@ const NTPConnectivityPage = (): React.ReactElement => { return ( - + { - + ); }; diff --git a/frontend/src/options/connectivity/NetworkAdvertisementSettingsPage.tsx b/frontend/src/options/connectivity/NetworkAdvertisementSettingsPage.tsx index 1840b8f169d..b4c79058eac 100644 --- a/frontend/src/options/connectivity/NetworkAdvertisementSettingsPage.tsx +++ b/frontend/src/options/connectivity/NetworkAdvertisementSettingsPage.tsx @@ -3,7 +3,7 @@ import { Checkbox, Divider, FormControlLabel, - Grid, + Grid2, Skeleton, TextField, Typography @@ -77,8 +77,8 @@ const NetworkAdvertisementSettings = (): React.ReactElement => { label="Network Advertisement enabled" sx={{mb: 1, marginTop: "1rem", userSelect: "none"}} /> - - + + { readOnly: true, }} /> - - + + { - - + + { > Save configuration - - + + ); }; @@ -135,7 +135,7 @@ const NetworkAdvertisementSettings = (): React.ReactElement => { const NetworkAdvertisementSettingsPage = (): React.ReactElement => { return ( - + { - + ); }; diff --git a/frontend/src/options/connectivity/WifiConnectivityPage.tsx b/frontend/src/options/connectivity/WifiConnectivityPage.tsx index 6f67fdde1a0..4c358ca3306 100644 --- a/frontend/src/options/connectivity/WifiConnectivityPage.tsx +++ b/frontend/src/options/connectivity/WifiConnectivityPage.tsx @@ -8,7 +8,7 @@ import { DialogTitle, Divider, FormControl, - Grid, + Grid2, IconButton, Input, InputAdornment, @@ -146,12 +146,11 @@ const WifiStatusComponent: React.FunctionComponent<{ return ( - - + + {getIconForState()} - - + {getContentForState()} - - + + ); }; @@ -219,8 +218,8 @@ const WifiConnectivity = (): React.ReactElement => { { properties.provisionedReconfigurationSupported && - - + + { setConfigurationModified(true); }} /> - - + + PSK/Password { setConfigurationModified(true); }}/> - - + + } { @@ -290,8 +289,8 @@ const WifiConnectivity = (): React.ReactElement => { { properties.provisionedReconfigurationSupported && - - + + { > Save configuration - - + + } { return ( - + { - + ); }; diff --git a/frontend/src/robot/ManualControl.tsx b/frontend/src/robot/ManualControl.tsx index a99b7c72550..a93f39aa570 100644 --- a/frontend/src/robot/ManualControl.tsx +++ b/frontend/src/robot/ManualControl.tsx @@ -3,7 +3,7 @@ import { Box, Button, FormControlLabel, - Grid, + Grid2, Stack, Switch, Typography, @@ -136,7 +136,7 @@ const ManualControlInternal: React.FunctionComponent = (): React.ReactElement => return React.useMemo(() => { return ( - + { loading && @@ -144,7 +144,7 @@ const ManualControlInternal: React.FunctionComponent = (): React.ReactElement => } {!loading && controls} - + ); }, [loading, controls]); diff --git a/frontend/src/robot/TotalStatistics.tsx b/frontend/src/robot/TotalStatistics.tsx index 1b1fa3907ac..e664bf2204d 100644 --- a/frontend/src/robot/TotalStatistics.tsx +++ b/frontend/src/robot/TotalStatistics.tsx @@ -6,7 +6,7 @@ import { CardMedia, Dialog, DialogActions, DialogContent, DialogTitle, - Grid, + Grid2, IconButton, Skeleton, Typography, @@ -53,11 +53,10 @@ const StatisticsGridItem: React.FunctionComponent<{ dataPoint: ValetudoDataPoint return ( <> - + - - + - - + + { {mostRecentAchievement?.description || "No achievement yet"} } - - + {getHumanReadableStatValue(dataPoint)} - - + - - + + - - + + - + { @@ -120,7 +117,7 @@ const StatisticsGridItem: React.FunctionComponent<{ dataPoint: ValetudoDataPoint - + {[...statisticsAchievements[dataPoint.type]].reverse().map((achievement, i) => { const notYetAchievedAchievement : StatisticsAchievement = { value: achievement.value, @@ -130,11 +127,10 @@ const StatisticsGridItem: React.FunctionComponent<{ dataPoint: ValetudoDataPoint const achievementToDisplay = dataPoint.value >= achievement.value ? achievement : notYetAchievedAchievement; return ( - + - - + - - + + { {achievementToDisplay.description} } - - + + - + ); })} - + @@ -292,9 +288,9 @@ const TotalStatisticsInternal: React.FunctionComponent = (): React.ReactElement }); return ( - + {statistics} - + ); }, [totalStatisticsError, totalStatisticsPending, totalStatisticsState]); }; diff --git a/frontend/src/robot/capabilities/CapabilityLayout.tsx b/frontend/src/robot/capabilities/CapabilityLayout.tsx index 535cb386905..51dca0936b7 100644 --- a/frontend/src/robot/capabilities/CapabilityLayout.tsx +++ b/frontend/src/robot/capabilities/CapabilityLayout.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Grid, useMediaQuery, useTheme} from "@mui/material"; +import {Grid2, useMediaQuery, useTheme} from "@mui/material"; import Masonry from "@mui/lab/Masonry"; import ReloadableCard from "../../components/ReloadableCard"; @@ -18,9 +18,9 @@ export const CapabilityContainer: React.FunctionComponent<{ children: React.Reac ); } else { return ( - + {children} - + ); } }; @@ -56,9 +56,9 @@ export const CapabilityItem: React.FunctionComponent< return content; } else { return ( - + {content} - + ); } }; diff --git a/frontend/src/robot/capabilities/Quirks.tsx b/frontend/src/robot/capabilities/Quirks.tsx index 136153f6c49..78b0359d92c 100644 --- a/frontend/src/robot/capabilities/Quirks.tsx +++ b/frontend/src/robot/capabilities/Quirks.tsx @@ -3,7 +3,7 @@ import { Box, Divider, FormControl, - Grid, + Grid2, MenuItem, Paper, Select, @@ -35,8 +35,7 @@ const QuirkControl: FunctionComponent<{ quirk: Quirk, style?: React.CSSPropertie return ( - - + ); }; @@ -151,7 +150,7 @@ const Quirks: FunctionComponent = () => { return ( - + { isRefreshing={quirksFetching} /> - + {quirksContent} - + - + ); }; diff --git a/frontend/src/valetudo/About.tsx b/frontend/src/valetudo/About.tsx index 880f5d9b444..4481db7a4e4 100644 --- a/frontend/src/valetudo/About.tsx +++ b/frontend/src/valetudo/About.tsx @@ -1,5 +1,5 @@ import PaperContainer from "../components/PaperContainer"; -import {Box, Grid} from "@mui/material"; +import {Box, Grid2} from "@mui/material"; import {Info as AboutIcon} from "@mui/icons-material"; import React from "react"; import ReactMarkdown from "react-markdown"; @@ -13,15 +13,14 @@ import DetailPageHeaderRow from "../components/DetailPageHeaderRow"; const About = (): React.ReactElement => { return ( - + } /> - { width: "100%" }} /> - + { {AboutText} - + ); }; diff --git a/frontend/src/valetudo/Help.tsx b/frontend/src/valetudo/Help.tsx index 0c3d46ccdd4..50455bafc2e 100644 --- a/frontend/src/valetudo/Help.tsx +++ b/frontend/src/valetudo/Help.tsx @@ -1,5 +1,5 @@ import PaperContainer from "../components/PaperContainer"; -import {Box, Grid} from "@mui/material"; +import {Box, Grid2} from "@mui/material"; import {Help as HelpIcon} from "@mui/icons-material"; import React from "react"; import ReactMarkdown from "react-markdown"; @@ -12,7 +12,7 @@ import DetailPageHeaderRow from "../components/DetailPageHeaderRow"; const Help = (): React.ReactElement => { return ( - + { {HelpText} - + ); }; diff --git a/frontend/src/valetudo/Log.tsx b/frontend/src/valetudo/Log.tsx index e2409d5b0b7..8259841cd05 100644 --- a/frontend/src/valetudo/Log.tsx +++ b/frontend/src/valetudo/Log.tsx @@ -1,7 +1,7 @@ import { alpha, FormControl, - Grid, + Grid2, InputBase, InputLabel, MenuItem, @@ -123,9 +123,8 @@ const Log = (): React.ReactElement => { } return ( - - + { columns={{xs: 4, sm: 12}} sx={{ mb: 2, - userSelect: "none" + userSelect: "none", + width: "100%" }} > - + @@ -152,8 +152,8 @@ const Log = (): React.ReactElement => { }} /> - - + + Current Level - - + + { @@ -189,10 +189,9 @@ const Log = (): React.ReactElement => { > - - - + + { }} logLines={filteredLog} /> - - + + ); }, [logData, logDataFetching, logError, logRefetch, logLevel, logLevelError, logLevelRefetch, mutateLogLevel, filter, setFilter]); diff --git a/frontend/src/valetudo/SystemInformation.tsx b/frontend/src/valetudo/SystemInformation.tsx index 4949eca9da3..2d7b1e72376 100644 --- a/frontend/src/valetudo/SystemInformation.tsx +++ b/frontend/src/valetudo/SystemInformation.tsx @@ -8,7 +8,7 @@ import { DialogContent, DialogTitle, Divider, - Grid, + Grid2, Paper, Skeleton, Stack, @@ -102,18 +102,18 @@ const SystemRuntimeInfo = (): React.ReactElement => { return ( - + {topItems.map(([header, body]) => { return ( - + {header} {body} - + ); })} - +