fix(site): update useAgentLogs to make it more testable and add more tests (coder#19126)

Take 2
Closes coder/internal#644

## Changes made
- Updated how `useAgentLogs` was defined to make it easier to inject
specific data dependencies (basically making the hook more
unit-testable)
- Simplified the hook API to limit the amount of scope of data it needs
to work
- Added more test cases, and re-enabled the one test case we had
previously disabled
- Extracted our mock websocket code into a separate file, and added more
methods to it
- Updated all runtime code to accommodate new changes

Author: buenos-nachos

.vscode/settings.json

@@ -54,6 +54,7 @@
 		}
 	},
 
+	"tailwindCSS.classFunctions": ["cva", "cn"],
 	"[css][html][markdown][yaml]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},

site/src/components/Alert/ErrorAlert.tsx

@@ -4,9 +4,11 @@ import type { FC } from "react";
 import { Link } from "../Link/Link";
 import { Alert, AlertDetail, type AlertProps } from "./Alert";
 
-export const ErrorAlert: FC<
+type ErrorAlertProps = Readonly<
 	Omit<AlertProps, "severity" | "children"> & { error: unknown }
-> = ({ error, ...alertProps }) => {
+>;
+
+export const ErrorAlert: FC<ErrorAlertProps> = ({ error, ...alertProps }) => {
 	const message = getErrorMessage(error, "Something went wrong.");
 	const detail = getErrorDetail(error);
 	const status = getErrorStatus(error);

site/src/components/Badge/Badge.stories.tsx

@@ -21,6 +21,24 @@ export const Warning: Story = {
 	},
 };
 
+export const Destructive: Story = {
+	args: {
+		variant: "destructive",
+	},
+};
+
+export const Info: Story = {
+	args: {
+		variant: "info",
+	},
+};
+
+export const Green: Story = {
+	args: {
+		variant: "green",
+	},
+};
+
 export const SmallWithIcon: Story = {
 	args: {
 		variant: "default",

site/src/components/Badge/Badge.tsx

@@ -23,8 +23,8 @@ const badgeVariants = cva(
 				destructive:
 					"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
 				green:
-					"border border-solid border-surface-green bg-surface-green text-highlight-green shadow",
-				info: "border border-solid border-surface-sky bg-surface-sky text-highlight-sky shadow",
+					"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
+				info: "border border-solid border-border-sky bg-surface-sky text-highlight-sky shadow",
 			},
 			size: {
 				xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
@@ -50,7 +50,7 @@ const badgeVariants = cva(
 		defaultVariants: {
 			variant: "default",
 			size: "md",
-			border: "solid",
+			border: "none",
 			hover: false,
 		},
 	},

site/src/components/Latency/Latency.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { screen, userEvent, within } from "storybook/test";
 import { Latency } from "./Latency";
 
 const meta: Meta<typeof Latency> = {
@@ -32,3 +33,19 @@ export const Loading: Story = {
 		isLoading: true,
 	},
 };
+
+export const NoLatency: Story = {
+	args: {
+		latency: undefined,
+	},
+
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const tooltipTrigger = canvas.getByLabelText(/Latency not available/i);
+		await userEvent.hover(tooltipTrigger);
+
+		// Need to await getting the tooltip because the tooltip doesn't open
+		// immediately on hover
+		await screen.findByRole("tooltip", { name: /Latency not available/i });
+	},
+};

site/src/components/Latency/Latency.tsx

@@ -1,51 +1,54 @@
 import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
-import { visuallyHidden } from "@mui/utils";
 import { Abbr } from "components/Abbr/Abbr";
 import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { getLatencyColor } from "utils/latency";
 
 interface LatencyProps {
 	latency?: number;
 	isLoading?: boolean;
-	size?: number;
+	className?: string;
+	iconClassName?: string;
 }
 
 export const Latency: FC<LatencyProps> = ({
 	latency,
 	isLoading,
-	size = 14,
+	className,
+	iconClassName,
 }) => {
 	const theme = useTheme();
 	// Always use the no latency color for loading.
 	const color = getLatencyColor(theme, isLoading ? undefined : latency);
 
 	if (isLoading) {
 		return (
-			<Tooltip title="Loading latency...">
-				<CircularProgress size={size} className="ml-auto" style={{ color }} />
+			<Tooltip title="Loading latency..." className={className}>
+				<CircularProgress
+					className={cn("!size-icon-xs", iconClassName)}
+					style={{ color }}
+				/>
 			</Tooltip>
 		);
 	}
 
 	if (!latency) {
-		const notAvailableText = "Latency not available";
 		return (
-			<Tooltip title={notAvailableText}>
-				<>
-					<span css={{ ...visuallyHidden }}>{notAvailableText}</span>
-
-					<CircleHelpIcon className="ml-auto size-icon-sm" style={{ color }} />
-				</>
+			<Tooltip title="Latency not available" className={className}>
+				<CircleHelpIcon
+					className={cn("!size-icon-sm", iconClassName)}
+					style={{ color }}
+				/>
 			</Tooltip>
 		);
 	}
 
 	return (
-		<div className="ml-auto text-sm" style={{ color }}>
-			<span css={{ ...visuallyHidden }}>Latency: </span>
+		<div className={cn("text-sm", className)} style={{ color }}>
+			<span className="sr-only">Latency: </span>
 			{latency.toFixed(0)}
 			<Abbr title="milliseconds">ms</Abbr>
 		</div>

site/src/hooks/useEmbeddedMetadata.ts

@@ -229,13 +229,12 @@ export function makeUseEmbeddedMetadata(
 			manager.getMetadata,
 		);
 
-		// biome-ignore lint/correctness/useExhaustiveDependencies(manager.clearMetadataByKey): baked into containing hook
 		const stableMetadataResult = useMemo<UseEmbeddedMetadataResult>(() => {
 			return {
 				metadata,
 				clearMetadataByKey: manager.clearMetadataByKey,
 			};
-		}, [metadata]);
+		}, [manager, metadata]);
 
 		return stableMetadataResult;
 	};

site/src/index.css

@@ -32,6 +32,8 @@
 		--surface-purple: 251 91% 95%;
 		--border-default: 240 6% 90%;
 		--border-success: 142 76% 36%;
+		--border-sky: 203 90% 40%;
+		--border-green: 138 82% 82%;
 		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 84% 60%;
 		--border-hover: 240 5% 34%;
@@ -75,6 +77,8 @@
 		--border-success: 142 76% 36%;
 		--border-warning: 30.66, 97.16%, 72.35%;
 		--border-destructive: 0 91% 71%;
+		--border-sky: 194 90% 62%;
+		--border-green: 143 77% 87%;
 		--border-hover: 240, 5%, 34%;
 		--overlay-default: 240 10% 4% / 80%;
 		--highlight-purple: 252 95% 85%;

site/src/modules/dashboard/Navbar/MobileMenu.tsx

@@ -162,7 +162,7 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
 								<img className="w-4 h-4" src={p.icon_url} alt={p.name} />
 								{p.display_name || p.name}
 								{latency ? (
-									<Latency latency={latency.latencyMS} />
+									<Latency className="ml-auto" latency={latency.latencyMS} />
 								) : (
 									<CircleHelpIcon className="ml-auto" />
 								)}

site/src/modules/dashboard/Navbar/ProxyMenu.tsx

@@ -92,7 +92,6 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 						<Latency
 							latency={latencies?.[selectedProxy.id]?.latencyMS}
 							isLoading={proxyLatencyLoading(selectedProxy)}
-							size={24}
 						/>
 					</>
 				) : (
@@ -191,6 +190,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 									{proxy.display_name}
 
 									<Latency
+										className="ml-auto"
 										latency={latencies?.[proxy.id]?.latencyMS}
 										isLoading={proxyLatencyLoading(proxy)}
 									/>