From 9491b23b9d05000e532ca19a113b2a05376ab5b0 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 16 Apr 2025 21:31:54 +0000
Subject: [PATCH 1/7] pls hold

---
 .../CreateWorkspaceExperimentRouter.tsx        | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
index 36cd921e28000..e195d8b5f0df7 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -1,13 +1,25 @@
 import { useDashboard } from "modules/dashboard/useDashboard";
-import type { FC } from "react";
+import { createContext, type FC } from "react";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
+import { useParams } from "react-router-dom";
+import { useQuery } from "react-query";
+import { templateByName } from "api/queries/templates";
 
 const CreateWorkspaceExperimentRouter: FC = () => {
 	const { experiments } = useDashboard();
-
 	const dynamicParametersEnabled = experiments.includes("dynamic-parameters");
 
+	const { organization: organizationName = "default", template: templateName } =
+		useParams() as { organization?: string; template: string };
+	const templateQuery = useQuery(
+		templateByName(organizationName, templateName),
+	);
+
+	const something = JSON.parse(
+		localStorage.getItem(`parameters.${templateQuery.data?.id}.optOut`) ?? "",
+	);
+
 	if (dynamicParametersEnabled) {
 		return <CreateWorkspacePageExperimental />;
 	}
@@ -16,3 +28,5 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 };
 
 export default CreateWorkspaceExperimentRouter;
+
+const CreateWorkspaceProvider = createContext(undefined);

From 063538af2b9c51dbb4c7f55ebd8dc2590143b071 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 17 Apr 2025 19:40:34 +0000
Subject: [PATCH 2/7] not now pls

---
 dogfood/coder/main.tf                         |  6 ++--
 .../CreateWorkspaceExperimentRouter.tsx       | 32 +++++++++++++++----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/dogfood/coder/main.tf b/dogfood/coder/main.tf
index 5bf9e682bbf43..ddd182ad4a5c4 100644
--- a/dogfood/coder/main.tf
+++ b/dogfood/coder/main.tf
@@ -42,10 +42,10 @@ data "coder_parameter" "image_type" {
   type        = "string"
   name        = "Coder Image"
   default     = "codercom/oss-dogfood:latest"
-  description = "The Docker image used to run your workspace. Choose between nix and non-nix images."
+  description = "The Docker image used to run your workspace."
   option {
-    icon  = "/icon/coder.svg"
-    name  = "Dogfood (Default)"
+    icon  = "/icon/ubuntu.svg"
+    name  = "Dogfood Ubuntu"
     value = "codercom/oss-dogfood:latest"
   }
   option {
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
index e195d8b5f0df7..7dd2d233d3516 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -5,6 +5,8 @@ import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
 import { useParams } from "react-router-dom";
 import { useQuery } from "react-query";
 import { templateByName } from "api/queries/templates";
+import { Loader } from "components/Loader/Loader";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 
 const CreateWorkspaceExperimentRouter: FC = () => {
 	const { experiments } = useDashboard();
@@ -13,15 +15,31 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 	const { organization: organizationName = "default", template: templateName } =
 		useParams() as { organization?: string; template: string };
 	const templateQuery = useQuery(
-		templateByName(organizationName, templateName),
-	);
-
-	const something = JSON.parse(
-		localStorage.getItem(`parameters.${templateQuery.data?.id}.optOut`) ?? "",
+		dynamicParametersEnabled
+			? templateByName(organizationName, templateName)
+			: { enabled: false },
 	);
 
 	if (dynamicParametersEnabled) {
-		return <CreateWorkspacePageExperimental />;
+		if (templateQuery.isLoading) {
+			return <Loader />;
+		}
+
+		if (!templateQuery.data) {
+			return <ErrorAlert error={templateQuery.error} />;
+		}
+
+		const hasOptedOut =
+			localStorage.Item(`parameters.${templateQuery.data.id}.optOut`) == "true";
+		return (
+			<CreateWorkspaceContext.Provider value={{}}>
+				{hasOptedOut ? (
+					<CreateWorkspacePage />
+				) : (
+					<CreateWorkspacePageExperimental />
+				)}
+			</CreateWorkspaceContext.Provider>
+		);
 	}
 
 	return <CreateWorkspacePage />;
@@ -29,4 +47,4 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 
 export default CreateWorkspaceExperimentRouter;
 
-const CreateWorkspaceProvider = createContext(undefined);
+const CreateWorkspaceContext = createContext<{}>({});

From 7efa2b093892634520441079f650867001c69521 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Thu, 17 Apr 2025 21:30:58 +0000
Subject: [PATCH 3/7] yay

---
 .../CreateWorkspaceExperimentRouter.tsx       | 26 ++++++++++++++-----
 .../CreateWorkspacePageViewExperimental.tsx   |  2 +-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
index 7dd2d233d3516..dc5024ba8cba7 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -1,5 +1,5 @@
 import { useDashboard } from "modules/dashboard/useDashboard";
-import { createContext, type FC } from "react";
+import { createContext, type FC, useState } from "react";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
 import { useParams } from "react-router-dom";
@@ -24,16 +24,26 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 		if (templateQuery.isLoading) {
 			return <Loader />;
 		}
-
 		if (!templateQuery.data) {
 			return <ErrorAlert error={templateQuery.error} />;
 		}
 
-		const hasOptedOut =
-			localStorage.Item(`parameters.${templateQuery.data.id}.optOut`) == "true";
+		const optOut = `parameters.${templateQuery.data.id}.optOut`;
+		const [optedOut, setOptedOut] = useState(
+			localStorage.getItem(optOut) == "true",
+		);
+
+		const toggleOptedOut = () => {
+			setOptedOut((prev) => {
+				const next = !prev;
+				localStorage.setItem(optOut, next.toString());
+				return next;
+			});
+		};
+
 		return (
-			<CreateWorkspaceContext.Provider value={{}}>
-				{hasOptedOut ? (
+			<CreateWorkspaceContext.Provider value={{ toggleOptedOut }}>
+				{optedOut ? (
 					<CreateWorkspacePage />
 				) : (
 					<CreateWorkspacePageExperimental />
@@ -47,4 +57,6 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 
 export default CreateWorkspaceExperimentRouter;
 
-const CreateWorkspaceContext = createContext<{}>({});
+const CreateWorkspaceContext = createContext<
+	{ toggleOptedOut: () => void } | undefined
+>(undefined);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 1e0fbbf2281ff..6f561396270d7 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -252,7 +252,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 	return (
 		<>
-			<div className="absolute sticky top-5 ml-10">
+			<div className="sticky top-5 ml-10">
 				<button
 					onClick={onCancel}
 					type="button"

From 210f80cb17c58a0bad9d4a148d7b05a2b6047ba8 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Fri, 18 Apr 2025 18:37:28 +0000
Subject: [PATCH 4/7] :)

---
 site/src/api/queries/templates.ts             |  4 +-
 .../CreateWorkspaceExperimentRouter.tsx       | 60 ++++++++++++-------
 .../CreateWorkspacePageExperimental.tsx       |  9 +--
 .../CreateWorkspacePageView.tsx               | 19 +++++-
 .../CreateWorkspacePageViewExperimental.tsx   | 17 +++++-
 5 files changed, 78 insertions(+), 31 deletions(-)

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
index 372863de41991..0410eaea8117c 100644
--- a/site/src/api/queries/templates.ts
+++ b/site/src/api/queries/templates.ts
@@ -34,7 +34,9 @@ export const templateByName = (
 ): QueryOptions<Template> => {
 	return {
 		queryKey: templateByNameKey(organization, name),
-		queryFn: async () => API.getTemplateByName(organization, name),
+		queryFn: async () => {
+			return API.getTemplateByName(organization, name);
+		},
 	};
 };
 
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
index dc5024ba8cba7..fbdea093f8d51 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -1,12 +1,12 @@
+import { templateByName } from "api/queries/templates";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "modules/dashboard/useDashboard";
-import { createContext, type FC, useState } from "react";
+import { type FC, createContext } from "react";
+import { useQuery } from "react-query";
+import { useParams } from "react-router-dom";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
-import { useParams } from "react-router-dom";
-import { useQuery } from "react-query";
-import { templateByName } from "api/queries/templates";
-import { Loader } from "components/Loader/Loader";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 
 const CreateWorkspaceExperimentRouter: FC = () => {
 	const { experiments } = useDashboard();
@@ -20,35 +20,47 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 			: { enabled: false },
 	);
 
+	const optOutQuery = useQuery(
+		templateQuery.data
+			? {
+					queryKey: [
+						organizationName,
+						"template",
+						templateQuery.data.id,
+						"optOut",
+					],
+					queryFn: () => ({
+						templateId: templateQuery.data.id,
+						optedOut:
+							localStorage.getItem(optOutKey(templateQuery.data.id)) === "true",
+					}),
+				}
+			: { enabled: false },
+	);
+
 	if (dynamicParametersEnabled) {
-		if (templateQuery.isLoading) {
+		if (optOutQuery.isLoading) {
 			return <Loader />;
 		}
-		if (!templateQuery.data) {
-			return <ErrorAlert error={templateQuery.error} />;
+		if (!optOutQuery.data) {
+			return <ErrorAlert error={optOutQuery.error} />;
 		}
 
-		const optOut = `parameters.${templateQuery.data.id}.optOut`;
-		const [optedOut, setOptedOut] = useState(
-			localStorage.getItem(optOut) == "true",
-		);
-
 		const toggleOptedOut = () => {
-			setOptedOut((prev) => {
-				const next = !prev;
-				localStorage.setItem(optOut, next.toString());
-				return next;
-			});
+			const key = optOutKey(optOutQuery.data.templateId);
+			const current = localStorage.getItem(key) === "true";
+			localStorage.setItem(key, (!current).toString());
+			optOutQuery.refetch();
 		};
 
 		return (
-			<CreateWorkspaceContext.Provider value={{ toggleOptedOut }}>
-				{optedOut ? (
+			<NewFormContext.Provider value={{ toggleOptedOut }}>
+				{optOutQuery.data.optedOut ? (
 					<CreateWorkspacePage />
 				) : (
 					<CreateWorkspacePageExperimental />
 				)}
-			</CreateWorkspaceContext.Provider>
+			</NewFormContext.Provider>
 		);
 	}
 
@@ -57,6 +69,8 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 
 export default CreateWorkspaceExperimentRouter;
 
-const CreateWorkspaceContext = createContext<
+const optOutKey = (id: string) => `parameters.${id}.optOut`;
+
+export const NewFormContext = createContext<
 	{ toggleOptedOut: () => void } | undefined
 >(undefined);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
index 5711517855ebd..0c513a1733ec9 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -69,10 +69,11 @@ const CreateWorkspacePageExperimental: FC = () => {
 	const templateQuery = useQuery(
 		templateByName(organizationName, templateName),
 	);
-	const templateVersionPresetsQuery = useQuery({
-		...templateVersionPresets(templateQuery.data?.active_version_id ?? ""),
-		enabled: templateQuery.data !== undefined,
-	});
+	const templateVersionPresetsQuery = useQuery(
+		templateQuery.data
+			? templateVersionPresets(templateQuery.data.active_version_id)
+			: { enabled: false },
+	);
 	const permissionsQuery = useQuery(
 		templateQuery.data
 			? checkAuthorization({
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 66d0033ea6a74..c4e0644ce0db2 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import TextField from "@mui/material/TextField";
 import type * as TypesGen from "api/typesGenerated";
@@ -29,7 +28,14 @@ import { Switch } from "components/Switch/Switch";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
-import { type FC, useCallback, useEffect, useMemo, useState } from "react";
+import {
+	type FC,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 import {
 	getFormHelpers,
 	nameValidator,
@@ -47,6 +53,8 @@ import type {
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";
+import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
+
 export const Language = {
 	duplicationWarning:
 		"Duplicating a workspace only copies its parameters. No state from the old workspace is copied over.",
@@ -98,6 +106,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	onSubmit,
 	onCancel,
 }) => {
+	const newFormContext = useContext(NewFormContext);
 	const [owner, setOwner] = useState(defaultOwner);
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
@@ -238,6 +247,12 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				</Stack>
 			</PageHeader>
 
+			{newFormContext && (
+				<button type="button" onClick={newFormContext.toggleOptedOut}>
+					Try out the new workspace creation flow ✨
+				</button>
+			)}
+
 			<HorizontalForm
 				name="create-workspace-form"
 				onSubmit={form.handleSubmit}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 0b33c27d57434..e4c199e65d1d6 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -22,7 +22,14 @@ import {
 	useValidationSchemaForDynamicParameters,
 } from "modules/workspaces/DynamicParameter/DynamicParameter";
 import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
-import { type FC, useCallback, useEffect, useId, useState } from "react";
+import {
+	type FC,
+	useCallback,
+	useContext,
+	useEffect,
+	useId,
+	useState,
+} from "react";
 import { getFormHelpers, nameValidator } from "utils/formUtils";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
@@ -32,6 +39,7 @@ import type {
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";
+import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
 
 export interface CreateWorkspacePageViewExperimentalProps {
 	autofillParameters: AutofillBuildParameter[];
@@ -89,6 +97,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 	owner,
 	setOwner,
 }) => {
+	const newFormContext = useContext(NewFormContext);
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
 	);
@@ -270,6 +279,12 @@ export const CreateWorkspacePageViewExperimental: FC<
 					{template.deprecated && <Pill type="warning">Deprecated</Pill>}
 				</header>
 
+				{newFormContext && (
+					<button type="button" onClick={newFormContext.toggleOptedOut}>
+						Go back to the classic workspace creation flow
+					</button>
+				)}
+
 				<form
 					onSubmit={form.handleSubmit}
 					aria-label="Create workspace form"

From e910eb3d2c7291dfba6bf72cec063dad45716b8e Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Fri, 18 Apr 2025 18:38:35 +0000
Subject: [PATCH 5/7] sort

---
 site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx  | 2 +-
 .../CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index c4e0644ce0db2..03c1515c79f24 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -47,13 +47,13 @@ import {
 	useValidationSchemaForRichParameters,
 } from "utils/richParameters";
 import * as Yup from "yup";
+import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 	CreateWorkspaceMode,
 	ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";
-import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
 
 export const Language = {
 	duplicationWarning:
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index e4c199e65d1d6..38e33cfabf48d 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -33,13 +33,13 @@ import {
 import { getFormHelpers, nameValidator } from "utils/formUtils";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
+import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 	CreateWorkspaceMode,
 	ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";
-import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
 
 export interface CreateWorkspacePageViewExperimentalProps {
 	autofillParameters: AutofillBuildParameter[];

From a9badc9c167821831754f8926b9262ea951ee43a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Fri, 18 Apr 2025 19:16:36 +0000
Subject: [PATCH 6/7] clean up design

---
 dogfood/coder/main.tf                         |  6 ++---
 site/src/api/queries/templates.ts             |  4 +---
 .../CreateWorkspacePageView.tsx               | 23 +++++++++++--------
 .../CreateWorkspacePageViewExperimental.tsx   | 18 +++++++++------
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/dogfood/coder/main.tf b/dogfood/coder/main.tf
index ddd182ad4a5c4..5bf9e682bbf43 100644
--- a/dogfood/coder/main.tf
+++ b/dogfood/coder/main.tf
@@ -42,10 +42,10 @@ data "coder_parameter" "image_type" {
   type        = "string"
   name        = "Coder Image"
   default     = "codercom/oss-dogfood:latest"
-  description = "The Docker image used to run your workspace."
+  description = "The Docker image used to run your workspace. Choose between nix and non-nix images."
   option {
-    icon  = "/icon/ubuntu.svg"
-    name  = "Dogfood Ubuntu"
+    icon  = "/icon/coder.svg"
+    name  = "Dogfood (Default)"
     value = "codercom/oss-dogfood:latest"
   }
   option {
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
index 0410eaea8117c..372863de41991 100644
--- a/site/src/api/queries/templates.ts
+++ b/site/src/api/queries/templates.ts
@@ -34,9 +34,7 @@ export const templateByName = (
 ): QueryOptions<Template> => {
 	return {
 		queryKey: templateByNameKey(organization, name),
-		queryFn: async () => {
-			return API.getTemplateByName(organization, name);
-		},
+		queryFn: async () => API.getTemplateByName(organization, name),
 	};
 };
 
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 03c1515c79f24..f3f3410b8f9b3 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -220,9 +220,20 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 		<Margins size="medium">
 			<PageHeader
 				actions={
-					<Button size="sm" variant="outline" onClick={onCancel}>
-						Cancel
-					</Button>
+					<>
+						{newFormContext && (
+							<Button
+								size="sm"
+								variant="outline"
+								onClick={newFormContext.toggleOptedOut}
+							>
+								Try out the new workspace creation flow ✨
+							</Button>
+						)}
+						<Button size="sm" variant="outline" onClick={onCancel}>
+							Cancel
+						</Button>
+					</>
 				}
 			>
 				<Stack direction="row">
@@ -247,12 +258,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				</Stack>
 			</PageHeader>
 
-			{newFormContext && (
-				<button type="button" onClick={newFormContext.toggleOptedOut}>
-					Try out the new workspace creation flow ✨
-				</button>
-			)}
-
 			<HorizontalForm
 				name="create-workspace-form"
 				onSubmit={form.handleSubmit}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 38e33cfabf48d..8129eb6934e4a 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -260,7 +260,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 				</button>
 			</div>
 			<div className="flex flex-col gap-6 max-w-screen-sm mx-auto">
-				<header className="flex flex-col gap-2 mt-10">
+				<header className="flex flex-col items-start gap-2 mt-10">
 					<div className="flex items-center gap-2">
 						<Avatar
 							variant="icon"
@@ -277,13 +277,17 @@ export const CreateWorkspacePageViewExperimental: FC<
 					<h1 className="text-3xl font-semibold m-0">New workspace</h1>
 
 					{template.deprecated && <Pill type="warning">Deprecated</Pill>}
-				</header>
 
-				{newFormContext && (
-					<button type="button" onClick={newFormContext.toggleOptedOut}>
-						Go back to the classic workspace creation flow
-					</button>
-				)}
+					{newFormContext && (
+						<Button
+							size="sm"
+							variant="subtle"
+							onClick={newFormContext.toggleOptedOut}
+						>
+							Go back to the classic workspace creation flow
+						</Button>
+					)}
+				</header>
 
 				<form
 					onSubmit={form.handleSubmit}

From b60b3da51874baf5c58eb2ecd296b16344535b19 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 21 Apr 2025 16:18:43 +0000
Subject: [PATCH 7/7] rename context

---
 .../CreateWorkspaceExperimentRouter.tsx                   | 6 +++---
 .../pages/CreateWorkspacePage/CreateWorkspacePageView.tsx | 8 ++++----
 .../CreateWorkspacePageViewExperimental.tsx               | 8 ++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
index fbdea093f8d51..377424ca2f9a5 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -54,13 +54,13 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 		};
 
 		return (
-			<NewFormContext.Provider value={{ toggleOptedOut }}>
+			<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
 				{optOutQuery.data.optedOut ? (
 					<CreateWorkspacePage />
 				) : (
 					<CreateWorkspacePageExperimental />
 				)}
-			</NewFormContext.Provider>
+			</ExperimentalFormContext.Provider>
 		);
 	}
 
@@ -71,6 +71,6 @@ export default CreateWorkspaceExperimentRouter;
 
 const optOutKey = (id: string) => `parameters.${id}.optOut`;
 
-export const NewFormContext = createContext<
+export const ExperimentalFormContext = createContext<
 	{ toggleOptedOut: () => void } | undefined
 >(undefined);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index f3f3410b8f9b3..8f284f7338688 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -47,7 +47,7 @@ import {
 	useValidationSchemaForRichParameters,
 } from "utils/richParameters";
 import * as Yup from "yup";
-import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
+import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 	CreateWorkspaceMode,
 	ExternalAuthPollingState,
@@ -106,7 +106,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	onSubmit,
 	onCancel,
 }) => {
-	const newFormContext = useContext(NewFormContext);
+	const experimentalFormContext = useContext(ExperimentalFormContext);
 	const [owner, setOwner] = useState(defaultOwner);
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
@@ -221,11 +221,11 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 			<PageHeader
 				actions={
 					<>
-						{newFormContext && (
+						{experimentalFormContext && (
 							<Button
 								size="sm"
 								variant="outline"
-								onClick={newFormContext.toggleOptedOut}
+								onClick={experimentalFormContext.toggleOptedOut}
 							>
 								Try out the new workspace creation flow ✨
 							</Button>
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
index 8129eb6934e4a..342eea1a1b396 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -33,7 +33,7 @@ import {
 import { getFormHelpers, nameValidator } from "utils/formUtils";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";
-import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
+import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 	CreateWorkspaceMode,
 	ExternalAuthPollingState,
@@ -97,7 +97,7 @@ export const CreateWorkspacePageViewExperimental: FC<
 	owner,
 	setOwner,
 }) => {
-	const newFormContext = useContext(NewFormContext);
+	const experimentalFormContext = useContext(ExperimentalFormContext);
 	const [suggestedName, setSuggestedName] = useState(() =>
 		generateWorkspaceName(),
 	);
@@ -278,11 +278,11 @@ export const CreateWorkspacePageViewExperimental: FC<
 
 					{template.deprecated && <Pill type="warning">Deprecated</Pill>}
 
-					{newFormContext && (
+					{experimentalFormContext && (
 						<Button
 							size="sm"
 							variant="subtle"
-							onClick={newFormContext.toggleOptedOut}
+							onClick={experimentalFormContext.toggleOptedOut}
 						>
 							Go back to the classic workspace creation flow
 						</Button>