coder · BrunoQuaresma · Feb 18, 2025 · Feb 5, 2025 · Feb 7, 2025 · Feb 7, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1238,7 +1238,7 @@ class ApiMethods {
 	};
 
 	cancelTemplateVersionBuild = async (
-		templateVersionId: TypesGen.TemplateVersion["id"],
+		templateVersionId: string,
 	): Promise<TypesGen.Response> => {
 		const response = await this.axios.patch(
 			`/api/v2/templateversions/${templateVersionId}/cancel`,
@@ -1247,6 +1247,17 @@ class ApiMethods {
 		return response.data;
 	};
 
+	cancelTemplateVersionDryRun = async (
+		templateVersionId: string,
+		jobId: string,
+	): Promise<TypesGen.Response> => {
+		const response = await this.axios.patch(
+			`/api/v2/templateversions/${templateVersionId}/dry-run/${jobId}/cancel`,
+		);
+
+		return response.data;
+	};
+
 	createUser = async (
 		user: TypesGen.CreateUserRequestWithOrgs,
 	): Promise<TypesGen.User> => {
@@ -2295,6 +2306,38 @@ class ApiMethods {
 		);
 		return res.data;
 	};
+
+	getProvisionerJobs = async (orgId: string) => {
+		const res = await this.axios.get<TypesGen.ProvisionerJob[]>(
+			`/api/v2/organizations/${orgId}/provisionerjobs`,
+		);
+		return res.data;
+	};
+
+	cancelProvisionerJob = async (job: TypesGen.ProvisionerJob) => {
+		switch (job.type) {
+			case "workspace_build":
+				if (!job.input.workspace_build_id) {
+					throw new Error("Workspace build ID is required to cancel this job");
+				}
+				return this.cancelWorkspaceBuild(job.input.workspace_build_id);
+
+			case "template_version_import":
+				if (!job.input.template_version_id) {
+					throw new Error("Template version ID is required to cancel this job");
+				}
+				return this.cancelTemplateVersionBuild(job.input.template_version_id);
+
+			case "template_version_dry_run":
+				if (!job.input.template_version_id) {
+					throw new Error("Template version ID is required to cancel this job");
+				}
+				return this.cancelTemplateVersionDryRun(
+					job.input.template_version_id,
+					job.id,
+				);
+		}
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -244,6 +244,19 @@ export const organizationPermissions = (organizationId: string | undefined) => {
 	};
 };
 
+export const provisionerJobQueryKey = (orgId: string) => [
+	"organization",
+	orgId,
+	"provisionerjobs",
+];
+
+export const provisionerJobs = (orgId: string) => {
+	return {
+		queryKey: provisionerJobQueryKey(orgId),
+		queryFn: () => API.getProvisionerJobs(orgId),
+	};
+};
+
 /**
  * Fetch permissions for all provided organizations.
  *

diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
@@ -7,16 +7,21 @@ import type { FC } from "react";
 import { cn } from "utils/cn";
 
 export const badgeVariants = cva(
-	"inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	"inline-flex items-center rounded-md border px-2 py-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 	{
 		variants: {
 			variant: {
 				default:
 					"border-transparent bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
 			},
+			size: {
+				sm: "text-2xs font-regular",
+				md: "text-xs font-medium",
+			},
 		},
 		defaultVariants: {
 			variant: "default",
+			size: "md",
 		},
 	},
 );
@@ -25,8 +30,16 @@ export interface BadgeProps
 	extends React.HTMLAttributes<HTMLDivElement>,
 		VariantProps<typeof badgeVariants> {}
 
-export const Badge: FC<BadgeProps> = ({ className, variant, ...props }) => {
+export const Badge: FC<BadgeProps> = ({
+	className,
+	variant,
+	size,
+	...props
+}) => {
 	return (
-		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+		<div
+			className={cn(badgeVariants({ variant, size }), className)}
+			{...props}
+		/>
 	);
 };
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import { cn } from "utils/cn";
 
 export const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-1 whitespace-nowrap
-	border-solid rounded-md transition-colors min-w-20
+	border-solid rounded-md transition-colors
 	text-sm font-semibold font-medium cursor-pointer no-underline
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 	disabled:pointer-events-none disabled:text-content-disabled
@@ -28,9 +28,9 @@ export const buttonVariants = cva(
 			},
 
 			size: {
-				lg: "h-10 px-3 py-2 [&_svg]:size-icon-lg",
-				sm: "h-[30px] px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
-				icon: "h-[30px] min-w-[30px] px-1 py-1.5 [&_svg]:size-icon-sm",
+				lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg",
+				sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm",
+				icon: "size-8 px-1.5 [&_svg]:size-icon-sm",
 			},
 		},
 		defaultVariants: {

diff --git a/site/src/modules/management/DeploymentSidebarView.tsx b/site/src/modules/management/DeploymentSidebarView.tsx
@@ -94,6 +94,11 @@ export const DeploymentSidebarView: FC<DeploymentSidebarViewProps> = ({
 						IdP Organization Sync
 					</SidebarNavItem>
 				)}
+				{permissions.viewDeploymentValues && (
+					<SidebarNavItem href="/deployment/provisioners">
+						Provisioners
+					</SidebarNavItem>
+				)}
 				{!hasPremiumLicense && (
 					<SidebarNavItem href="/deployment/premium">Premium</SidebarNavItem>
 				)}

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage.tsx
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPageView.stories.tsx