fix(site): autosave personal model overrides toggle (#26871)

site/src/pages/AISettingsPage/CoderAgentsPage/components/AdminPersonalModelOverridesSettings.stories.tsx

@@ -110,7 +110,9 @@ export const Saving: Story = {
 		});
 
 		expect(toggle).toBeDisabled();
-		expect(canvas.getByRole("button", { name: /save/i })).toBeDisabled();
+		expect(
+			canvas.queryByRole("button", { name: "Save" }),
+		).not.toBeInTheDocument();
 	},
 };
 
@@ -136,16 +138,14 @@ export const SavesChangedSetting: Story = {
 			name: "Allow personal model overrides",
 		});
 		await userEvent.click(toggle);
-		const saveButton = await canvas.findByRole("button", { name: "Save" });
+
 		await waitFor(() => {
-			expect(saveButton).toBeEnabled();
-		});
-		await userEvent.click(saveButton);
-		await waitFor(() => {
-			expect(args.onSaveAdminSetting).toHaveBeenCalledWith(
-				{ allow_users: true },
-				expect.anything(),
-			);
+			expect(args.onSaveAdminSetting).toHaveBeenCalledWith({
+				allow_users: true,
+			});
 		});
+		expect(
+			canvas.queryByRole("button", { name: "Save" }),
+		).not.toBeInTheDocument();
 	},
 };

site/src/pages/AISettingsPage/CoderAgentsPage/components/AdminPersonalModelOverridesSettings.tsx

@@ -1,14 +1,8 @@
-import { useFormik } from "formik";
 import type { FC } from "react";
 import type * as TypesGen from "#/api/typesGenerated";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
 import { Button } from "#/components/Button/Button";
-import { Spinner } from "#/components/Spinner/Spinner";
 import { Switch } from "#/components/Switch/Switch";
-import {
-	TemporarySavedState,
-	useTemporarySavedState,
-} from "#/components/TemporarySavedState/TemporarySavedState";
 
 interface MutationCallbacks {
 	onSuccess?: () => void;
@@ -41,45 +35,22 @@ export const AdminPersonalModelOverridesSettings: FC<
 	isSavingAdminSetting,
 	isSaveAdminSettingError,
 }) => {
-	const { isSavedVisible, showSavedState } = useTemporarySavedState();
 	const hasLoadedAdminSettings = adminSettings !== undefined;
 	const hasAdminSettingsError = adminSettingsError != null;
-	const form = useFormik({
-		enableReinitialize: true,
-		initialValues: {
-			allow_users: adminSettings?.allow_users ?? false,
-		},
-		onSubmit: (values, { resetForm }) => {
-			onSaveAdminSetting(
-				{
-					allow_users: values.allow_users,
-				},
-				{
-					onSuccess: () => {
-						showSavedState();
-						resetForm({ values });
-					},
-				},
-			);
-		},
-	});
 	const isDisabled = isSavingAdminSetting || !hasLoadedAdminSettings;
-	const showSave = form.dirty || isSavingAdminSetting || isSavedVisible;
-	const showStatusArea =
-		hasAdminSettingsError || !hasLoadedAdminSettings || isSaveAdminSettingError;
+	const allowsUsers = adminSettings?.allow_users ?? false;
 
 	return (
-		<form
+		<div
+			role="group"
 			aria-label="Allow personal model overrides"
 			className="flex flex-col"
-			onSubmit={form.handleSubmit}
-			noValidate
 		>
 			<div className="flex min-h-8 items-start gap-2 font-sans text-sm font-normal leading-6 text-content-primary">
 				<Switch
-					checked={form.values.allow_users}
+					checked={allowsUsers}
 					onCheckedChange={(checked) => {
-						void form.setFieldValue("allow_users", checked);
+						onSaveAdminSetting({ allow_users: checked });
 					}}
 					aria-label="Allow personal model overrides"
 					type="button"
@@ -93,54 +64,33 @@ export const AdminPersonalModelOverridesSettings: FC<
 					</span>
 				</div>
 			</div>
-			{showSave && (
-				<div className="mt-4 flex min-h-10 items-center">
-					{isSavedVisible ? (
-						<TemporarySavedState />
-					) : (
+			{hasAdminSettingsError && (
+				<div className="mt-4 flex flex-col gap-2 text-xs text-content-primary">
+					<ErrorAlert error={adminSettingsError} />
+					{onRetryAdminSettings && (
 						<Button
-							size="lg"
-							type="submit"
-							disabled={isDisabled || !form.dirty}
-							className="h-10 min-w-[88px]"
+							disabled={isRetryingAdminSettings}
+							onClick={onRetryAdminSettings}
+							size="sm"
+							type="button"
+							variant="outline"
+							className="w-fit"
 						>
-							{isSavingAdminSetting && <Spinner loading className="h-4 w-4" />}
-							Save
+							Retry
 						</Button>
 					)}
 				</div>
 			)}
-			{showStatusArea && (
-				<div className="text-xs">
-					{hasAdminSettingsError && (
-						<div className="flex flex-col gap-2 text-content-primary">
-							<ErrorAlert error={adminSettingsError} />
-							{onRetryAdminSettings && (
-								<Button
-									disabled={isRetryingAdminSettings}
-									onClick={onRetryAdminSettings}
-									size="sm"
-									type="button"
-									variant="outline"
-									className="w-fit"
-								>
-									Retry
-								</Button>
-							)}
-						</div>
-					)}
-					{!hasAdminSettingsError && !hasLoadedAdminSettings && (
-						<p className="m-0 text-content-secondary">
-							Loading personal model override settings...
-						</p>
-					)}
-					{isSaveAdminSettingError && (
-						<p className="m-0 text-content-destructive">
-							Failed to save personal model override settings.
-						</p>
-					)}
-				</div>
+			{!hasAdminSettingsError && !hasLoadedAdminSettings && (
+				<p className="m-0 mt-4 text-xs text-content-secondary">
+					Loading personal model override settings...
+				</p>
 			)}
-		</form>
+			{isSaveAdminSettingError && (
+				<p className="m-0 mt-4 text-xs text-content-destructive">
+					Failed to save personal model override settings.
+				</p>
+			)}
+		</div>
 	);
 };