Apr 21, 2025 · Apr 16, 2025 · Apr 17, 2025 · Apr 17, 2025 · Apr 17, 2025 · Apr 17, 2025
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 { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } 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";

 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(
 dynamicParametersEnabled
 ? templateByName(organizationName, templateName)
 : { 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) {
 return <CreateWorkspacePageExperimental />;
 if (optOutQuery.isLoading) {
 return <Loader />;
 }
 if (!optOutQuery.data) {
 return <ErrorAlert error={optOutQuery.error} />;
 }

 const toggleOptedOut = () => {
 const key = optOutKey(optOutQuery.data.templateId);
 const current = localStorage.getItem(key) === "true";
 localStorage.setItem(key, (!current).toString());
 optOutQuery.refetch();
 };

 return (
 <ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
 {optOutQuery.data.optedOut ? (
 <CreateWorkspacePage />
 ) : (
 <CreateWorkspacePageExperimental />
 )}
 </ExperimentalFormContext.Provider>
 );
 }

 return <CreateWorkspacePage />;
 };

 export default CreateWorkspaceExperimentRouter;

 const optOutKey = (id: string) => `parameters.${id}.optOut`;

 export const ExperimentalFormContext = createContext<
 { toggleOptedOut: () => void } | undefined
 >(undefined);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
 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
 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";
 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,
 useValidationSchemaForRichParameters,
 } from "utils/richParameters";
 import * as Yup from "yup";
 import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 CreateWorkspaceMode,
 ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { ExternalAuthButton } from "./ExternalAuthButton";
 import type { CreateWorkspacePermissions } from "./permissions";

 export const Language = {
 duplicationWarning:
 "Duplicating a workspace only copies its parameters. No state from the old workspace is copied over.",
 onSubmit,
 onCancel,
 }) => {
 const experimentalFormContext = useContext(ExperimentalFormContext);
 const [owner, setOwner] = useState(defaultOwner);
 const [suggestedName, setSuggestedName] = useState(() =>
 generateWorkspaceName(),
 <Margins size="medium">
 <PageHeader
 actions={
 <Button size="sm" variant="outline" onClick={onCancel}>
 Cancel
 </Button>
 <>
 {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>
 </>
 }
 >
 <Stack direction="row">
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
 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";
 import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
 import type {
 CreateWorkspaceMode,
 ExternalAuthPollingState,
 owner,
 setOwner,
 }) => {
 const experimentalFormContext = useContext(ExperimentalFormContext);
 const [suggestedName, setSuggestedName] = useState(() =>
 generateWorkspaceName(),
 );
 </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-colitems-startgap-2 mt-10">
 <div className="flex items-center gap-2">
 <Avatar
 variant="icon"
 <h1 className="text-3xl font-semibold m-0">New workspace</h1>

 {template.deprecated && <Pill type="warning">Deprecated</Pill>}

 {experimentalFormContext && (
 <Button
 size="sm"
 variant="subtle"
 onClick={experimentalFormContext.toggleOptedOut}
 >
 Go back to the classic workspace creation flow
 </Button>
 )}
 </header>

 <form
Original file line number	Diff line number	Diff line change
		@@ -1,18 +1,76 @@
		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 type { FC } 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";

		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(
		dynamicParametersEnabled
		? templateByName(organizationName, templateName)
		: { 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) {
		return <CreateWorkspacePageExperimental />;
		if (optOutQuery.isLoading) {
		return <Loader />;
		}
		if (!optOutQuery.data) {
		return <ErrorAlert error={optOutQuery.error} />;
		}

		const toggleOptedOut = () => {
		const key = optOutKey(optOutQuery.data.templateId);
		const current = localStorage.getItem(key) === "true";
		localStorage.setItem(key, (!current).toString());
		optOutQuery.refetch();
		};

		return (
		<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
		{optOutQuery.data.optedOut ? (
		<CreateWorkspacePage />
		) : (
		<CreateWorkspacePageExperimental />
		)}
		</ExperimentalFormContext.Provider>
		);
		}

		return <CreateWorkspacePage />;
		};

		export default CreateWorkspaceExperimentRouter;

		const optOutKey = (id: string) => `parameters.${id}.optOut`;

		export const ExperimentalFormContext = createContext<
		{ toggleOptedOut: () => void } \| undefined
		>(undefined);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand DownExpand Up		@@ -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,
Expand All		@@ -41,12 +47,14 @@ import {
		useValidationSchemaForRichParameters,
		} from "utils/richParameters";
		import * as Yup from "yup";
		import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
		import type {
		CreateWorkspaceMode,
		ExternalAuthPollingState,
		} from "./CreateWorkspacePage";
		import { ExternalAuthButton } from "./ExternalAuthButton";
		import type { CreateWorkspacePermissions } from "./permissions";

		export const Language = {
		duplicationWarning:
		"Duplicating a workspace only copies its parameters. No state from the old workspace is copied over.",
Expand DownExpand Up		@@ -98,6 +106,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		onSubmit,
		onCancel,
		}) => {
		const experimentalFormContext = useContext(ExperimentalFormContext);
		const [owner, setOwner] = useState(defaultOwner);
		const [suggestedName, setSuggestedName] = useState(() =>
		generateWorkspaceName(),
Expand DownExpand Up		@@ -211,9 +220,20 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		<Margins size="medium">
		<PageHeader
		actions={
		<Button size="sm" variant="outline" onClick={onCancel}>
		Cancel
		</Button>
		<>
		{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>
		</>
		}
		>
		<Stack direction="row">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,10 +22,18 @@ 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";
		import { ExperimentalFormContext } from "./CreateWorkspaceExperimentRouter";
		import type {
		CreateWorkspaceMode,
		ExternalAuthPollingState,
Expand DownExpand Up		@@ -89,6 +97,7 @@ export const CreateWorkspacePageViewExperimental: FC<
		owner,
		setOwner,
		}) => {
		const experimentalFormContext = useContext(ExperimentalFormContext);
		const [suggestedName, setSuggestedName] = useState(() =>
		generateWorkspaceName(),
		);
Expand DownExpand Up		@@ -251,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-colitems-startgap-2 mt-10">
		<div className="flex items-center gap-2">
		<Avatar
		variant="icon"
Expand All		@@ -268,6 +277,16 @@ export const CreateWorkspacePageViewExperimental: FC<
		<h1 className="text-3xl font-semibold m-0">New workspace</h1>

		{template.deprecated && <Pill type="warning">Deprecated</Pill>}

		{experimentalFormContext && (
		<Button
		size="sm"
		variant="subtle"
		onClick={experimentalFormContext.toggleOptedOut}
		>
		Go back to the classic workspace creation flow
		</Button>
		)}
		</header>

		<form
Expand Down