Jun 12, 2025 · Jun 9, 2025 · Jun 9, 2025 · Jun 9, 2025 · Jun 9, 2025 · Jun 10, 2025
diff --git a/coderd/parameters_test.go b/coderd/parameters_test.go
 Value: "GO",
 },
 }
 request.EnableDynamicParameters = true
 })
 coderdtest.AwaitWorkspaceBuildJobCompleted(t, setup.client, wrk.LatestBuild.ID)

diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
 await page.getByTestId("workspace-update-button").click();
 await page.getByTestId("confirm-button").click();

 await page.waitForSelector('[data-testid="dialog"]', { state: "visible" });

 await fillParameters(page, richParameters, buildParameters);
 await page.getByRole("button", { name: /update parameters/i }).click();

diff --git a/site/src/modules/workspaces/DynamicParameter/useDynamicParametersOptOut.ts b/site/src/modules/workspaces/DynamicParameter/useDynamicParametersOptOut.ts
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx
 SettingsIcon,
 TrashIcon,
 } from "lucide-react";
 import { useDynamicParametersOptOut } from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
 import { type FC, useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
 }) => {
 const queryClient = useQueryClient();

 const optOutQuery = useDynamicParametersOptOut({
 templateId: workspace.template_id,
 templateUsesClassicParameters:
 workspace.template_use_classic_parameter_flow,
 enabled: true,
 });

 // Permissions
 const { data: permissions } = useQuery(workspacePermissions(workspace));

 // Change version
 const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
 const changeVersionMutation = useMutation(
 changeVersion(workspace, queryClient, optOutQuery.data?.optedOut === false),
 changeVersion(
 workspace,
 queryClient,
 !workspace.template_use_classic_parameter_flow,
 ),
 );

 // Delete
 onClose={() => setIsDownloadDialogOpen(false)}
 />

 {optOutQuery.data?.optedOut ? (
 {workspace.template_use_classic_parameter_flow ? (
 <UpdateBuildParametersDialog
 missedParameters={
 changeVersionMutation.error instanceof MissingBuildParameters
diff --git a/site/src/modules/workspaces/WorkspaceUpdateDialogs.tsx b/site/src/modules/workspaces/WorkspaceUpdateDialogs.tsx
 WorkspaceBuild,
 WorkspaceBuildParameter,
 } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Loader } from "components/Loader/Loader";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { useDynamicParametersOptOut } from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
 import { UpdateBuildParametersDialog } from "modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog";
 import { UpdateBuildParametersDialogExperimental } from "modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental";
 import { type FC, useState } from "react";
 setIsConfirmingUpdate(true);
 };

 const optOutQuery = useDynamicParametersOptOut({
 templateId: workspace.template_id,
 templateUsesClassicParameters:
 workspace.template_use_classic_parameter_flow,
 enabled: true,
 });

 const confirmUpdate = (buildParameters: WorkspaceBuildParameter[] = []) => {
 updateWorkspaceMutation.mutate({
 buildParameters,
 isDynamicParametersEnabled: optOutQuery.data?.optedOut === false,
 isDynamicParametersEnabled:
 !workspace.template_use_classic_parameter_flow,
 });
 setIsConfirmingUpdate(false);
 };
 error,
 ...dialogProps
 }) => {
 const optOutQuery = useDynamicParametersOptOut({
 templateId: workspace.template_id,
 templateUsesClassicParameters:
 workspace.template_use_classic_parameter_flow,
 enabled: true,
 });

 const missedParameters =
 error instanceof MissingBuildParameters ? error.parameters : [];
 const versionId =
 error instanceof MissingBuildParameters ? error.versionId : undefined;
 const isOpen = error instanceof MissingBuildParameters;

 if (optOutQuery.isError) {
 return <ErrorAlert error={optOutQuery.error} />;
 }
 if (!optOutQuery.data) {
 return <Loader />;
 }

 const shouldUseClassicDialog = optOutQuery.data?.optedOut;

 return shouldUseClassicDialog ? (
 return workspace.template_use_classic_parameter_flow ? (
 <UpdateBuildParametersDialog
 missedParameters={missedParameters}
 open={isOpen}
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx
 import { templateByName } from "api/queries/templates";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import {
 optOutKey,
 useDynamicParametersOptOut,
 } from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
 import { ExperimentalFormContext } from "./ExperimentalFormContext";

 const CreateWorkspaceExperimentRouter: FC = () => {
 const { organization: organizationName = "default", template: templateName } =
 templateByName(organizationName, templateName),
 );

 const optOutQuery = useDynamicParametersOptOut({
 templateId: templateQuery.data?.id,
 templateUsesClassicParameters:
 templateQuery.data?.use_classic_parameter_flow,
 enabled: !!templateQuery.data,
 });

 if (templateQuery.isError) {
 return <ErrorAlert error={templateQuery.error} />;
 }
 if (optOutQuery.isError) {
 return <ErrorAlert error={optOutQuery.error} />;
 }
 if (!optOutQuery.data) {
 if (!templateQuery.data) {
 return <Loader />;
 }

 const toggleOptedOut = () => {
 const key = optOutKey(optOutQuery.data?.templateId ?? "");
 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 ? (
 <>
 {templateQuery.data?.use_classic_parameter_flow ? (
 <CreateWorkspacePage />
 ) : (
 <CreateWorkspacePageExperimental />
 )}
 </ExperimentalFormContext.Provider>
 </>
 );
 };

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
 import {
 type FC,
 useCallback,
 useContext,
 useEffect,
 useMemo,
 useState,
 } from "react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import {
 getFormHelpers,
 nameValidator,
 CreateWorkspaceMode,
 ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { ExperimentalFormContext } from "./ExperimentalFormContext";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";

 onSubmit,
 onCancel,
 }) => {
 const experimentalFormContext = useContext(ExperimentalFormContext);
 const [owner, setOwner] = useState(defaultOwner);
 const [suggestedName, setSuggestedName] = useState(() =>
 generateWorkspaceName(),
 <Margins size="medium">
 <PageHeader
 actions={
 <>
 {experimentalFormContext && (
 <Button
 size="sm"
 variant="outline"
 onClick={experimentalFormContext.toggleOptedOut}
 >
 Try out the new workspace creation flow ✨
 </Button>
 )}
 <Button size="sm" variant="outline" onClick={onCancel}>
 Cancel
 </Button>
 </>
 <Button size="sm" variant="outline" onClick={onCancel}>
 Cancel
 </Button>
 }
 >
 <Stack direction="row">
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 } from "components/Tooltip/Tooltip";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
 import { ArrowLeft, CircleHelp, Undo2 } from "lucide-react";
 import { ArrowLeft, CircleHelp } from "lucide-react";
 import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
 import { Diagnostics } from "modules/workspaces/DynamicParameter/DynamicParameter";
 import {
 import {
 type FC,
 useCallback,
 useContext,
 useEffect,
 useId,
 useRef,
 CreateWorkspaceMode,
 ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { ExperimentalFormContext } from "./ExperimentalFormContext";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";

 owner,
 setOwner,
 }) => {
 const experimentalFormContext = useContext(ExperimentalFormContext);
 const [suggestedName, setSuggestedName] = useState(() =>
 generateWorkspaceName(),
 );
 </Badge>
 )}
 </span>
 {experimentalFormContext && (
 <Button
 size="sm"
 variant="outline"
 onClick={experimentalFormContext.toggleOptedOut}
 >
 <Undo2 />
 Classic workspace creation
 </Button>
 )}
 </div>
 <span className="flex flex-row items-center gap-2">
 <h1 className="text-3xl font-semibold m-0">New workspace</h1>
diff --git a/site/src/pages/CreateWorkspacePage/ExperimentalFormContext.tsx b/site/src/pages/CreateWorkspacePage/ExperimentalFormContext.tsx
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx

 // Check if the update was called using the values from the form
 await waitFor(() => {
 expect(API.updateWorkspace).toBeCalledWith(
 expect(API.updateWorkspace).toHaveBeenCalledWith(
 MockOutdatedWorkspace,
 [
 {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -249,6 +249,7 @@ func TestDynamicParametersWithTerraformValues(t *testing.T) {
		Value: "GO",
		},
		}
		request.EnableDynamicParameters = true
		})
		coderdtest.AwaitWorkspaceBuildJobCompleted(t, setup.client, wrk.LatestBuild.ID)

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1011,6 +1011,8 @@ export const updateWorkspace = async (
		await page.getByTestId("workspace-update-button").click();
		await page.getByTestId("confirm-button").click();

		await page.waitForSelector('[data-testid="dialog"]', { state: "visible" });

		await fillParameters(page, richParameters, buildParameters);
		await page.getByRole("button", { name: /update parameters/i }).click();

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,7 +21,6 @@ import {
		SettingsIcon,
		TrashIcon,
		} from "lucide-react";
		import { useDynamicParametersOptOut } from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
		import { type FC, useEffect, useState } from "react";
		import { useMutation, useQuery, useQueryClient } from "react-query";
		import { Link as RouterLink } from "react-router-dom";
Expand All		@@ -43,13 +42,6 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
		}) => {
		const queryClient = useQueryClient();

		const optOutQuery = useDynamicParametersOptOut({
		templateId: workspace.template_id,
		templateUsesClassicParameters:
		workspace.template_use_classic_parameter_flow,
		enabled: true,
		});

		// Permissions
		const { data: permissions } = useQuery(workspacePermissions(workspace));

Expand All		@@ -59,7 +51,11 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
		// Change version
		const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
		const changeVersionMutation = useMutation(
		changeVersion(workspace, queryClient, optOutQuery.data?.optedOut === false),
		changeVersion(
		workspace,
		queryClient,
		!workspace.template_use_classic_parameter_flow,
		),
		);

		// Delete
Expand DownExpand Up		@@ -151,7 +147,7 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
		onClose={() => setIsDownloadDialogOpen(false)}
		/>

		{optOutQuery.data?.optedOut ? (
		{workspace.template_use_classic_parameter_flow ? (
		<UpdateBuildParametersDialog
		missedParameters={
		changeVersionMutation.error instanceof MissingBuildParameters
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,11 +6,8 @@ import type {
		WorkspaceBuild,
		WorkspaceBuildParameter,
		} from "api/typesGenerated";
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
		import { Loader } from "components/Loader/Loader";
		import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
		import { useDynamicParametersOptOut } from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
		import { UpdateBuildParametersDialog } from "modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog";
		import { UpdateBuildParametersDialogExperimental } from "modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialogExperimental";
		import { type FC, useState } from "react";
Expand DownExpand Up		@@ -55,17 +52,11 @@ export const useWorkspaceUpdate = ({
		setIsConfirmingUpdate(true);
		};

		const optOutQuery = useDynamicParametersOptOut({
		templateId: workspace.template_id,
		templateUsesClassicParameters:
		workspace.template_use_classic_parameter_flow,
		enabled: true,
		});

		const confirmUpdate = (buildParameters: WorkspaceBuildParameter[] = []) => {
		updateWorkspaceMutation.mutate({
		buildParameters,
		isDynamicParametersEnabled: optOutQuery.data?.optedOut === false,
		isDynamicParametersEnabled:
		!workspace.template_use_classic_parameter_flow,
		});
		setIsConfirmingUpdate(false);
		};
Expand DownExpand Up		@@ -160,29 +151,13 @@ const MissingBuildParametersDialog: FC<MissingBuildParametersDialogProps> = ({
		error,
		...dialogProps
		}) => {
		const optOutQuery = useDynamicParametersOptOut({
		templateId: workspace.template_id,
		templateUsesClassicParameters:
		workspace.template_use_classic_parameter_flow,
		enabled: true,
		});

		const missedParameters =
		error instanceof MissingBuildParameters ? error.parameters : [];
		const versionId =
		error instanceof MissingBuildParameters ? error.versionId : undefined;
		const isOpen = error instanceof MissingBuildParameters;

		if (optOutQuery.isError) {
		return <ErrorAlert error={optOutQuery.error} />;
		}
		if (!optOutQuery.data) {
		return <Loader />;
		}

		const shouldUseClassicDialog = optOutQuery.data?.optedOut;

		return shouldUseClassicDialog ? (
		return workspace.template_use_classic_parameter_flow ? (
		<UpdateBuildParametersDialog
		missedParameters={missedParameters}
		open={isOpen}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,11 @@
		import { templateByName } from "api/queries/templates";
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { Loader } from "components/Loader/Loader";
		import {
		optOutKey,
		useDynamicParametersOptOut,
		} from "modules/workspaces/DynamicParameter/useDynamicParametersOptOut";
		import type { FC } from "react";
		import { useQuery } from "react-query";
		import { useParams } from "react-router-dom";
		import CreateWorkspacePage from "./CreateWorkspacePage";
		import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
		import { ExperimentalFormContext } from "./ExperimentalFormContext";

		const CreateWorkspaceExperimentRouter: FC = () => {
		const { organization: organizationName = "default", template: templateName } =
Expand All		@@ -19,43 +14,21 @@ const CreateWorkspaceExperimentRouter: FC = () => {
		templateByName(organizationName, templateName),
		);

		const optOutQuery = useDynamicParametersOptOut({
		templateId: templateQuery.data?.id,
		templateUsesClassicParameters:
		templateQuery.data?.use_classic_parameter_flow,
		enabled: !!templateQuery.data,
		});

		if (templateQuery.isError) {
		return <ErrorAlert error={templateQuery.error} />;
		}
		if (optOutQuery.isError) {
		return <ErrorAlert error={optOutQuery.error} />;
		}
		if (!optOutQuery.data) {
		if (!templateQuery.data) {
		return <Loader />;
		}

		const toggleOptedOut = () => {
		const key = optOutKey(optOutQuery.data?.templateId ?? "");
		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 ? (
		<>
		{templateQuery.data?.use_classic_parameter_flow ? (
		<CreateWorkspacePage />
		) : (
		<CreateWorkspacePageExperimental />
		)}
		</ExperimentalFormContext.Provider>
		</>
		);
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,14 +28,7 @@ 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,
		useContext,
		useEffect,
		useMemo,
		useState,
		} from "react";
		import { type FC, useCallback, useEffect, useMemo, useState } from "react";
		import {
		getFormHelpers,
		nameValidator,
Expand All		@@ -51,7 +44,6 @@ import type {
		CreateWorkspaceMode,
		ExternalAuthPollingState,
		} from "./CreateWorkspacePage";
		import { ExperimentalFormContext } from "./ExperimentalFormContext";
		import { ExternalAuthButton } from "./ExternalAuthButton";
		import type { CreateWorkspacePermissions } from "./permissions";

Expand DownExpand Up		@@ -106,7 +98,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		onSubmit,
		onCancel,
		}) => {
		const experimentalFormContext = useContext(ExperimentalFormContext);
		const [owner, setOwner] = useState(defaultOwner);
		const [suggestedName, setSuggestedName] = useState(() =>
		generateWorkspaceName(),
Expand DownExpand Up		@@ -220,20 +211,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		<Margins size="medium">
		<PageHeader
		actions={
		<>
		{experimentalFormContext && (
		<Button
		size="sm"
		variant="outline"
		onClick={experimentalFormContext.toggleOptedOut}
		>
		Try out the new workspace creation flow ✨
		</Button>
		)}
		<Button size="sm" variant="outline" onClick={onCancel}>
		Cancel
		</Button>
		</>
		<Button size="sm" variant="outline" onClick={onCancel}>
		Cancel
		</Button>
		}
		>
		<Stack direction="row">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,7 +26,7 @@ import {
		} from "components/Tooltip/Tooltip";
		import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
		import { type FormikContextType, useFormik } from "formik";
		import { ArrowLeft, CircleHelp, Undo2 } from "lucide-react";
		import { ArrowLeft, CircleHelp } from "lucide-react";
		import { useSyncFormParameters } from "modules/hooks/useSyncFormParameters";
		import { Diagnostics } from "modules/workspaces/DynamicParameter/DynamicParameter";
		import {
Expand All		@@ -38,7 +38,6 @@ import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName"
		import {
		type FC,
		useCallback,
		useContext,
		useEffect,
		useId,
		useRef,
Expand All		@@ -52,7 +51,6 @@ import type {
		CreateWorkspaceMode,
		ExternalAuthPollingState,
		} from "./CreateWorkspacePage";
		import { ExperimentalFormContext } from "./ExperimentalFormContext";
		import { ExternalAuthButton } from "./ExternalAuthButton";
		import type { CreateWorkspacePermissions } from "./permissions";

Expand DownExpand Up		@@ -112,7 +110,6 @@ export const CreateWorkspacePageViewExperimental: FC<
		owner,
		setOwner,
		}) => {
		const experimentalFormContext = useContext(ExperimentalFormContext);
		const [suggestedName, setSuggestedName] = useState(() =>
		generateWorkspaceName(),
		);
Expand DownExpand Up		@@ -372,16 +369,6 @@ export const CreateWorkspacePageViewExperimental: FC<
		</Badge>
		)}
		</span>
		{experimentalFormContext && (
		<Button
		size="sm"
		variant="outline"
		onClick={experimentalFormContext.toggleOptedOut}
		>
		<Undo2 />
		Classic workspace creation
		</Button>
		)}
		</div>
		<span className="flex flex-row items-center gap-2">
		<h1 className="text-3xl font-semibold m-0">New workspace</h1>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -305,7 +305,7 @@ describe("WorkspacePage", () => {

		// Check if the update was called using the values from the form
		await waitFor(() => {
		expect(API.updateWorkspace).toBeCalledWith(
		expect(API.updateWorkspace).toHaveBeenCalledWith(
		MockOutdatedWorkspace,
		[
		{
Expand Down