feat(ui): Improve UX when configuring MQTT or NTP hosts

Hypfer · Apr 12, 2023 · cf982c0 · cf982c0
1 parent fc73347
commit cf982c0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/frontend/src/options/connectivity/MQTTConnectivity.tsx b/frontend/src/options/connectivity/MQTTConnectivity.tsx
@@ -41,7 +41,7 @@ import {
     useMQTTStatusQuery
 } from "../../api";
 import {getIn, setIn} from "../../api/utils";
-import {convertBytesToHumans, deepCopy} from "../../utils";
+import {convertBytesToHumans, deepCopy, extractHostFromUrl} from "../../utils";
 import {InputProps} from "@mui/material/Input/Input";
 import LoadingFade from "../../components/LoadingFade";
 import InfoBox from "../../components/InfoBox";
@@ -525,6 +525,9 @@ const MQTTConnectivity = (): JSX.Element => {
                             helperText="The MQTT Broker hostname"
                             required={true}
                             configPath={["connection", "host"]}
+                            inputPostProcessor={(value) => {
+                                return extractHostFromUrl(value);
+                            }}
                         />
                         <MQTTInput
                             mqttConfiguration={mqttConfiguration}

diff --git a/frontend/src/options/connectivity/NTPConnectivity.tsx b/frontend/src/options/connectivity/NTPConnectivity.tsx
@@ -27,6 +27,7 @@ import {
 import InfoBox from "../../components/InfoBox";
 import PaperContainer from "../../components/PaperContainer";
 import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";
+import {extractHostFromUrl} from "../../utils";
 
 const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState | undefined, stateLoading: boolean, stateError: boolean }> = ({
     state,
@@ -194,7 +195,7 @@ const NTPConnectivity = (): JSX.Element => {
                                 disabled={!enabled}
                                 variant="standard"
                                 onChange={e => {
-                                    setServer(e.target.value);
+                                    setServer(extractHostFromUrl(e.target.value));
                                     setConfigurationModified(true);
                                 }}
                             />

diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -233,3 +233,6 @@ export const useGetter = <S>(value: S): (() => S) => {
     }, [ref]);
 };
 
+export function extractHostFromUrl(value: string): string {
+    return value.replace(/^[a-zA-Z]+:\/\//, "").replace(/\/.*/g, "");
+}