Apr 23, 2025 · Apr 23, 2025 · Apr 23, 2025 · Apr 23, 2025 · Apr 23, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 {
 onMessage,
 onError,
 onClose,
 }: {
 onMessage: (response: TypesGen.DynamicParametersResponse) => void;
 onError: (error: Error) => void;
 onClose: () => void;
 },
 ): WebSocket => {
 const socket = createWebSocket(
 socket.close();
 });

 socket.addEventListener("close", () => {
 onClose();
 });

 return socket;
 };

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
 importtype {ApiErrorResponse } from "api/errors";
 import{ typeApiErrorResponse, DetailedError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import {
 templateByName,
 onError: (error) => {
 setWsError(error);
 },
 onClose: () => {
 // There is no reason for the websocket to close while a user is on the page
 setWsError(
 new DetailedError(
 "Websocket connection for dynamic parameters unexpectedly closed.",
 "Refresh the page to reset the form.",
 ),
 );
 },
 },
 );

 } = useExternalAuth(realizedVersionId);

 const isLoadingFormData =
 ws.current?.readyState!== WebSocket.OPEN ||
 ws.current?.readyState=== WebSocket.CONNECTING ||
 templateQuery.isLoading ||
 permissionsQuery.isLoading;
 const loadFormDataError = templateQuery.error ?? permissionsQuery.error;
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { DetailedError } from "api/errors";
 import { chromatic } from "testHelpers/chromatic";
 import { MockTemplate, MockUser } from "testHelpers/entities";
 import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental";

 const meta: Meta<typeof CreateWorkspacePageViewExperimental> = {
 title: "Pages/CreateWorkspacePageViewExperimental",
 parameters: { chromatic },
 component: CreateWorkspacePageViewExperimental,
 args: {
 autofillParameters: [],
 diagnostics: [],
 defaultName: "",
 defaultOwner: MockUser,
 externalAuth: [],
 externalAuthPollingState: "idle",
 hasAllRequiredExternalAuth: true,
 mode: "form",
 parameters: [],
 permissions: {
 createWorkspaceForAny: true,
 },
 presets: [],
 sendMessage: () => {},
 template: MockTemplate,
 },
 };

 export default meta;
 type Story = StoryObj<typeof CreateWorkspacePageViewExperimental>;

 export const WebsocketError: Story = {
 args: {
 error: new DetailedError(
 "Websocket connection for dynamic parameters unexpectedly closed.",
 "Refresh the page to reset the form.",
 ),
 },
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1015,9 +1015,11 @@ class ApiMethods {
		{
		onMessage,
		onError,
		onClose,
		}: {
		onMessage: (response: TypesGen.DynamicParametersResponse) => void;
		onError: (error: Error) => void;
		onClose: () => void;
		},
		): WebSocket => {
		const socket = createWebSocket(
Expand All		@@ -1033,6 +1035,10 @@ class ApiMethods {
		socket.close();
		});

		socket.addEventListener("close", () => {
		onClose();
		});

		return socket;
		};

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		importtype {ApiErrorResponse } from "api/errors";
		import{ typeApiErrorResponse, DetailedError } from "api/errors";
		import { checkAuthorization } from "api/queries/authCheck";
		import {
		templateByName,
Expand DownExpand Up		@@ -107,6 +107,15 @@ const CreateWorkspacePageExperimental: FC = () => {
		onError: (error) => {
		setWsError(error);
		},
		onClose: () => {
		// There is no reason for the websocket to close while a user is on the page
Copy link ContributorAuthor jaaydenhApr 23, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. The assumption is that if the websocket closes while the component is mounted, that this is unexpected and we should inform the user with an error in the UI
		setWsError(
		new DetailedError(
		"Websocket connection for dynamic parameters unexpectedly closed.",
		"Refresh the page to reset the form.",
		),
		);
		},
		},
		);

Expand DownExpand Up		@@ -141,7 +150,7 @@ const CreateWorkspacePageExperimental: FC = () => {
		} = useExternalAuth(realizedVersionId);

		const isLoadingFormData =
		ws.current?.readyState!== WebSocket.OPEN \|\|
		ws.current?.readyState=== WebSocket.CONNECTING \|\|
		templateQuery.isLoading \|\|
		permissionsQuery.isLoading;
		const loadFormDataError = templateQuery.error ?? permissionsQuery.error;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,40 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { DetailedError } from "api/errors";
		import { chromatic } from "testHelpers/chromatic";
		import { MockTemplate, MockUser } from "testHelpers/entities";
		import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental";

		const meta: Meta<typeof CreateWorkspacePageViewExperimental> = {
		title: "Pages/CreateWorkspacePageViewExperimental",
		parameters: { chromatic },
		component: CreateWorkspacePageViewExperimental,
		args: {
		autofillParameters: [],
		diagnostics: [],
		defaultName: "",
		defaultOwner: MockUser,
		externalAuth: [],
		externalAuthPollingState: "idle",
		hasAllRequiredExternalAuth: true,
		mode: "form",
		parameters: [],
		permissions: {
		createWorkspaceForAny: true,
		},
		presets: [],
		sendMessage: () => {},
		template: MockTemplate,
		},
		};

		export default meta;
		type Story = StoryObj<typeof CreateWorkspacePageViewExperimental>;

		export const WebsocketError: Story = {
		args: {
		error: new DetailedError(
		"Websocket connection for dynamic parameters unexpectedly closed.",
		"Refresh the page to reset the form.",
		),
		},
		};