Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 return response.data;
 };

 /**
 * Downloads a template version as a tar or zip archive
 * @param fileId The file ID from the template version's job
 * @param format Optional format: "zip" for zip archive, empty/undefined for tar
 * @returns Promise that resolves to a Blob containing the archive
 */
 downloadTemplateVersion = async (
 fileId: string,
 format?: "zip",
 ): Promise<Blob> => {
 const params = new URLSearchParams();
 if (format) {
 params.set("format", format);
 }

 const response = await this.axios.get(
 `/api/v2/files/${fileId}?${params.toString()}`,
 {
 responseType: "blob",
 },
 );

 return response.data;
 };

 updateTemplateMeta = async (
 templateId: string,
 data: TypesGen.UpdateTemplateMeta,
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
 import EditIcon from "@mui/icons-material/EditOutlined";
 import Button from "@mui/material/Button";
 import { API } from "api/api";
 import { workspaces } from "api/queries/workspaces";
 import type {
 AuthorizationResponse,
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { CopyIcon } from "lucide-react";
 import { CopyIcon, DownloadIcon } from "lucide-react";
 import {
 EllipsisVertical,
 PlusIcon,
 templateName: string;
 templateVersion: string;
 templateId: string;
 fileId: string;
 onDelete: () => void;
 };

 templateName,
 templateVersion,
 templateId,
 fileId,
 onDelete,
 }) => {
 const dialogState = useDeletionDialogState(templateId, onDelete);

 const templateLink = getLink(linkToTemplate(organizationName, templateName));

 const handleExport = async (format?: "zip") => {
 try {
 const blob = await API.downloadTemplateVersion(fileId, format);
 const url = window.URL.createObjectURL(blob);
 const link = document.createElement("a");
 link.href = url;
 const extension = format === "zip" ? "zip" : "tar";
 link.download = `${templateName}-${templateVersion}.${extension}`;
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 window.URL.revokeObjectURL(url);
 } catch (error) {
 console.error("Failed to export template:", error);
 // TODO: Show user-friendly error message
 }
 };

 return (
 <>
 <DropdownMenu>
 <CopyIcon className="size-icon-sm" />
 Duplicate&hellip;
 </DropdownMenuItem>

 <DropdownMenuItem onClick={() => handleExport()}>
 <DownloadIcon className="size-icon-sm" />
 Export as TAR
 </DropdownMenuItem>

 <DropdownMenuItem onClick={() => handleExport("zip")}>
 <DownloadIcon className="size-icon-sm" />
 Export as ZIP
 </DropdownMenuItem>
 <DropdownMenuSeparator />
 <DropdownMenuItem
 className="text-content-destructive focus:text-content-destructive"
 templateId={template.id}
 templateName={template.name}
 templateVersion={activeVersion.name}
 fileId={activeVersion.job.file_id}
 onDelete={onDeleteTemplate}
 />
 )}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1084,6 +1084,31 @@ class ApiMethods {
		return response.data;
		};

		/**
		* Downloads a template version as a tar or zip archive
		* @param fileId The file ID from the template version's job
		* @param format Optional format: "zip" for zip archive, empty/undefined for tar
		* @returns Promise that resolves to a Blob containing the archive
		*/
		downloadTemplateVersion = async (
		fileId: string,
		format?: "zip",
		): Promise<Blob> => {
		const params = new URLSearchParams();
		if (format) {
		params.set("format", format);
		}

		const response = await this.axios.get(
		`/api/v2/files/${fileId}?${params.toString()}`,
		{
		responseType: "blob",
		},
		);

		return response.data;
		};

		updateTemplateMeta = async (
		templateId: string,
		data: TypesGen.UpdateTemplateMeta,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import EditIcon from "@mui/icons-material/EditOutlined";
		import Button from "@mui/material/Button";
		import { API } from "api/api";
		import { workspaces } from "api/queries/workspaces";
		import type {
		AuthorizationResponse,
Expand All		@@ -26,7 +27,7 @@ import {
		} from "components/PageHeader/PageHeader";
		import { Pill } from "components/Pill/Pill";
		import { Stack } from "components/Stack/Stack";
		import { CopyIcon } from "lucide-react";
		import { CopyIcon, DownloadIcon } from "lucide-react";
		import {
		EllipsisVertical,
		PlusIcon,
Expand All		@@ -46,6 +47,7 @@ type TemplateMenuProps = {
		templateName: string;
		templateVersion: string;
		templateId: string;
		fileId: string;
		onDelete: () => void;
		};

Expand All		@@ -54,6 +56,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
		templateName,
		templateVersion,
		templateId,
		fileId,
		onDelete,
		}) => {
		const dialogState = useDeletionDialogState(templateId, onDelete);
Expand All		@@ -68,6 +71,24 @@ const TemplateMenu: FC<TemplateMenuProps> = ({

		const templateLink = getLink(linkToTemplate(organizationName, templateName));

		const handleExport = async (format?: "zip") => {
		try {
		const blob = await API.downloadTemplateVersion(fileId, format);
		const url = window.URL.createObjectURL(blob);
		const link = document.createElement("a");
		link.href = url;
		const extension = format === "zip" ? "zip" : "tar";
		link.download = `${templateName}-${templateVersion}.${extension}`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
		window.URL.revokeObjectURL(url);
		} catch (error) {
		console.error("Failed to export template:", error);
		// TODO: Show user-friendly error message
		}
		};

		return (
		<>
		<DropdownMenu>
Expand DownExpand Up		@@ -102,6 +123,16 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
		<CopyIcon className="size-icon-sm" />
		Duplicate…
		</DropdownMenuItem>

		<DropdownMenuItem onClick={() => handleExport()}>
		<DownloadIcon className="size-icon-sm" />
		Export as TAR
		</DropdownMenuItem>

		<DropdownMenuItem onClick={() => handleExport("zip")}>
		<DownloadIcon className="size-icon-sm" />
		Export as ZIP
		</DropdownMenuItem>
		<DropdownMenuSeparator />
		<DropdownMenuItem
		className="text-content-destructive focus:text-content-destructive"
Expand DownExpand Up		@@ -206,6 +237,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
		templateId={template.id}
		templateName={template.name}
		templateVersion={activeVersion.name}
		fileId={activeVersion.job.file_id}
		onDelete={onDeleteTemplate}
		/>
		)}
Expand Down