Refactor change workspace version

coder · BrunoQuaresma · May 13, 2025 · May 12, 2025 · May 12, 2025 · May 12, 2025
commit 22759e37790e40b0d15b64d868eaf7484399d3a2
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -139,9 +139,14 @@ export const templateVersionByName = (
 	};
 };
 
+export const templateVersionsQueryKey = (templateId: string) => [
+	"templateVersions",
+	templateId,
+];
+
 export const templateVersions = (templateId: string) => {
 	return {
-		queryKey: ["templateVersions", templateId],
+		queryKey: templateVersionsQueryKey(templateId),
 		queryFn: () => API.getTemplateVersions(templateId),
 	};
 };

diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.stories.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	MockTemplate,
+	MockTemplateVersion,
+	MockTemplateVersionWithMarkdownMessage,
+	MockWorkspace,
+} from "testHelpers/entities";
+import { ChangeWorkspaceVersionDialog } from "./ChangeWorkspaceVersionDialog";
+import { templateVersionsQueryKey } from "api/queries/templates";
+
+const noMessage = {
+	...MockTemplateVersion,
+	id: "no-message",
+	message: "",
+};
+
+const meta: Meta<typeof ChangeWorkspaceVersionDialog> = {
+	title: "modules/workspaces/ChangeWorkspaceVersionDialog",
+	component: ChangeWorkspaceVersionDialog,
+	args: {
+		open: true,
+		workspace: MockWorkspace,
+	},
+	parameters: {
+		queries: [
+			{
+				key: templateVersionsQueryKey(MockWorkspace.template_id),
+				data: [
+					MockTemplateVersion,
+					MockTemplateVersionWithMarkdownMessage,
+					noMessage,
+				],
+			},
+		],
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ChangeWorkspaceVersionDialog>;
+
+export const NoVersionSelected: Story = {};
+
+export const NoMessage: Story = {
+	args: {
+		workspace: {
+			...MockWorkspace,
+			template_active_version_id: noMessage.id,
+		},
+	},
+};
+
+export const ShortMessage: Story = {
+	args: {
+		workspace: {
+			...MockWorkspace,
+			template_active_version_id: MockTemplateVersion.id,
+		},
+	},
+};
+
+export const LongMessage: Story = {
+	args: {
+		workspace: {
+			...MockWorkspace,
+			template_active_version_id: MockTemplateVersionWithMarkdownMessage.id,
+		},
+	},
+};
diff --git a/...ges/WorkspacePage/ChangeVersionDialog.tsx → ...eActions/ChangeWorkspaceVersionDialog.tsx b/...ges/WorkspacePage/ChangeVersionDialog.tsx → ...eActions/ChangeWorkspaceVersionDialog.tsx
@@ -3,7 +3,8 @@ import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
-import type { Template, TemplateVersion } from "api/typesGenerated";
+import { templateVersions } from "api/queries/templates";
+import type { TemplateVersion, Workspace } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
@@ -15,41 +16,40 @@ import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { InfoIcon } from "lucide-react";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
-import { type FC, useRef, useState } from "react";
+import { type FC, useEffect, useState } from "react";
+import { useQuery } from "react-query";
 import { createDayString } from "utils/createDayString";
 
-export type ChangeVersionDialogProps = DialogProps & {
-	template: Template | undefined;
-	templateVersions: TemplateVersion[] | undefined;
-	defaultTemplateVersion: TemplateVersion | undefined;
+export type ChangeWorkspaceVersionDialogProps = DialogProps & {
+	workspace: Workspace;
 	onClose: () => void;
-	onConfirm: (templateVersion: TemplateVersion) => void;
+	onConfirm: (version: TemplateVersion) => void;
 };
 
-export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
-	onConfirm,
-	onClose,
-	template,
-	templateVersions,
-	defaultTemplateVersion,
-	...dialogProps
-}) => {
+export const ChangeWorkspaceVersionDialog: FC<
+	ChangeWorkspaceVersionDialogProps
+> = ({ workspace, onClose, onConfirm, ...dialogProps }) => {
+	const { data: versions } = useQuery(templateVersions(workspace.template_id));
 	const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
-	const selectedTemplateVersion = useRef<TemplateVersion | undefined>(
-		defaultTemplateVersion,
+	const activeVersion = versions?.find(
+		(v) => workspace.template_active_version_id === v.id,
 	);
-	const version = selectedTemplateVersion.current;
-	const validTemplateVersions = templateVersions?.filter((version) => {
-		return version.job.status === "succeeded";
-	});
+	const [selectedVersion, setSelectedVersion] = useState<TemplateVersion>();
+	const validVersions = versions?.filter((v) => v.job.status === "succeeded");
+
+	useEffect(() => {
+		if (activeVersion) {
+			setSelectedVersion(activeVersion);
+		}
+	}, [activeVersion]);
 
 	return (
 		<ConfirmDialog
 			{...dialogProps}
 			onClose={onClose}
 			onConfirm={() => {
-				if (selectedTemplateVersion.current) {
-					onConfirm(selectedTemplateVersion.current);
+				if (selectedVersion) {
+					onConfirm(selectedVersion);
 				}
 			}}
 			hideCancel={false}
@@ -60,18 +60,17 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 			description={
 				<Stack>
 					<p>You are about to change the version of this workspace.</p>
-					{validTemplateVersions ? (
+					{validVersions ? (
 						<>
 							<FormFields>
 								<Autocomplete
 									disableClearable
-									options={validTemplateVersions}
-									defaultValue={defaultTemplateVersion}
+									options={validVersions}
+									defaultValue={activeVersion}
 									id="template-version-autocomplete"
 									open={isAutocompleteOpen}
 									onChange={(_, newTemplateVersion) => {
-										selectedTemplateVersion.current =
-											newTemplateVersion ?? undefined;
+										setSelectedVersion(newTemplateVersion);
 									}}
 									onOpen={() => {
 										setIsAutocompleteOpen(true);
@@ -112,9 +111,8 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 																/>
 															)}
 														</Stack>
-														{template?.active_version_id === option.id && (
-															<Pill type="success">Active</Pill>
-														)}
+														{workspace.template_active_version_id ===
+															option.id && <Pill type="success">Active</Pill>}
 													</Stack>
 												}
 												subtitle={createDayString(option.created_at)}
@@ -131,9 +129,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 													...params.InputProps,
 													endAdornment: (
 														<>
-															{!templateVersions ? (
-																<CircularProgress size={16} />
-															) : null}
+															{!versions && <CircularProgress size={16} />}
 															{params.InputProps.endAdornment}
 														</>
 													),
@@ -144,16 +140,16 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 									)}
 								/>
 							</FormFields>
-							{version && (
+							{selectedVersion && (
 								<>
-									{version.message && (
+									{selectedVersion.message && (
 										<TemplateUpdateMessage>
-											{version.message}
+											{selectedVersion.message}
 										</TemplateUpdateMessage>
 									)}
 									<Alert severity="info">
 										<AlertTitle>
-											Published by {version.created_by.username}
+											Published by {selectedVersion.created_by.username}
 										</AlertTitle>
 									</Alert>
 								</>

diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceMoreActions.tsx
@@ -1,3 +1,6 @@
+import { MissingBuildParameters } from "api/api";
+import { changeVersion } from "api/queries/workspaces";
+import type { Workspace } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 	DropdownMenu,
@@ -14,31 +17,42 @@ import {
 	CopyIcon,
 	DownloadIcon,
 } from "lucide-react";
+import { UpdateBuildParametersDialog } from "pages/WorkspacePage/UpdateBuildParametersDialog";
+import { DownloadLogsDialog } from "pages/WorkspacePage/WorkspaceActions/DownloadLogsDialog";
 import { useState, type FC } from "react";
+import { useMutation, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router-dom";
+import { ChangeWorkspaceVersionDialog } from "./ChangeWorkspaceVersionDialog";
 
 type WorkspaceMoreActionsProps = {
+	workspace: Workspace;
 	isDuplicationReady: boolean;
 	disabled?: boolean;
-	onDuplicate: () => void;
-	onDelete: () => void;
-	onChangeVersion?: () => void;
 	permissions?: {
 		changeWorkspaceVersion?: boolean;
 	};
+	onDuplicate: () => void;
+	onDelete: () => void;
 };
 
 export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
+	workspace,
 	disabled,
+	permissions,
 	isDuplicationReady,
 	onDuplicate,
 	onDelete,
-	onChangeVersion,
-	permissions,
 }) => {
+	const queryClient = useQueryClient();
+
 	// Download logs
 	const [isDownloadDialogOpen, setIsDownloadDialogOpen] = useState(false);
-	const canChangeVersion = permissions?.changeWorkspaceVersion !== false;
+
+	// Change version
+	const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
+	const changeVersionMutation = useMutation(
+		changeVersion(workspace, queryClient),
+	);
 
 	return (
 		<>
@@ -64,8 +78,12 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 						</RouterLink>
 					</DropdownMenuItem>
 
-					{onChangeVersion && canChangeVersion && (
-						<DropdownMenuItem onClick={onChangeVersion}>
+					{permissions?.changeWorkspaceVersion && (
+						<DropdownMenuItem
+							onClick={() => {
+								setChangeVersionDialogOpen(true);
+							}}
+						>
 							<HistoryIcon />
 							Change version&hellip;
 						</DropdownMenuItem>
@@ -96,6 +114,48 @@ export const WorkspaceMoreActions: FC<WorkspaceMoreActionsProps> = ({
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
+
+			<DownloadLogsDialog
+				workspace={workspace}
+				open={isDownloadDialogOpen}
+				onClose={() => setIsDownloadDialogOpen(false)}
+			/>
+
+			<UpdateBuildParametersDialog
+				missedParameters={
+					isMissingBuildParameters(changeVersionMutation.error)
+						? changeVersionMutation.error.parameters
+						: []
+				}
+				open={isMissingBuildParameters(changeVersionMutation.error)}
+				onClose={() => {
+					changeVersionMutation.reset();
+				}}
+				onUpdate={(buildParameters) => {
+					if (isMissingBuildParameters(changeVersionMutation.error)) {
+						changeVersionMutation.mutate({
+							versionId: changeVersionMutation.error.versionId,
+							buildParameters,
+						});
+					}
+				}}
+			/>
+
+			<ChangeWorkspaceVersionDialog
+				workspace={workspace}
+				open={changeVersionDialogOpen}
+				onClose={() => {
+					setChangeVersionDialogOpen(false);
+				}}
+				onConfirm={(version) => {
+					setChangeVersionDialogOpen(false);
+					changeVersionMutation.mutate({ versionId: version.id });
+				}}
+			/>
 		</>
 	);
 };
+
+const isMissingBuildParameters = (e: unknown): e is MissingBuildParameters => {
+	return Boolean(e && e instanceof MissingBuildParameters);
+};
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.stories.tsx