coder · BrunoQuaresma · May 6, 2025 · May 1, 2025 · May 1, 2025 · May 1, 2025
diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -139,13 +139,9 @@ function workspacesKey(config: WorkspacesRequest = {}) {
 }
 
 export function workspaces(config: WorkspacesRequest = {}) {
-	// Duplicates some of the work from workspacesKey, but that felt better than
-	// letting invisible properties sneak into the query logic
-	const { q, limit } = config;
-
 	return {
 		queryKey: workspacesKey(config),
-		queryFn: () => API.getWorkspaces({ q, limit }),
+		queryFn: () => API.getWorkspaces(config),
 	} as const satisfies QueryOptions<WorkspacesResponse>;
 }
 
@@ -281,7 +277,10 @@ const updateWorkspaceBuild = async (
 		build.workspace_owner_name,
 		build.workspace_name,
 	);
-	const previousData = queryClient.getQueryData(workspaceKey) as Workspace;
+	const previousData = queryClient.getQueryData<Workspace>(workspaceKey);
+	if (!previousData) {
+		return;
+	}
 
 	// Check if the build returned is newer than the previous build that could be
 	// updated from web socket

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -35,7 +35,14 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
 	return (
 		<>
 			{onCancel && (
-				<Button disabled={confirmLoading} onClick={onCancel} variant="outline">
+				<Button
+					disabled={confirmLoading}
+					onClick={(e) => {
+						e.stopPropagation();
+						onCancel();
+					}}
+					variant="outline"
+				>
 					{cancelText}
 				</Button>
 			)}

diff --git a/site/src/hooks/usePagination.ts b/site/src/hooks/usePagination.ts
@@ -9,7 +9,7 @@ export const usePagination = ({
 	const [searchParams, setSearchParams] = searchParamsResult;
 	const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
 	const limit = DEFAULT_RECORDS_PER_PAGE;
-	const offset = page <= 0 ? 0 : (page - 1) * limit;
+	const offset = calcOffset(page, limit);
 
 	const goToPage = (page: number) => {
 		searchParams.set("page", page.toString());
@@ -23,3 +23,7 @@ export const usePagination = ({
 		offset,
 	};
 };
+
+export const calcOffset = (page: number, limit: number) => {
+	return page <= 0 ? 0 : (page - 1) * limit;
+};
diff --git a/site/src/modules/workspaces/WorkspaceUpdateDialogs.tsx b/site/src/modules/workspaces/WorkspaceUpdateDialogs.tsx
@@ -0,0 +1,155 @@
+import { MissingBuildParameters } from "api/api";
+import { updateWorkspace } from "api/queries/workspaces";
+import type {
+	TemplateVersion,
+	Workspace,
+	WorkspaceBuild,
+	WorkspaceBuildParameter,
+} from "api/typesGenerated";
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
+import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
+import { UpdateBuildParametersDialog } from "pages/WorkspacePage/UpdateBuildParametersDialog";
+import { type FC, useState } from "react";
+import { useMutation, useQueryClient } from "react-query";
+
+type UseWorkspaceUpdateOptions = {
+	workspace: Workspace;
+	latestVersion: TemplateVersion | undefined;
+	onSuccess?: (build: WorkspaceBuild) => void;
+	onError?: (error: unknown) => void;
+};
+
+type UseWorkspaceUpdateResult = {
+	update: () => void;
+	isUpdating: boolean;
+	dialogs: {
+		updateConfirmation: UpdateConfirmationDialogProps;
+		missingBuildParameters: MissingBuildParametersDialogProps;
+	};
+};
+
+export const useWorkspaceUpdate = ({
+	workspace,
+	latestVersion,
+	onSuccess,
+	onError,
+}: UseWorkspaceUpdateOptions): UseWorkspaceUpdateResult => {
+	const queryClient = useQueryClient();
+	const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false);
+
+	const updateWorkspaceOptions = updateWorkspace(workspace, queryClient);
+	const updateWorkspaceMutation = useMutation({
+		...updateWorkspaceOptions,
+		onSuccess: (build: WorkspaceBuild) => {
+			updateWorkspaceOptions.onSuccess(build);
+			onSuccess?.(build);
+		},
+		onError,
+	});
+
+	const update = () => {
+		setIsConfirmingUpdate(true);
+	};
+
+	const confirmUpdate = (buildParameters: WorkspaceBuildParameter[] = []) => {
+		updateWorkspaceMutation.mutate(buildParameters);
+		setIsConfirmingUpdate(false);
+	};
+
+	return {
+		update,
+		isUpdating: updateWorkspaceMutation.isLoading,
+		dialogs: {
+			updateConfirmation: {
+				open: isConfirmingUpdate,
+				onClose: () => setIsConfirmingUpdate(false),
+				onConfirm: () => confirmUpdate(),
+				latestVersion,
+			},
+			missingBuildParameters: {
+				error: updateWorkspaceMutation.error,
+				onClose: () => {
+					updateWorkspaceMutation.reset();
+				},
+				onUpdate: (buildParameters: WorkspaceBuildParameter[]) => {
+					if (updateWorkspaceMutation.error instanceof MissingBuildParameters) {
+						confirmUpdate(buildParameters);
+					}
+				},
+			},
+		},
+	};
+};
+
+type WorkspaceUpdateDialogsProps = {
+	updateConfirmation: UpdateConfirmationDialogProps;
+	missingBuildParameters: MissingBuildParametersDialogProps;
+};
+
+export const WorkspaceUpdateDialogs: FC<WorkspaceUpdateDialogsProps> = ({
+	updateConfirmation,
+	missingBuildParameters,
+}) => {
+	return (
+		<>
+			<UpdateConfirmationDialog {...updateConfirmation} />
+			<MissingBuildParametersDialog {...missingBuildParameters} />
+		</>
+	);
+};
+
+type UpdateConfirmationDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+	latestVersion?: TemplateVersion;
+};
+
+const UpdateConfirmationDialog: FC<UpdateConfirmationDialogProps> = ({
+	latestVersion,
+	...dialogProps
+}) => {
+	return (
+		<ConfirmDialog
+			{...dialogProps}
+			hideCancel={false}
+			title="Update workspace?"
+			confirmText="Update"
+			description={
+				<div className="flex flex-col gap-2">
+					<p>
+						Updating your workspace will start the workspace on the latest
+						template version. This can{" "}
+						<strong>delete non-persistent data</strong>.
+					</p>
+					{latestVersion?.message && (
+						<MemoizedInlineMarkdown allowedElements={["ol", "ul", "li"]}>
+							{latestVersion.message}
+						</MemoizedInlineMarkdown>
+					)}
+				</div>
+			}
+		/>
+	);
+};
+
+type MissingBuildParametersDialogProps = {
+	error: unknown;
+	onClose: () => void;
+	onUpdate: (buildParameters: WorkspaceBuildParameter[]) => void;
+};
+
+const MissingBuildParametersDialog: FC<MissingBuildParametersDialogProps> = ({
+	error,
+	...dialogProps
+}) => {
+	return (
+		<UpdateBuildParametersDialog
+			missedParameters={
+				error instanceof MissingBuildParameters ? error.parameters : []
+			}
+			open={error instanceof MissingBuildParameters}
+			{...dialogProps}
+		/>
+	);
+};
diff --git a/...rkspacePage/WorkspaceActions/constants.ts → site/src/modules/workspaces/actions.ts b/...rkspacePage/WorkspaceActions/constants.ts → site/src/modules/workspaces/actions.ts
@@ -34,6 +34,11 @@ const actionTypes = [
 
 export type ActionType = (typeof actionTypes)[number];
 
+type ActionPermissions = {
+	canDebug: boolean;
+	isOwner: boolean;
+};
+
 type WorkspaceAbilities = {
 	actions: readonly ActionType[];
 	canCancel: boolean;
@@ -42,8 +47,11 @@ type WorkspaceAbilities = {
 
 export const abilitiesByWorkspaceStatus = (
 	workspace: Workspace,
-	canDebug: boolean,
+	permissions: ActionPermissions,
 ): WorkspaceAbilities => {
+	const hasPermissionToCancel =
+		workspace.template_allow_user_cancel_workspace_jobs || permissions.isOwner;
+
 	if (workspace.dormant_at) {
 		return {
 			actions: ["activate"],
@@ -58,7 +66,7 @@ export const abilitiesByWorkspaceStatus = (
 		case "starting": {
 			return {
 				actions: ["starting"],
-				canCancel: true,
+				canCancel: hasPermissionToCancel,
 				canAcceptJobs: false,
 			};
 		}
@@ -83,7 +91,7 @@ export const abilitiesByWorkspaceStatus = (
 		case "stopping": {
 			return {
 				actions: ["stopping"],
-				canCancel: true,
+				canCancel: hasPermissionToCancel,
 				canAcceptJobs: false,
 			};
 		}
@@ -115,7 +123,7 @@ export const abilitiesByWorkspaceStatus = (
 		case "failed": {
 			const actions: ActionType[] = ["retry"];
 
-			if (canDebug) {
+			if (permissions.canDebug) {
 				actions.push("debug");
 			}
 

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/useWorkspacesToBeDeleted.ts
@@ -1,5 +1,6 @@
 import type { Template, Workspace } from "api/typesGenerated";
 import { compareAsc } from "date-fns";
+import { calcOffset } from "hooks/usePagination";
 import { useWorkspacesData } from "pages/WorkspacesPage/data";
 import type { TemplateScheduleFormValues } from "./formHelpers";
 
@@ -9,9 +10,9 @@ export const useWorkspacesToGoDormant = (
 	fromDate: Date,
 ) => {
 	const { data } = useWorkspacesData({
-		page: 0,
+		offset: calcOffset(0, 0),
 		limit: 0,
-		query: `template:${template.name}`,
+		q: `template:${template.name}`,
 	});
 
 	return data?.workspaces?.filter((workspace: Workspace) => {
@@ -40,9 +41,9 @@ export const useWorkspacesToBeDeleted = (
 	fromDate: Date,
 ) => {
 	const { data } = useWorkspacesData({
-		page: 0,
+		offset: calcOffset(0, 0),
 		limit: 0,
-		query: `template:${template.name} dormant:true`,
+		q: `template:${template.name} dormant:true`,
 	});
 	return data?.workspaces?.filter((workspace: Workspace) => {
 		if (!workspace.dormant_at || !formValues.time_til_dormant_autodelete_ms) {

diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import type { ProvisionerJobLog } from "api/typesGenerated";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
 import * as Mocks from "testHelpers/entities";
-import { withDashboardProvider } from "testHelpers/storybook";
+import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook";
 import { Workspace } from "./Workspace";
 import type { WorkspacePermissions } from "./permissions";
 
@@ -40,8 +40,10 @@ const meta: Meta<typeof Workspace> = {
 				data: Mocks.MockListeningPortsResponse,
 			},
 		],
+		user: Mocks.MockUser,
 	},
 	decorators: [
+		withAuthProvider,
 		withDashboardProvider,
 		(Story) => (
 			<ProxyContext.Provider

diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -53,7 +53,6 @@ export interface WorkspaceProps {
 	buildLogs?: TypesGen.ProvisionerJobLog[];
 	latestVersion?: TypesGen.TemplateVersion;
 	permissions: WorkspacePermissions;
-	isOwner: boolean;
 	timings?: TypesGen.WorkspaceBuildTimings;
 }
 
@@ -86,7 +85,6 @@ export const Workspace: FC<WorkspaceProps> = ({
 	buildLogs,
 	latestVersion,
 	permissions,
-	isOwner,
 	timings,
 }) => {
 	const navigate = useNavigate();
@@ -161,7 +159,6 @@ export const Workspace: FC<WorkspaceProps> = ({
 				isUpdating={isUpdating}
 				isRestarting={isRestarting}
 				canUpdateWorkspace={permissions.updateWorkspace}
-				isOwner={isOwner}
 				template={template}
 				permissions={permissions}
 				latestVersion={latestVersion}

diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx
@@ -3,6 +3,7 @@ import { expect, userEvent, within } from "@storybook/test";
 import { agentLogsKey, buildLogsKey } from "api/queries/workspaces";
 import * as Mocks from "testHelpers/entities";
 import {
+	withAuthProvider,
 	withDashboardProvider,
 	withDesktopViewport,
 } from "testHelpers/storybook";
@@ -14,7 +15,10 @@ const meta: Meta<typeof WorkspaceActions> = {
 	args: {
 		isUpdating: false,
 	},
-	decorators: [withDashboardProvider, withDesktopViewport],
+	decorators: [withDashboardProvider, withDesktopViewport, withAuthProvider],
+	parameters: {
+		user: Mocks.MockUser,
+	},
 };
 
 export default meta;
@@ -163,14 +167,15 @@ export const CancelShownForOwner: Story = {
 			...Mocks.MockStartingWorkspace,
 			template_allow_user_cancel_workspace_jobs: false,
 		},
-		isOwner: true,
 	},
 };
 
 export const CancelShownForUser: Story = {
 	args: {
 		workspace: Mocks.MockStartingWorkspace,
-		isOwner: false,
+	},
+	parameters: {
+		user: Mocks.MockUser2,
 	},
 };
 
@@ -180,7 +185,9 @@ export const CancelHiddenForUser: Story = {
 			...Mocks.MockStartingWorkspace,
 			template_allow_user_cancel_workspace_jobs: false,
 		},
-		isOwner: false,
+	},
+	parameters: {
+		user: Mocks.MockUser2,
 	},
 };