From cbfe975cc8c74bfb337f7fc03d0aac5e03fd2038 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 21 May 2025 15:57:32 -0300
Subject: [PATCH] refactor: show unhealthy status on workspace status indicator
 (#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"
/>
---
 .../WorkspaceStatusIndicator.stories.tsx      | 12 ++++++
 .../WorkspaceStatusIndicator.tsx              | 39 ++++++++++++++++---
 .../pages/WorkspacesPage/WorkspacesTable.tsx  | 10 +----
 3 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx
index 75205db8ff..5bdb870708 100644
--- a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx
+++ b/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"),
diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx
index bd928844cd..972096314e 100644
--- a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx
+++ b/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>
+	);
 };
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index f91119e79d..cfc96c4bd3 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/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} />
 					)}