fix(site): demui <WorkspaceSettingsForm /> component (#27505)

This pull-request removes the imports of `@mui/material/*` from
`<WorkspaceSettingsForm />`.

site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx

@@ -1,6 +1,3 @@
-import type { Theme } from "@emotion/react";
-import MenuItem from "@mui/material/MenuItem";
-import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import upperFirst from "lodash/upperFirst";
 import type { FC } from "react";
@@ -17,7 +14,17 @@ import {
 	FormSection,
 	HorizontalForm,
 } from "#/components/Form/Form";
+import { FormField } from "#/components/FormField/FormField";
+import { Label } from "#/components/Label/Label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "#/components/Select/Select";
 import { Spinner } from "#/components/Spinner/Spinner";
+import { cn } from "#/utils/cn";
 import {
 	getFormHelpers,
 	nameValidator,
@@ -60,6 +67,12 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 		form,
 		error,
 	);
+	const automaticUpdatesField = getFieldHelpers("automatic_updates", {
+		helperText: workspace.template_require_active_version
+			? "The template for this workspace requires automatic updates."
+			: undefined,
+	});
+	const automaticUpdatesHelperId = `${automaticUpdatesField.id}-helper`;
 
 	return (
 		<HorizontalForm onSubmit={form.handleSubmit} data-testid="form">
@@ -68,20 +81,22 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 				description="Update the name of your workspace."
 			>
 				<FormFields>
-					<TextField
-						{...getFieldHelpers("name")}
+					<FormField
+						field={getFieldHelpers("name", {
+							helperText: workspace.allow_renames
+								? form.values.name !== form.initialValues.name && (
+										<span className="text-content-warning">
+											Depending on the template, renaming your workspace may be
+											destructive
+										</span>
+									)
+								: "Renaming your workspace can be destructive and is disabled by the template.",
+						})}
+						label="Name"
 						disabled={!workspace.allow_renames || form.isSubmitting}
 						onChange={onChangeTrimmed(form)}
 						autoFocus
-						fullWidth
-						label="Name"
-						css={workspace.allow_renames && styles.nameWarning}
-						helperText={
-							workspace.allow_renames
-								? form.values.name !== form.initialValues.name &&
-									"Depending on the template, renaming your workspace may be destructive"
-								: "Renaming your workspace can be destructive and is disabled by the template."
-						}
+						className="w-full"
 					/>
 				</FormFields>
 			</FormSection>
@@ -90,30 +105,58 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 				description="Configure your workspace to automatically update when started."
 			>
 				<FormFields>
-					<TextField
-						{...getFieldHelpers("automatic_updates")}
-						id="automatic_updates"
-						label="Update Policy"
-						value={
-							workspace.template_require_active_version
-								? "always"
-								: form.values.automatic_updates
-						}
-						select
-						disabled={
-							form.isSubmitting || workspace.template_require_active_version
-						}
-						helperText={
-							workspace.template_require_active_version &&
-							"The template for this workspace requires automatic updates."
-						}
-					>
-						{AutomaticUpdateses.map((value) => (
-							<MenuItem value={value} key={value}>
-								{upperFirst(value)}
-							</MenuItem>
-						))}
-					</TextField>
+					<div className="flex flex-col gap-2">
+						<Label htmlFor={automaticUpdatesField.id}>Update Policy</Label>
+						<Select
+							value={
+								workspace.template_require_active_version
+									? "always"
+									: form.values.automatic_updates
+							}
+							onValueChange={(value) =>
+								void form.setFieldValue("automatic_updates", value)
+							}
+							disabled={
+								form.isSubmitting || workspace.template_require_active_version
+							}
+						>
+							<SelectTrigger
+								id={automaticUpdatesField.id}
+								className={cn(
+									"w-full",
+									automaticUpdatesField.error && "border-border-destructive",
+								)}
+								aria-invalid={automaticUpdatesField.error}
+								aria-describedby={
+									automaticUpdatesField.helperText
+										? automaticUpdatesHelperId
+										: undefined
+								}
+							>
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								{AutomaticUpdateses.map((value) => (
+									<SelectItem value={value} key={value}>
+										{upperFirst(value)}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+						{automaticUpdatesField.helperText && (
+							<span
+								id={automaticUpdatesHelperId}
+								className={cn(
+									"text-xs",
+									automaticUpdatesField.error
+										? "text-content-destructive"
+										: "text-content-secondary",
+								)}
+							>
+								{automaticUpdatesField.helperText}
+							</span>
+						)}
+					</div>
 				</FormFields>
 			</FormSection>
 			{formEnabled && (
@@ -131,11 +174,3 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 		</HorizontalForm>
 	);
 };
-
-const styles = {
-	nameWarning: (theme: Theme) => ({
-		"& .MuiFormHelperText-root": {
-			color: theme.palette.warning.light,
-		},
-	}),
-};

site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "storybook/actions";
+import { expect, fn, screen, userEvent, waitFor, within } from "storybook/test";
 import { MockWorkspace } from "#/testHelpers/entities";
 import { WorkspaceSettingsPageView } from "./WorkspaceSettingsPageView";
 
@@ -10,6 +11,7 @@ const meta: Meta<typeof WorkspaceSettingsPageView> = {
 		error: undefined,
 		workspace: MockWorkspace,
 		onCancel: action("onCancel"),
+		onSubmit: fn(),
 	},
 };
 
@@ -23,3 +25,28 @@ export const RenamesDisabled: Story = {
 		workspace: { ...MockWorkspace, allow_renames: false },
 	},
 };
+
+export const UpdateAutomaticUpdatesPolicy: Story = {
+	args: {
+		workspace: { ...MockWorkspace, automatic_updates: "never" },
+		onSubmit: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+
+		await userEvent.click(
+			canvas.getByRole("combobox", { name: /update policy/i }),
+		);
+		await userEvent.click(
+			await screen.findByRole("option", { name: /always/i }),
+		);
+
+		await userEvent.click(canvas.getByRole("button", { name: /save/i }));
+
+		await waitFor(() =>
+			expect(args.onSubmit).toHaveBeenCalledWith(
+				expect.objectContaining({ automatic_updates: "always" }),
+			),
+		);
+	},
+};