feat: check for classic flow on the create workspace page (#17852)

jaaydenh · web-flow · commit f8f4dc687541 · 2025-05-16T13:40:59.000-04:00
the local storage key is only set when a user presses the opt-in or
opt-out buttons

Overall, this feels less annoying for users to have to opt-in/opt-out on
every visit to the create workspace page. Maybe less of a concern for
end users but more of a concern while dogfooding.

Pros:
- User gets the admin setting value for the template as long as they
didn't opt-in or opt-out
- User can choose to opt-in/out-out at will and their preference is
saved
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
@@ -30,11 +30,26 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 						templateQuery.data.id,
 						"optOut",
 					],
-					queryFn: () => ({
-						templateId: templateQuery.data.id,
-						optedOut:
-							localStorage.getItem(optOutKey(templateQuery.data.id)) === "true",
-					}),
+					queryFn: () => {
+						const templateId = templateQuery.data.id;
+						const localStorageKey = optOutKey(templateId);
+						const storedOptOutString = localStorage.getItem(localStorageKey);
+
+						let optOutResult: boolean;
+
+						if (storedOptOutString !== null) {
+							optOutResult = storedOptOutString === "true";
+						} else {
+							optOutResult = Boolean(
+								templateQuery.data.use_classic_parameter_flow,
+							);
+						}
+
+						return {
+							templateId: templateId,
+							optedOut: optOutResult,
+						};
+					},
 				}
 			: { enabled: false },
 	);
@@ -49,11 +64,15 @@ const CreateWorkspaceExperimentRouter: FC = () => {
 
 		const toggleOptedOut = () => {
 			const key = optOutKey(optOutQuery.data.templateId);
-			const current = localStorage.getItem(key) === "true";
+			const storedValue = localStorage.getItem(key);
+
+			const current = storedValue
+				? storedValue === "true"
+				: Boolean(templateQuery.data?.use_classic_parameter_flow);
+
 			localStorage.setItem(key, (!current).toString());
 			optOutQuery.refetch();
 		};
-
 		return (
 			<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
 				{optOutQuery.data.optedOut ? (
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -242,7 +242,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 									<span>
 										Show the original workspace creation form without dynamic
 										parameters or live updates. Recommended if your provisioners
-										aren't updated or the new form causes issues.
+										aren't updated or the new form causes issues.{" "}
 										<strong>
 											Users can always manually switch experiences in the
 											workspace creation form.
