feat: add default workspace name to Template Embed form

mtojek · mtojek · commit 176f74742d8e · 2025-09-03T13:22:23.000+02:00
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { API } from "api/api";
 import { TemplateLayout } from "pages/TemplatePage/TemplateLayout";
@@ -30,6 +30,11 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
 	await waitForLoaderToBeRemoved();
 
 	const user = userEvent.setup();
+	const workspaceName = within(
+		screen.getByTestId("default-workspace-name"),
+	).getByRole("textbox");
+	await user.clear(workspaceName);
+	await user.type(workspaceName, "my-first-workspace");
 	const firstParameterField = screen.getByLabelText(
 		parameter1.display_name ?? parameter1.name,
 		{ exact: false },
@@ -47,6 +52,6 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
 	const copyButton = screen.getByRole("button", { name: /copy/i });
 	await userEvent.click(copyButton);
 	expect(window.navigator.clipboard.writeText).toBeCalledWith(
-		`[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/${MockTemplate.organization_name}/${MockTemplate.name}/workspace?mode=manual&param.first_parameter=firstParameterValue&param.second_parameter=123456)`,
+		`[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/${MockTemplate.organization_name}/${MockTemplate.name}/workspace?mode=manual&param.first_parameter=firstParameterValue&param.second_parameter=123456&name=my-first-workspace)`,
 	);
 });
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -2,6 +2,7 @@ import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
+import TextField from "@mui/material/TextField";
 import { API } from "api/api";
 import type { Template, TemplateVersionParameter } from "api/typesGenerated";
 import { FormSection, VerticalForm } from "components/Form/Form";
@@ -13,9 +14,11 @@ import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
+import { nameValidator } from "utils/formUtils";
 import { pageTitle } from "utils/page";
 import { getInitialRichParameterValues } from "utils/richParameters";
 import { paramsUsedToCreateWorkspace } from "utils/workspace";
+import { ValidationError } from "yup";
 
 type ButtonValues = Record<string, string>;
 
@@ -89,6 +92,17 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 		}
 	}, [buttonValues, templateParameters]);
 
+	const [workspaceNameError, setWorkspaceNameError] = useState("");
+	const workspaceNameValidator = nameValidator("Workspace name");
+	const validateWorkspaceName = (workspaceName: string) => {
+		try {
+			workspaceName && workspaceNameValidator.validateSync(workspaceName);
+			setWorkspaceNameError("");
+		} catch (e) {
+			setWorkspaceNameError(e instanceof ValidationError ? e.message : "");
+		}
+	};
+
 	return (
 		<>
 			<Helmet>
@@ -126,6 +140,26 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 								</RadioGroup>
 							</FormSection>
 
+							<FormSection
+								title="Workspace name"
+								description="Default name for the new workspace"
+							>
+								<TextField
+									data-testid="default-workspace-name"
+									defaultValue={buttonValues.name}
+									fullWidth
+									onChange={(event) => {
+										validateWorkspaceName(event.target.value);
+										setButtonValues((buttonValues) => ({
+											...buttonValues,
+											name: event.target.value,
+										}));
+									}}
+									error={workspaceNameError !== ""}
+									helperText={workspaceNameError}
+								/>
+							</FormSection>
+
 							{templateParameters.length > 0 && (
 								<div
 									css={{ display: "flex", flexDirection: "column", gap: 36 }}
