From 7a1bdc571fca5bdf094444da13b750403c8fd5d5 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 21 Jan 2025 17:35:04 +0000
Subject: [PATCH 1/3] chore: ignore dynamic content on chromatic

---
 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 dab1f29af9de9..c8c7e54ac4713 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 e9a7b4db3f343..3315d5aad3ae3 100644
--- a/site/src/pages/CliInstallPage/CliInstallPage.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -2,14 +2,17 @@ import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { CliInstallPageView } from "./CliInstallPageView";
+import isChromatic from "chromatic/*";
 
 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 1140cd88c3c3e..25acfa457ff78 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 a5ec484430228..9356cee6153b3 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}
 			/>

From 35dedebb56a91bae5f443d960203d5d3c633461f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 21 Jan 2025 17:55:59 +0000
Subject: [PATCH 2/3] Run fmt

---
 site/src/pages/CliInstallPage/CliInstallPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx
index 3315d5aad3ae3..5cc9c5274e3a1 100644
--- a/site/src/pages/CliInstallPage/CliInstallPage.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -1,8 +1,8 @@
+import isChromatic from "chromatic/*";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
 import { CliInstallPageView } from "./CliInstallPageView";
-import isChromatic from "chromatic/*";
 
 export const CliInstallPage: FC = () => {
 	const origin = isChromatic() ? "https://example.com" : window.location.origin;

From 459f0551426a7f5f6ba61cecba2381e7261c5f97 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 21 Jan 2025 17:58:34 +0000
Subject: [PATCH 3/3] Fix isChromatic import

---
 site/src/pages/CliInstallPage/CliInstallPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx
index 5cc9c5274e3a1..9cfa35dcd1b91 100644
--- a/site/src/pages/CliInstallPage/CliInstallPage.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPage.tsx
@@ -1,4 +1,4 @@
-import isChromatic from "chromatic/*";
+import isChromatic from "chromatic/isChromatic";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";