Add settings URL validation

e2e/settings.spec.ts

@@ -12,12 +12,14 @@ test('update the URL with wrong URL applies', async ({ page }) => {
     await page.goto('/dashboard');
     await page.getByRole('link', { name: 'Settings' }).click();
     await page.getByLabel('Codex client node URL').click();
-
+    await page.getByLabel('Codex client node URL').fill('hello');
+    await expect.soft(page.getByText("The URL is not valid")).toBeVisible()
+    await expect.soft(page.locator(".settings-url-button")).toBeDisabled()
     await page.getByLabel('Codex client node URL').fill('http://127.0.0.1:8079');
+    await expect.soft(page.getByText("The URL is not valid")).not.toBeVisible()
+    await expect.soft(page.locator(".settings-url-button")).not.toBeDisabled()
     await page.getByRole('button', { name: 'Save changes' }).nth(1).click();
-
     await expect.soft(page.getByText("Cannot retrieve the data")).toBeVisible()
-
     await page.getByLabel('Codex client node URL').fill('http://127.0.0.1:8080');
     await page.getByRole('button', { name: 'Save changes' }).nth(1).click();
 })

src/components/CodexUrllSettings/CodexUrlSettings.tsx

@@ -6,6 +6,7 @@ import { CodexSdk } from "../../sdk/codex";
 export function CodexUrlSettings() {
   const queryClient = useQueryClient();
   const [url, setUrl] = useState(CodexSdk.url);
+  const [isInvalid, setIsInvalid] = useState(false);
   const [toast, setToast] = useState({ time: 0, message: "" });
   const { mutateAsync } = useMutation({
     mutationFn: (url: string) => CodexSdk.updateURL(url),
@@ -17,23 +18,37 @@ export function CodexUrlSettings() {
   });
 
   const onChange = (e: React.FormEvent<HTMLInputElement>) => {
-    const value = e.currentTarget.value;
-    if (value) {
-      setUrl(value);
+    const element = e.currentTarget;
+    const value = element.value;
+
+    setUrl(value);
+    setIsInvalid(!element.checkValidity());
+  };
+
+  const onClick = () => {
+    if (isInvalid === false) {
+      mutateAsync(url);
     }
   };
 
-  const onClick = () => mutateAsync(url);
-
   return (
     <>
-      <Input
-        id="url"
-        label="Codex client node URL"
-        onChange={onChange}
-        value={url}
-        inputClassName="settings-input"></Input>
-      <Button variant="primary" label="Save changes" onClick={onClick}></Button>
+      <div className="settings-input">
+        <Input
+          id="url"
+          label="Codex client node URL"
+          onChange={onChange}
+          value={url}
+          isInvalid={isInvalid}
+          helper={isInvalid ? "The URL is not valid" : "Enter a valid URL"}
+          type="url"></Input>
+      </div>
+      <Button
+        className="settings-url-button"
+        disabled={isInvalid}
+        variant="primary"
+        label="Save changes"
+        onClick={onClick}></Button>
       <Toast message={toast.message} time={toast.time} variant="success" />
     </>
   );