:)

coder · aslilac · Apr 21, 2025 · Apr 16, 2025 · Apr 17, 2025 · Apr 17, 2025
commit 210f80cb17c58a0bad9d4a148d7b05a2b6047ba8
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"