From 08e54f3565920e6cb56ec7f8b240a8eda4045002 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 24 Apr 2025 17:42:53 +0000
Subject: [PATCH 1/3] fix: display validation error for workspace name

---
 .../CreateWorkspacePageViewExperimental.tsx   | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index ab69cebc93f4d..5fad37fc5d64c 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -140,10 +140,16 @@ export const CreateWorkspacePageViewExperimental: FC<
 		}
 	}, [error]);
 
-	const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
-		form,
-		error,
-	);
+	useEffect(() => {
+		if (form.submitCount > 0 && form.errors) {
+			const fieldId = `${id}-workspace-name`;
+			const el = document.getElementById(fieldId);
+			if (el) {
+				el.scrollIntoView({ behavior: "smooth", block: "center" });
+				(el as HTMLElement).focus?.();
+			}
+		}
+	}, [form.submitCount, form.errors, id]);
 
 	const [presetOptions, setPresetOptions] = useState([
 		{ label: "None", value: "" },
@@ -333,7 +339,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 									<Label className="text-sm" htmlFor={`${id}-workspace-name`}>
 										Workspace name
 									</Label>
-									<div>
+									<div className="flex flex-col">
 										<Input
 											id={`${id}-workspace-name`}
 											value={form.values.name}
@@ -343,6 +349,11 @@ export const CreateWorkspacePageViewExperimental: FC<
 											}}
 											disabled={creatingWorkspace}
 										/>
+										{form.touched.name && form.errors.name && (
+											<div className="text-content-destructive text-xs mt-2">
+												{form.errors.name}
+											</div>
+										)}
 										<div className="flex gap-2 text-xs text-content-secondary items-center">
 											Need a suggestion?
 											<Button
@@ -477,7 +488,6 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 									return (
 										<DynamicParameter
-											{...getFieldHelpers(parameterInputName)}
 											key={parameter.name}
 											parameter={parameter}
 											onChange={(value) =>

From bcd90506b810caaafebcb2347003f673638be562 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 30 Apr 2025 11:47:58 +0000
Subject: [PATCH 2/3] fix: use ref for workspace name input

---
 .../CreateWorkspacePageViewExperimental.tsx         | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 5fad37fc5d64c..1c06b25ceec6a 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -28,6 +28,7 @@ import {
 	useContext,
 	useEffect,
 	useId,
+	useRef,
 	useState,
 } from "react";
 import { getFormHelpers, nameValidator } from "utils/formUtils";
@@ -103,6 +104,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 	);
 	const [showPresetParameters, setShowPresetParameters] = useState(false);
 	const id = useId();
+	const workspaceNameInputRef = useRef<HTMLInputElement>(null);
 	const rerollSuggestedName = useCallback(() => {
 		setSuggestedName(() => generateWorkspaceName());
 	}, []);
@@ -142,14 +144,10 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 	useEffect(() => {
 		if (form.submitCount > 0 && form.errors) {
-			const fieldId = `${id}-workspace-name`;
-			const el = document.getElementById(fieldId);
-			if (el) {
-				el.scrollIntoView({ behavior: "smooth", block: "center" });
-				(el as HTMLElement).focus?.();
-			}
+			workspaceNameInputRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+			workspaceNameInputRef.current?.focus();
 		}
-	}, [form.submitCount, form.errors, id]);
+	}, [form.submitCount, form.errors]);
 
 	const [presetOptions, setPresetOptions] = useState([
 		{ label: "None", value: "" },
@@ -342,6 +340,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 									<div className="flex flex-col">
 										<Input
 											id={`${id}-workspace-name`}
+											ref={workspaceNameInputRef}
 											value={form.values.name}
 											onChange={(e) => {
 												form.setFieldValue("name", e.target.value.trim());

From dd76a3ad817911b6cc6a908d3f5175aaa97f3ac5 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 30 Apr 2025 16:02:03 +0000
Subject: [PATCH 3/3] fix: format

---
 .../CreateWorkspacePageViewExperimental.tsx                  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 1c06b25ceec6a..9df57ff493a78 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -144,7 +144,10 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 	useEffect(() => {
 		if (form.submitCount > 0 && form.errors) {
-			workspaceNameInputRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+			workspaceNameInputRef.current?.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+			});
 			workspaceNameInputRef.current?.focus();
 		}
 	}, [form.submitCount, form.errors]);