Replace StatusIndicator in old components

coder · BrunoQuaresma · Feb 7, 2025 · Feb 5, 2025 · Feb 5, 2025 · Feb 5, 2025
commit dd3114184fa3bccc303186f49897fa1fbd391fb2
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -70,15 +70,28 @@ const dotVariants = cva("rounded-full inline-block border-4 border-solid", {
 });
 
 export interface StatusIndicatorDotProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof dotVariants> {}
 
 export const StatusIndicatorDot: FC<StatusIndicatorDotProps> = ({
 	className,
+	// We allow the size and variant to be overridden directly by the component.
+	// This allows StatusIndicatorDot to be used alone.
+	size,
+	variant,
 	...props
 }) => {
-	const { size, variant } = useContext(StatusIndicatorContext);
+	const { size: ctxSize, variant: ctxVariant } = useContext(
+		StatusIndicatorContext,
+	);
 
 	return (
-		<div className={cn(dotVariants({ variant, size }), className)} {...props} />
+		<div
+			className={cn(
+				dotVariants({ variant: variant ?? ctxVariant, size: size ?? ctxSize }),
+				className,
+			)}
+			{...props}
+		/>
 	);
 };
diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
@@ -16,7 +16,10 @@ import {
 } from "components/HelpTooltip/HelpTooltip";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
-import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
+import {
+	StatusIndicator,
+	StatusIndicatorDot,
+} from "components/StatusIndicator/StatusIndicator";
 import {
 	Popover,
 	PopoverContent,
@@ -127,7 +130,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 				}}
 			>
 				<div css={{ display: "flex", alignItems: "center", gap: 16 }}>
-					<StatusIndicator color={hasWarning ? "warning" : "success"} />
+					<StatusIndicatorDot variant={hasWarning ? "warning" : "success"} />
 					<div
 						css={{
 							display: "flex",

diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -24,17 +24,17 @@ export const useStatusFilterMenu = ({
 		{
 			value: "active",
 			label: "Active",
-			startIcon: <StatusIndicator color="success" />,
+			startIcon: <StatusIndicator variant="success" />,
 		},
 		{
 			value: "dormant",
 			label: "Dormant",
-			startIcon: <StatusIndicator color="warning" />,
+			startIcon: <StatusIndicator variant="warning" />,
 		},
 		{
 			value: "suspended",
 			label: "Suspended",
-			startIcon: <StatusIndicator color="inactive" />,
+			startIcon: <StatusIndicator variant="stopped" />,
 		},
 	];
 	return useFilterMenu({

diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -18,19 +18,19 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
 		const t = dayjs(lastUsedAt);
 		const now = dayjs();
 		let message = t.fromNow();
-		let circle = <StatusIndicator color="info" variant="outlined" />;
+		let circle = <StatusIndicator variant="starting" />;
 
 		if (t.isAfter(now.subtract(1, "hour"))) {
-			circle = <StatusIndicator color="success" />;
+			circle = <StatusIndicator variant="success" />;
 			// Since the agent reports on a 10m interval,
 			// the last_used_at can be inaccurate when recent.
 			message = "Now";
 		} else if (t.isAfter(now.subtract(3, "day"))) {
-			circle = <StatusIndicator color="info" />;
+			circle = <StatusIndicator variant="starting" />;
 		} else if (t.isAfter(now.subtract(1, "month"))) {
-			circle = <StatusIndicator color="warning" />;
+			circle = <StatusIndicator variant="warning" />;
 		} else if (t.isAfter(now.subtract(100, "year"))) {
-			circle = <StatusIndicator color="error" />;
+			circle = <StatusIndicator variant="failed" />;
 		} else {
 			message = "Never";
 		}

diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -1,5 +1,9 @@
 import { API } from "api/api";
-import type { Template, WorkspaceStatus } from "api/typesGenerated";
+import type {
+	ProvisionerJob,
+	Template,
+	WorkspaceStatus,
+} from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import {
 	SelectFilter,
@@ -10,7 +14,10 @@ import {
 	type UseFilterMenuOptions,
 	useFilterMenu,
 } from "components/Filter/menu";
-import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
+import {
+	StatusIndicator,
+	type StatusIndicatorDotProps,
+} from "components/StatusIndicator/StatusIndicator";
 import type { FC } from "react";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 
@@ -109,7 +116,9 @@ export const useStatusFilterMenu = ({
 		return {
 			label: display.text,
 			value: status,
-			startIcon: <StatusIndicator color={display.type ?? "warning"} />,
+			startIcon: (
+				<StatusIndicator variant={getStatusIndicatorVariant(status)} />
+			),
 		};
 	});
 	return useFilterMenu({
@@ -141,3 +150,26 @@ export const StatusMenu: FC<StatusMenuProps> = ({ width, menu }) => {
 		/>
 	);
 };
+
+export const getStatusIndicatorVariant = (
+	status: WorkspaceStatus,
+): StatusIndicatorDotProps["variant"] => {
+	switch (status) {
+		case "running":
+			return "success";
+		case "starting":
+		case "pending":
+			return "starting";
+		case undefined:
+		case "canceling":
+		case "canceled":
+		case "stopping":
+		case "stopped":
+			return "stopped";
+		case "deleting":
+		case "deleted":
+			return "warning";
+		case "failed":
+			return "failed";
+	}
+};