refactor: show unhealthy status on workspace status indicator (coder#17956)

Instead of showing a "yellow question icon" on the side of the status,
to let the user aware of unhealthy agents, we could make it yellow and
use a tooltip.

Before:
<img width="1512" alt="Screenshot 2025-05-20 at 18 13 15"
src="https://github.com/user-attachments/assets/afee470e-9dd4-4c32-b2bc-b9f66eac60fa"
/>

After:
<img width="1512" alt="Screenshot 2025-05-20 at 18 13 26"
src="https://github.com/user-attachments/assets/5769828b-f23c-45a5-8017-c4a88f085d0f"
/>

Author: EdwardAngert

site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx

@@ -27,6 +27,18 @@ export const Running: Story = {
 	},
 };
 
+export const Unhealthy: Story = {
+	args: {
+		workspace: {
+			...createWorkspaceWithStatus("running"),
+			health: {
+				healthy: false,
+				failing_agents: [],
+			},
+		},
+	},
+};
+
 export const Stopped: Story = {
 	args: {
 		workspace: createWorkspaceWithStatus("stopped"),

site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx

@@ -4,6 +4,12 @@ import {
 	StatusIndicatorDot,
 	type StatusIndicatorProps,
 } from "components/StatusIndicator/StatusIndicator";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import type { FC } from "react";
 import type React from "react";
 import {
@@ -32,18 +38,41 @@ export const WorkspaceStatusIndicator: FC<WorkspaceStatusIndicatorProps> = ({
 	workspace,
 	children,
 }) => {
-	const { text, type } = getDisplayWorkspaceStatus(
+	let { text, type } = getDisplayWorkspaceStatus(
 		workspace.latest_build.status,
 		workspace.latest_build.job,
 	);
 
-	return (
+	if (!workspace.health.healthy) {
+		type = "warning";
+	}
+
+	const statusIndicator = (
 		<StatusIndicator variant={variantByStatusType[type]}>
 			<StatusIndicatorDot />
-			<span>
-				<span className="sr-only">Workspace status:</span> {text}
-			</span>
+			<span className="sr-only">Workspace status:</span> {text}
 			{children}
 		</StatusIndicator>
 	);
+
+	if (workspace.health.healthy) {
+		return statusIndicator;
+	}
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<StatusIndicator variant={variantByStatusType[type]}>
+						<StatusIndicatorDot />
+						<span className="sr-only">Workspace status:</span> {text}
+						{children}
+					</StatusIndicator>
+				</TooltipTrigger>
+				<TooltipContent>
+					Your workspace is running but some agents are unhealthy.
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
 };

site/src/pages/WorkspacesPage/WorkspacesTable.tsx

@@ -21,7 +21,6 @@ import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -290,6 +289,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 							</TableCell>
 
 							<WorkspaceStatusCell workspace={workspace} />
+
 							<WorkspaceActionsCell
 								workspace={workspace}
 								onActionSuccess={onActionSuccess}
@@ -395,14 +395,6 @@ const WorkspaceStatusCell: FC<WorkspaceStatusCellProps> = ({ workspace }) => {
 		<TableCell>
 			<div className="flex flex-col">
 				<WorkspaceStatusIndicator workspace={workspace}>
-					{workspace.latest_build.status === "running" &&
-						!workspace.health.healthy && (
-							<InfoTooltip
-								type="warning"
-								title="Workspace is unhealthy"
-								message="Your workspace is running but some agents are unhealthy."
-							/>
-						)}
 					{workspace.dormant_at && (
 						<WorkspaceDormantBadge workspace={workspace} />
 					)}