From 17a71aea727ecedd1208c6e2a8c4f0c0748b5c1d Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 8 Apr 2026 09:32:40 +0100
Subject: [PATCH] refactor(site/src/pages/AgentsPage): extract BackButton and
 AdminBadge (#24130)

---
 .../AgentsPage/AgentSettingsUsagePageView.tsx | 14 ++-------
 .../AgentsPage/components/AdminBadge.tsx      |  5 ++--
 .../AgentsPage/components/BackButton.tsx      | 17 +++++++++++
 .../ChatModelAdminPanel/ModelForm.tsx         | 30 +++----------------
 .../ChatModelAdminPanel/ProviderForm.tsx      | 13 ++------
 .../components/MCPServerAdminPanel.tsx        | 11 ++-----
 6 files changed, 31 insertions(+), 59 deletions(-)
 create mode 100644 site/src/pages/AgentsPage/components/BackButton.tsx

diff --git a/site/src/pages/AgentsPage/AgentSettingsUsagePageView.tsx b/site/src/pages/AgentsPage/AgentSettingsUsagePageView.tsx
index d975085857..78bab31c68 100644
--- a/site/src/pages/AgentsPage/AgentSettingsUsagePageView.tsx
+++ b/site/src/pages/AgentsPage/AgentSettingsUsagePageView.tsx
@@ -1,5 +1,4 @@
 import dayjs from "dayjs";
-import { ChevronLeftIcon } from "lucide-react";
 import type { FC } from "react";
 import { getErrorMessage } from "#/api/errors";
 import type * as TypesGen from "#/api/typesGenerated";
@@ -25,6 +24,7 @@ import { useClickableTableRow } from "#/hooks/useClickableTableRow";
 import { formatTokenCount } from "#/utils/analytics";
 import { formatCostMicros } from "#/utils/currency";
 import { AdminBadge } from "./components/AdminBadge";
+import { BackButton } from "./components/BackButton";
 import { ChatCostSummaryView } from "./components/ChatCostSummaryView";
 import { SectionHeader } from "./components/SectionHeader";
 
@@ -202,17 +202,7 @@ export const AgentSettingsUsagePageView: FC<
 	);
 
 	if (selectedUserId) {
-		const backButton = (
-			<button
-				type="button"
-				onClick={onClearSelectedUser}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-			>
-				{" "}
-				<ChevronLeftIcon className="h-4 w-4" />
-				Back
-			</button>
-		);
+		const backButton = <BackButton onClick={onClearSelectedUser} />;
 
 		if (isSelectedUserLoading) {
 			return (
diff --git a/site/src/pages/AgentsPage/components/AdminBadge.tsx b/site/src/pages/AgentsPage/components/AdminBadge.tsx
index 96c59f6e8a..c3af10cac0 100644
--- a/site/src/pages/AgentsPage/components/AdminBadge.tsx
+++ b/site/src/pages/AgentsPage/components/AdminBadge.tsx
@@ -1,5 +1,6 @@
 import { ShieldIcon } from "lucide-react";
 import type { FC } from "react";
+import { Badge } from "#/components/Badge/Badge";
 import {
 	Tooltip,
 	TooltipContent,
@@ -11,10 +12,10 @@ export const AdminBadge: FC = () => (
 	<TooltipProvider delayDuration={0}>
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<span className="ml-auto inline-flex cursor-default items-center gap-1 rounded bg-surface-tertiary/60 px-2 py-1 text-[11px] leading-none font-medium text-content-secondary">
+				<Badge variant="default" size="sm" className="ml-auto cursor-default">
 					<ShieldIcon className="h-3 w-3" />
 					Admin
-				</span>
+				</Badge>
 			</TooltipTrigger>
 			<TooltipContent side="right">
 				Only visible to deployment administrators.
diff --git a/site/src/pages/AgentsPage/components/BackButton.tsx b/site/src/pages/AgentsPage/components/BackButton.tsx
new file mode 100644
index 0000000000..dce4b56b0d
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/BackButton.tsx
@@ -0,0 +1,17 @@
+import { ChevronLeftIcon } from "lucide-react";
+import type { FC } from "react";
+
+interface BackButtonProps {
+	onClick: () => void;
+}
+
+export const BackButton: FC<BackButtonProps> = ({ onClick }) => (
+	<button
+		type="button"
+		onClick={onClick}
+		className="mb-4 inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
+	>
+		<ChevronLeftIcon className="h-4 w-4" />
+		Back
+	</button>
+);
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
index 776fb9d004..88af0fa346 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ModelForm.tsx
@@ -1,7 +1,6 @@
 import { useFormik } from "formik";
 import {
 	ChevronDownIcon,
-	ChevronLeftIcon,
 	ChevronRightIcon,
 	InfoIcon,
 	PencilIcon,
@@ -41,6 +40,7 @@ import {
 } from "#/components/Tooltip/Tooltip";
 import { cn } from "#/utils/cn";
 import { getFormHelpers } from "#/utils/formUtils";
+import { BackButton } from "../BackButton";
 import type { ProviderState } from "./ChatModelAdminPanel";
 import {
 	GeneralModelConfigFields,
@@ -262,14 +262,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 	if (!selectedProviderState || modelConfigsUnavailable) {
 		return (
 			<div>
-				<button
-					type="button"
-					onClick={onCancel}
-					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-				>
-					<ChevronLeftIcon className="h-4 w-4" />
-					Back
-				</button>
+				<BackButton onClick={onCancel} />
 				<h2 className="m-0 text-lg font-medium text-content-primary">
 					{isEditing ? "Edit Model" : "Add Model"}
 				</h2>
@@ -283,14 +276,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 	if (!canManageModels && !isEditing) {
 		return (
 			<div>
-				<button
-					type="button"
-					onClick={onCancel}
-					className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-				>
-					<ChevronLeftIcon className="h-4 w-4" />
-					Back
-				</button>
+				<BackButton onClick={onCancel} />
 				<h2 className="m-0 text-lg font-medium text-content-primary">
 					Add Model
 				</h2>
@@ -316,15 +302,7 @@ export const ModelForm: FC<ModelFormProps> = ({
 	return (
 		<div className="flex min-h-full flex-col">
 			{/* Back */}
-			<button
-				type="button"
-				onClick={onCancel}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-			>
-				<ChevronLeftIcon className="h-4 w-4" />
-				Back
-			</button>
-			{/* Header - editable display name */}
+			<BackButton onClick={onCancel} /> {/* Header - editable display name */}
 			<div className="flex items-center gap-3">
 				{selectedProviderState && (
 					<ProviderIcon
diff --git a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
index b694837c04..07e0c9645e 100644
--- a/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
+++ b/site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, InfoIcon } from "lucide-react";
+import { InfoIcon } from "lucide-react";
 import {
 	type CSSProperties,
 	type FC,
@@ -27,6 +27,7 @@ import {
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
 import { formatProviderLabel } from "../../utils/modelOptions";
+import { BackButton } from "../BackButton";
 import type { ProviderState } from "./ChatModelAdminPanel";
 import { readOptionalString } from "./helpers";
 import { ProviderIcon } from "./ProviderIcon";
@@ -241,15 +242,7 @@ export const ProviderForm: FC<ProviderFormProps> = ({
 	return (
 		<div className="flex min-h-full flex-col">
 			{/* Back */}
-			<button
-				type="button"
-				onClick={onBack}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 border-0 bg-transparent p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-			>
-				<ChevronLeftIcon className="h-4 w-4" />
-				Back
-			</button>
-
+			<BackButton onClick={onBack} />
 			{/* Provider header, editable name */}
 			<div className="flex items-center gap-3">
 				<ProviderIcon provider={provider} className="h-8 w-8" />
diff --git a/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx b/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
index 2355c85018..35e2fdefba 100644
--- a/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
+++ b/site/src/pages/AgentsPage/components/MCPServerAdminPanel.tsx
@@ -1,7 +1,6 @@
 import { useFormik } from "formik";
 import {
 	CheckCircleIcon,
-	ChevronLeftIcon,
 	ChevronRightIcon,
 	CircleIcon,
 	PlusIcon,
@@ -41,6 +40,7 @@ import {
 	TooltipTrigger,
 } from "#/components/Tooltip/Tooltip";
 import { cn } from "#/utils/cn";
+import { BackButton } from "./BackButton";
 import { ProviderField as Field } from "./ChatModelAdminPanel/ProviderForm";
 import { SectionHeader } from "./SectionHeader";
 
@@ -355,14 +355,7 @@ const ServerForm: FC<ServerFormProps> = ({
 	return (
 		<div className="flex min-h-full flex-col">
 			{/* Back */}
-			<button
-				type="button"
-				onClick={onBack}
-				className="mb-4 inline-flex cursor-pointer items-center gap-0.5 bg-transparent border-0 p-0 text-sm text-content-secondary transition-colors hover:text-content-primary"
-			>
-				<ChevronLeftIcon className="h-4 w-4" />
-				Back
-			</button>
+			<BackButton onClick={onBack} />
 			{/* Header with icon + editable name + enabled toggle */}
 			<div className="flex items-center gap-3">
 				<MCPServerIcon