feat(ui): Improve first-time usability by adding titles to buttons an…

…d more minor changes
Hypfer · Dec 30, 2021 · 6126718 · 6126718
1 parent 17e1d5f
commit 6126718
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 24 deletions.
diff --git a/frontend/src/components/ReloadableCard.tsx b/frontend/src/components/ReloadableCard.tsx
@@ -46,7 +46,7 @@ const ReloadableCard: FunctionComponent<ReloadableCardProps> = ({
                     </Grid>
                     <Grid item>
                         {reloadButton || (onReload && (
-                            <TopRightIconButton loading={loading} onClick={onReload}>
+                            <TopRightIconButton loading={loading} onClick={onReload} title="Refresh">
                                 <RefreshIcon/>
                             </TopRightIconButton>
                         ))}

diff --git a/frontend/src/components/ValetudoAppBar.tsx b/frontend/src/components/ValetudoAppBar.tsx
@@ -377,6 +377,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                             onClick={() => {
                                 setDrawerOpen(true);
                             }}
+                            title="Menu"
                         >
                             <MenuIcon/>
                         </IconButton>

diff --git a/frontend/src/components/ValetudoEvents.tsx b/frontend/src/components/ValetudoEvents.tsx
@@ -85,6 +85,7 @@ const ValetudoEvents = (): JSX.Element => {
                 aria-label="Events"
                 onClick={handleMenu}
                 color="inherit"
+                title="Events and Notifications"
             >
                 {icon}
             </IconButton>

diff --git a/frontend/src/controls/PresetSelection.tsx b/frontend/src/controls/PresetSelection.tsx
@@ -169,6 +169,7 @@ const PresetSelectionControl = (props: PresetSelectionProps): JSX.Element => {
                         onClick={() => {
                             setPresetSelectionSliderOpen(!presetSelectionSliderOpen);
                         }}
+                        style={{cursor: "pointer"}}
                     >
                         <Grid item>{icon}</Grid>
                         <Grid item sx={{marginTop: "-8px" /* ugh */}}>

diff --git a/frontend/src/map/actions/edit_map_actions/HelpAction.tsx b/frontend/src/map/actions/edit_map_actions/HelpAction.tsx
@@ -31,6 +31,7 @@ const ModeSwitchAction: React.FunctionComponent<{ helpDialogOpen: boolean, setHe
                 onClick={() => {
                     setHelpDialogOpen(true);
                 }}
+                title="Help"
             >
                 <HelpIcon/>
             </ActionButton>

diff --git a/frontend/src/map/actions/live_map_actions/LocateAction.tsx b/frontend/src/map/actions/live_map_actions/LocateAction.tsx
@@ -40,6 +40,7 @@ const LocateAction = (
                 size="medium"
                 variant="extended"
                 onClick={handleClick}
+                title="Locate"
             >
                 <NotListedLocation/>
             </ActionButton>

diff --git a/frontend/src/map/actions/live_map_actions/SegmentActions.tsx b/frontend/src/map/actions/live_map_actions/SegmentActions.tsx
@@ -118,6 +118,7 @@ const SegmentActions = (
                             textTransform: "initial"
                         }}
                         onClick={handleIterationToggle}
+                        title="Iteration Count"
                     >
                         {iterationCount}x
                     </ActionButton>

diff --git a/frontend/src/map/actions/live_map_actions/ZoneActions.tsx b/frontend/src/map/actions/live_map_actions/ZoneActions.tsx
@@ -147,6 +147,7 @@ const ZoneActions = (
                             textTransform: "initial"
                         }}
                         onClick={handleIterationToggle}
+                        title="Iteration Count"
                     >
                         {iterationCount}x
                     </ActionButton>

diff --git a/frontend/src/robot/Consumables.tsx b/frontend/src/robot/Consumables.tsx
@@ -22,6 +22,7 @@ import LoadingFade from "../components/LoadingFade";
 import ConfirmationDialog from "../components/ConfirmationDialog";
 import HelpDialog from "../components/HelpDialog";
 import {ConsumablesHelp} from "./res/ConsumablesHelp";
+import {LoadingButton} from "@mui/lab";
 
 const strokeWidth = 2;
 const highlightFill = "#ffaa00";
@@ -52,9 +53,14 @@ const RestConsumable: FunctionComponent<{ consumable: ConsumableId }> = ({consum
 
     return (
         <>
-            <IconButton color="warning" size="small" onClick={() => {
-                setDialogOpen(true);
-            }}>
+            <IconButton
+                color="warning"
+                size="small"
+                onClick={() => {
+                    setDialogOpen(true);
+                }}
+                title="Reset consumable"
+            >
                 <UndoIcon/>
             </IconButton>
             <ConfirmationDialog title="Reset consumable?" text="Do you really want to reset this consumable?"
@@ -210,6 +216,7 @@ const ConsumablesInternal = (): JSX.Element => {
     const {
         data: consumablesData,
         isLoading: consumablesLoading,
+        isFetching: consumablesFetching,
         isError: consumablesError,
         refetch: consumablesRefetch,
     } = useConsumableStateQuery();
@@ -266,19 +273,22 @@ const ConsumablesInternal = (): JSX.Element => {
                         );
                     })}
                     <Grid item>
-                        <IconButton
+                        <LoadingButton
+                            loading={consumablesFetching}
                             onClick={() => {
                                 return consumablesRefetch();
                             }}
+                            title="Refresh"
                         >
                             <RefreshIcon/>
-                        </IconButton>
+                        </LoadingButton>
                     </Grid>
                     <Grid item sx={{marginLeft: "auto"}}>
                         <IconButton
                             onClick={() => {
                                 return setHelpDialogOpen(true);
                             }}
+                            title="Help"
                         >
                             <HelpIcon/>
                         </IconButton>
@@ -318,7 +328,7 @@ const ConsumablesInternal = (): JSX.Element => {
                 />
             </>
         );
-    }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, selectedConsumable, helpDialogOpen]);
+    }, [consumablesData, consumablesLoading, consumablesError, consumablesRefetch, consumablesFetching, selectedConsumable, helpDialogOpen]);
 };
 
 const Consumables = (): JSX.Element => {

diff --git a/frontend/src/settings/About.tsx b/frontend/src/settings/About.tsx
@@ -45,6 +45,7 @@ const SystemRuntimeInfo = (): JSX.Element => {
     const {
         data: systemRuntimeInfo,
         isLoading: systemRuntimeInfoLoading,
+        isFetching: systemRuntimeInfoFetching,
         refetch: fetchSystemRuntimeInfo,
     } = useSystemRuntimeInfoQuery();
 
@@ -206,7 +207,7 @@ const SystemRuntimeInfo = (): JSX.Element => {
     return (
         <ReloadableCard
             title="Runtime Information"
-            loading={systemRuntimeInfoLoading}
+            loading={systemRuntimeInfoFetching}
             onReload={() => {
                 return fetchSystemRuntimeInfo();
             }}
@@ -229,6 +230,7 @@ const About = (): JSX.Element => {
     const {
         data: systemHostInfo,
         isLoading: systemHostInfoLoading,
+        isFetching: systemHostInfoFetching,
         refetch: fetchSystemHostInfo,
     } = useSystemHostInfoQuery();
 
@@ -383,7 +385,7 @@ const About = (): JSX.Element => {
                         item
                         style={{flexGrow: 1}}
                     >
-                        <ReloadableCard title="System Host Information" loading={systemHostInfoLoading}
+                        <ReloadableCard title="System Host Information" loading={systemHostInfoFetching}
                             boxShadow={3}
                             onReload={() => {
                                 return fetchSystemHostInfo();

diff --git a/frontend/src/settings/Log.tsx b/frontend/src/settings/Log.tsx
@@ -3,7 +3,6 @@ import {
     Container,
     FormControl,
     Grid,
-    IconButton,
     InputBase,
     InputLabel,
     MenuItem,
@@ -17,6 +16,7 @@ import React from "react";
 import styles from "./Log.module.css";
 import {LogLevel, LogLine, useLogLevelMutation, useLogLevelQuery, useValetudoLogQuery} from "../api";
 import LogViewer from "../components/LogViewer";
+import {LoadingButton} from "@mui/lab";
 
 const Search = styled("div")(({theme}) => {
     return {
@@ -74,6 +74,7 @@ const Log = (): JSX.Element => {
 
     const {
         data: logData,
+        isFetching: logDataFetching,
         isError: logError,
         refetch: logRefetch,
     } = useValetudoLogQuery();
@@ -179,14 +180,16 @@ const Log = (): JSX.Element => {
                             </FormControl>
                         </Grid>
                         <Grid item xs={1} sm={1}>
-                            <IconButton
+                            <LoadingButton
+                                loading={logDataFetching}
                                 onClick={() => {
                                     logLevelRefetch().then();
                                     logRefetch().then();
                                 }}
+                                title="Refresh"
                             >
                                 <RefreshIcon/>
-                            </IconButton>
+                            </LoadingButton>
                         </Grid>
                     </Grid>
                     <Grid
@@ -206,7 +209,7 @@ const Log = (): JSX.Element => {
                 </Grid>
             </Paper>
         );
-    }, [logData, logError, logRefetch, logLevel, logLevelError, logLevelRefetch, mutateLogLevel, filter, setFilter]);
+    }, [logData, logDataFetching, logError, logRefetch, logLevel, logLevelError, logLevelRefetch, mutateLogLevel, filter, setFilter]);
 
     return (
         <Container>

diff --git a/frontend/src/settings/Updater.tsx b/frontend/src/settings/Updater.tsx
@@ -23,7 +23,6 @@ import {
     Container,
     Divider,
     Grid,
-    IconButton,
     Paper,
     Typography
 } from "@mui/material";
@@ -41,6 +40,7 @@ const Updater = (): JSX.Element => {
     const {
         data: updaterState,
         isLoading: updaterStateLoading,
+        isFetching: updaterStateFetching,
         isError: updaterStateError,
         refetch: refetchUpdaterState,
     } = useUpdaterStateQuery();
@@ -58,11 +58,15 @@ const Updater = (): JSX.Element => {
                                 </Grid>
                             </Grid>
                             <Grid item>
-                                <IconButton onClick={() => {
-                                    refetchUpdaterState();
-                                }}>
+                                <LoadingButton
+                                    loading={updaterStateFetching}
+                                    onClick={() => {
+                                        refetchUpdaterState();
+                                    }}
+                                    title="Refresh"
+                                >
                                     <RefreshIcon/>
-                                </IconButton>
+                                </LoadingButton>
                             </Grid>
                         </Grid>
                         <Divider sx={{mt: 1}}/>

diff --git a/frontend/src/settings/connectivity/NTP.tsx b/frontend/src/settings/connectivity/NTP.tsx
@@ -5,7 +5,6 @@ import {
     Divider,
     FormControlLabel,
     Grid,
-    IconButton,
     Stack,
     TextField,
     Typography
@@ -23,8 +22,9 @@ import {formatRelative} from "date-fns";
 import {Refresh as RefreshIcon} from "@mui/icons-material";
 import InfoBox from "../../components/InfoBox";
 
-const NTPClientStateComponent: React.FunctionComponent<{ state: NTPClientState, refetch: () => void }> = ({
+const NTPClientStateComponent: React.FunctionComponent<{ state: NTPClientState, loading: boolean, refetch: () => void }> = ({
     state,
+    loading,
     refetch
 }) => {
     return (
@@ -33,9 +33,13 @@ const NTPClientStateComponent: React.FunctionComponent<{ state: NTPClientState,
                 <Typography variant="h6" title={state.timestamp}>
                     Current state active since {formatRelative(new Date(state.timestamp), new Date())}
                 </Typography>
-                <IconButton onClick={refetch}>
+                <LoadingButton
+                    loading={loading}
+                    onClick={refetch}
+                    title="Refresh"
+                >
                     <RefreshIcon/>
-                </IconButton>
+                </LoadingButton>
             </Stack>
             {state.type && <Typography variant="h5" color="red">Error: {state.type}</Typography>}
             {state.message && (
@@ -52,6 +56,7 @@ const NTP = (): JSX.Element => {
     const {
         data: ntpClientState,
         isLoading: ntpClientStateLoading,
+        isFetching: ntpClientStateFetching,
         isError: ntpClientStateError,
         refetch: refetchNTPClientState,
     } = useNTPClientStateQuery();
@@ -92,7 +97,11 @@ const NTP = (): JSX.Element => {
 
     return (
         <Container>
-            <NTPClientStateComponent state={ntpClientState} refetch={refetchNTPClientState}/>
+            <NTPClientStateComponent
+                state={ntpClientState}
+                loading={ntpClientStateFetching}
+                refetch={refetchNTPClientState}
+            />
             <Divider sx={{mt: 1}}/>
             <FormControlLabel control={<Checkbox checked={enabled} onChange={e => {
                 setEnabled(e.target.checked);

diff --git a/frontend/src/settings/timers/Timers.tsx b/frontend/src/settings/timers/Timers.tsx
@@ -118,6 +118,7 @@ const Timers = (): JSX.Element => {
                             onClick={() => {
                                 return setHelpDialogOpen(true);
                             }}
+                            title="Help"
                         >
                             <HelpIcon/>
                         </IconButton>
@@ -159,7 +160,12 @@ const Timers = (): JSX.Element => {
                             marginLeft: "auto"
                         }}
                     >
-                        <Fab color="primary" aria-label="add" onClick={addTimer}>
+                        <Fab
+                            color="primary"
+                            aria-label="add"
+                            onClick={addTimer}
+                            title="Add new timer"
+                        >
                             <AddIcon />
                         </Fab>
                     </Grid>