refactor: replace badge by status indicator

coder · BrunoQuaresma · May 14, 2025 · May 13, 2025 · May 14, 2025 · May 13, 2025
commit 4ba56bbf37b1efb01bb507099edb90bb2590f16f
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Workspace, WorkspaceStatus } from "api/typesGenerated";
+import { MockWorkspace } from "testHelpers/entities";
+import { WorkspaceStatusIndicator } from "./WorkspaceStatusIndicator";
+
+const meta: Meta<typeof WorkspaceStatusIndicator> = {
+	title: "modules/workspaces/WorkspaceStatusIndicator",
+	component: WorkspaceStatusIndicator,
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkspaceStatusIndicator>;
+
+const createWorkspaceWithStatus = (status: WorkspaceStatus): Workspace => {
+	return {
+		...MockWorkspace,
+		latest_build: {
+			...MockWorkspace.latest_build,
+			status,
+		},
+	} as Workspace;
+};
+
+export const Running: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("running"),
+	},
+};
+
+export const Stopped: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("stopped"),
+	},
+};
+
+export const Starting: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("starting"),
+	},
+};
+
+export const Stopping: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("stopping"),
+	},
+};
+
+export const Failed: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("failed"),
+	},
+};
+
+export const Canceling: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("canceling"),
+	},
+};
+
+export const Canceled: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("canceled"),
+	},
+};
+
+export const Deleting: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("deleting"),
+	},
+};
+
+export const Deleted: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("deleted"),
+	},
+};
+
+export const Pending: Story = {
+	args: {
+		workspace: createWorkspaceWithStatus("pending"),
+	},
+};
diff --git a/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx b/site/src/modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator.tsx
@@ -0,0 +1,47 @@
+import type { Workspace } from "api/typesGenerated";
+import {
+	StatusIndicator,
+	StatusIndicatorDot,
+	type StatusIndicatorProps,
+} from "components/StatusIndicator/StatusIndicator";
+import type { FC } from "react";
+import type React from "react";
+import {
+	type DisplayWorkspaceStatusType,
+	getDisplayWorkspaceStatus,
+} from "utils/workspace";
+
+const variantByStatusType: Record<
+	DisplayWorkspaceStatusType,
+	StatusIndicatorProps["variant"]
+> = {
+	active: "pending",
+	inactive: "inactive",
+	success: "success",
+	error: "failed",
+	danger: "warning",
+	warning: "warning",
+};
+
+type WorkspaceStatusIndicatorProps = {
+	workspace: Workspace;
+	children?: React.ReactNode;
+};
+
+export const WorkspaceStatusIndicator: FC<WorkspaceStatusIndicatorProps> = ({
+	workspace,
+	children,
+}) => {
+	const { text, type } = getDisplayWorkspaceStatus(
+		workspace.latest_build.status,
+		workspace.latest_build.job,
+	);
+
+	return (
+		<StatusIndicator variant={variantByStatusType[type]}>
+			<StatusIndicatorDot />
+			{text}
+			{children}
+		</StatusIndicator>
+	);
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -20,7 +20,7 @@ import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
 import { TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
-import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge";
+import { WorkspaceStatusIndicator } from "modules/workspaces/WorkspaceStatusIndicator/WorkspaceStatusIndicator";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
@@ -201,18 +201,13 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 			</div>
 
 			{!isImmutable && (
-				<div
-					css={{
-						display: "flex",
-						alignItems: "center",
-						gap: 8,
-					}}
-				>
+				<div className="flex items-center gap-4">
 					<WorkspaceScheduleControls
 						workspace={workspace}
 						template={template}
 						canUpdateSchedule={permissions.updateWorkspace}
 					/>
+
 					<WorkspaceNotifications
 						workspace={workspace}
 						template={template}
@@ -222,7 +217,9 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 						onUpdateWorkspace={handleUpdate}
 						onActivateWorkspace={handleDormantActivate}
 					/>
-					<WorkspaceStatusBadge workspace={workspace} />
+
+					<WorkspaceStatusIndicator workspace={workspace} />
+
 					<WorkspaceActions
 						workspace={workspace}
 						permissions={permissions}