From 0fa6b3df13cefdcfe0844179d0d7c37d36fb7c56 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 21 Jan 2025 15:22:06 -0300
Subject: [PATCH] chore: ignore dynamic content on chromatic (#16214)

---
 site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx  | 4 +++-
 site/src/pages/CliInstallPage/CliInstallPage.tsx           | 5 ++++-
 .../pages/CliInstallPage/CliInstallPageView.stories.tsx    | 3 +++
 site/src/pages/CliInstallPage/CliInstallPageView.tsx       | 7 ++++---
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
index dab1f29af9..c8c7e54ac4 100644
--- a/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
+++ b/site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx
@@ -128,7 +128,9 @@ const ErrorStack: FC<ErrorStackProps> = ({ error }) => {
 					</p>
 					{error.stack && (
 						<pre className="m-0 py-2 px-0 overflow-x-auto text-xs">
-							<code data-testid="code">{error.stack}</code>
+							<code data-testid="code" data-chromatic="ignore">
+								{error.stack}
+							</code>
 						</pre>
 					)}
 				</>
diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx
index e9a7b4db3f..9cfa35dcd1 100644
--- a/site/src/pages/CliInstallPage/CliInstallPage.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -1,15 +1,18 @@
+import isChromatic from "chromatic/isChromatic";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { CliInstallPageView } from "./CliInstallPageView";
 
 export const CliInstallPage: FC = () => {
+	const origin = isChromatic() ? "https://example.com" : window.location.origin;
+
 	return (
 		<>
 			<Helmet>
 				<title>{pageTitle("Install the Coder CLI")}</title>
 			</Helmet>
-			<CliInstallPageView />
+			<CliInstallPageView origin={origin} />
 		</>
 	);
 };
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx
index 1140cd88c3..25acfa457f 100644
--- a/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPageView.stories.tsx
@@ -4,6 +4,9 @@ import { CliInstallPageView } from "./CliInstallPageView";
 const meta: Meta<typeof CliInstallPageView> = {
 	title: "pages/CliInstallPage",
 	component: CliInstallPageView,
+	args: {
+		origin: "https://example.com",
+	},
 };
 
 export default meta;
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
index a5ec484430..9356cee615 100644
--- a/site/src/pages/CliInstallPage/CliInstallPageView.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
@@ -4,9 +4,11 @@ import { Welcome } from "components/Welcome/Welcome";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 
-export const CliInstallPageView: FC = () => {
-	const origin = location.origin;
+type CliInstallPageViewProps = {
+	origin: string;
+};
 
+export const CliInstallPageView: FC<CliInstallPageViewProps> = ({ origin }) => {
 	return (
 		<div css={styles.container}>
 			<Welcome>Install the Coder CLI</Welcome>
@@ -18,7 +20,6 @@ export const CliInstallPageView: FC = () => {
 
 			<CodeExample
 				css={{ maxWidth: "100%" }}
-				data-chromatic="ignore"
 				code={`curl -fsSL ${origin}/install.sh | sh`}
 				secret={false}
 			/>