From bf8d35c65d0a4e8b2bc058af57ea84fe2ceab20d Mon Sep 17 00:00:00 2001
From: Ciaran Morinan <c@hash.ai>
Date: Thu, 9 Jan 2025 20:16:15 +0000
Subject: [PATCH 1/4] add protocol dropdown to early access form website input

---
 .../waitlisted/early-access-modal.tsx         | 16 ++--
 .../src/pages/shared/url-input.tsx            | 89 +++++++++++++++++++
 2 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 apps/hash-frontend/src/pages/shared/url-input.tsx

diff --git a/apps/hash-frontend/src/pages/index.page/waitlisted/early-access-modal.tsx b/apps/hash-frontend/src/pages/index.page/waitlisted/early-access-modal.tsx
index 9d535cbce4a..6ee43ff0292 100644
--- a/apps/hash-frontend/src/pages/index.page/waitlisted/early-access-modal.tsx
+++ b/apps/hash-frontend/src/pages/index.page/waitlisted/early-access-modal.tsx
@@ -9,6 +9,7 @@ import { Button } from "../../../shared/ui/button";
 import { MenuItem } from "../../../shared/ui/menu-item";
 import { Modal } from "../../../shared/ui/modal";
 import { useAuthenticatedUser } from "../../shared/auth-info-context";
+import { UrlInput } from "../../shared/url-input";
 
 type FormFieldMetadata = {
   label: string;
@@ -93,7 +94,14 @@ const Input = ({
         *
       </Box>
       <Box>
-        {options ? (
+        {url ? (
+          <UrlInput
+            autoFocus
+            onChange={onChange}
+            placeholder={placeholder}
+            value={value}
+          />
+        ) : options ? (
           <Select
             value={value}
             onChange={(event) => onChange(event.target.value)}
@@ -107,12 +115,6 @@ const Input = ({
           </Select>
         ) : (
           <TextField
-            autoFocus={url}
-            inputProps={
-              url
-                ? { pattern: "\\S+\\.\\w+", title: "Please enter a valid URL" }
-                : undefined
-            }
             multiline={multiline}
             onChange={(event) => onChange(event.target.value)}
             placeholder={placeholder}
diff --git a/apps/hash-frontend/src/pages/shared/url-input.tsx b/apps/hash-frontend/src/pages/shared/url-input.tsx
new file mode 100644
index 00000000000..21362486bdd
--- /dev/null
+++ b/apps/hash-frontend/src/pages/shared/url-input.tsx
@@ -0,0 +1,89 @@
+import { Select, TextField } from "@hashintel/design-system";
+import { Stack } from "@mui/material";
+import debounce from "lodash/debounce";
+import { useEffect, useState } from "react";
+
+import { MenuItem } from "../../shared/ui/menu-item";
+
+const protocols = ["https://", "http://"] as const;
+
+type Protocol = (typeof protocols)[number];
+
+const protocolFromUrl = (url: string): Protocol => {
+  if (!url) {
+    return "https://";
+  }
+
+  try {
+    const urlObject = new URL(url);
+    if (!protocols.includes(urlObject.protocol as Protocol)) {
+      return "https://";
+    }
+
+    return urlObject.protocol as Protocol;
+  } catch {
+    return "https://";
+  }
+};
+
+export const UrlInput = ({
+  autoFocus,
+  onChange,
+  placeholder,
+  value,
+}: {
+  autoFocus: boolean;
+  onChange: (value: string) => void;
+  placeholder: string;
+  value: string;
+}) => {
+  const [protocol, setProtocol] = useState<Protocol>(() => {
+    return protocolFromUrl(value);
+  });
+  const [rest, setRest] = useState(() => value.split("://").at(-1));
+
+  useEffect(() => {
+    setProtocol(protocolFromUrl(value));
+    setRest(value.split("://").at(-1));
+  }, [value]);
+
+  const updateValue = debounce((fullUrl: string) => {
+    onChange(fullUrl);
+  }, 300);
+
+  return (
+    <Stack direction="row" gap={2}>
+      <Select
+        value={protocol}
+        onChange={(event) => {
+          const newProtocol = event.target.value as Protocol;
+          setProtocol(newProtocol);
+          updateValue(newProtocol + rest);
+        }}
+        sx={{ width: 100 }}
+      >
+        {protocols.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+      <TextField
+        autoFocus={autoFocus}
+        inputProps={{
+          pattern: "\\S+\\.\\w+",
+          title: "Please enter a valid domain",
+        }}
+        onChange={(event) => {
+          const newRest = event.target.value;
+          setRest(newRest);
+          updateValue(protocol + newRest);
+        }}
+        placeholder={placeholder}
+        sx={{ width: "100%" }}
+        type="text"
+        value={rest}
+      />
+    </Stack>
+  );
+};

From e59aa7eb38157424e0196e652d94c2bb5a013323 Mon Sep 17 00:00:00 2001
From: Ciaran Morinan <c@hash.ai>
Date: Fri, 10 Jan 2025 12:04:19 +0000
Subject: [PATCH 2/4] fix protocol/path setting in url input

---
 .../src/pages/shared/url-input.tsx            | 50 +++++++------------
 1 file changed, 17 insertions(+), 33 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/url-input.tsx b/apps/hash-frontend/src/pages/shared/url-input.tsx
index 21362486bdd..0339d86a175 100644
--- a/apps/hash-frontend/src/pages/shared/url-input.tsx
+++ b/apps/hash-frontend/src/pages/shared/url-input.tsx
@@ -1,29 +1,24 @@
 import { Select, TextField } from "@hashintel/design-system";
 import { Stack } from "@mui/material";
-import debounce from "lodash/debounce";
-import { useEffect, useState } from "react";
 
 import { MenuItem } from "../../shared/ui/menu-item";
 
-const protocols = ["https://", "http://"] as const;
+const protocols = ["https", "http"] as const;
 
 type Protocol = (typeof protocols)[number];
 
-const protocolFromUrl = (url: string): Protocol => {
+const partsFromUrl = (url: string): { protocol: Protocol; rest: string } => {
   if (!url) {
-    return "https://";
+    return { protocol: "https", rest: "" };
   }
 
-  try {
-    const urlObject = new URL(url);
-    if (!protocols.includes(urlObject.protocol as Protocol)) {
-      return "https://";
-    }
+  const [protocol, rest] = url.split("://");
 
-    return urlObject.protocol as Protocol;
-  } catch {
-    return "https://";
+  if (!protocol) {
+    return { protocol: "https", rest: "" };
   }
+
+  return { protocol: protocol as Protocol, rest: rest ?? "" };
 };
 
 export const UrlInput = ({
@@ -37,19 +32,7 @@ export const UrlInput = ({
   placeholder: string;
   value: string;
 }) => {
-  const [protocol, setProtocol] = useState<Protocol>(() => {
-    return protocolFromUrl(value);
-  });
-  const [rest, setRest] = useState(() => value.split("://").at(-1));
-
-  useEffect(() => {
-    setProtocol(protocolFromUrl(value));
-    setRest(value.split("://").at(-1));
-  }, [value]);
-
-  const updateValue = debounce((fullUrl: string) => {
-    onChange(fullUrl);
-  }, 300);
+  const { protocol, rest } = partsFromUrl(value);
 
   return (
     <Stack direction="row" gap={2}>
@@ -57,27 +40,28 @@ export const UrlInput = ({
         value={protocol}
         onChange={(event) => {
           const newProtocol = event.target.value as Protocol;
-          setProtocol(newProtocol);
-          updateValue(newProtocol + rest);
+          onChange(`${newProtocol}://${rest}`);
+        }}
+        sx={{
+          width: 110,
+          "& svg": { color: ({ palette }) => palette.gray[30] },
         }}
-        sx={{ width: 100 }}
       >
         {protocols.map((option) => (
           <MenuItem key={option} value={option}>
-            {option}
+            {option}://
           </MenuItem>
         ))}
       </Select>
       <TextField
         autoFocus={autoFocus}
         inputProps={{
-          pattern: "\\S+\\.\\w+",
+          pattern: "\\S+\\.\\w+(\\/\\S*)?",
           title: "Please enter a valid domain",
         }}
         onChange={(event) => {
           const newRest = event.target.value;
-          setRest(newRest);
-          updateValue(protocol + newRest);
+          onChange(`${protocol}://${newRest}`);
         }}
         placeholder={placeholder}
         sx={{ width: "100%" }}

From e2c61352cd1a9a0b4f87af89469f170b73a1c97b Mon Sep 17 00:00:00 2001
From: Ciaran Morinan <c@hash.ai>
Date: Fri, 10 Jan 2025 12:29:35 +0000
Subject: [PATCH 3/4] remove gap between protocol and rest in url input

---
 .../src/pages/shared/url-input.tsx            | 22 ++++++++++++++++---
 .../inputs/mui-select-theme-options.tsx       |  2 +-
 .../navigation/mui-menu-item-theme-options.ts |  3 +--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/url-input.tsx b/apps/hash-frontend/src/pages/shared/url-input.tsx
index 0339d86a175..98b6ba5c435 100644
--- a/apps/hash-frontend/src/pages/shared/url-input.tsx
+++ b/apps/hash-frontend/src/pages/shared/url-input.tsx
@@ -1,5 +1,5 @@
 import { Select, TextField } from "@hashintel/design-system";
-import { Stack } from "@mui/material";
+import { outlinedInputClasses, Stack } from "@mui/material";
 
 import { MenuItem } from "../../shared/ui/menu-item";
 
@@ -35,7 +35,7 @@ export const UrlInput = ({
   const { protocol, rest } = partsFromUrl(value);
 
   return (
-    <Stack direction="row" gap={2}>
+    <Stack direction="row">
       <Select
         value={protocol}
         onChange={(event) => {
@@ -43,6 +43,13 @@ export const UrlInput = ({
           onChange(`${newProtocol}://${rest}`);
         }}
         sx={{
+          [`& .${outlinedInputClasses.root}`]: {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderRight: "none",
+          },
           width: 110,
           "& svg": { color: ({ palette }) => palette.gray[30] },
         }}
@@ -64,7 +71,16 @@ export const UrlInput = ({
           onChange(`${protocol}://${newRest}`);
         }}
         placeholder={placeholder}
-        sx={{ width: "100%" }}
+        sx={{
+          width: "100%",
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderLeftColor: "transparent",
+          },
+          [`& .${outlinedInputClasses.root}`]: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          },
+        }}
         type="text"
         value={rest}
       />
diff --git a/libs/@hashintel/design-system/src/theme/components/inputs/mui-select-theme-options.tsx b/libs/@hashintel/design-system/src/theme/components/inputs/mui-select-theme-options.tsx
index 9e5cc73eb28..8f06d02f754 100644
--- a/libs/@hashintel/design-system/src/theme/components/inputs/mui-select-theme-options.tsx
+++ b/libs/@hashintel/design-system/src/theme/components/inputs/mui-select-theme-options.tsx
@@ -70,7 +70,7 @@ export const MuiSelectThemeOptions: Components<Theme>["MuiSelect"] = {
         },
 
       [`&:focus ~ .${outlinedInputClasses.notchedOutline}`]: {
-        border: `1px solid ${theme.palette.blue[60]}`,
+        border: `2px solid ${theme.palette.blue[60]}`,
       },
     }),
     icon: ({ theme }) => ({
diff --git a/libs/@hashintel/design-system/src/theme/components/navigation/mui-menu-item-theme-options.ts b/libs/@hashintel/design-system/src/theme/components/navigation/mui-menu-item-theme-options.ts
index c9043815ce8..299ce6a9548 100644
--- a/libs/@hashintel/design-system/src/theme/components/navigation/mui-menu-item-theme-options.ts
+++ b/libs/@hashintel/design-system/src/theme/components/navigation/mui-menu-item-theme-options.ts
@@ -85,8 +85,7 @@ export const MuiMenuItemThemeOptions: Components<Theme>["MuiMenuItem"] = {
       },
 
       [`&.${menuItemClasses.focusVisible}, &:focus`]: {
-        boxShadow: `0px 0px 0px 2px ${theme.palette.white}, 0px 0px 0px 4px ${theme.palette.blue[70]}`,
-        backgroundColor: "transparent",
+        backgroundColor: theme.palette.blue[20],
       },
 
       [`&.${menuItemClasses.selected}, &.${menuItemClasses.selected}:hover, &:active`]:

From bf44f1c30a937b5ce5e1334835ebe0eca30007b0 Mon Sep 17 00:00:00 2001
From: Ciaran Morinan <c@hash.ai>
Date: Fri, 10 Jan 2025 12:59:09 +0000
Subject: [PATCH 4/4] account for protocol being entered/pasted into rest box

---
 apps/hash-frontend/src/pages/shared/url-input.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/url-input.tsx b/apps/hash-frontend/src/pages/shared/url-input.tsx
index 98b6ba5c435..17b01d9da0f 100644
--- a/apps/hash-frontend/src/pages/shared/url-input.tsx
+++ b/apps/hash-frontend/src/pages/shared/url-input.tsx
@@ -67,8 +67,15 @@ export const UrlInput = ({
           title: "Please enter a valid domain",
         }}
         onChange={(event) => {
-          const newRest = event.target.value;
-          onChange(`${protocol}://${newRest}`);
+          /**
+           * Account for users entering the protocol into the rest field, e.g. by pasting a full URL
+           */
+          const [_, maybeProtocol, maybeRest] =
+            event.target.value.match("^(https?)://(.*)$") ?? [];
+
+          onChange(
+            `${maybeProtocol ?? protocol}://${maybeRest?.replace(/\/$/, "") ?? event.target.value}`,
+          );
         }}
         placeholder={placeholder}
         sx={{