add cancel confirmation dialog for workspace builds and add expect_status for pending builds

kacpersaw · kacpersaw · commit ba1dbf326867 · 2025-07-02T12:34:04.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1277,9 +1277,14 @@ class ApiMethods {
 
 	cancelWorkspaceBuild = async (
 		workspaceBuildId: TypesGen.WorkspaceBuild["id"],
+		request?: TypesGen.CancelWorkspaceBuildRequest,
 	): Promise<TypesGen.Response> => {
+		const params = request?.expect_status
+			? new URLSearchParams({ expect_status: request.expect_status }).toString()
+			: "";
+
 		const response = await this.axios.patch(
-			`/api/v2/workspacebuilds/${workspaceBuildId}/cancel`,
+			`/api/v2/workspacebuilds/${workspaceBuildId}/cancel${params ? `?${params}` : ""}`,
 		);
 
 		return response.data;
diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -266,6 +266,12 @@ export const startWorkspace = (
 export const cancelBuild = (workspace: Workspace, queryClient: QueryClient) => {
 	return {
 		mutationFn: () => {
+			// If workspace status is pending, include expect_status parameter
+			if (workspace.latest_build.status === "pending") {
+				return API.cancelWorkspaceBuild(workspace.latest_build.id, {
+					expect_status: "pending",
+				});
+			}
 			return API.cancelWorkspaceBuild(workspace.latest_build.id);
 		},
 		onSuccess: async () => {
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/workspaces/actions.ts b/site/src/modules/workspaces/actions.ts
@@ -145,7 +145,7 @@ export const abilitiesByWorkspaceStatus = (
 		case "pending": {
 			return {
 				actions: ["pending"],
-				canCancel: false,
+				canCancel: true,
 				canAcceptJobs: false,
 			};
 		}
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -18,6 +18,7 @@ import {
 	MockFailedWorkspace,
 	MockOrganization,
 	MockOutdatedWorkspace,
+	MockPendingWorkspace,
 	MockStartingWorkspace,
 	MockStoppedWorkspace,
 	MockTemplate,
@@ -223,11 +224,53 @@ describe("WorkspacePage", () => {
 			}),
 		);
 
+		const user = userEvent.setup({ delay: 0 });
 		const cancelWorkspaceMock = jest
 			.spyOn(API, "cancelWorkspaceBuild")
 			.mockImplementation(() => Promise.resolve({ message: "job canceled" }));
+		await renderWorkspacePage(MockStartingWorkspace);
+
+		// Click on Cancel
+		const cancelButton = await screen.findByRole("button", { name: "Cancel" });
+		await user.click(cancelButton);
+
+		// Get dialog and confirm
+		const dialog = await screen.findByTestId("dialog");
+		const confirmButton = within(dialog).getByRole("button", {
+			name: "Confirm",
+			hidden: false,
+		});
+		await user.click(confirmButton);
+
+		expect(cancelWorkspaceMock).toHaveBeenCalledWith(MockStartingWorkspace.latest_build.id);
+	});
+
+	it("requests cancellation when the user presses Cancel and the workspace is pending", async () => {
+		server.use(
+			http.get("/api/v2/users/:userId/workspace/:workspaceName", () => {
+				return HttpResponse.json(MockPendingWorkspace);
+			}),
+		);
+
+		const user = userEvent.setup({ delay: 0 });
+		const cancelWorkspaceMock = jest
+			.spyOn(API, "cancelWorkspaceBuild")
+			.mockImplementation(() => Promise.resolve({ message: "job canceled" }));
+		await renderWorkspacePage(MockPendingWorkspace);
+
+		// Click on Cancel
+		const cancelButton = await screen.findByRole("button", { name: "Cancel" });
+		await user.click(cancelButton);
+
+		// Get dialog and confirm
+		const dialog = await screen.findByTestId("dialog");
+		const confirmButton = within(dialog).getByRole("button", {
+			name: "Confirm",
+			hidden: false,
+		});
+		await user.click(confirmButton);
 
-		await testButton(MockStartingWorkspace, "Cancel", cancelWorkspaceMock);
+		expect(cancelWorkspaceMock).toHaveBeenCalledWith(MockPendingWorkspace.latest_build.id, { expect_status: "pending" });
 	});
 
 	it("requests an update when the user presses Update", async () => {
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -80,6 +80,8 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
 		ephemeralParameters: TypesGen.TemplateVersionParameter[];
 	}>({ open: false, action: "start", ephemeralParameters: [] });
 
+	const [isCancelConfirmOpen, setIsCancelConfirmOpen] = useState(false);
+
 	const { mutate: mutateRestartWorkspace, isPending: isRestarting } =
 		useMutation({
 			mutationFn: API.restartWorkspace,
@@ -316,7 +318,7 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
 					}
 				}}
 				handleUpdate={workspaceUpdate.update}
-				handleCancel={cancelBuildMutation.mutate}
+				handleCancel={() => setIsCancelConfirmOpen(true)}
 				handleRetry={handleRetry}
 				handleDebug={handleDebug}
 				handleDormantActivate={async () => {
@@ -352,6 +354,21 @@ export const WorkspaceReadyPage: FC<WorkspaceReadyPageProps> = ({
 				}
 			/>
 
+			{/* Cancel confirmation dialog */}
+			<ConfirmDialog
+				open={isCancelConfirmOpen}
+				title="Cancel workspace build"
+				description={`Are you sure you want to cancel the build for workspace "${workspace.name}"? This will stop the current build process.`}
+				confirmText="Confirm"
+				cancelText="Discard"
+				onClose={() => setIsCancelConfirmOpen(false)}
+				onConfirm={() => {
+					cancelBuildMutation.mutate();
+					setIsCancelConfirmOpen(false);
+				}}
+				type="delete"
+			/>
+
 			<EphemeralParametersDialog
 				open={ephemeralParametersDialog.open}
 				onClose={() =>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -497,6 +497,8 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 
 	// State for stop confirmation dialog
 	const [isStopConfirmOpen, setIsStopConfirmOpen] = useState(false);
+	// State for cancel confirmation dialog
+	const [isCancelConfirmOpen, setIsCancelConfirmOpen] = useState(false);
 
 	const isRetrying =
 		startWorkspaceMutation.isPending ||
@@ -606,7 +608,7 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 
 				{abilities.canCancel && (
 					<PrimaryAction
-						onClick={cancelBuildMutation.mutate}
+						onClick={() => setIsCancelConfirmOpen(true)}
 						isLoading={cancelBuildMutation.isPending}
 						label="Cancel build"
 					>
@@ -643,6 +645,21 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 				}}
 				type="delete"
 			/>
+
+			{/* Cancel workspace build confirmation dialog */}
+			<ConfirmDialog
+				open={isCancelConfirmOpen}
+				title="Cancel workspace build"
+				description={`Are you sure you want to cancel the build for workspace "${workspace.name}"? This will stop the current build process.`}
+				confirmText="Confirm"
+				cancelText="Discard"
+				onClose={() => setIsCancelConfirmOpen(false)}
+				onConfirm={() => {
+					cancelBuildMutation.mutate();
+					setIsCancelConfirmOpen(false);
+				}}
+				type="delete"
+			/>
 		</TableCell>
 	);
 };

Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ export const abilitiesByWorkspaceStatus = (`
`145`	`145`	`case "pending": {`
`146`	`146`	`return {`
`147`	`147`	`actions: ["pending"],`
`148`		`- canCancel: false,`
	`148`	`+ canCancel: true,`
`149`	`149`	`canAcceptJobs: false,`
`150`	`150`	`};`
`151`	`151`	`}`