refactor(site): demui workspace topbar, schedule controls, and timings (#27790)

site/src/components/Link/Link.tsx

@@ -22,7 +22,7 @@ const linkVariants = cva(
 	},
 );
 
-type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+export type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
 	VariantProps<typeof linkVariants> & {
 		asChild?: boolean;
 		showExternalIcon?: boolean;

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx

@@ -1,4 +1,3 @@
-import Collapse from "@mui/material/Collapse";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { type FC, useState } from "react";
@@ -9,6 +8,11 @@ import type {
 } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import { Button } from "#/components/Button/Button";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "#/components/Collapsible/Collapsible";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import {
 	calcDuration,
@@ -99,17 +103,22 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 	};
 
 	return (
-		<div className="rounded-lg border border-solid bg-surface-primary">
+		<Collapsible
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="rounded-lg border border-solid bg-surface-primary"
+		>
 			<div className="flex items-center justify-between px-4 py-1.5 relative">
-				<Button
-					disabled={isLoading}
-					variant="subtle"
-					onClick={() => setIsOpen((o) => !o)}
-					className="after:content-[''] after:absolute after:inset-0"
-				>
-					<ChevronDownIcon open={isOpen} />
-					<span>Build timeline</span>
-				</Button>
+				<CollapsibleTrigger asChild>
+					<Button
+						disabled={isLoading}
+						variant="subtle"
+						className="after:content-[''] after:absolute after:inset-0"
+					>
+						<ChevronDownIcon open={isOpen} />
+						<span>Build timeline</span>
+					</Button>
+				</CollapsibleTrigger>
 				<span className="ml-auto text-sm text-content-secondary pr-2">
 					{isLoading ? (
 						<Skeleton variant="text" width={40} height={16} />
@@ -119,7 +128,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				</span>
 			</div>
 			{!isLoading && (
-				<Collapse in={isOpen}>
+				<CollapsibleContent>
 					<div
 						className="border-solid border-0 border-t flex flex-col"
 						style={{
@@ -220,9 +229,9 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 							</>
 						)}
 					</div>
-				</Collapse>
+				</CollapsibleContent>
 			)}
-		</div>
+		</Collapsible>
 	);
 };
 

site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx

@@ -1,4 +1,3 @@
-import Link, { type LinkProps } from "@mui/material/Link";
 import dayjs, { type Dayjs } from "dayjs";
 import { ClockIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { type FC, type ReactNode, useRef, useState } from "react";
@@ -13,6 +12,7 @@ import {
 import type { Template, Workspace } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { TopbarData, TopbarIcon } from "#/components/FullPageLayout/Topbar";
+import { Link, type LinkProps } from "#/components/Link/Link";
 import {
 	Tooltip,
 	TooltipContent,
@@ -271,14 +271,23 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 	);
 };
 
-const ScheduleSettingsLink: React.FC<LinkProps> = ({ ...props }) => {
+const ScheduleSettingsLink: React.FC<LinkProps> = ({
+	children,
+	className,
+	...props
+}) => {
 	return (
 		<Link
-			component={RouterLink}
-			to="settings/schedule"
-			className="text-inherit [&::first-letter]:uppercase"
+			className={cn(
+				"[&::first-letter]:uppercase p-0 hover:no-underline text-content-link text-xs",
+				className,
+			)}
+			showExternalIcon={false}
 			{...props}
-		/>
+			asChild
+		>
+			<RouterLink to="settings/schedule">{children}</RouterLink>
+		</Link>
 	);
 };
 

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -1,4 +1,3 @@
-import Link from "@mui/material/Link";
 import { ChevronLeftIcon, CircleDollarSignIcon, TrashIcon } from "lucide-react";
 import type { FC } from "react";
 import { useQuery } from "react-query";
@@ -21,6 +20,7 @@ import {
 	HelpPopoverContent,
 	HelpPopoverTrigger,
 } from "#/components/HelpPopover/HelpPopover";
+import { Link } from "#/components/Link/Link";
 import {
 	Tooltip,
 	TooltipContent,
@@ -164,9 +164,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 				</TopbarData>
 
 				{quota && quota.budget > 0 && (
-					<Link
-						component={RouterLink}
-						className="text-inherit"
+					<RouterLink
 						to={
 							showOrganizations
 								? `/workspaces?filter=organization:${encodeURIComponent(workspace.organization_name)}`
@@ -177,6 +175,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 								? `See affected workspaces for ${orgDisplayName}`
 								: "See affected workspaces"
 						}
+						className="text-inherit no-underline"
 					>
 						<TopbarData>
 							<TopbarIcon>
@@ -192,7 +191,7 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 								{quota.budget}
 							</span>
 						</TopbarData>
-					</Link>
+					</RouterLink>
 				)}
 
 				{shouldDisplayDormantData && (
@@ -200,18 +199,17 @@ export const WorkspaceTopbar: FC<WorkspaceTopbarProps> = ({
 						<TopbarIcon>
 							<TrashIcon />
 						</TopbarIcon>
-						<Link
-							component={RouterLink}
+						<RouterLink
 							to={`${templateLink}/settings/schedule`}
 							title="Schedule settings"
-							className="text-inherit"
+							className="text-inherit no-underline"
 						>
 							{workspace.deleting_at ? (
 								<>Deletion on {formatDate(new Date(workspace.deleting_at))}</>
 							) : (
 								"Deletion soon"
 							)}
-						</Link>
+						</RouterLink>
 					</TopbarData>
 				)}
 			</div>
@@ -311,12 +309,8 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 				<AvatarData
 					title={
 						orgPageUrl ? (
-							<Link
-								component={RouterLink}
-								to={orgPageUrl}
-								className="text-inherit"
-							>
-								{orgName}
+							<Link asChild showExternalIcon={false} className="text-inherit">
+								<RouterLink to={orgPageUrl}>{orgName}</RouterLink>
 							</Link>
 						) : (
 							orgName
@@ -376,21 +370,19 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 				<HelpPopoverContent align="center">
 					<AvatarData
 						title={
-							<Link
-								component={RouterLink}
-								to={rootTemplateUrl}
-								className="text-inherit"
-							>
-								{templateDisplayName}
+							<Link asChild showExternalIcon={false} className="text-inherit">
+								<RouterLink to={rootTemplateUrl}>
+									{templateDisplayName}
+								</RouterLink>
 							</Link>
 						}
 						subtitle={
-							<Link
-								component={RouterLink}
-								to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
-								className="text-inherit"
-							>
-								Version: {latestBuildVersionName}
+							<Link asChild showExternalIcon={false} className="text-inherit">
+								<RouterLink
+									to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
+								>
+									Version: {latestBuildVersionName}
+								</RouterLink>
 							</Link>
 						}
 						avatar={