feat(ui): Add help for dnd, voice packs and the updater

frontend/src/robot/capabilities/DoNotDisturb.tsx

@@ -11,6 +11,7 @@ import {useCapabilitiesSupported} from "../../CapabilitiesProvider";
 import {LoadingButton, TimePicker} from "@mui/lab";
 import {deepCopy} from "../../utils";
 import {CapabilityItem} from "./CapabilityLayout";
+import {DoNotDisturbHelp} from "./res/DoNotDisturbHelp";
 
 const formatTime = (value: DoNotDisturbTime | undefined): string => {
     if (!value) {
@@ -121,7 +122,11 @@ const DoNotDisturbControl: FunctionComponent = () => {
 
     const loading = dndConfigurationUpdating || dndConfigurationFetching || !dndConfiguration;
     return (
-        <CapabilityItem title={"Do not disturb"} loading={loading}>
+        <CapabilityItem
+            title={"Do not disturb"}
+            loading={loading}
+            helpText={DoNotDisturbHelp}
+        >
             {dndConfigurationContent}
         </CapabilityItem>
     );

frontend/src/robot/capabilities/VoicePackManagement.tsx

@@ -9,6 +9,7 @@ import {
 import {useCapabilitiesSupported} from "../../CapabilitiesProvider";
 import {LoadingButton} from "@mui/lab";
 import {CapabilityItem} from "./CapabilityLayout";
+import {VoicepackHelp} from "./res/VoicepackHelp";
 
 const VoicePackControl: FunctionComponent = () => {
     const {
@@ -104,7 +105,11 @@ const VoicePackControl: FunctionComponent = () => {
 
     const loading = voicePackFetching || voicePackMutating || !voicePack;
     return (
-        <CapabilityItem title="Voice pack management" loading={loading}>
+        <CapabilityItem
+            title="Voice packs"
+            loading={loading}
+            helpText={VoicepackHelp}
+        >
             {voicePackContent}
         </CapabilityItem>
     );

frontend/src/robot/capabilities/res/DoNotDisturbHelp.ts

@@ -0,0 +1,21 @@
+export const DoNotDisturbHelp = `
+## Do not disturb
+
+Some firmwares allow you to define a do not disturb period where certain features of the robot are disabled.
+What exactly changes may differ based on robot vendor, model and firmware version.
+
+For example, the robot might not continue a partially finished task which has been interrupted due to the
+robot having to charge.
+As charging back up to 100% battery may take a few hours, it could happen that the robot attempts to continue cleaning
+at 3am, which is often considered undesirable.
+
+Another thing that can be affected by the DND setting is the auto empty dock as those are usually pretty loud.
+
+
+**Please note that DND times are evaluated and stored as UTC. They are only displayed in your current browser timezone
+for your convenience.**
+
+**If your country/state is taking part in that nonsensical Daylight Saving Time cult, you will have to
+manually shift the DND time back and forth each time you switch from and to DST.**
+
+`;

frontend/src/robot/capabilities/res/VoicepackHelp.ts

@@ -0,0 +1,22 @@
+export const VoicepackHelp = `
+## Voice packs
+
+Custom voice packs are a bit more complicated as the exact format differs depending on your choice of robot.
+
+As I personally don't really care about them, this feature is a bit rough around the edges.
+For me, these things are first and foremost tools that should simply work and do so reliably.
+Thus, I'm fine with it just talking english as that's perfectly serviceable for a tool.
+
+If you want to install install a custom one anyways, you will need a voicepack in the correct format as required by your
+robot hosted on some http server. Note that the official CDN is often blocked in the robots firmware meaning that just
+using the official URL likely won't work.
+
+Depending on the model of robot, you will also need a hash of that voice pack file.
+The type of hash differs depending on the firmware.
+
+Furthermore, you'll also need to specify a language code. That value largely doesn't matter much unless you use a reserved code.
+"EN", "CN" etc are often codes reserved for the inbuilt voice packs of the firmware.
+
+Usually it's possible to revert to the currently installed voice pack by specifying one of those inbuilt voicepack codes during the install.
+
+`;

frontend/src/settings/Updater.tsx

@@ -14,14 +14,18 @@ import {
     ExpandMore as ExpandMoreIcon,
     UpdateDisabled as UpdaterDisabledIcon,
     CheckCircle as NoUpdateRequiredIcon,
-    HourglassTop as BusyIcon
+    HourglassTop as BusyIcon,
+    Help as HelpIcon
 } from "@mui/icons-material";
 import {
-    Accordion, AccordionDetails,
+    Accordion,
+    AccordionDetails,
     AccordionSummary,
     Box,
     Divider,
     Grid,
+    IconButton,
+    styled,
     Typography
 } from "@mui/material";
 import React, {FunctionComponent} from "react";
@@ -34,6 +38,14 @@ import ReactMarkdown from "react-markdown";
 import gfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import PaperContainer from "../components/PaperContainer";
+import HelpDialog from "../components/HelpDialog";
+import {UpdaterHelp} from "./res/UpdaterHelp";
+
+const StyledLoadingButton = styled(LoadingButton)(({theme}) => {
+    return {
+        minWidth: 0
+    };
+});
 
 const Updater = (): JSX.Element => {
     const {
@@ -44,6 +56,8 @@ const Updater = (): JSX.Element => {
         refetch: refetchUpdaterState,
     } = useUpdaterStateQuery();
 
+    const [helpDialogOpen, setHelpDialogOpen] = React.useState(false);
+
     return (
         <PaperContainer>
             <Grid container direction="row">
@@ -56,15 +70,32 @@ const Updater = (): JSX.Element => {
                             </Grid>
                         </Grid>
                         <Grid item>
-                            <LoadingButton
-                                loading={updaterStateFetching}
-                                onClick={() => {
-                                    refetchUpdaterState();
-                                }}
-                                title="Refresh"
-                            >
-                                <RefreshIcon/>
-                            </LoadingButton>
+                            <Grid container>
+                                <Grid
+                                    item
+                                    style={{marginTop:"-0.125rem"}} //:(
+                                >
+                                    <IconButton
+                                        onClick={() => {
+                                            return setHelpDialogOpen(true);
+                                        }}
+                                        title="Help"
+                                    >
+                                        <HelpIcon/>
+                                    </IconButton>
+                                </Grid>
+                                <Grid item>
+                                    <StyledLoadingButton
+                                        loading={updaterStateFetching}
+                                        onClick={() => {
+                                            refetchUpdaterState();
+                                        }}
+                                        title="Refresh"
+                                    >
+                                        <RefreshIcon/>
+                                    </StyledLoadingButton>
+                                </Grid>
+                            </Grid>
                         </Grid>
                     </Grid>
                     <Divider sx={{mt: 1}}/>
@@ -76,6 +107,13 @@ const Updater = (): JSX.Element => {
                     />
                 </Box>
             </Grid>
+            <HelpDialog
+                dialogOpen={helpDialogOpen}
+                setDialogOpen={(open: boolean) => {
+                    setHelpDialogOpen(open);
+                }}
+                helpText={UpdaterHelp}
+            />
         </PaperContainer>
     );
 };

frontend/src/settings/res/UpdaterHelp.ts

@@ -0,0 +1,22 @@
+export const UpdaterHelp = `
+## Updater
+
+The Valetudo updater is a convenience feature aiming to make life with Valetudo a bit easier.
+
+As it is built with privacy in mind, you will have to manually click a button to make it search for newer versions of Valetudo.
+No daily update check means no daily pings to some external server.
+
+By default, it's polling the GitHub API, meaning that I am not able to collect any data about you.
+
+**Note: The updater will always try to update you to the next chronological release. If you're multiple releases behind,
+you will have to update multiple times in a row.**
+
+As the updater is just a convenience feature, there might be situations in which it doesn't work. In those situations,
+you will have to do a manual update, which usually involves SSH access to the robot.
+
+Sometimes, a configuration change might enable you to use the updater. In other instances, your model of robot might not
+be able to use the updater at all as there's not enough storage built in. This is not a bug. That's just how it is.
+
+It is also worth noting that the updater won't update the robots firmware. It only updates the Valetudo binary.
+
+`;