add support for presets to the coder frontend

SasSwart · SasSwart · commit 0f53056648c9 · 2025-02-14T08:36:53.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1145,6 +1145,15 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getTemplateVersionPresets = async (
+		templateVersionId: string,
+	): Promise<TypesGen.Preset[]> => {
+		const response = await this.axios.get<TypesGen.Preset[]>(
+			`/api/v2/templateversions/${templateVersionId}/presets`,
+		);
+		return response.data;
+	};
+
 	startWorkspace = (
 		workspaceId: string,
 		templateVersionId: string,
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -2,6 +2,7 @@ import { API, type GetTemplatesOptions, type GetTemplatesQuery } from "api/api";
 import type {
 	CreateTemplateRequest,
 	CreateTemplateVersionRequest,
+	Preset,
 	ProvisionerJob,
 	ProvisionerJobStatus,
 	Template,
@@ -305,6 +306,13 @@ export const previousTemplateVersion = (
 	};
 };
 
+export const templateVersionPresets = (versionId: string) => {
+	return {
+		queryKey: ["templateVersion", versionId, "presets"],
+		queryFn: () => API.getTemplateVersionPresets(versionId),
+	};
+};
+
 const waitBuildToBeFinished = async (
 	version: TemplateVersion,
 	onRequest?: (data: TemplateVersion) => void,
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -5,6 +5,7 @@ import {
 	richParameters,
 	templateByName,
 	templateVersionExternalAuth,
+	templateVersionPresets,
 } from "api/queries/templates";
 import { autoCreateWorkspace, createWorkspace } from "api/queries/workspaces";
 import type {
@@ -56,6 +57,11 @@ const CreateWorkspacePage: FC = () => {
 	const templateQuery = useQuery(
 		templateByName(organizationName, templateName),
 	);
+	const templateVersionPresetsQuery = useQuery(
+		templateQuery.data
+			? templateVersionPresets(templateQuery.data.active_version_id)
+			: { enabled: false },
+	);
 	const permissionsQuery = useQuery(
 		templateQuery.data
 			? checkAuthorization({
@@ -203,6 +209,7 @@ const CreateWorkspacePage: FC = () => {
 					hasAllRequiredExternalAuth={hasAllRequiredExternalAuth}
 					permissions={permissionsQuery.data as CreateWSPermissions}
 					parameters={realizedParameters as TemplateVersionParameter[]}
+					presets={templateVersionPresetsQuery.data ?? []}
 					creatingWorkspace={createWorkspaceMutation.isLoading}
 					onCancel={() => {
 						navigate(-1);
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -116,6 +116,38 @@ export const Parameters: Story = {
 	},
 };
 
+export const Presets: Story = {
+	args: {
+		presets: [
+			{
+				ID: "preset-1",
+				Name: "Preset 1",
+				Parameters: [
+					{
+						Name: MockTemplateVersionParameter1.name,
+						Value: "preset 1 override",
+					},
+				],
+			},
+			{
+				ID: "preset-2",
+				Name: "Preset 2",
+				Parameters: [
+					{
+						Name: MockTemplateVersionParameter2.name,
+						Value: "42",
+					},
+				],
+			},
+		],
+		parameters: [
+			MockTemplateVersionParameter1,
+			MockTemplateVersionParameter2,
+			MockTemplateVersionParameter3,
+		],
+	},
+};
+
 export const ExternalAuth: Story = {
 	args: {
 		externalAuth: [
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -6,6 +6,7 @@ import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
+import { SelectFilter } from "components/Filter/SelectFilter";
 import {
 	FormFields,
 	FormFooter,
@@ -64,6 +65,7 @@ export interface CreateWorkspacePageViewProps {
 	hasAllRequiredExternalAuth: boolean;
 	parameters: TypesGen.TemplateVersionParameter[];
 	autofillParameters: AutofillBuildParameter[];
+	presets: TypesGen.Preset[];
 	permissions: CreateWSPermissions;
 	creatingWorkspace: boolean;
 	onCancel: () => void;
@@ -88,6 +90,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	hasAllRequiredExternalAuth,
 	parameters,
 	autofillParameters,
+	presets = [],
 	permissions,
 	creatingWorkspace,
 	onSubmit,
@@ -145,6 +148,68 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 		[autofillParameters],
 	);
 
+	const presetOptions = useMemo(() => {
+		return [
+			{ label: "None", value: "" },
+			...presets.map((preset) => ({
+				label: preset.Name,
+				value: preset.ID,
+			})),
+		];
+	}, [presets]);
+
+	const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);
+	const [presetParameterNames, setPresetParameterNames] = useState<string[]>(
+		[],
+	);
+
+	useEffect(() => {
+		// TODO (sasswart): test case: what if immutable parameters are used in the preset?
+		// TODO (sasswart): test case: what if presets are defined for a template version with no params?
+		// TODO (sasswart): test case: what if a non active version is selected?
+		// TODO (sasswart): test case: what if a preset is selected that has no parameters?
+		// TODO (sasswart): what if we have preset params and autofill params on the same param?
+		// TODO (sasswart): test case: if we move from preset to no preset, do we reset the params?
+		// If so, how should it behave? Reset to initial value? reset to last set value?
+		// TODO (sasswart): test case: rich parameters
+
+		const selectedPresetOption = presetOptions[selectedPresetIndex];
+		let selectedPreset: TypesGen.Preset | undefined;
+		for (const preset of presets) {
+			if (preset.ID === selectedPresetOption.value) {
+				selectedPreset = preset;
+				break;
+			}
+		}
+
+		if (!selectedPreset || !selectedPreset.Parameters) {
+			setPresetParameterNames([]);
+			return;
+		}
+
+		setPresetParameterNames(selectedPreset.Parameters.map((p) => p.Name));
+
+		for (const presetParameter of selectedPreset.Parameters) {
+			const parameterIndex = parameters.findIndex(
+				(p) => p.name === presetParameter.Name,
+			);
+			if (parameterIndex === -1) continue;
+
+			const parameterField = `rich_parameter_values.${parameterIndex}`;
+
+			form.setFieldValue(parameterField, {
+				name: presetParameter.Name,
+				value: presetParameter.Value,
+			});
+		}
+	}, [
+		presetOptions,
+		selectedPresetIndex,
+		presets,
+		parameters,
+		form.setFieldValue,
+	]);
+
 	return (
 		<Margins size="medium">
 			<PageHeader
@@ -189,6 +254,31 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 					</Alert>
 				)}
 
+				{presets.length > 0 && (
+					<FormSection
+						title="Presets"
+						description="A list of preset workspace configurations to get you started."
+					>
+						<FormFields>
+							<Stack direction="row" spacing={2}>
+								<SelectFilter
+									label="Preset"
+									options={presetOptions}
+									onSelect={(option) => {
+										setSelectedPresetIndex(
+											presetOptions.findIndex(
+												(preset) => preset.value === option?.value,
+											),
+										);
+									}}
+									placeholder="Select a preset"
+									selectedOption={presetOptions[selectedPresetIndex]}
+								/>
+							</Stack>
+						</FormFields>
+					</FormSection>
+				)}
+
 				{/* General info */}
 				<FormSection
 					title="General"
@@ -292,7 +382,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 								const isDisabled =
 									disabledParams?.includes(
 										parameter.name.toLowerCase().replace(/ /g, "_"),
-									) || creatingWorkspace;
+									) ||
+									creatingWorkspace ||
+									presetParameterNames.includes(parameter.name);
 
 								return (
 									<RichParameterInput
