fix(site): fix workspace timings to use theme colors

BrunoQuaresma · BrunoQuaresma · commit 10181956b8e7 · 2024-10-29T12:36:26.000Z
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -91,15 +91,15 @@ const styles = {
 			left: -8,
 		},
 	}),
-	clickable: {
+	clickable: (theme) => ({
 		cursor: "pointer",
 		// We need to make the bar width at least 34px to allow the "..." icons to be displayed.
 		// The calculation is border * 1 + side paddings * 2 + icon width (which is 18px)
 		minWidth: 34,
 
 		"&:focus, &:hover, &:active": {
 			outline: "none",
-			borderColor: "#38BDF8",
+			borderColor: theme.roles.active.outline,
 		},
-	},
+	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx
@@ -52,22 +52,22 @@ const styles = {
 		gap: spaceBetweenBlocks,
 		alignItems: "center",
 	},
-	block: {
+	block: (theme) =>({
 		borderRadius: 4,
 		height: 18,
-		backgroundColor: "#082F49",
-		border: "1px solid #38BDF8",
+		backgroundColor: theme.roles.active.background,
+		border: `1px solid ${theme.roles.active.outline}`,
 		flexShrink: 0,
 		flex: 1,
-	},
-	more: {
-		color: "#38BDF8",
+	}),
+	more: (theme) => ({
+		color: theme.roles.active.outline,
 		lineHeight: 0,
 		flexShrink: 0,
 		flex: 1,
 
 		"& svg": {
 			fontSize: moreIconSize,
 		},
-	},
+	}),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx
@@ -32,32 +32,7 @@ import {
 } from "./Chart/utils";
 import type { StageCategory } from "./StagesChart";
 
-const legendsByAction: Record<string, ChartLegend> = {
-	"state refresh": {
-		label: "state refresh",
-	},
-	create: {
-		label: "create",
-		colors: {
-			fill: "#022C22",
-			stroke: "#BBF7D0",
-		},
-	},
-	delete: {
-		label: "delete",
-		colors: {
-			fill: "#422006",
-			stroke: "#FDBA74",
-		},
-	},
-	read: {
-		label: "read",
-		colors: {
-			fill: "#082F49",
-			stroke: "#38BDF8",
-		},
-	},
-};
+
 
 type ResourceTiming = {
 	name: string;
@@ -86,6 +61,8 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
 	const visibleTimings = timings.filter(
 		(t) => !isCoderResource(t.name) && t.name.includes(filter),
 	);
+	const theme = useTheme();
+	const legendsByAction = getLegendsByAction(theme);
 	const visibleLegends = [...new Set(visibleTimings.map((t) => t.action))].map(
 		(a) => legendsByAction[a],
 	);
@@ -168,3 +145,32 @@ export const isCoderResource = (resource: string) => {
 		resource.startsWith("coder_")
 	);
 };
+
+function getLegendsByAction(theme: Theme): Record<string, ChartLegend> {
+	return {
+		"state refresh": {
+			label: "state refresh",
+		},
+		create: {
+			label: "create",
+			colors: {
+				fill: theme.roles.success.background,
+				stroke: theme.roles.success.outline,
+			},
+		},
+		delete: {
+			label: "delete",
+			colors: {
+				fill: theme.roles.warning.background,
+				stroke: theme.roles.warning.outline,
+			},
+		},
+		read: {
+			label: "read",
+			colors: {
+				fill: theme.roles.active.background,
+				stroke: theme.roles.active.outline,
+			},
+		},
+	}
+}
diff --git a/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx
@@ -27,30 +27,7 @@ import {
 	mergeTimeRanges,
 } from "./Chart/utils";
 import type { StageCategory } from "./StagesChart";
-
-const legendsByStatus: Record<string, ChartLegend> = {
-	ok: {
-		label: "success",
-		colors: {
-			fill: "#022C22",
-			stroke: "#BBF7D0",
-		},
-	},
-	exit_failure: {
-		label: "failure",
-		colors: {
-			fill: "#450A0A",
-			stroke: "#F87171",
-		},
-	},
-	timeout: {
-		label: "timed out",
-		colors: {
-			fill: "#422006",
-			stroke: "#FDBA74",
-		},
-	},
-};
+import { type Theme, useTheme } from "@emotion/react";
 
 type ScriptTiming = {
 	name: string;
@@ -77,6 +54,8 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 	const [ticks, scale] = makeTicks(totalTime);
 	const [filter, setFilter] = useState("");
 	const visibleTimings = timings.filter((t) => t.name.includes(filter));
+	const theme = useTheme()
+	const legendsByStatus = getLegendsByStatus(theme);
 	const visibleLegends = [...new Set(visibleTimings.map((t) => t.status))].map(
 		(s) => legendsByStatus[s],
 	);
@@ -151,3 +130,29 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 		</Chart>
 	);
 };
+
+function getLegendsByStatus(theme: Theme): Record<string, ChartLegend> {
+	return {
+		ok: {
+			label: "success",
+			colors: {
+				fill: theme.roles.success.background,
+				stroke: theme.roles.success.outline,
+			},
+		},
+		exit_failure: {
+			label: "failure",
+			colors: {
+				fill: theme.roles.error.background,
+				stroke: theme.roles.error.outline,
+			},
+		},
+		timeout: {
+			label: "timed out",
+			colors: {
+				fill: theme.roles.warning.background,
+				stroke: theme.roles.warning.outline,
+			},
+		},
+	}
+};
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 import { WorkspaceTimings } from "./WorkspaceTimings";
 import { WorkspaceTimingsResponse } from "./storybookData";
+import { chromatic } from "testHelpers/chromatic";
 
 const meta: Meta<typeof WorkspaceTimings> = {
 	title: "modules/workspaces/WorkspaceTimings",
@@ -11,6 +12,9 @@ const meta: Meta<typeof WorkspaceTimings> = {
 		provisionerTimings: WorkspaceTimingsResponse.provisioner_timings,
 		agentScriptTimings: WorkspaceTimingsResponse.agent_script_timings,
 	},
+	parameters: {
+		chromatic,
+	}
 };
 
 export default meta;
