chore: replace MUI buttons (#19968)

Replace MUI buttons with `components/Button`

Author: BrunoQuaresma

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

@@ -1,9 +1,9 @@
-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 { API } from "api/api";
 import type { Template, TemplateVersionParameter } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { FormSection, VerticalForm } from "components/Form/Form";
 import { Input } from "components/Input/Input";
 import { Label } from "components/Label/Label";
@@ -236,18 +236,11 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 							}}
 						>
 							<Button
-								css={{ borderRadius: 999 }}
-								startIcon={
-									clipboard.showCopiedSuccess ? (
-										<CheckIcon className="size-icon-sm" />
-									) : (
-										<CopyIcon className="size-icon-sm" />
-									)
-								}
-								variant="contained"
+								className="rounded-full"
 								onClick={clipboard.copyToClipboard}
 								disabled={clipboard.showCopiedSuccess}
 							>
+								{clipboard.showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
 								Copy button code
 							</Button>
 						</div>

site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx

@@ -1,6 +1,6 @@
-import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import { Button } from "components/Button/Button";
 import dayjs from "dayjs";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { type FC, useRef, useState } from "react";
@@ -31,15 +31,16 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 	return (
 		<div>
 			<Button
+				variant="outline"
 				ref={anchorRef}
 				id="interval-button"
 				aria-controls={open ? "interval-menu" : undefined}
 				aria-haspopup="true"
 				aria-expanded={open ? "true" : undefined}
 				onClick={() => setOpen(true)}
-				endIcon={<ChevronDownIcon className="size-icon-xs" />}
 			>
 				Last {numberOfWeeks} weeks
+				<ChevronDownIcon />
 			</Button>
 			<Menu
 				id="interval-menu"

site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx

@@ -1,8 +1,8 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import TableCell from "@mui/material/TableCell";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
+import { Button } from "components/Button/Button";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
@@ -107,7 +107,7 @@ export const VersionRow: FC<VersionRowProps> = ({
 
 						{jobStatus === "failed" && onArchiveClick && (
 							<Button
-								css={styles.promoteButton}
+								variant="outline"
 								disabled={isActive || version.archived}
 								onClick={(e) => {
 									e.preventDefault();
@@ -121,7 +121,7 @@ export const VersionRow: FC<VersionRowProps> = ({
 
 						{jobStatus === "succeeded" && onPromoteClick && (
 							<Button
-								css={styles.promoteButton}
+								variant="outline"
 								disabled={isActive || jobStatus !== "succeeded"}
 								onClick={(e) => {
 									e.preventDefault();
@@ -140,11 +140,6 @@ export const VersionRow: FC<VersionRowProps> = ({
 };
 
 const styles = {
-	promoteButton: (theme) => ({
-		color: theme.palette.text.secondary,
-		transition: "none",
-	}),
-
 	versionWrapper: {
 		padding: "16px 32px",
 	},

site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx

@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import FormHelperText from "@mui/material/FormHelperText";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import {
@@ -27,7 +27,7 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
 				spacing={0}
 				alignItems="baseline"
 				justifyContent="center"
-				css={{ width: "100%" }}
+				className="w-full gap-0.5"
 			>
 				{(
 					[
@@ -44,11 +44,10 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
 					}[]
 				).map((day) => (
 					<Button
-						fullWidth
-						key={day.key}
-						css={{ borderRadius: 0 }}
+						variant="outline"
 						// TODO: Adding a background color would also help
-						color={value.includes(day.value) ? "primary" : "secondary"}
+						className={`flex-1 rounded-none ${value.includes(day.value) ? "text-content-primary bg-surface-tertiary" : "text-content-secondary"}`}
+						key={day.key}
 						disabled={isSubmitting || !enabled}
 						onClick={() => {
 							if (!value.includes(day.value)) {

site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx

@@ -1,6 +1,6 @@
-import Button from "@mui/material/Button";
 import type { TemplateVersion } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import {
@@ -49,21 +49,18 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
 				actions={
 					<>
 						{createWorkspaceUrl && (
-							<Button
-								variant="contained"
-								startIcon={<PlusIcon />}
-								component={RouterLink}
-								to={createWorkspaceUrl}
-							>
-								Create workspace
+							<Button asChild>
+								<RouterLink to={createWorkspaceUrl}>
+									<PlusIcon />
+									Create workspace
+								</RouterLink>
 							</Button>
 						)}
-						<Button
-							startIcon={<EditIcon className="size-icon-xs" />}
-							component={RouterLink}
-							to={`${templateLink}/versions/${versionName}/edit`}
-						>
-							Edit
+						<Button variant="outline" asChild>
+							<RouterLink to={`${templateLink}/versions/${versionName}/edit`}>
+								<EditIcon />
+								Edit
+							</RouterLink>
 						</Button>
 					</>
 				}

site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx

@@ -1,4 +1,3 @@
-import Button from "@mui/material/Button";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -8,6 +7,7 @@ import TableRow from "@mui/material/TableRow";
 import type * as TypesGen from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import type { FC } from "react";
@@ -74,12 +74,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app, revoke }) => {
 			</TableCell>
 
 			<TableCell>
-				<Button
-					variant="contained"
-					size="small"
-					color="error"
-					onClick={() => revoke(app)}
-				>
+				<Button size="sm" variant="destructive" onClick={() => revoke(app)}>
 					Revoke&hellip;
 				</Button>
 			</TableCell>

site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import type { GitSSHKey } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -63,7 +63,11 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
 					</p>
 					<CodeExample secret={false} code={sshKey.public_key.trim()} />
 					<div>
-						<Button onClick={onRegenerateClick} data-testid="regenerate">
+						<Button
+							onClick={onRegenerateClick}
+							data-testid="regenerate"
+							variant="outline"
+						>
 							Regenerate&hellip;
 						</Button>
 					</div>

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from "@emotion/react";
 import GitHubIcon from "@mui/icons-material/GitHub";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { API } from "api/api";
@@ -11,6 +10,7 @@ import type {
 	OIDCAuthMethod,
 	UserLoginType,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Stack } from "components/Stack/Stack";
@@ -149,24 +149,26 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 						<>
 							{authMethods.github.enabled && (
 								<Button
-									size="large"
-									fullWidth
+									variant="outline"
+									size="lg"
+									className="w-full"
 									disabled={isUpdating}
-									startIcon={<GitHubIcon css={{ width: 16, height: 16 }} />}
 									onClick={() => openConfirmation("github")}
 								>
+									<GitHubIcon />
 									GitHub
 								</Button>
 							)}
 
 							{authMethods.oidc.enabled && (
 								<Button
-									size="large"
-									fullWidth
+									variant="outline"
+									size="lg"
+									className="w-full"
 									disabled={isUpdating}
-									startIcon={<OIDCIcon oidcAuth={authMethods.oidc} />}
 									onClick={() => openConfirmation("oidc")}
 								>
+									<OIDCIcon oidcAuth={authMethods.oidc} />
 									{getOIDCLabel(authMethods.oidc)}
 								</Button>
 							)}
@@ -229,7 +231,7 @@ interface OIDCIconProps {
 
 const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	if (!oidcAuth.iconUrl) {
-		return <KeyIcon className="size-4" />;
+		return <KeyIcon />;
 	}
 
 	return (

site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx

@@ -1,6 +1,6 @@
 import { css, type Interpolation, type Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type { APIKeyWithOwner } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
@@ -65,12 +65,11 @@ const TokensPage: FC = () => {
 
 const TokenActions: FC = () => (
 	<Stack direction="row" justifyContent="end" css={{ marginBottom: 8 }}>
-		<Button
-			startIcon={<PlusIcon className="size-icon-sm" />}
-			component={RouterLink}
-			to="new"
-		>
-			Add token
+		<Button asChild variant="outline">
+			<RouterLink to="new">
+				<PlusIcon />
+				Add token
+			</RouterLink>
 		</Button>
 	</Stack>
 );

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx

@@ -1,9 +1,9 @@
-import Button from "@mui/material/Button";
 import { API } from "api/api";
 import { isApiValidationError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Loader } from "components/Loader/Loader";
 import { ExternalLinkIcon } from "lucide-react";
@@ -163,15 +163,15 @@ export const WorkspaceParametersPageView: FC<
 					<EmptyState
 						message="This workspace has no parameters"
 						cta={
-							<Button
-								component="a"
-								href={docs("/admin/templates/extending-templates/parameters")}
-								startIcon={<ExternalLinkIcon className="size-icon-xs" />}
-								variant="contained"
-								target="_blank"
-								rel="noreferrer"
-							>
-								Learn more about parameters
+							<Button asChild>
+								<a
+									href={docs("/admin/templates/extending-templates/parameters")}
+									target="_blank"
+									rel="noreferrer"
+								>
+									<ExternalLinkIcon className="size-icon-xs" />
+									Learn more about parameters
+								</a>
 							</Button>
 						}
 						css={(theme) => ({