Skip to content

Commit

Permalink
refactor(ui): Reduce code duplication
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hypfer
Hypfer committed Oct 30, 2022
1 parent dd5198f commit 23c5024
Show file tree
Hide file tree
Showing 10 changed files with 184 additions and 229 deletions.
93 changes: 93 additions & 0 deletions frontend/src/components/DetailPageHeaderRow.tsx
View file
@@ -0,0 +1,93 @@
import {Divider, Grid, 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";
import HelpDialog from "./HelpDialog";

const TopRightRefreshButton = styled(LoadingButton)(({theme}) => {
return {
minWidth: 0
};
});

interface DetailPageHeaderRowProps {
title: string;
icon: JSX.Element;
helpText?: string,
onRefreshClick?: () => void,
isRefreshing?: boolean
}

const DetailPageHeaderRow: FunctionComponent<DetailPageHeaderRowProps> = ({
title,
icon,
helpText,
onRefreshClick,
isRefreshing
}): JSX.Element => {
const [helpDialogOpen, setHelpDialogOpen] = React.useState(false);

return (
<>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
{icon}
</Grid>
<Grid item>
<Typography>{title}</Typography>
</Grid>
</Grid>
<Grid item>
<Grid container>
{
helpText !== undefined &&
<>
<Grid
item
style={{marginTop:"-0.125rem"}} //:(
>
<IconButton
onClick={() => {
return setHelpDialogOpen(true);
}}
title="Help"
>
<HelpIcon/>
</IconButton>
</Grid>

<HelpDialog
dialogOpen={helpDialogOpen}
setDialogOpen={(open: boolean) => {
setHelpDialogOpen(open);
}}
helpText={helpText}
/>
</>
}

{
onRefreshClick !== undefined &&
<Grid item>
<TopRightRefreshButton
loading={isRefreshing ?? false}
onClick={onRefreshClick}
title="Refresh"
>
<RefreshIcon/>
</TopRightRefreshButton>
</Grid>
}
</Grid>
</Grid>
</Grid>
<Divider sx={{mt: 1}}/>
</>
);
};

export default DetailPageHeaderRow;
80 changes: 15 additions & 65 deletions frontend/src/robot/capabilities/Quirks.tsx
View file
Expand Up @@ -4,12 +4,10 @@ import {
Divider,
FormControl,
Grid,
IconButton,
MenuItem,
Paper,
Select,
SelectChangeEvent,
styled,
Typography
} from "@mui/material";
import {
Expand All @@ -19,21 +17,9 @@ import {
} from "../../api";

import {QuirksHelp} from "./res/QuirksHelp";
import {
Help as HelpIcon,
Refresh as RefreshIcon,
Star as QuirksIcon,
} from "@mui/icons-material";
import {Star as QuirksIcon} from "@mui/icons-material";
import PaperContainer from "../../components/PaperContainer";
import {LoadingButton} from "@mui/lab";
import HelpDialog from "../../components/HelpDialog";

const StyledLoadingButton = styled(LoadingButton)(({theme}) => {
return {
minWidth: 0
};
});

import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";

const QuirkControl: FunctionComponent<{ quirk: Quirk, style?: React.CSSProperties }> = (props) => {
const {mutate: setQuirkValue, isLoading: quirkValueSetting} = useSetQuirkValueMutation();
Expand Down Expand Up @@ -111,8 +97,6 @@ const QuirkControl: FunctionComponent<{ quirk: Quirk, style?: React.CSSPropertie
};

const Quirks: FunctionComponent = () => {
const [helpDialogOpen, setHelpDialogOpen] = React.useState(false);

const {
data: quirks,
isError: quirksLoadingError,
Expand Down Expand Up @@ -169,57 +153,23 @@ const Quirks: FunctionComponent = () => {
<PaperContainer>
<Grid container direction="row">
<Box style={{width: "100%"}}>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<QuirksIcon/>
</Grid>
<Grid item>
<Typography>Quirks</Typography>
</Grid>
</Grid>
<Grid item>
<Grid container>
<Grid
item
style={{marginTop:"-0.125rem"}} //:(
>
<IconButton
onClick={() => {
return setHelpDialogOpen(true);
}}
title="Help"
>
<HelpIcon/>
</IconButton>
</Grid>
<Grid item>
<StyledLoadingButton
loading={quirksFetching}
onClick={() => {
refetchQuirks();
}}
title="Refresh"
>
<RefreshIcon/>
</StyledLoadingButton>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider sx={{mt: 1}} style={{marginBottom: "1rem"}}/>
<Grid container direction="column">
<DetailPageHeaderRow
title="Quirks"
icon={<QuirksIcon/>}
helpText={QuirksHelp}
onRefreshClick={() => {
refetchQuirks().catch(() => {
/* intentional */
});
}}
isRefreshing={quirksFetching}
/>

<Grid container direction="column" style={{marginTop: "1rem"}}>
{quirksContent}
</Grid>
</Box>
</Grid>
<HelpDialog
dialogOpen={helpDialogOpen}
setDialogOpen={(open: boolean) => {
setHelpDialogOpen(open);
}}
helpText={QuirksHelp}
/>
</PaperContainer>
);
};
Expand Down
16 changes: 5 additions & 11 deletions frontend/src/settings/connectivity/AuthSettings.tsx
View file
Expand Up @@ -23,6 +23,7 @@ import {
VisibilityOff as VisibilityOffIcon,
VpnKey as BasicAuthIcon
} from "@mui/icons-material";
import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";

const AuthSettings = (): JSX.Element => {
const {
Expand Down Expand Up @@ -62,17 +63,10 @@ const AuthSettings = (): JSX.Element => {
<PaperContainer>
<Grid container direction="row">
<Box style={{width: "100%"}}>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<BasicAuthIcon/>
</Grid>
<Grid item>
<Typography>HTTP Basic Auth</Typography>
</Grid>
</Grid>
</Grid>
<Divider sx={{mt: 1}}/>
<DetailPageHeaderRow
title="HTTP Basic Auth"
icon={<BasicAuthIcon/>}
/>

<FormControlLabel
control={
Expand Down
29 changes: 16 additions & 13 deletions frontend/src/settings/connectivity/MQTTConnectivity.tsx
View file
Expand Up @@ -30,7 +30,7 @@ import {
LinkOff as MQTTDisconnectedIcon,
Link as MQTTConnectedIcon,
Sync as MQTTConnectingIcon,
Warning as MQTTErrorIcon
Warning as MQTTErrorIcon,
} from "@mui/icons-material";
import React from "react";
import {
Expand All @@ -50,6 +50,7 @@ import PaperContainer from "../../components/PaperContainer";
import {MQTTIcon} from "../../components/CustomIcons";
import {LoadingButton} from "@mui/lab";
import TextInformationGrid from "../../components/TextInformationGrid";
import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";

const MQTTStatusComponent : React.FunctionComponent<{ status: MQTTStatus | undefined, statusLoading: boolean, statusError: boolean }> = ({
status,
Expand Down Expand Up @@ -424,7 +425,9 @@ const MQTTConnectivity = (): JSX.Element => {
const {
data: mqttStatus,
isLoading: mqttStatusLoading,
isError: mqttStatusError
isFetching: mqttStatusFetching,
isError: mqttStatusError,
refetch: refetchMqttStatus,
} = useMQTTStatusQuery();

const {
Expand Down Expand Up @@ -474,17 +477,17 @@ const MQTTConnectivity = (): JSX.Element => {
<PaperContainer>
<Grid container direction="row">
<Box style={{width: "100%"}}>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<MQTTIcon/>
</Grid>
<Grid item>
<Typography>MQTT Connectivity</Typography>
</Grid>
</Grid>
</Grid>
<Divider sx={{mt: 1}}/>
<DetailPageHeaderRow
title="MQTT Connectivity"
icon={<MQTTIcon/>}
onRefreshClick={() => {
refetchMqttStatus().catch(() => {
/* intentional */
});
}}
isRefreshing={mqttStatusFetching}
/>

<MQTTStatusComponent
status={mqttStatus}
statusLoading={mqttStatusLoading}
Expand Down
24 changes: 13 additions & 11 deletions frontend/src/settings/connectivity/NTPConnectivity.tsx
View file
Expand Up @@ -27,6 +27,7 @@ import {
} from "@mui/icons-material";
import InfoBox from "../../components/InfoBox";
import PaperContainer from "../../components/PaperContainer";
import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";

const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState | undefined, stateLoading: boolean, stateError: boolean }> = ({
state,
Expand Down Expand Up @@ -119,7 +120,9 @@ const NTPConnectivity = (): JSX.Element => {
const {
data: ntpClientState,
isLoading: ntpClientStateLoading,
isFetching: ntpClientStateFetching,
isError: ntpClientStateError,
refetch: refetchNtpClientState
} = useNTPClientStateQuery();

const {
Expand Down Expand Up @@ -162,18 +165,17 @@ const NTPConnectivity = (): JSX.Element => {
<PaperContainer>
<Grid container direction="row">
<Box style={{width: "100%"}}>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<NTPIcon/>
</Grid>
<Grid item>
<Typography>NTP Connectivity</Typography>
</Grid>
</Grid>
</Grid>
<DetailPageHeaderRow
title="NTP Connectivity"
icon={<NTPIcon/>}
onRefreshClick={() => {
refetchNtpClientState().catch(() => {
/* intentional */
});
}}
isRefreshing={ntpClientStateFetching}
/>

<Divider sx={{mt: 1}}/>
<NTPClientStateComponent
state={ntpClientState}
stateLoading={ntpClientStateLoading}
Expand Down
18 changes: 6 additions & 12 deletions frontend/src/settings/connectivity/NetworkAdvertisementSettings.tsx
View file
Expand Up @@ -20,6 +20,7 @@ import PaperContainer from "../../components/PaperContainer";
import {
AutoFixHigh as NetworkAdvertisementIcon
} from "@mui/icons-material";
import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";

const NetworkAdvertisementSettings = (): JSX.Element => {
const {
Expand Down Expand Up @@ -61,17 +62,10 @@ const NetworkAdvertisementSettings = (): JSX.Element => {
<PaperContainer>
<Grid container direction="row">
<Box style={{width: "100%"}}>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<NetworkAdvertisementIcon/>
</Grid>
<Grid item>
<Typography>Network Advertisement</Typography>
</Grid>
</Grid>
</Grid>
<Divider sx={{mt: 1}}/>
<DetailPageHeaderRow
title="Network Advertisement"
icon={<NetworkAdvertisementIcon/>}
/>

<FormControlLabel
control={
Expand All @@ -84,7 +78,7 @@ const NetworkAdvertisementSettings = (): JSX.Element => {
/>
}
label="Network Advertisement enabled"
sx={{mb: 1}}
sx={{mb: 1, marginTop: "1rem", userSelect: "none"}}
/>
<Grid container spacing={1} sx={{mb: 1, mt: "1rem"}} direction="row">
<Grid item xs="auto" style={{flexGrow: 1}}>
Expand Down

0 comments on commit 23c5024

Please sign in to comment.