From f32acee4d6e6104f2539f98697e454c6901fea86 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Thu, 5 Jun 2025 15:09:32 -0800
Subject: [PATCH] fix: use current state in status list

It was using the latest state for all statuses, so if the last status
was "failing" for example every status would show the failing icon.
---
 .../WorkspacePage/AppStatuses.stories.tsx     | 32 +++++++++++++++++++
 site/src/pages/WorkspacePage/AppStatuses.tsx  |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
index 56dff1c93c7c4..90be0f194fef3 100644
--- a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
+++ b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
 import type { WorkspaceAppStatus } from "api/typesGenerated";
 import {
 	MockWorkspace,
@@ -82,6 +83,37 @@ export const SingleStatus: Story = {
 	},
 };
 
+export const MultipleStatuses: Story = {
+	args: {
+		agent: mockAgent([
+			{
+				...MockWorkspaceAppStatus,
+				id: "status-1",
+				icon: "",
+				message: "Initial setup complete.",
+				created_at: createTimestamp(5, 10), // 15:05:10 (after referenceDate)
+				uri: "",
+				state: "complete" as const,
+			},
+			{
+				...MockWorkspaceAppStatus,
+				id: "status-2",
+				icon: "",
+				message: "Working...",
+				created_at: createTimestamp(5, 0), // 15:05:00 (after referenceDate)
+				uri: "",
+				state: "working" as const,
+			},
+		]),
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const submitButton = canvas.getByRole("button");
+		await userEvent.click(submitButton);
+		await canvas.findByText(/working/i);
+	},
+};
+
 function mockAgent(statuses: WorkspaceAppStatus[]) {
 	return {
 		...MockWorkspaceAgent,
diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
index 148484a4992ea..35d4db46c3ac9 100644
--- a/site/src/pages/WorkspacePage/AppStatuses.tsx
+++ b/site/src/pages/WorkspacePage/AppStatuses.tsx
@@ -156,7 +156,7 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 							<div className="flex items-center justify-between w-full text-content-secondary">
 								<span className="text-xs flex items-center gap-2">
 									<AppStatusStateIcon
-										state={latestStatus.state}
+										state={status.state}
 										latest={false}
 										className="size-icon-xs w-[18px]"
 									/>