ui: make update button stop before start

johnstcn · johnstcn · commit fa2d4eb8dd5c · 2025-06-18T16:17:27.000+01:00
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2237,6 +2237,7 @@ class ApiMethods {
 	 * - Update the build parameters and check if there are missed parameters for
 	 *   the newest version
 	 *   - If there are missing parameters raise an error
+	 * - Stop the workspace with the current template version if it is already running
 	 * - Create a build with the latest version and updated build parameters
 	 */
 	updateWorkspace = async (
@@ -2274,6 +2275,19 @@ class ApiMethods {
 			throw new MissingBuildParameters(missingParameters, activeVersionId);
 		}
 
+		// Stop the workspace if it is already running.
+		if (workspace.latest_build.status === "running") {
+			const stopBuild = await this.stopWorkspace(workspace.id);
+			const awaitedStopBuild = await this.waitForBuild(stopBuild);
+			// If the stop is canceled halfway through, we bail.
+			// This is the same behaviour as restartWorkspace.
+			if (awaitedStopBuild?.status === "canceled") {
+				return Promise.reject(
+					new Error("Workspace stop was canceled, not proceeding with update."),
+				);
+			}
+		}
+
 		return this.postWorkspaceBuild(workspace.id, {
 			transition: "start",
 			template_version_id: activeVersionId,
diff --git a/site/src/modules/workspaces/actions.ts b/site/src/modules/workspaces/actions.ts
@@ -6,16 +6,19 @@ import type { Workspace } from "api/typesGenerated";
 const actionTypes = [
 	"start",
 	"starting",
-	// Replaces start when an update is required.
+	// Replaces start when an update is available.
 	"updateAndStart",
+	// Replaces start when an update is required.
+	"updateAndStartRequireActiveVersion",
 	"stop",
 	"stopping",
 	"restart",
 	"restarting",
-	// Replaces restart when an update is required.
+	// Replaces restart when an update is available.
 	"updateAndRestart",
+	// Replaces restart when an update is required.
+	"updateAndRestartRequireActiveVersion",
 	"deleting",
-	"update",
 	"updating",
 	"activate",
 	"activating",
@@ -74,10 +77,10 @@ export const abilitiesByWorkspaceStatus = (
 			const actions: ActionType[] = ["stop"];
 
 			if (workspace.template_require_active_version && workspace.outdated) {
-				actions.push("updateAndRestart");
+				actions.push("updateAndRestartRequireActiveVersion");
 			} else {
 				if (workspace.outdated) {
-					actions.unshift("update");
+					actions.unshift("updateAndRestart");
 				}
 				actions.push("restart");
 			}
@@ -99,10 +102,10 @@ export const abilitiesByWorkspaceStatus = (
 			const actions: ActionType[] = [];
 
 			if (workspace.template_require_active_version && workspace.outdated) {
-				actions.push("updateAndStart");
+				actions.push("updateAndStartRequireActiveVersion");
 			} else {
 				if (workspace.outdated) {
-					actions.unshift("update");
+					actions.unshift("updateAndStart");
 				}
 				actions.push("start");
 			}
@@ -128,7 +131,7 @@ export const abilitiesByWorkspaceStatus = (
 			}
 
 			if (workspace.outdated) {
-				actions.unshift("update");
+				actions.unshift("updateAndStart");
 			}
 
 			return {
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -21,19 +21,39 @@ export interface ActionButtonProps {
 	tooltipText?: string;
 }
 
-export const UpdateButton: FC<ActionButtonProps> = ({
+export const UpdateAndStartButton: FC<ActionButtonProps> = ({
 	handleAction,
 	loading,
 }) => {
 	return (
-		<TopbarButton
-			disabled={loading}
-			data-testid="workspace-update-button"
-			onClick={() => handleAction()}
-		>
-			<CloudIcon />
-			{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
-		</TopbarButton>
+		<Tooltip title="Start workspace with the latest template version.">
+			<TopbarButton
+				disabled={loading}
+				data-testid="workspace-update-button"
+				onClick={() => handleAction()}
+			>
+				<CirclePlayIcon />
+				{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
+			</TopbarButton>
+		</Tooltip>
+	);
+};
+
+export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
+	handleAction,
+	loading,
+}) => {
+	return (
+		<Tooltip title="Stop workspace, if running, and restart it with the latest template version.">
+			<TopbarButton
+				disabled={loading}
+				data-testid="workspace-update-and-restart-button"
+				onClick={() => handleAction()}
+			>
+				<RotateCcwIcon />
+				{loading ? <>Updating&hellip;</> : <>Update and restart&hellip;</>}
+			</TopbarButton>
+		</Tooltip>
 	);
 };
 
@@ -84,9 +104,9 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	);
 };
 
-export const UpdateAndStartButton: FC<ActionButtonProps> = ({
-	handleAction,
-}) => {
+export const UpdateAndStartButtonRequireActiveVersion: FC<
+	ActionButtonProps
+> = ({ handleAction }) => {
 	return (
 		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
 			<TopbarButton onClick={() => handleAction()}>
@@ -138,9 +158,9 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	);
 };
 
-export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
-	handleAction,
-}) => {
+export const UpdateAndRestartButtonRequireActiveVersion: FC<
+	ActionButtonProps
+> = ({ handleAction }) => {
 	return (
 		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
 			<TopbarButton onClick={() => handleAction()}>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -18,9 +18,10 @@ import {
 	RestartButton,
 	StartButton,
 	StopButton,
+	UpdateAndRestartButtonRequireActiveVersion,
 	UpdateAndRestartButton,
+	UpdateAndStartButtonRequireActiveVersion,
 	UpdateAndStartButton,
-	UpdateButton,
 } from "./Buttons";
 import { DebugButton } from "./DebugButton";
 import { RetryButton } from "./RetryButton";
@@ -81,10 +82,15 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
 	// A mapping of button type to the corresponding React component
 	const buttonMapping: Record<ActionType, ReactNode> = {
-		update: <UpdateButton handleAction={handleUpdate} />,
 		updateAndStart: <UpdateAndStartButton handleAction={handleUpdate} />,
+		updateAndStartRequireActiveVersion: (
+			<UpdateAndStartButtonRequireActiveVersion handleAction={handleUpdate} />
+		),
 		updateAndRestart: <UpdateAndRestartButton handleAction={handleUpdate} />,
-		updating: <UpdateButton loading handleAction={handleUpdate} />,
+		updateAndRestartRequireActiveVersion: (
+			<UpdateAndRestartButtonRequireActiveVersion handleAction={handleUpdate} />
+		),
+		updating: <UpdateAndStartButton loading handleAction={handleUpdate} />,
 		start: (
 			<StartButton
 				workspace={workspace}
