Skip to content

Commit f069ba1

Browse files
jaaydenhjaaydenh
authored
fix: update websocket creation and requests to handle changing owner id (#18020)
1 parent db938de commit f069ba1

File tree

4 files changed

+47
-54
lines changed

4 files changed

+47
-54
lines changed

‎site/src/api/api.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,7 +1000,6 @@ class ApiMethods {
10001000
};
10011001

10021002
templateVersionDynamicParameters = (
1003-
userId: string,
10041003
versionId: string,
10051004
{
10061005
onMessage,
@@ -1013,7 +1012,7 @@ class ApiMethods {
10131012
},
10141013
): WebSocket => {
10151014
const socket = createWebSocket(
1016-
`/api/v2/users/${userId}/templateversions/${versionId}/parameters`,
1015+
`/api/v2/templateversions/${versionId}/dynamic-parameters`,
10171016
);
10181017

10191018
socket.addEventListener("message", (event) =>

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,19 @@ const CreateWorkspacePageExperimental: FC = () => {
9090

9191
const autofillParameters = getAutofillParameters(searchParams);
9292

93-
const sendMessage = useCallback((formValues: Record<string, string>) => {
94-
const request: DynamicParametersRequest = {
95-
id: wsResponseId.current + 1,
96-
inputs: formValues,
97-
};
98-
if (ws.current && ws.current.readyState === WebSocket.OPEN) {
99-
ws.current.send(JSON.stringify(request));
100-
wsResponseId.current = wsResponseId.current + 1;
101-
}
102-
}, []);
93+
const sendMessage = useEffectEvent(
94+
(formValues: Record<string, string>, ownerId?: string) => {
95+
const request: DynamicParametersRequest = {
96+
id: wsResponseId.current + 1,
97+
owner_id: ownerId ?? owner.id,
98+
inputs: formValues,
99+
};
100+
if (ws.current && ws.current.readyState === WebSocket.OPEN) {
101+
ws.current.send(JSON.stringify(request));
102+
wsResponseId.current = wsResponseId.current + 1;
103+
}
104+
},
105+
);
103106

104107
// On page load, sends all initial parameter values to the websocket
105108
// (including defaults and autofilled from the url)
@@ -147,35 +150,31 @@ const CreateWorkspacePageExperimental: FC = () => {
147150
useEffect(() => {
148151
if (!realizedVersionId) return;
149152

150-
const socket = API.templateVersionDynamicParameters(
151-
owner.id,
152-
realizedVersionId,
153-
{
154-
onMessage,
155-
onError: (error) => {
156-
if (ws.current === socket) {
157-
setWsError(error);
158-
}
159-
},
160-
onClose: () => {
161-
if (ws.current === socket) {
162-
setWsError(
163-
new DetailedError(
164-
"Websocket connection for dynamic parameters unexpectedly closed.",
165-
"Refresh the page to reset the form.",
166-
),
167-
);
168-
}
169-
},
153+
const socket = API.templateVersionDynamicParameters(realizedVersionId, {
154+
onMessage,
155+
onError: (error) => {
156+
if (ws.current === socket) {
157+
setWsError(error);
158+
}
170159
},
171-
);
160+
onClose: () => {
161+
if (ws.current === socket) {
162+
setWsError(
163+
new DetailedError(
164+
"Websocket connection for dynamic parameters unexpectedly closed.",
165+
"Refresh the page to reset the form.",
166+
),
167+
);
168+
}
169+
},
170+
});
172171

173172
ws.current = socket;
174173

175174
return () => {
176175
socket.close();
177176
};
178-
}, [owner.id, realizedVersionId, onMessage]);
177+
}, [realizedVersionId, onMessage]);
179178

180179
const organizationId = templateQuery.data?.organization_id;
181180

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export interface CreateWorkspacePageViewExperimentalProps {
7070
owner: TypesGen.User,
7171
) => void;
7272
resetMutation: () => void;
73-
sendMessage: (message: Record<string, string>) => void;
73+
sendMessage: (message: Record<string, string>, ownerId?: string) => void;
7474
startPollingExternalAuth: () => void;
7575
owner: TypesGen.User;
7676
setOwner: (user: TypesGen.User) => void;
@@ -271,9 +271,10 @@ export const CreateWorkspacePageViewExperimental: FC<
271271
form.values.rich_parameter_values,
272272
]);
273273

274-
// send the last user modified parameter and all touched parameters to the websocket
274+
// include any modified parameters and all touched parameters to the websocket request
275275
const sendDynamicParamsRequest = (
276276
parameters: Array<{ parameter: PreviewParameter; value: string }>,
277+
ownerId?: string,
277278
) => {
278279
const formInputs: Record<string, string> = {};
279280
const formParameters = form.values.rich_parameter_values ?? [];
@@ -294,7 +295,12 @@ export const CreateWorkspacePageViewExperimental: FC<
294295
}
295296
}
296297

297-
sendMessage(formInputs);
298+
sendMessage(formInputs, ownerId);
299+
};
300+
301+
const handleOwnerChange = (user: TypesGen.User) => {
302+
setOwner(user);
303+
sendDynamicParamsRequest([], user.id);
298304
};
299305

300306
const handleChange = async (
@@ -449,7 +455,7 @@ export const CreateWorkspacePageViewExperimental: FC<
449455
<UserAutocomplete
450456
value={owner}
451457
onChange={(user) => {
452-
setOwner(user ?? defaultOwner);
458+
handleOwnerChange(user ?? defaultOwner);
453459
}}
454460
size="medium"
455461
/>

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,7 @@ import { Link } from "components/Link/Link";
1414
import { Loader } from "components/Loader/Loader";
1515
import { useEffectEvent } from "hooks/hookPolyfills";
1616
import type { FC } from "react";
17-
import {
18-
useCallback,
19-
useContext,
20-
useEffect,
21-
useMemo,
22-
useRef,
23-
useState,
24-
} from "react";
17+
import { useContext, useEffect, useMemo, useRef, useState } from "react";
2518
import { Helmet } from "react-helmet-async";
2619
import { useMutation, useQuery } from "react-query";
2720
import { useNavigate } from "react-router-dom";
@@ -46,16 +39,17 @@ const WorkspaceParametersPageExperimental: FC = () => {
4639
const ws = useRef<WebSocket | null>(null);
4740
const [wsError, setWsError] = useState<Error | null>(null);
4841

49-
const sendMessage = useCallback((formValues: Record<string, string>) => {
42+
const sendMessage = useEffectEvent((formValues: Record<string, string>) => {
5043
const request: DynamicParametersRequest = {
5144
id: wsResponseId.current + 1,
45+
owner_id: workspace.owner_id,
5246
inputs: formValues,
5347
};
5448
if (ws.current && ws.current.readyState === WebSocket.OPEN) {
5549
ws.current.send(JSON.stringify(request));
5650
wsResponseId.current = wsResponseId.current + 1;
5751
}
58-
}, []);
52+
});
5953

6054
const onMessage = useEffectEvent((response: DynamicParametersResponse) => {
6155
if (latestResponse && latestResponse?.id >= response.id) {
@@ -69,7 +63,6 @@ const WorkspaceParametersPageExperimental: FC = () => {
6963
if (!workspace.latest_build.template_version_id) return;
7064

7165
const socket = API.templateVersionDynamicParameters(
72-
workspace.owner_id,
7366
workspace.latest_build.template_version_id,
7467
{
7568
onMessage,
@@ -96,11 +89,7 @@ const WorkspaceParametersPageExperimental: FC = () => {
9689
return () => {
9790
socket.close();
9891
};
99-
}, [
100-
workspace.owner_id,
101-
workspace.latest_build.template_version_id,
102-
onMessage,
103-
]);
92+
}, [workspace.latest_build.template_version_id, onMessage]);
10493

10594
const updateParameters = useMutation({
10695
mutationFn: (buildParameters: WorkspaceBuildParameter[]) =>

0 commit comments

Comments
 (0)