feat(ui): Add help button + modal to consumables view

frontend/src/components/HelpDialog.module.css

@@ -0,0 +1,4 @@
+.reactMarkDown {
+    padding: 1rem;
+    overflow-y: auto;
+}

frontend/src/components/HelpDialog.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import {Button, Dialog, DialogActions, styled} from "@mui/material";
+import style from "./HelpDialog.module.css";
+
+const StyledDialog = styled(Dialog)(({ theme }) => {
+    return {
+        "& .MuiDialogContent-root": {
+            padding: theme.spacing(2),
+        },
+        "& .MuiDialogActions-root": {
+            padding: theme.spacing(1),
+        },
+    };
+});
+
+const HelpDialog: React.FunctionComponent<{
+    dialogOpen: boolean,
+    setDialogOpen: (newOpen: boolean) => void,
+    helpText: string
+}> = ({
+    dialogOpen,
+    setDialogOpen,
+    helpText
+}): JSX.Element => {
+    return (
+        <StyledDialog
+            onClose={() =>{
+                setDialogOpen(false);
+            }}
+            open={dialogOpen}
+        >
+            <ReactMarkdown
+                remarkPlugins={[gfm]}
+                rehypePlugins={[rehypeRaw]}
+                className={style.reactMarkDown}
+            >
+                {helpText}
+            </ReactMarkdown>
+            <DialogActions>
+                <Button autoFocus onClick={() => {
+                    setDialogOpen(false);
+                }}>
+                    OK
+                </Button>
+            </DialogActions>
+        </StyledDialog>
+    );
+};
+
+export default HelpDialog;

frontend/src/robot/Consumables.tsx

@@ -1,11 +1,26 @@
 import React, {FunctionComponent} from "react";
-import {Refresh as RefreshIcon, Undo as UndoIcon} from "@mui/icons-material";
-import {Box, Container, Grid, IconButton, Stack, Typography, useTheme} from "@mui/material";
+import {
+    Refresh as RefreshIcon,
+    Undo as UndoIcon,
+    Help as HelpIcon
+} from "@mui/icons-material";
+
+import {
+    Box,
+    Container,
+    Grid,
+    IconButton,
+    Stack,
+    Typography,
+    useTheme
+} from "@mui/material";
 import {Capability, ConsumableId, ConsumableState, useConsumableResetMutation, useConsumableStateQuery} from "../api";
 import {convertSecondsToHumans, getConsumableName} from "../utils";
 import {useCapabilitiesSupported} from "../CapabilitiesProvider";
 import LoadingFade from "../components/LoadingFade";
 import ConfirmationDialog from "../components/ConfirmationDialog";
+import HelpDialog from "../components/HelpDialog";
+import {ConsumablesHelp} from "./res/ConsumablesHelp";
 
 const strokeWidth = 2;
 const highlightFill = "#ffaa00";
@@ -199,6 +214,7 @@ const ConsumablesInternal = (): JSX.Element => {
     } = useConsumableStateQuery();
 
     const [selectedConsumable, setSelectedConsumable] = React.useState<null | ConsumableId>(null);
+    const [helpDialogOpen, setHelpDialogOpen] = React.useState(false);
 
     return React.useMemo(() => {
         if (consumablesLoading) {
@@ -257,6 +273,15 @@ const ConsumablesInternal = (): JSX.Element => {
                             <RefreshIcon/>
                         </IconButton>
                     </Grid>
+                    <Grid item sx={{marginLeft: "auto"}}>
+                        <IconButton
+                            onClick={() => {
+                                return setHelpDialogOpen(true);
+                            }}
+                        >
+                            <HelpIcon/>
+                        </IconButton>
+                    </Grid>
                 </Grid>
                 <Grid container
                     alignItems={"flex-start"}
@@ -283,9 +308,16 @@ const ConsumablesInternal = (): JSX.Element => {
                         <DustbinConsumables selectedConsumable={selectedConsumable} consumables={consumablesData}/>
                     </Grid>
                 </Grid>
+                <HelpDialog
+                    dialogOpen={helpDialogOpen}
+                    setDialogOpen={(open: boolean) => {
+                        setHelpDialogOpen(open);
+                    }}
+                    helpText={ConsumablesHelp}
+                />
             </>
         );
-    }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, selectedConsumable]);
+    }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, selectedConsumable, helpDialogOpen]);
 };
 
 const Consumables = (): JSX.Element => {

frontend/src/robot/res/ConsumablesHelp.ts

@@ -0,0 +1,41 @@
+export const ConsumablesHelp = `
+## Consumables
+
+Consumables are components of the robot that need periodic cleaning, replacement or other maintenance work.
+
+They come in two flavours which are basically the same
+- operating hours left
+- percent left
+
+At some point, they will become depleted, requiring you to do maintenance and reset them in the Valetudo UI.
+This will restore them to either their manufacturer-dependent design operating hours or 100%.
+
+Not maintaining your consumables may lead to performance degradation.<br/>
+Still, Valetudo recommends manual inspection of the part in question. You _may_ be able to use it longer than the manufacturer recommends.
+
+
+To figure out, which part of your robot is the consumable in question, you can hover your mouse over the remaining time/percent.
+The robot part will now light up to show you where it is.
+
+
+### Types of consumables
+
+There are various types of consumables that require different treatment.
+
+#### Brushes
+
+Brushes come in different types such as main or side.
+At some point, they are worn out and have to be replaced.
+
+They often also require removal of tangled hair or similar for optimal performance so you should keep an eye on them.
+
+#### Filters
+
+Vacuum-robots usually have some kind of HEPA filter which needs periodic cleaning and replacing when it is worn out.
+
+#### Sensors
+
+Your robot has a few sensors such as cliff- or wall-distance-sensors, which are used for navigation and might get obstructed by dirt, debris, cobwebs or similar.
+Cleaning them can usually be done with a soft cloth. Make sure to not scratch the sensors as they are vital to the robots operation.
+
+`;