From 89e7f129b53d7fbe528961337f938ffb74b024dc Mon Sep 17 00:00:00 2001 From: BrunoQuaresma 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 = { showApps: true, storybookAgentMetadata: defaultAgentMetadata, }, - decorators: [ - (Story) => ( - { - return; - }, - clearProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), - withDashboardProvider, - withWebSocket, - ], + decorators: [withProxyProvider(), withDashboardProvider, withWebSocket], parameters: { chromatic, queries: [ @@ -253,31 +232,13 @@ export const Off: Story = { export const ShowingPortForward: Story = { decorators: [ - (Story) => ( - { - return; - }, - clearProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), + 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 = { title: "modules/resources/AppLink", component: AppLink, decorators: [ - (Story) => ( - { - return; - }, - clearProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), + 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 = { title: "modules/resources/ResourceCard", component: ResourceCard, + decorators: [withProxyProvider()], args: { resource: MockWorkspaceResource, - agentRow: getAgentRow, + agentRow: (agent) => , }, }; @@ -67,31 +64,5 @@ export const BunchOfMetadata: Story = { }, ], }, - agentRow: getAgentRow, }, }; - -function getAgentRow(agent: WorkspaceAgent): JSX.Element { - return ( - { - return; - }, - clearProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ); -} 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 = { title: "modules/resources/Resources", component: Resources, + decorators: [withProxyProvider()], args: { resources: [MockWorkspaceResource], - agentRow: getAgentRow, + agentRow: (agent) => , }, }; @@ -163,31 +162,5 @@ export const BunchOfDevicesWithMetadata: Story = { ), }, ], - agentRow: getAgentRow, }, }; - -function getAgentRow(agent: WorkspaceAgent): JSX.Element { - return ( - { - return; - }, - clearProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ); -} 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 = { title: "modules/workspaces/WorkspaceAppStatus", component: WorkspaceAppStatus, - decorators: [ - (Story) => ( - { - return; - }, - setProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), - ], + 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 = { @@ -15,31 +14,7 @@ const meta: Meta = { args: { referenceDate: new Date("2024-03-26T15:15:00Z"), }, - // Add decorator for ProxyContext - decorators: [ - (Story) => ( - { - return; - }, - setProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), - ], + 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 = { ], user: Mocks.MockUserOwner, }, - decorators: [ - withAuthProvider, - withDashboardProvider, - (Story) => ( - { - return; - }, - setProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), - ], + 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 = { ], user: MockUserOwner, }, - decorators: [ - withAuthProvider, - withDashboardProvider, - (Story) => ( - { - return; - }, - setProxy: () => { - return; - }, - refetchProxyLatencies: (): Date => { - return new Date(); - }, - }} - > - - - ), - ], + 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) => { ); }; + +export const withProxyProvider = + (value?: Partial) => (Story: FC) => { + return ( + { + return; + }, + clearProxy: () => { + return; + }, + refetchProxyLatencies: (): Date => { + return new Date(); + }, + ...value, + }} + > + + + ); + };