From bed4e12b93cbff6f203f03b4ba47e80258505979 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 15 Aug 2025 16:07:33 -0300
Subject: [PATCH] chore: fix storybook flakes (#19366)

Close https://github.com/coder/coder/issues/19365
---
 .../ActiveUserChart.stories.tsx               | 47 +++++++++++++------
 .../workspaces/generateWorkspaceName.ts       |  4 ++
 .../WorkspaceSchedulePage.stories.tsx         |  8 ++--
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx
index b1f2878c95..c63f867eb0 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx
@@ -6,13 +6,13 @@ const meta: Meta<typeof ActiveUserChart> = {
 	component: ActiveUserChart,
 	args: {
 		data: [
-			{ date: "2024-01-01", amount: 5 },
-			{ date: "2024-01-02", amount: 6 },
-			{ date: "2024-01-03", amount: 7 },
-			{ date: "2024-01-04", amount: 8 },
-			{ date: "2024-01-05", amount: 9 },
-			{ date: "2024-01-06", amount: 10 },
-			{ date: "2024-01-07", amount: 11 },
+			{ date: "2024-01-01", amount: 12 },
+			{ date: "2024-01-02", amount: 8 },
+			{ date: "2024-01-03", amount: 15 },
+			{ date: "2024-01-04", amount: 3 },
+			{ date: "2024-01-05", amount: 22 },
+			{ date: "2024-01-06", amount: 7 },
+			{ date: "2024-01-07", amount: 18 },
 		],
 	},
 	decorators: [
@@ -31,12 +31,31 @@ export const Example: Story = {};
 
 export const ManyDataPoints: Story = {
 	args: {
-		data: Array.from({ length: 30 }).map((_, i) => {
-			const date = new Date(2024, 0, i + 1);
-			return {
-				date: date.toISOString().split("T")[0],
-				amount: 5 + Math.floor(Math.random() * 15),
-			};
-		}),
+		data: [
+			{ date: "2024-01-01", amount: 12 },
+			{ date: "2024-01-02", amount: 8 },
+			{ date: "2024-01-03", amount: 15 },
+			{ date: "2024-01-04", amount: 3 },
+			{ date: "2024-01-05", amount: 22 },
+			{ date: "2024-01-06", amount: 7 },
+			{ date: "2024-01-07", amount: 18 },
+			{ date: "2024-01-08", amount: 31 },
+			{ date: "2024-01-09", amount: 5 },
+			{ date: "2024-01-10", amount: 27 },
+			{ date: "2024-01-11", amount: 14 },
+			{ date: "2024-01-12", amount: 9 },
+			{ date: "2024-01-13", amount: 35 },
+			{ date: "2024-01-14", amount: 21 },
+			{ date: "2024-01-15", amount: 6 },
+			{ date: "2024-01-16", amount: 29 },
+			{ date: "2024-01-17", amount: 11 },
+			{ date: "2024-01-18", amount: 17 },
+			{ date: "2024-01-19", amount: 4 },
+			{ date: "2024-01-20", amount: 25 },
+			{ date: "2024-01-21", amount: 13 },
+			{ date: "2024-01-22", amount: 33 },
+			{ date: "2024-01-23", amount: 19 },
+			{ date: "2024-01-24", amount: 26 },
+		],
 	},
 };
diff --git a/site/src/modules/workspaces/generateWorkspaceName.ts b/site/src/modules/workspaces/generateWorkspaceName.ts
index 6f62bc3017..9dff54a59b 100644
--- a/site/src/modules/workspaces/generateWorkspaceName.ts
+++ b/site/src/modules/workspaces/generateWorkspaceName.ts
@@ -1,3 +1,4 @@
+import isChromatic from "chromatic/isChromatic";
 import {
 	animals,
 	colors,
@@ -6,6 +7,9 @@ import {
 } from "unique-names-generator";
 
 export const generateWorkspaceName = () => {
+	if (isChromatic()) {
+		return "yellow-bird-23";
+	}
 	const numberDictionary = NumberDictionary.generate({ min: 0, max: 99 });
 	return uniqueNamesGenerator({
 		dictionaries: [colors, animals, numberDictionary],
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.stories.tsx
index 623b3b4d09..7503c439a3 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.stories.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.stories.tsx
@@ -11,7 +11,7 @@ import { templateByNameKey } from "api/queries/templates";
 import { workspaceByOwnerAndNameKey } from "api/queries/workspaces";
 import type { Workspace } from "api/typesGenerated";
 import {
-	reactRouterNestedAncestors,
+	reactRouterOutlet,
 	reactRouterParameters,
 } from "storybook-addon-remix-react-router";
 import { WorkspaceSettingsLayout } from "../WorkspaceSettingsLayout";
@@ -19,7 +19,7 @@ import WorkspaceSchedulePage from "./WorkspaceSchedulePage";
 
 const meta = {
 	title: "pages/WorkspaceSchedulePage",
-	component: WorkspaceSchedulePage,
+	component: WorkspaceSettingsLayout,
 	decorators: [withAuthProvider, withDashboardProvider],
 	parameters: {
 		layout: "fullscreen",
@@ -52,11 +52,11 @@ function workspaceRouterParameters(workspace: Workspace) {
 				workspace: workspace.name,
 			},
 		},
-		routing: reactRouterNestedAncestors(
+		routing: reactRouterOutlet(
 			{
 				path: "/:username/:workspace/settings/schedule",
 			},
-			<WorkspaceSettingsLayout />,
+			<WorkspaceSchedulePage />,
 		),
 	});
 }