refactor: replace Popover component in AgentLatency

Author: aqandrew

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -6,14 +6,16 @@ import {
 	useTheme,
 } from "@emotion/react";
 import Link from "@mui/material/Link";
+import type {
+	HoverCardContentProps,
+	HoverCardProps,
+} from "@radix-ui/react-hover-card";
+import { usePopover } from "components/deprecated/Popover/Popover";
 import {
-	Popover,
-	PopoverContent,
-	type PopoverContentProps,
-	type PopoverProps,
-	PopoverTrigger,
-	usePopover,
-} from "components/deprecated/Popover/Popover";
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "components/HoverCard/HoverCard";
 import { Stack } from "components/Stack/Stack";
 import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
 import {
@@ -30,25 +32,13 @@ type Size = "small" | "medium";
 
 export const HelpTooltipIcon = CircleHelpIcon;
 
-export const HelpTooltip: FC<PopoverProps> = (props) => {
-	return <Popover mode="hover" {...props} />;
+export const HelpTooltip: FC<HoverCardProps> = (props) => {
+	return <HoverCard openDelay={0} closeDelay={0} {...props} />;
 };
 
-export const HelpTooltipContent: FC<PopoverContentProps> = (props) => {
-	const theme = useTheme();
-
+export const HelpTooltipContent: FC<HoverCardContentProps> = (props) => {
 	return (
-		<PopoverContent
-			{...props}
-			css={{
-				"& .MuiPaper-root": {
-					fontSize: 14,
-					width: 304,
-					padding: 20,
-					color: theme.palette.text.secondary,
-				},
-			}}
-		/>
+		<HoverCardContent align="start" {...props} className="p-5 w-[320px]" />
 	);
 };
 
@@ -76,7 +66,7 @@ export const HelpTooltipTrigger = forwardRef<
 	});
 
 	return (
-		<PopoverTrigger>
+		<HoverCardTrigger>
 			<button
 				{...buttonProps}
 				aria-label="More info"
@@ -102,7 +92,7 @@ export const HelpTooltipTrigger = forwardRef<
 			>
 				{children}
 			</button>
-		</PopoverTrigger>
+		</HoverCardTrigger>
 	);
 });
 
@@ -155,6 +145,7 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
 	onClick,
 	ariaLabel,
 }) => {
+	// TODO dismiss hovercard
 	const popover = usePopover();
 
 	return (

site/src/components/HoverCard/HoverCard.tsx

@@ -18,13 +18,13 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = forwardRef<
 	ElementRef<typeof HoverCardPrimitive.Content>,
 	ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 0, ...props }, ref) => (
 	<HoverCardPrimitive.Content
 		ref={ref}
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+			"z-50 w-64 rounded-md border border-solid border-surface-quaternary bg-surface-secondary p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
 			className,
 		)}
 		{...props}

site/src/modules/resources/AgentLatency.tsx

@@ -1,12 +1,12 @@
 import { type Theme, useTheme } from "@emotion/react";
 import type { DERPRegion, WorkspaceAgent } from "api/typesGenerated";
-import { PopoverTrigger } from "components/deprecated/Popover/Popover";
 import {
 	HelpTooltip,
 	HelpTooltipContent,
 	HelpTooltipText,
 	HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
+import { HoverCardTrigger } from "components/HoverCard/HoverCard";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import { getLatencyColor } from "utils/latency";
@@ -44,15 +44,15 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
 
 	return (
 		<HelpTooltip>
-			<PopoverTrigger>
+			<HoverCardTrigger asChild>
 				<span
 					role="presentation"
 					aria-label="latency"
 					css={{ cursor: "pointer", color: latency.color }}
 				>
 					{Math.round(latency.latency_ms)}ms
 				</span>
-			</PopoverTrigger>
+			</HoverCardTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>Latency</HelpTooltipTitle>
 				<HelpTooltipText>