coder · jaaydenh · May 21, 2025 · May 14, 2025 · May 15, 2025 · May 19, 2025
diff --git a/site/src/modules/hooks/useSyncFormParameters.ts b/site/src/modules/hooks/useSyncFormParameters.ts
@@ -0,0 +1,53 @@
+import type * as TypesGen from "api/typesGenerated";
+import { useEffect, useRef } from "react";
+
+import type { PreviewParameter } from "api/typesGenerated";
+
+type UseSyncFormParametersProps = {
+	parameters: readonly PreviewParameter[];
+	formValues: readonly TypesGen.WorkspaceBuildParameter[];
+	setFieldValue: (
+		field: string,
+		value: TypesGen.WorkspaceBuildParameter[],
+	) => void;
+};
+
+export function useSyncFormParameters({
+	parameters,
+	formValues,
+	setFieldValue,
+}: UseSyncFormParametersProps) {
+	// Form values only needs to be updated when parameters change
+	// Keep track of form values in a ref to avoid unnecessary updates to rich_parameter_values
+	const formValuesRef = useRef(formValues);
+
+	useEffect(() => {
+		formValuesRef.current = formValues;
+	}, [formValues]);
+
+	useEffect(() => {
+		if (!parameters) return;
+		const currentFormValues = formValuesRef.current;
+
+		const newParameterValues = parameters.map((param) => ({
+			name: param.name,
+			value: param.value.valid ? param.value.value : "",
+		}));
+
+		const currentFormValuesMap = new Map(
+			currentFormValues.map((value) => [value.name, value.value]),
+		);
+
+		const isChanged =
+			currentFormValues.length !== newParameterValues.length ||
+			newParameterValues.some(
+				(p) =>
+					!currentFormValuesMap.has(p.name) ||
+					currentFormValuesMap.get(p.name) !== p.value,
+			);
+
+		if (isChanged) {
+			setFieldValue("rich_parameter_values", newParameterValues);
+		}
+	}, [parameters, setFieldValue]);
+}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
@@ -20,6 +20,7 @@ import { Switch } from "components/Switch/Switch";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import { ArrowLeft, CircleAlert, TriangleAlert } from "lucide-react";
+import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
 import {
 	DynamicParameter,
 	getInitialParameterValues,
@@ -652,52 +653,3 @@ const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
 		</div>
 	);
 };
-
-type UseSyncFormParametersProps = {
-	parameters: readonly PreviewParameter[];
-	formValues: readonly TypesGen.WorkspaceBuildParameter[];
-	setFieldValue: (
-		field: string,
-		value: TypesGen.WorkspaceBuildParameter[],
-	) => void;
-};
-
-function useSyncFormParameters({
-	parameters,
-	formValues,
-	setFieldValue,
-}: UseSyncFormParametersProps) {
-	// Form values only needs to be updated when parameters change
-	// Keep track of form values in a ref to avoid unnecessary updates to rich_parameter_values
-	const formValuesRef = useRef(formValues);
-
-	useEffect(() => {
-		formValuesRef.current = formValues;
-	}, [formValues]);
-
-	useEffect(() => {
-		if (!parameters) return;
-		const currentFormValues = formValuesRef.current;
-
-		const newParameterValues = parameters.map((param) => {
-			return {
-				name: param.name,
-				value: param.value.valid ? param.value.value : "",
-			};
-		});
-
-		const isChanged =
-			currentFormValues.length !== newParameterValues.length ||
-			newParameterValues.some(
-				(p) =>
-					!currentFormValues.find(
-						(formValue) =>
-							formValue.name === p.name && formValue.value === p.value,
-					),
-			);
-
-		if (isChanged) {
-			setFieldValue("rich_parameter_values", newParameterValues);
-		}
-	}, [parameters, setFieldValue]);
-}
diff --git a/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx b/...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx
@@ -0,0 +1,88 @@
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Loader } from "components/Loader/Loader";
+import { useDashboard } from "modules/dashboard/useDashboard";
+import type { FC } from "react";
+import { useQuery } from "react-query";
+import { ExperimentalFormContext } from "../../CreateWorkspacePage/ExperimentalFormContext";
+import { useWorkspaceSettings } from "../WorkspaceSettingsLayout";
+import WorkspaceParametersPage from "./WorkspaceParametersPage";
+import WorkspaceParametersPageExperimental from "./WorkspaceParametersPageExperimental";
+
+const WorkspaceParametersExperimentRouter: FC = () => {
+	const { experiments } = useDashboard();
+	const workspace = useWorkspaceSettings();
+	const dynamicParametersEnabled = experiments.includes("dynamic-parameters");
+
+	const optOutQuery = useQuery(
+		dynamicParametersEnabled
+			? {
+					queryKey: [
+						"workspace",
+						workspace.id,
+						"template_id",
+						workspace.template_id,
+						"optOut",
+					],
+					queryFn: () => {
+						const templateId = workspace.template_id;
+						const workspaceId = workspace.id;
+						const localStorageKey = optOutKey(templateId);
+						const storedOptOutString = localStorage.getItem(localStorageKey);
+
+						let optOutResult: boolean;
+
+						if (storedOptOutString !== null) {
+							optOutResult = storedOptOutString === "true";
+						} else {
+							optOutResult = Boolean(
+								workspace.template_use_classic_parameter_flow,
+							);
+						}
+
+						return {
+							templateId,
+							workspaceId,
+							optedOut: optOutResult,
+						};
+					},
+				}
+			: { enabled: false },
+	);
+
+	if (dynamicParametersEnabled) {
+		if (optOutQuery.isLoading) {
+			return <Loader />;
+		}
+		if (!optOutQuery.data) {
+			return <ErrorAlert error={optOutQuery.error} />;
+		}
+
+		const toggleOptedOut = () => {
+			const key = optOutKey(optOutQuery.data.templateId);
+			const storedValue = localStorage.getItem(key);
+
+			const current = storedValue
+				? storedValue === "true"
+				: Boolean(workspace.template_use_classic_parameter_flow);
+
+			localStorage.setItem(key, (!current).toString());
+			optOutQuery.refetch();
+		};
+
+		return (
+			<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
+				{optOutQuery.data.optedOut ? (
+					<WorkspaceParametersPage />
+				) : (
+					<WorkspaceParametersPageExperimental />
+				)}
+			</ExperimentalFormContext.Provider>
+		);
+	}
+
+	return <WorkspaceParametersPage />;
+};
+
+export default WorkspaceParametersExperimentRouter;
+
+const optOutKey = (id: string) => `parameters.${id}.optOut`;
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
@@ -4,11 +4,11 @@ import { isApiValidationError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button as ShadcnButton } from "components/Button/Button";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Loader } from "components/Loader/Loader";
-import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { ExternalLinkIcon } from "lucide-react";
-import type { FC } from "react";
+import { type FC, useContext } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
@@ -18,6 +18,7 @@ import {
 	type WorkspacePermissions,
 	workspaceChecks,
 } from "../../../modules/workspaces/permissions";
+import { ExperimentalFormContext } from "../../CreateWorkspacePage/ExperimentalFormContext";
 import { useWorkspaceSettings } from "../WorkspaceSettingsLayout";
 import {
 	WorkspaceParametersForm,
@@ -112,15 +113,27 @@ export const WorkspaceParametersPageView: FC<
 	isSubmitting,
 	onCancel,
 }) => {
+	const experimentalFormContext = useContext(ExperimentalFormContext);
 	return (
-		<>
-			<PageHeader css={{ paddingTop: 0 }}>
-				<PageHeaderTitle>Workspace parameters</PageHeaderTitle>
-			</PageHeader>
+		<div className="flex flex-col gap-10">
+			<header className="flex flex-col items-start gap-2">
+				<span className="flex flex-row justify-between items-center gap-2">
+					<h1 className="text-3xl m-0">Workspace parameters</h1>
+				</span>
+				{experimentalFormContext && (
+					<ShadcnButton
+						size="sm"
+						variant="outline"
+						onClick={experimentalFormContext.toggleOptedOut}
+					>
+						Try out the new workspace parameters ✨
+					</ShadcnButton>
+				)}
+			</header>
 
-			{submitError && !isApiValidationError(submitError) && (
+			{submitError && !isApiValidationError(submitError) ? (
 				<ErrorAlert error={submitError} css={{ marginBottom: 48 }} />
-			)}
+			) : null}
 
 			{data ? (
 				data.templateVersionRichParameters.length > 0 ? (
@@ -161,7 +174,7 @@ export const WorkspaceParametersPageView: FC<
 			) : (
 				<Loader />
 			)}
-		</>
+		</div>
 	);
 };