From 89e7f129b53d7fbe528961337f938ffb74b024dc Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Sat, 24 May 2025 19:24:44 +0000
Subject: [PATCH] chore: add proxy provider decorator for storybook

---
 .../modules/resources/AgentRow.stories.tsx    | 67 ++++---------------
 .../resources/AppLink/AppLink.stories.tsx     | 39 +++--------
 .../resources/ResourceCard.stories.tsx        | 37 ++--------
 .../modules/resources/Resources.stories.tsx   | 33 +--------
 .../WorkspaceAppStatus.stories.tsx            | 32 +--------
 .../WorkspacePage/AppStatuses.stories.tsx     | 29 +-------
 .../pages/WorkspacePage/Workspace.stories.tsx | 34 ++--------
 .../WorkspacesPageView.stories.tsx            | 35 ++--------
 site/src/testHelpers/storybook.tsx            | 33 +++++++++
 9 files changed, 79 insertions(+), 260 deletions(-)

diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
index 0e80ee0a5ecd0..c08d28f295cd9 100644
--- a/site/src/modules/resources/AgentRow.stories.tsx
+++ b/site/src/modules/resources/AgentRow.stories.tsx
@@ -1,8 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import { getPreferredProxy } from "contexts/ProxyContext";
 import { chromatic } from "testHelpers/chromatic";
 import * as M from "testHelpers/entities";
-import { withDashboardProvider, withWebSocket } from "testHelpers/storybook";
+import {
+	withDashboardProvider,
+	withProxyProvider,
+	withWebSocket,
+} from "testHelpers/storybook";
 import { AgentRow } from "./AgentRow";
 
 const defaultAgentMetadata = [
@@ -94,32 +98,7 @@ const meta: Meta<typeof AgentRow> = {
 		showApps: true,
 		storybookAgentMetadata: defaultAgentMetadata,
 	},
-	decorators: [
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: M.MockProxyLatencies,
-					proxy: getPreferredProxy([], undefined),
-					proxies: [],
-					isLoading: false,
-					isFetched: true,
-					setProxy: () => {
-						return;
-					},
-					clearProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
-		withDashboardProvider,
-		withWebSocket,
-	],
+	decorators: [withProxyProvider(), withDashboardProvider, withWebSocket],
 	parameters: {
 		chromatic,
 		queries: [
@@ -253,31 +232,13 @@ export const Off: Story = {
 
 export const ShowingPortForward: Story = {
 	decorators: [
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: M.MockProxyLatencies,
-					proxy: getPreferredProxy(
-						M.MockWorkspaceProxies,
-						M.MockPrimaryWorkspaceProxy,
-					),
-					proxies: M.MockWorkspaceProxies,
-					isLoading: false,
-					isFetched: true,
-					setProxy: () => {
-						return;
-					},
-					clearProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
+		withProxyProvider({
+			proxy: getPreferredProxy(
+				M.MockWorkspaceProxies,
+				M.MockPrimaryWorkspaceProxy,
+			),
+			proxies: M.MockWorkspaceProxies,
+		}),
 	],
 };
 
diff --git a/site/src/modules/resources/AppLink/AppLink.stories.tsx b/site/src/modules/resources/AppLink/AppLink.stories.tsx
index 8f710e818aee2..84a24ed9afbed 100644
--- a/site/src/modules/resources/AppLink/AppLink.stories.tsx
+++ b/site/src/modules/resources/AppLink/AppLink.stories.tsx
@@ -1,48 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import { getPreferredProxy } from "contexts/ProxyContext";
 import {
 	MockPrimaryWorkspaceProxy,
-	MockProxyLatencies,
 	MockWorkspace,
 	MockWorkspaceAgent,
 	MockWorkspaceApp,
 	MockWorkspaceProxies,
 } from "testHelpers/entities";
-import { withGlobalSnackbar } from "testHelpers/storybook";
+import { withGlobalSnackbar, withProxyProvider } from "testHelpers/storybook";
 import { AppLink } from "./AppLink";
 
 const meta: Meta<typeof AppLink> = {
 	title: "modules/resources/AppLink",
 	component: AppLink,
 	decorators: [
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: MockProxyLatencies,
-					proxy: {
-						...getPreferredProxy(
-							MockWorkspaceProxies,
-							MockPrimaryWorkspaceProxy,
-						),
-						preferredWildcardHostname: "*.super_proxy.tld",
-					},
-					proxies: MockWorkspaceProxies,
-					isLoading: false,
-					isFetched: true,
-					setProxy: () => {
-						return;
-					},
-					clearProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
+		withProxyProvider({
+			proxy: {
+				...getPreferredProxy(MockWorkspaceProxies, MockPrimaryWorkspaceProxy),
+				preferredWildcardHostname: "*.super_proxy.tld",
+			},
+		}),
 	],
 };
 
diff --git a/site/src/modules/resources/ResourceCard.stories.tsx b/site/src/modules/resources/ResourceCard.stories.tsx
index 1ce76894a032e..d2cf56ef57483 100644
--- a/site/src/modules/resources/ResourceCard.stories.tsx
+++ b/site/src/modules/resources/ResourceCard.stories.tsx
@@ -1,19 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { WorkspaceAgent } from "api/typesGenerated";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
-import {
-	MockProxyLatencies,
-	MockWorkspaceResource,
-} from "testHelpers/entities";
+import { MockWorkspaceResource } from "testHelpers/entities";
+import { withProxyProvider } from "testHelpers/storybook";
 import { AgentRowPreview } from "./AgentRowPreview";
 import { ResourceCard } from "./ResourceCard";
 
 const meta: Meta<typeof ResourceCard> = {
 	title: "modules/resources/ResourceCard",
 	component: ResourceCard,
+	decorators: [withProxyProvider()],
 	args: {
 		resource: MockWorkspaceResource,
-		agentRow: getAgentRow,
+		agentRow: (agent) => <AgentRowPreview agent={agent} key={agent.id} />,
 	},
 };
 
@@ -67,31 +64,5 @@ export const BunchOfMetadata: Story = {
 				},
 			],
 		},
-		agentRow: getAgentRow,
 	},
 };
-
-function getAgentRow(agent: WorkspaceAgent): JSX.Element {
-	return (
-		<ProxyContext.Provider
-			value={{
-				proxyLatencies: MockProxyLatencies,
-				proxy: getPreferredProxy([], undefined),
-				proxies: [],
-				isLoading: false,
-				isFetched: true,
-				setProxy: () => {
-					return;
-				},
-				clearProxy: () => {
-					return;
-				},
-				refetchProxyLatencies: (): Date => {
-					return new Date();
-				},
-			}}
-		>
-			<AgentRowPreview agent={agent} key={agent.id} />
-		</ProxyContext.Provider>
-	);
-}
diff --git a/site/src/modules/resources/Resources.stories.tsx b/site/src/modules/resources/Resources.stories.tsx
index da8ed2f249696..4487d0bba7fd0 100644
--- a/site/src/modules/resources/Resources.stories.tsx
+++ b/site/src/modules/resources/Resources.stories.tsx
@@ -1,20 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import type { WorkspaceAgent } from "api/typesGenerated";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import {
-	MockProxyLatencies,
 	MockWorkspaceResource,
 	MockWorkspaceResourceMultipleAgents,
 } from "testHelpers/entities";
+import { withProxyProvider } from "testHelpers/storybook";
 import { AgentRowPreview } from "./AgentRowPreview";
 import { Resources } from "./Resources";
 
 const meta: Meta<typeof Resources> = {
 	title: "modules/resources/Resources",
 	component: Resources,
+	decorators: [withProxyProvider()],
 	args: {
 		resources: [MockWorkspaceResource],
-		agentRow: getAgentRow,
+		agentRow: (agent) => <AgentRowPreview key={agent.id} agent={agent} />,
 	},
 };
 
@@ -163,31 +162,5 @@ export const BunchOfDevicesWithMetadata: Story = {
 				),
 			},
 		],
-		agentRow: getAgentRow,
 	},
 };
-
-function getAgentRow(agent: WorkspaceAgent): JSX.Element {
-	return (
-		<ProxyContext.Provider
-			value={{
-				proxyLatencies: MockProxyLatencies,
-				proxy: getPreferredProxy([], undefined),
-				proxies: [],
-				isLoading: false,
-				isFetched: true,
-				setProxy: () => {
-					return;
-				},
-				clearProxy: () => {
-					return;
-				},
-				refetchProxyLatencies: (): Date => {
-					return new Date();
-				},
-			}}
-		>
-			<AgentRowPreview key={agent.id} agent={agent} />
-		</ProxyContext.Provider>
-	);
-}
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
index ac645848471d9..bcb1af8de3acb 100644
--- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
+++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
@@ -1,38 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
-import {
-	MockProxyLatencies,
-	MockWorkspaceAppStatus,
-} from "testHelpers/entities";
+import { MockWorkspaceAppStatus } from "testHelpers/entities";
+import { withProxyProvider } from "testHelpers/storybook";
 import { WorkspaceAppStatus } from "./WorkspaceAppStatus";
 
 const meta: Meta<typeof WorkspaceAppStatus> = {
 	title: "modules/workspaces/WorkspaceAppStatus",
 	component: WorkspaceAppStatus,
-	decorators: [
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: MockProxyLatencies,
-					proxy: getPreferredProxy([], undefined),
-					proxies: [],
-					isLoading: false,
-					isFetched: true,
-					clearProxy: () => {
-						return;
-					},
-					setProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
-	],
+	decorators: [withProxyProvider()],
 };
 
 export default meta;
diff --git a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
index a339c09e1894f..02e38a8c47107 100644
--- a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
+++ b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import {
-	MockProxyLatencies,
 	MockWorkspace,
 	MockWorkspaceAgent,
 	MockWorkspaceApp,
 	MockWorkspaceAppStatus,
 } from "testHelpers/entities";
+import { withProxyProvider } from "testHelpers/storybook";
 import { AppStatuses } from "./AppStatuses";
 
 const meta: Meta<typeof AppStatuses> = {
@@ -15,31 +14,7 @@ const meta: Meta<typeof AppStatuses> = {
 	args: {
 		referenceDate: new Date("2024-03-26T15:15:00Z"),
 	},
-	// Add decorator for ProxyContext
-	decorators: [
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: MockProxyLatencies,
-					proxy: getPreferredProxy([], undefined),
-					proxies: [],
-					isLoading: false,
-					isFetched: true,
-					clearProxy: () => {
-						return;
-					},
-					setProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
-	],
+	decorators: [withProxyProvider()],
 };
 
 export default meta;
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
index 7426158ffba40..1c508481d174b 100644
--- a/site/src/pages/WorkspacePage/Workspace.stories.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -1,9 +1,12 @@
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import type { ProvisionerJobLog } from "api/typesGenerated";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import * as Mocks from "testHelpers/entities";
-import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook";
+import {
+	withAuthProvider,
+	withDashboardProvider,
+	withProxyProvider,
+} from "testHelpers/storybook";
 import type { WorkspacePermissions } from "../../modules/workspaces/permissions";
 import { Workspace } from "./Workspace";
 
@@ -43,32 +46,7 @@ const meta: Meta<typeof Workspace> = {
 		],
 		user: Mocks.MockUserOwner,
 	},
-	decorators: [
-		withAuthProvider,
-		withDashboardProvider,
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: Mocks.MockProxyLatencies,
-					proxy: getPreferredProxy([], undefined),
-					proxies: [],
-					isLoading: false,
-					isFetched: true,
-					clearProxy: () => {
-						return;
-					},
-					setProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
-	],
+	decorators: [withAuthProvider, withDashboardProvider, withProxyProvider()],
 };
 
 export default meta;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
index dc1b9c2f4fb82..d7527a067c2ad 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -10,7 +10,6 @@ import {
 	getDefaultFilterProps,
 } from "components/Filter/storyHelpers";
 import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
-import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import dayjs from "dayjs";
 import uniqueId from "lodash/uniqueId";
 import type { ComponentProps } from "react";
@@ -18,7 +17,6 @@ import {
 	MockBuildInfo,
 	MockOrganization,
 	MockPendingProvisionerJob,
-	MockProxyLatencies,
 	MockStoppedWorkspace,
 	MockTemplate,
 	MockUserOwner,
@@ -27,7 +25,11 @@ import {
 	MockWorkspaceAppStatus,
 	mockApiError,
 } from "testHelpers/entities";
-import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook";
+import {
+	withAuthProvider,
+	withDashboardProvider,
+	withProxyProvider,
+} from "testHelpers/storybook";
 import { WorkspacesPageView } from "./WorkspacesPageView";
 
 const createWorkspace = (
@@ -147,32 +149,7 @@ const meta: Meta<typeof WorkspacesPageView> = {
 		],
 		user: MockUserOwner,
 	},
-	decorators: [
-		withAuthProvider,
-		withDashboardProvider,
-		(Story) => (
-			<ProxyContext.Provider
-				value={{
-					proxyLatencies: MockProxyLatencies,
-					proxy: getPreferredProxy([], undefined),
-					proxies: [],
-					isLoading: false,
-					isFetched: true,
-					clearProxy: () => {
-						return;
-					},
-					setProxy: () => {
-						return;
-					},
-					refetchProxyLatencies: (): Date => {
-						return new Date();
-					},
-				}}
-			>
-				<Story />
-			</ProxyContext.Provider>
-		),
-	],
+	decorators: [withAuthProvider, withDashboardProvider, withProxyProvider()],
 };
 
 export default meta;
diff --git a/site/src/testHelpers/storybook.tsx b/site/src/testHelpers/storybook.tsx
index 939ff91cb6c6c..ed64c10958a0b 100644
--- a/site/src/testHelpers/storybook.tsx
+++ b/site/src/testHelpers/storybook.tsx
@@ -4,6 +4,11 @@ import { getAuthorizationKey } from "api/queries/authCheck";
 import { hasFirstUserKey, meKey } from "api/queries/users";
 import type { Entitlements } from "api/typesGenerated";
 import { GlobalSnackbar } from "components/GlobalSnackbar/GlobalSnackbar";
+import {
+	ProxyContext,
+	type ProxyContextValue,
+	getPreferredProxy,
+} from "contexts/ProxyContext";
 import { AuthProvider } from "contexts/auth/AuthProvider";
 import { DashboardContext } from "modules/dashboard/DashboardProvider";
 import { DeploymentConfigContext } from "modules/management/DeploymentConfigProvider";
@@ -17,6 +22,7 @@ import {
 	MockDeploymentConfig,
 	MockEntitlements,
 	MockOrganizationPermissions,
+	MockProxyLatencies,
 } from "./entities";
 
 export const withDashboardProvider = (
@@ -155,3 +161,30 @@ export const withOrganizationSettingsProvider = (Story: FC) => {
 		</OrganizationSettingsContext.Provider>
 	);
 };
+
+export const withProxyProvider =
+	(value?: Partial<ProxyContextValue>) => (Story: FC) => {
+		return (
+			<ProxyContext.Provider
+				value={{
+					proxyLatencies: MockProxyLatencies,
+					proxy: getPreferredProxy([], undefined),
+					proxies: [],
+					isLoading: false,
+					isFetched: true,
+					setProxy: () => {
+						return;
+					},
+					clearProxy: () => {
+						return;
+					},
+					refetchProxyLatencies: (): Date => {
+						return new Date();
+					},
+					...value,
+				}}
+			>
+				<Story />
+			</ProxyContext.Provider>
+		);
+	};

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/18023.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/18023.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/18023.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/18023.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>