From cf982c0e626d4996227d0e291207f90c8ce73528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Beye?= <github@hypfer.de>
Date: Wed, 12 Apr 2023 17:30:34 +0200
Subject: [PATCH] feat(ui): Improve UX when configuring MQTT or NTP hosts

---
 frontend/src/options/connectivity/MQTTConnectivity.tsx | 5 ++++-
 frontend/src/options/connectivity/NTPConnectivity.tsx  | 3 ++-
 frontend/src/utils.ts                                  | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/options/connectivity/MQTTConnectivity.tsx b/frontend/src/options/connectivity/MQTTConnectivity.tsx
index 75a1c29de0..1afd0d1b4e 100644
--- 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
index 50bcdf5774..7aba7f7640 100644
--- 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
index cb08c3100e..664e65d6a6 100644
--- 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, "");
+}