H-3879: Add protocol dropdown to early access form URL input (#6106)

hashintel · Jan 13, 2025 · f709f3f · f709f3f
1 parent 4417fb7
commit f709f3f
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 10 deletions.
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
@@ -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
@@ -0,0 +1,96 @@
+import { Select, TextField } from "@hashintel/design-system";
+import { outlinedInputClasses, Stack } from "@mui/material";
+
+import { MenuItem } from "../../shared/ui/menu-item";
+
+const protocols = ["https", "http"] as const;
+
+type Protocol = (typeof protocols)[number];
+
+const partsFromUrl = (url: string): { protocol: Protocol; rest: string } => {
+  if (!url) {
+    return { protocol: "https", rest: "" };
+  }
+
+  const [protocol, rest] = url.split("://");
+
+  if (!protocol) {
+    return { protocol: "https", rest: "" };
+  }
+
+  return { protocol: protocol as Protocol, rest: rest ?? "" };
+};
+
+export const UrlInput = ({
+  autoFocus,
+  onChange,
+  placeholder,
+  value,
+}: {
+  autoFocus: boolean;
+  onChange: (value: string) => void;
+  placeholder: string;
+  value: string;
+}) => {
+  const { protocol, rest } = partsFromUrl(value);
+
+  return (
+    <Stack direction="row">
+      <Select
+        value={protocol}
+        onChange={(event) => {
+          const newProtocol = event.target.value as Protocol;
+          onChange(`${newProtocol}://${rest}`);
+        }}
+        sx={{
+          [`& .${outlinedInputClasses.root}`]: {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderRight: "none",
+          },
+          width: 110,
+          "& svg": { color: ({ palette }) => palette.gray[30] },
+        }}
+      >
+        {protocols.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}://
+          </MenuItem>
+        ))}
+      </Select>
+      <TextField
+        autoFocus={autoFocus}
+        inputProps={{
+          pattern: "\\S+\\.\\w+(\\/\\S*)?",
+          title: "Please enter a valid domain",
+        }}
+        onChange={(event) => {
+          /**
+           * 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={{
+          width: "100%",
+          [`.${outlinedInputClasses.notchedOutline}`]: {
+            borderLeftColor: "transparent",
+          },
+          [`& .${outlinedInputClasses.root}`]: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          },
+        }}
+        type="text"
+        value={rest}
+      />
+    </Stack>
+  );
+};
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
@@ -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
@@ -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`]: