Apr 30, 2025 · Apr 24, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 24, 2025
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 useContext,
 useEffect,
 useId,
 useRef,
 useState,
 } from "react";
 import { getFormHelpers, nameValidator } from "utils/formUtils";
 );
 const [showPresetParameters, setShowPresetParameters] = useState(false);
 const id = useId();
 const workspaceNameInputRef = useRef<HTMLInputElement>(null);
 const rerollSuggestedName = useCallback(() => {
 setSuggestedName(() => generateWorkspaceName());
 }, []);
 }
 }, [error]);

 const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
 form,
 error,
 );
 useEffect(() => {
 if (form.submitCount > 0 && form.errors) {
 workspaceNameInputRef.current?.scrollIntoView({
 behavior: "smooth",
 block: "center",
 });
 workspaceNameInputRef.current?.focus();
 }
 }, [form.submitCount, form.errors]);

 const [presetOptions, setPresetOptions] = useState([
 { label: "None", value: "" },
 <Label className="text-sm" htmlFor={`${id}-workspace-name`}>
 Workspace name
 </Label>
 <div>
 <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());
 resetMutation();
 }}
 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

 return (
 <DynamicParameter
 {...getFieldHelpers(parameterInputName)}
 key={parameter.name}
 parameter={parameter}
 onChange={(value) =>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,6 +28,7 @@ import {
		useContext,
		useEffect,
		useId,
		useRef,
		useState,
		} from "react";
		import { getFormHelpers, nameValidator } from "utils/formUtils";
Expand DownExpand Up		@@ -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());
		}, []);
Expand DownExpand Up		@@ -140,10 +142,15 @@ export const CreateWorkspacePageViewExperimental: FC<
		}
		}, [error]);

		const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(
		form,
		error,
		);
		useEffect(() => {
		if (form.submitCount > 0 && form.errors) {
		workspaceNameInputRef.current?.scrollIntoView({
		behavior: "smooth",
		block: "center",
		});
		workspaceNameInputRef.current?.focus();
		}
		}, [form.submitCount, form.errors]);

		const [presetOptions, setPresetOptions] = useState([
		{ label: "None", value: "" },
Expand DownExpand Up		@@ -333,16 +340,22 @@ 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`}
		ref={workspaceNameInputRef}
		value={form.values.name}
		onChange={(e) => {
		form.setFieldValue("name", e.target.value.trim());
		resetMutation();
		}}
		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
Expand DownExpand Up		@@ -477,7 +490,6 @@ export const CreateWorkspacePageViewExperimental: FC<

		return (
		<DynamicParameter
		{...getFieldHelpers(parameterInputName)}
Copy link ContributorAuthor jaaydenhApr 24, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Since we are not using the MUI TextField, this is not necessary
		key={parameter.name}
		parameter={parameter}
		onChange={(value) =>
Expand Down