From aa02c9ffb8337e337bd2a63507109b7c88562144 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 17 Apr 2025 10:48:23 -0300
Subject: [PATCH] chore: reduce storybook flakes (#17427)

A few storybook tests have been false positives quite frequently. To
reduce this noise, I'm implementing a few hacks to avoid that. We can
always rollback these changes if we notice they were leading to a lack
in the tests.
---
 .../OverviewPage/OverviewPageView.stories.tsx |  5 +++++
 .../OverviewPage/UserEngagementChart.tsx      |  1 +
 .../PermissionPillsList.stories.tsx           |  7 +++++++
 .../JobRow.tsx                                |  2 +-
 .../ProvisionerRow.tsx                        |  4 ++--
 .../TerminalPage/TerminalPage.stories.tsx     | 19 +++++++++++++++++--
 .../WorkspacePage/WorkspaceTopbar.stories.tsx |  5 +++++
 site/src/utils/schedule.tsx                   |  8 ++++----
 8 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx
index b3398f8b1f..3535d4ffd1 100644
--- a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx
@@ -39,6 +39,11 @@ const meta: Meta<typeof OverviewPageView> = {
 		invalidExperiments: [],
 		safeExperiments: [],
 	},
+	parameters: {
+		chromatic: {
+			diffThreshold: 0.5,
+		},
+	},
 };
 
 export default meta;
diff --git a/site/src/pages/DeploymentSettingsPage/OverviewPage/UserEngagementChart.tsx b/site/src/pages/DeploymentSettingsPage/OverviewPage/UserEngagementChart.tsx
index 585088f02d..711e57242c 100644
--- a/site/src/pages/DeploymentSettingsPage/OverviewPage/UserEngagementChart.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OverviewPage/UserEngagementChart.tsx
@@ -156,6 +156,7 @@ export const UserEngagementChart: FC<UserEngagementChartProps> = ({ data }) => {
 									</defs>
 
 									<Area
+										isAnimationActive={false}
 										dataKey="users"
 										type="linear"
 										fill="url(#fillUsers)"
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
index 35c651717b..5a4d896c2c 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx
@@ -6,6 +6,13 @@ import { PermissionPillsList } from "./PermissionPillsList";
 const meta: Meta<typeof PermissionPillsList> = {
 	title: "pages/OrganizationCustomRolesPage/PermissionPillsList",
 	component: PermissionPillsList,
+	decorators: [
+		(Story) => (
+			<div style={{ width: "800px" }}>
+				<Story />
+			</div>
+		),
+	],
 };
 
 export default meta;
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx
index 94d4687565..3e20863b25 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx
@@ -121,7 +121,7 @@ export const JobRow: FC<JobRowProps> = ({ job }) => {
 							<dd>{job.metadata.workspace_name ?? "null"}</dd>
 
 							<dt>Creation time:</dt>
-							<dd>{job.created_at}</dd>
+							<dd data-chromatic="ignore">{job.created_at}</dd>
 
 							<dt>Queue:</dt>
 							<dd>
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx
index 2e40fe4d53..2c47578f67 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx
@@ -111,10 +111,10 @@ export const ProvisionerRow: FC<ProvisionerRowProps> = ({
 							])}
 						>
 							<dt>Last seen:</dt>
-							<dd>{provisioner.last_seen_at}</dd>
+							<dd data-chromatic="ignore">{provisioner.last_seen_at}</dd>
 
 							<dt>Creation time:</dt>
-							<dd>{provisioner.created_at}</dd>
+							<dd data-chromatic="ignore">{provisioner.created_at}</dd>
 
 							<dt>Version:</dt>
 							<dd>
diff --git a/site/src/pages/TerminalPage/TerminalPage.stories.tsx b/site/src/pages/TerminalPage/TerminalPage.stories.tsx
index aa24485353..2eed419423 100644
--- a/site/src/pages/TerminalPage/TerminalPage.stories.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.stories.tsx
@@ -14,6 +14,7 @@ import {
 	MockAuthMethodsAll,
 	MockBuildInfo,
 	MockDefaultOrganization,
+	MockDeploymentConfig,
 	MockEntitlements,
 	MockExperiments,
 	MockUser,
@@ -78,13 +79,27 @@ const meta = {
 				data: { editWorkspaceProxies: true },
 			},
 			{ key: ["me", "appearance"], data: MockUserAppearanceSettings },
+			{
+				key: ["deployment", "config"],
+				data: {
+					...MockDeploymentConfig,
+					config: {
+						...MockDeploymentConfig.config,
+						web_terminal_renderer: "canvas",
+					},
+				},
+			},
 		],
-		chromatic: { delay: 300 },
+		chromatic: {
+			diffThreshold: 0.3,
+		},
 	},
 	decorators: [
 		(Story) => (
 			<AuthProvider>
-				<Story />
+				<div style={{ width: 1170, height: 880 }}>
+					<Story />
+				</div>
 			</AuthProvider>
 		),
 	],
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
index f5706a4fac..482abc9d6f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx
@@ -316,6 +316,11 @@ export const TemplateInfoPopover: Story = {
 			);
 		});
 	},
+	parameters: {
+		chromatic: {
+			diffThreshold: 0.3,
+		},
+	},
 };
 
 export const TemplateInfoPopoverWithoutDisplayName: Story = {
diff --git a/site/src/utils/schedule.tsx b/site/src/utils/schedule.tsx
index 97479c021f..21a112137a 100644
--- a/site/src/utils/schedule.tsx
+++ b/site/src/utils/schedule.tsx
@@ -148,7 +148,7 @@ export const autostopDisplay = (
 		if (template.autostop_requirement && template.allow_user_autostop) {
 			title = <HelpTooltipTitle>Autostop schedule</HelpTooltipTitle>;
 			reason = (
-				<>
+				<span data-chromatic="ignore">
 					{" "}
 					because this workspace has enabled autostop. You can disable autostop
 					from this workspace&apos;s{" "}
@@ -156,18 +156,18 @@ export const autostopDisplay = (
 						schedule settings
 					</Link>
 					.
-				</>
+				</span>
 			);
 		}
 		return {
 			message: `Stop ${deadline.fromNow()}`,
 			tooltip: (
-				<>
+				<span data-chromatic="ignore">
 					{title}
 					This workspace will be stopped on{" "}
 					{deadline.format("MMMM D [at] h:mm A")}
 					{reason}
-				</>
+				</span>
 			),
 			danger: isShutdownSoon(workspace),
 		};