chore: replace MUI Link - Phase 1

site/src/components/Expander/Expander.tsx

@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
-import Link from "@mui/material/Link";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import type { FC, ReactNode } from "react";
 
@@ -20,18 +19,18 @@ export const Expander: FC<ExpanderProps> = ({
 	return (
 		<>
 			{!expanded && (
-				<Link onClick={toggleExpanded} css={styles.expandLink}>
+				<button onClick={toggleExpanded} css={styles.expandLink}>
 					<span css={styles.text}>
 						Click here to learn more
 						<DropdownArrow margin={false} />
 					</span>
-				</Link>
+				</button>
 			)}
 			<Collapse in={expanded}>
 				<div css={styles.text}>{children}</div>
 			</Collapse>
 			{expanded && (
-				<Link
+				<button
 					onClick={toggleExpanded}
 					css={[styles.expandLink, styles.collapseLink]}
 				>
@@ -39,7 +38,7 @@ export const Expander: FC<ExpanderProps> = ({
 						Click here to hide
 						<DropdownArrow margin={false} close />
 					</span>
-				</Link>
+				</button>
 			)}
 		</>
 	);
@@ -49,6 +48,10 @@ const styles = {
 	expandLink: (theme) => ({
 		cursor: "pointer",
 		color: theme.palette.text.secondary,
+		background: "none",
+		border: "none",
+		padding: 0,
+		font: "inherit",
 	}),
 	collapseLink: {
 		marginTop: 16,

site/src/components/GitDeviceAuth/GitDeviceAuth.tsx

@@ -1,13 +1,12 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import AlertTitle from "@mui/material/AlertTitle";
 import CircularProgress from "@mui/material/CircularProgress";
-import Link from "@mui/material/Link";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuthDevice } from "api/typesGenerated";
 import { isAxiosError } from "axios";
 import { Alert, AlertDetail } from "components/Alert/Alert";
 import { CopyButton } from "components/CopyButton/CopyButton";
-import { ExternalLinkIcon } from "lucide-react";
+import { Link } from "components/Link/Link";
 import type { FC } from "react";
 
 interface GitDeviceAuthProps {
@@ -150,7 +149,6 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 					target="_blank"
 					rel="noreferrer"
 				>
-					<ExternalLinkIcon className="size-icon-xs" />
 					Open and Paste
 				</Link>
 			</div>

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -4,7 +4,7 @@ import {
 	type Interpolation,
 	type Theme,
 } from "@emotion/react";
-import Link from "@mui/material/Link";
+import { Link } from "components/Link/Link";
 import { Stack } from "components/Stack/Stack";
 import {
 	Tooltip,
@@ -14,7 +14,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
-import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
+import { CircleHelpIcon } from "lucide-react";
 import {
 	type FC,
 	forwardRef,
@@ -141,8 +141,13 @@ interface HelpTooltipLink {
 
 export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
 	return (
-		<Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
-			<ExternalLinkIcon className="size-icon-xs" css={styles.linkIcon} />
+		<Link
+			href={href}
+			target="_blank"
+			rel="noreferrer"
+			size="sm"
+			css={styles.link}
+		>
 			{children}
 		</Link>
 	);
@@ -214,13 +219,6 @@ const styles = {
 		color: theme.roles.active.fill.outline,
 	}),
 
-	linkIcon: {
-		color: "inherit",
-		width: 14,
-		height: 14,
-		marginRight: 8,
-	},
-
 	linksGroup: {
 		marginTop: 16,
 	},

site/src/components/Markdown/Markdown.tsx

@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Link from "@mui/material/Link";
+import { Link } from "components/Link/Link";
 import {
 	Table,
 	TableBody,

site/src/components/Paywall/Paywall.tsx

@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
+import { Link } from "components/Link/Link";
 import { Stack } from "components/Stack/Stack";
 import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
@@ -33,6 +33,7 @@ export const Paywall: FC<PaywallProps> = ({
 					target="_blank"
 					rel="noreferrer"
 					className="font-semibold"
+					size="sm"
 				>
 					Read the documentation
 				</Link>

site/src/components/Paywall/PopoverPaywall.tsx

@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
+import { Link } from "components/Link/Link";
 import { Stack } from "components/Stack/Stack";
 import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
@@ -39,6 +39,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 					target="_blank"
 					rel="noreferrer"
 					css={{ fontWeight: 600 }}
+					size="sm"
 				>
 					Read the documentation
 				</Link>

site/src/modules/resources/AgentStatus.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type {
 	WorkspaceAgent,
@@ -13,6 +12,7 @@ import {
 	HelpTooltipTitle,
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
+import { Link } from "components/Link/Link";
 import { TriangleAlertIcon } from "lucide-react";
 import type { FC } from "react";
 
@@ -74,6 +74,7 @@ const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 						target="_blank"
 						rel="noreferrer"
 						href={agent.troubleshooting_url}
+						size="sm"
 					>
 						Troubleshoot
 					</Link>

site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx

@@ -1,5 +1,5 @@
-import Link from "@mui/material/Link";
 import type { AuditLog } from "api/typesGenerated";
+import { Link } from "components/Link/Link";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
 import { BuildAuditDescription } from "./BuildAuditDescription";
@@ -52,8 +52,10 @@ export const AuditLogDescription: FC<AuditLogDescriptionProps> = ({
 		<span>
 			{truncatedDescription}
 			{auditLog.resource_link ? (
-				<Link component={RouterLink} to={auditLog.resource_link}>
-					<strong>{target}</strong>
+				<Link asChild>
+					<RouterLink to={auditLog.resource_link}>
+						<strong>{target}</strong>
+					</RouterLink>
 				</Link>
 			) : (
 				<strong>{target}</strong>
@@ -70,8 +72,10 @@ function AppSessionAuditLogDescription({ auditLog }: AuditLogDescriptionProps) {
 	return (
 		<>
 			{connection_type} session to {workspace_owner}'s{" "}
-			<Link component={RouterLink} to={`${auditLog.resource_link}`}>
-				<strong>{workspace_name}</strong>
+			<Link asChild>
+				<RouterLink to={`${auditLog.resource_link}`}>
+					<strong>{workspace_name}</strong>
+				</RouterLink>
 			</Link>{" "}
 			workspace{" "}
 			<strong>{auditLog.action === "disconnect" ? "closed" : "opened"}</strong>

site/src/pages/AuditPage/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx

@@ -1,5 +1,5 @@
-import Link from "@mui/material/Link";
 import type { AuditLog } from "api/typesGenerated";
+import { Link } from "components/Link/Link";
 import { type FC, useMemo } from "react";
 import { Link as RouterLink } from "react-router";
 import { systemBuildReasons } from "utils/workspace";
@@ -38,8 +38,10 @@ export const BuildAuditDescription: FC<BuildAuditDescriptionProps> = ({
 		<span>
 			{user} <strong>{action}</strong> workspace{" "}
 			{auditLog.resource_link ? (
-				<Link component={RouterLink} to={auditLog.resource_link}>
-					<strong>{workspaceName}</strong>
+				<Link asChild>
+					<RouterLink to={auditLog.resource_link}>
+						<strong>{workspaceName}</strong>
+					</RouterLink>
 				</Link>
 			) : (
 				<strong>{workspaceName}</strong>

site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

@@ -1,10 +1,10 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
-import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { AuditLog, BuildReason } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Link } from "components/Link/Link";
 import { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
@@ -157,12 +157,13 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 															<h4 css={styles.auditLogInfoHeader}>
 																Organization:
 															</h4>
-															<Link
-																component={RouterLink}
-																to={`/organizations/${auditLog.organization.name}`}
-															>
-																{auditLog.organization.display_name ||
-																	auditLog.organization.name}
+															<Link asChild size="sm">
+																<RouterLink
+																	to={`/organizations/${auditLog.organization.name}`}
+																>
+																	{auditLog.organization.display_name ||
+																		auditLog.organization.name}
+																</RouterLink>
 															</Link>
 														</div>
 													)}

site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogDescription/ConnectionLogDescription.tsx

@@ -1,5 +1,5 @@
-import Link from "@mui/material/Link";
 import type { ConnectionLog } from "api/typesGenerated";
+import { Link } from "components/Link/Link";
 import type { FC, ReactNode } from "react";
 import { Link as RouterLink } from "react-router";
 import { connectionTypeToFriendlyName } from "utils/connection";
@@ -62,11 +62,10 @@ export const ConnectionLogDescription: FC<ConnectionLogDescriptionProps> = ({
 				<span>
 					{user ? user.username : "Unauthenticated user"} {actionText} in{" "}
 					{isOwnWorkspace ? "their" : `${workspace_owner_username}'s`}{" "}
-					<Link
-						component={RouterLink}
-						to={`/@${workspace_owner_username}/${workspace_name}`}
-					>
-						<strong>{workspace_name}</strong>
+					<Link asChild>
+						<RouterLink to={`/@${workspace_owner_username}/${workspace_name}`}>
+							<strong>{workspace_name}</strong>
+						</RouterLink>
 					</Link>{" "}
 					workspace
 				</span>
@@ -81,11 +80,10 @@ export const ConnectionLogDescription: FC<ConnectionLogDescriptionProps> = ({
 			return (
 				<span>
 					{friendlyType} session to {workspace_owner_username}'s{" "}
-					<Link
-						component={RouterLink}
-						to={`/@${workspace_owner_username}/${workspace_name}`}
-					>
-						<strong>{workspace_name}</strong>
+					<Link asChild>
+						<RouterLink to={`/@${workspace_owner_username}/${workspace_name}`}>
+							<strong>{workspace_name}</strong>
+						</RouterLink>
 					</Link>{" "}
 					workspace{" "}
 				</span>

site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx

@@ -1,8 +1,8 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
-import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { ConnectionLog } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
+import { Link } from "components/Link/Link";
 import { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
@@ -115,12 +115,13 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
 													<h4 css={styles.connectionLogInfoheader}>
 														Organization:
 													</h4>
-													<Link
-														component={RouterLink}
-														to={`/organizations/${connectionLog.organization.name}`}
-													>
-														{connectionLog.organization.display_name ||
-															connectionLog.organization.name}
+													<Link asChild size="sm">
+														<RouterLink
+															to={`/organizations/${connectionLog.organization.name}`}
+														>
+															{connectionLog.organization.display_name ||
+																connectionLog.organization.name}
+														</RouterLink>
 													</Link>
 												</div>
 											)}

site/src/pages/CreateUserPage/CreateUserForm.tsx

@@ -1,4 +1,3 @@
-import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import { hasApiFieldErrors, isApiError } from "api/errors";
@@ -7,6 +6,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
 import { FormFooter } from "components/Form/Form";
 import { FullPageForm } from "components/FullPageForm/FullPageForm";
+import { Link } from "components/Link/Link";
 import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
 import { PasswordField } from "components/PasswordField/PasswordField";
 import { Spinner } from "components/Spinner/Spinner";

site/src/pages/LoginPage/PasswordSignInForm.tsx

@@ -1,6 +1,6 @@
-import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { Button } from "components/Button/Button";
+import { Link } from "components/Link/Link";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
@@ -69,16 +69,8 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
 					<Spinner loading={isSigningIn} />
 					{Language.passwordSignIn}
 				</Button>
-				<Link
-					component={RouterLink}
-					to="/reset-password"
-					css={{
-						fontSize: 12,
-						fontWeight: 500,
-						lineHeight: "16px",
-					}}
-				>
-					Forgot password?
+				<Link asChild size="sm">
+					<RouterLink to="/reset-password">Forgot password?</RouterLink>
 				</Link>
 			</Stack>
 		</form>

site/src/utils/schedule.tsx

@@ -1,6 +1,6 @@
-import Link from "@mui/material/Link";
 import type { Template, Workspace } from "api/typesGenerated";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
+import { Link } from "components/Link/Link";
 import cronParser from "cron-parser";
 import cronstrue from "cronstrue";
 import dayjs, { type Dayjs } from "dayjs";
@@ -149,8 +149,8 @@ export const autostopDisplay = (
 					{" "}
 					because this workspace has enabled autostop. You can disable autostop
 					from this workspace's{" "}
-					<Link component={RouterLink} to="settings/schedule">
-						schedule settings
+					<Link asChild size="sm">
+						<RouterLink to="settings/schedule">schedule settings</RouterLink>
 					</Link>
 					.
 				</span>