coder · BrunoQuaresma · May 13, 2025 · May 12, 2025 · May 12, 2025 · May 12, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -482,10 +482,10 @@ class ApiMethods {
 		return response.data;
 	};
 
-	checkAuthorization = async (
+	checkAuthorization = async <TResponse extends TypesGen.AuthorizationResponse>(
 		params: TypesGen.AuthorizationRequest,
-	): Promise<TypesGen.AuthorizationResponse> => {
-		const response = await this.axios.post<TypesGen.AuthorizationResponse>(
+	) => {
+		const response = await this.axios.post<TResponse>(
 			"/api/v2/authcheck",
 			params,
 		);

diff --git a/site/src/api/queries/authCheck.ts b/site/src/api/queries/authCheck.ts
@@ -1,14 +1,19 @@
 import { API } from "api/api";
-import type { AuthorizationRequest } from "api/typesGenerated";
+import type {
+	AuthorizationRequest,
+	AuthorizationResponse,
+} from "api/typesGenerated";
 
 const AUTHORIZATION_KEY = "authorization";
 
 export const getAuthorizationKey = (req: AuthorizationRequest) =>
 	[AUTHORIZATION_KEY, req] as const;
 
-export const checkAuthorization = (req: AuthorizationRequest) => {
+export const checkAuthorization = <TResponse extends AuthorizationResponse>(
+	req: AuthorizationRequest,
+) => {
 	return {
 		queryKey: getAuthorizationKey(req),
-		queryFn: () => API.checkAuthorization(req),
+		queryFn: () => API.checkAuthorization<TResponse>(req),
 	};
 };
diff --git a/site/src/api/queries/deployment.ts b/site/src/api/queries/deployment.ts
@@ -6,6 +6,7 @@ export const deploymentConfig = () => {
 	return {
 		queryKey: deploymentConfigQueryKey,
 		queryFn: API.getDeploymentConfig,
+		staleTime: Number.POSITIVE_INFINITY,
 	};
 };
 

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/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -11,12 +11,17 @@ import type {
 	WorkspacesResponse,
 } from "api/typesGenerated";
 import type { Dayjs } from "dayjs";
+import {
+	type WorkspacePermissions,
+	workspaceChecks,
+} from "modules/workspaces/permissions";
 import type { ConnectionStatus } from "pages/TerminalPage/types";
 import type {
 	QueryClient,
 	QueryOptions,
 	UseMutationOptions,
 } from "react-query";
+import { checkAuthorization } from "./authCheck";
 import { disabledRefetchOptions } from "./util";
 import { workspaceBuildsKey } from "./workspaceBuilds";
 
@@ -390,3 +395,14 @@ export const workspaceUsage = (options: WorkspaceUsageOptions) => {
 		refetchIntervalInBackground: true,
 	};
 };
+
+export const workspacePermissions = (workspace?: Workspace) => {
+	return {
+		...checkAuthorization<WorkspacePermissions>({
+			checks: workspace ? workspaceChecks(workspace) : {},
+		}),
+		queryKey: ["workspaces", workspace?.id, "permissions"],
+		enabled: !!workspace,
+		staleTime: Number.POSITIVE_INFINITY,
+	};
+};
diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
@@ -111,7 +111,7 @@ export const DropdownMenuItem = forwardRef<
 			[
 				"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors",
 				"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-				"[&>svg]:size-4 [&>svg]:shrink-0",
+				"[&>svg]:size-4 [&>svg]:shrink-0 no-underline",
 				inset && "pl-8",
 			],
 			className,

diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.stories.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/ChangeWorkspaceVersionDialog.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { templateVersionsQueryKey } from "api/queries/templates";
+import {
+	MockTemplateVersion,
+	MockTemplateVersionWithMarkdownMessage,
+	MockWorkspace,
+} from "testHelpers/entities";
+import { ChangeWorkspaceVersionDialog } from "./ChangeWorkspaceVersionDialog";
+
+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,43 @@ 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),
+		select: (data) => data.reverse(),
+	});
 	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 +63,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 +114,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 +132,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 													...params.InputProps,
 													endAdornment: (
 														<>
-															{!templateVersions ? (
-																<CircularProgress size={16} />
-															) : null}
+															{!versions && <CircularProgress size={16} />}
 															{params.InputProps.endAdornment}
 														</>
 													),
@@ -144,16 +143,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/...aceActions/DownloadLogsDialog.stories.tsx → ...oreActions/DownloadLogsDialog.stories.tsx b/...aceActions/DownloadLogsDialog.stories.tsx → ...oreActions/DownloadLogsDialog.stories.tsx
@@ -6,7 +6,7 @@ import { withDesktopViewport } from "testHelpers/storybook";
 import { DownloadLogsDialog } from "./DownloadLogsDialog";
 
 const meta: Meta<typeof DownloadLogsDialog> = {
-	title: "pages/WorkspacePage/DownloadLogsDialog",
+	title: "modules/workspaces/DownloadLogsDialog",
 	component: DownloadLogsDialog,
 	args: {
 		open: true,

diff --git a/...e/WorkspaceActions/DownloadLogsDialog.tsx → ...rkspaceMoreActions/DownloadLogsDialog.tsx b/...e/WorkspaceActions/DownloadLogsDialog.tsx → ...rkspaceMoreActions/DownloadLogsDialog.tsx
@@ -221,8 +221,9 @@ const DownloadingItem: FC<DownloadingItemProps> = ({ file, giveUpTimeMs }) => {
 function humanBlobSize(size: number) {
 	const BLOB_SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"] as const;
 	let i = 0;
-	while (size > 1024 && i < BLOB_SIZE_UNITS.length) {
-		size /= 1024;
+	let sizeIterator = size;
+	while (sizeIterator > 1024 && i < BLOB_SIZE_UNITS.length) {
+		sizeIterator /= 1024;
 		i++;
 	}
 

diff --git a/...spacePage/UpdateBuildParametersDialog.tsx → ...reActions/UpdateBuildParametersDialog.tsx b/...spacePage/UpdateBuildParametersDialog.tsx → ...reActions/UpdateBuildParametersDialog.tsx
diff --git a/...eDialog/WorkspaceDeleteDialog.stories.tsx → ...Actions/WorkspaceDeleteDialog.stories.tsx b/...eDialog/WorkspaceDeleteDialog.stories.tsx → ...Actions/WorkspaceDeleteDialog.stories.tsx
@@ -1,17 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { MockFailedWorkspace, MockWorkspace } from "testHelpers/entities";
+import { daysAgo } from "utils/time";
 import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
 
 const meta: Meta<typeof WorkspaceDeleteDialog> = {
-	title: "pages/WorkspacePage/WorkspaceDeleteDialog",
+	title: "modules/workspaces/WorkspaceDeleteDialog",
 	component: WorkspaceDeleteDialog,
 	args: {
-		workspace: MockWorkspace,
-		canUpdateTemplate: false,
+		workspace: {
+			...MockWorkspace,
+			latest_build: {
+				...MockWorkspace.latest_build,
+				created_at: daysAgo(2),
+			},
+		},
+		canDeleteFailedWorkspace: false,
 		isOpen: true,
-		onCancel: () => {},
-		onConfirm: () => {},
-		workspaceBuildDateStr: "2 days ago",
 	},
 };
 
@@ -30,14 +34,14 @@ export const Unhealthy: Story = {
 // Should look the same as `Example`
 export const AdminView: Story = {
 	args: {
-		canUpdateTemplate: true,
+		canDeleteFailedWorkspace: true,
 	},
 };
 
 // Should show the `--orphan` option
 export const UnhealthyAdminView: Story = {
 	args: {
 		workspace: MockFailedWorkspace,
-		canUpdateTemplate: true,
+		canDeleteFailedWorkspace: true,
 	},
 };