From be0696069daa25a989c77c0016463d39fa150fff Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 23 Apr 2025 16:55:44 +0000
Subject: [PATCH 1/3] fix: Add websocket close handling

---
 site/src/api/api.ts                           |  6 +++
 .../CreateWorkspacePageExperimental.tsx       | 12 +++++-
 ...eWorkspacePageViewExperimental.stories.tsx | 40 +++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index fa62afadee608..b3ce8bd0cf471 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -1015,9 +1015,11 @@ class ApiMethods {
 		{
 			onMessage,
 			onError,
+			onClose,
 		}: {
 			onMessage: (response: TypesGen.DynamicParametersResponse) => void;
 			onError: (error: Error) => void;
+			onClose: () => void;
 		},
 	): WebSocket => {
 		const socket = createWebSocket(
@@ -1033,6 +1035,10 @@ class ApiMethods {
 			socket.close();
 		});
 
+		socket.addEventListener("close", () => {
+			onClose();
+		});
+
 		return socket;
 	};
 
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
index 03da3bd477745..6c0251be5e44a 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -1,4 +1,5 @@
 import type { ApiErrorResponse } from "api/errors";
+import { DetailedError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import {
 	templateByName,
@@ -107,6 +108,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
+					setWsError(
+						new DetailedError(
+							"Websocket connection for dynamic parameters unexpectedly closed.",
+							"Refresh the page to reset the form.",
+						),
+					);
+				},
 			},
 		);
 
@@ -141,7 +151,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;
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx
new file mode 100644
index 0000000000000..a41e3a48c0ad9
--- /dev/null
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx
@@ -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.",
+		),
+	},
+};

From 5d0e31d3271697cba859501efd0dd3a60d33dcf5 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 23 Apr 2025 23:08:21 +0000
Subject: [PATCH 2/3] fix: organize imports

---
 .../CreateWorkspacePage/CreateWorkspacePageExperimental.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
index 6c0251be5e44a..9ebe092cf6d7a 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -1,5 +1,4 @@
-import type { ApiErrorResponse } from "api/errors";
-import { DetailedError } from "api/errors";
+import type { ApiErrorResponse, DetailedError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import {
 	templateByName,

From 428982a4fffdc963953f602e56163e3be790d7fe Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 23 Apr 2025 23:12:17 +0000
Subject: [PATCH 3/3] fix: fix import

---
 .../CreateWorkspacePage/CreateWorkspacePageExperimental.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
index 9ebe092cf6d7a..c02529c5d9446 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -1,4 +1,4 @@
-import type { ApiErrorResponse, DetailedError } from "api/errors";
+import { type ApiErrorResponse, DetailedError } from "api/errors";
 import { checkAuthorization } from "api/queries/authCheck";
 import {
 	templateByName,

<!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://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17548.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17548.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17548.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17548.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>