coder · BrunoQuaresma · Mar 14, 2025 · Mar 6, 2025 · Mar 10, 2025 · Mar 10, 2025
diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx
@@ -12,7 +12,7 @@ export const badgeVariants = cva(
 		variants: {
 			variant: {
 				default:
-					"border-transparent bg-surface-secondary text-content-secondary shadow hover:bg-surface-tertiary",
+					"border-transparent bg-surface-secondary text-content-secondary shadow",
 			},
 			size: {
 				sm: "text-2xs font-regular",

diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx
@@ -24,7 +24,7 @@ export const OrganizationSettingsContext = createContext<
 	OrganizationSettingsValue | undefined
 >(undefined);
 
-type OrganizationSettingsValue = Readonly<{
+export type OrganizationSettingsValue = Readonly<{
 	organizations: readonly Organization[];
 	organizationPermissionsByOrganizationId: Record<
 		string,
@@ -36,9 +36,10 @@ type OrganizationSettingsValue = Readonly<{
 
 export const useOrganizationSettings = (): OrganizationSettingsValue => {
 	const context = useContext(OrganizationSettingsContext);
+
 	if (!context) {
 		throw new Error(
-			"useOrganizationSettings should be used inside of OrganizationSettingsLayout",
+			"useOrganizationSettings should be used inside of OrganizationSettingsLayout or with the default values in case of testing.",
 		);
 	}
 

diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -186,11 +186,18 @@ const OrganizationSettingsNavigation: FC<
 				)}
 				{orgPermissions.viewProvisioners &&
 					orgPermissions.viewProvisionerJobs && (
-						<SettingsSidebarNavItem
-							href={urlForSubpage(organization.name, "provisioners")}
-						>
-							Provisioners
-						</SettingsSidebarNavItem>
+						<>
+							<SettingsSidebarNavItem
+								href={urlForSubpage(organization.name, "provisioners")}
+							>
+								Provisioners
+							</SettingsSidebarNavItem>
+							<SettingsSidebarNavItem
+								href={urlForSubpage(organization.name, "provisioner-jobs")}
+							>
+								Provisioner Jobs
+							</SettingsSidebarNavItem>
+						</>
 					)}
 				{orgPermissions.viewIdpSyncSettings && (
 					<SettingsSidebarNavItem

diff --git a/...visionersPage/CancelJobButton.stories.tsx → ...ionerJobsPage/CancelJobButton.stories.tsx b/...visionersPage/CancelJobButton.stories.tsx → ...ionerJobsPage/CancelJobButton.stories.tsx
@@ -4,7 +4,7 @@ import { MockProvisionerJob } from "testHelpers/entities";
 import { CancelJobButton } from "./CancelJobButton";
 
 const meta: Meta<typeof CancelJobButton> = {
-	title: "pages/OrganizationSettingsPage/ProvisionersPage/CancelJobButton",
+	title: "pages/OrganizationProvisionerJobsPage/CancelJobButton",
 	component: CancelJobButton,
 	args: {
 		job: {
@@ -28,7 +28,7 @@ export const NotCancellable: Story = {
 	},
 };
 
-export const OnClick: Story = {
+export const ConfirmOnClick: Story = {
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},

diff --git a/...Page/ProvisionersPage/CancelJobButton.tsx → ...onProvisionerJobsPage/CancelJobButton.tsx b/...Page/ProvisionersPage/CancelJobButton.tsx → ...onProvisionerJobsPage/CancelJobButton.tsx
diff --git a/...e/CancelJobConfirmationDialog.stories.tsx → ...e/CancelJobConfirmationDialog.stories.tsx b/...e/CancelJobConfirmationDialog.stories.tsx → ...e/CancelJobConfirmationDialog.stories.tsx
@@ -6,8 +6,7 @@ import { withGlobalSnackbar } from "testHelpers/storybook";
 import { CancelJobConfirmationDialog } from "./CancelJobConfirmationDialog";
 
 const meta: Meta<typeof CancelJobConfirmationDialog> = {
-	title:
-		"pages/OrganizationSettingsPage/ProvisionersPage/CancelJobConfirmationDialog",
+	title: "pages/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog",
 	component: CancelJobConfirmationDialog,
 	args: {
 		open: true,
@@ -40,7 +39,7 @@ export const OnCancel: Story = {
 	},
 };
 
-export const onConfirmSuccess: Story = {
+export const OnConfirmSuccess: Story = {
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},
@@ -60,7 +59,7 @@ export const onConfirmSuccess: Story = {
 	},
 };
 
-export const onConfirmFailure: Story = {
+export const OnConfirmFailure: Story = {
 	parameters: {
 		chromatic: { disableSnapshot: true },
 	},

diff --git a/...onersPage/CancelJobConfirmationDialog.tsx → ...rJobsPage/CancelJobConfirmationDialog.tsx b/...onersPage/CancelJobConfirmationDialog.tsx → ...rJobsPage/CancelJobConfirmationDialog.tsx
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { Table, TableBody } from "components/Table/Table";
+import { MockProvisionerJob } from "testHelpers/entities";
+import { daysAgo } from "utils/time";
+import { JobRow } from "./JobRow";
+
+const meta: Meta<typeof JobRow> = {
+	title: "pages/OrganizationProvisionerJobsPage/JobRow",
+	component: JobRow,
+	args: {
+		job: {
+			...MockProvisionerJob,
+			created_at: daysAgo(2),
+		},
+	},
+	render: (args) => {
+		return (
+			<Table>
+				<TableBody>
+					<JobRow {...args} />
+				</TableBody>
+			</Table>
+		);
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof JobRow>;
+
+export const Close: Story = {};
+
+export const OpenOnClick: Story = {
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		const showMoreButton = canvas.getByRole("button", { name: /show more/i });
+
+		await userEvent.click(showMoreButton);
+
+		const jobId = canvas.getByText(args.job.id);
+		expect(jobId).toBeInTheDocument();
+	},
+};
+
+export const HideOnClick: Story = {
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+
+		const showMoreButton = canvas.getByRole("button", { name: /show more/i });
+		await userEvent.click(showMoreButton);
+
+		const hideButton = canvas.getByRole("button", { name: /hide/i });
+		await userEvent.click(hideButton);
+
+		const jobId = canvas.queryByText(args.job.id);
+		expect(jobId).not.toBeInTheDocument();
+	},
+};
diff --git a/.../ProvisionersPage/ProvisionerJobsPage.tsx → ...rganizationProvisionerJobsPage/JobRow.tsx b/.../ProvisionersPage/ProvisionerJobsPage.tsx → ...rganizationProvisionerJobsPage/JobRow.tsx
@@ -1,105 +1,24 @@
-import { provisionerJobs } from "api/queries/organizations";
 import type { ProvisionerJob } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
-import { Button } from "components/Button/Button";
-import { EmptyState } from "components/EmptyState/EmptyState";
-import { Link } from "components/Link/Link";
-import { Loader } from "components/Loader/Loader";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "components/Table/Table";
+import { TableCell, TableRow } from "components/Table/Table";
 import {
 	ChevronDownIcon,
 	ChevronRightIcon,
 	TriangleAlertIcon,
 } from "lucide-react";
 import { type FC, useState } from "react";
-import { useQuery } from "react-query";
 import { cn } from "utils/cn";
-import { docs } from "utils/docs";
 import { relativeTime } from "utils/time";
 import { CancelJobButton } from "./CancelJobButton";
-import { DataGrid } from "./DataGrid";
 import { JobStatusIndicator } from "./JobStatusIndicator";
 import { Tag, Tags, TruncateTags } from "./Tags";
 
-type ProvisionerJobsPageProps = {
-	orgId: string;
-};
-
-export const ProvisionerJobsPage: FC<ProvisionerJobsPageProps> = ({
-	orgId,
-}) => {
-	const {
-		data: jobs,
-		isLoadingError,
-		refetch,
-	} = useQuery(provisionerJobs(orgId));
-
-	return (
-		<section className="flex flex-col gap-8">
-			<h2 className="sr-only">Provisioner jobs</h2>
-			<p className="text-sm text-content-secondary m-0 mt-2">
-				Provisioner Jobs are the individual tasks assigned to Provisioners when
-				the workspaces are being built.{" "}
-				<Link href={docs("/admin/provisioners")}>View docs</Link>
-			</p>
-
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Created</TableHead>
-						<TableHead>Type</TableHead>
-						<TableHead>Template</TableHead>
-						<TableHead>Tags</TableHead>
-						<TableHead>Status</TableHead>
-						<TableHead />
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{jobs ? (
-						jobs.length > 0 ? (
-							jobs.map((j) => <JobRow key={j.id} job={j} />)
-						) : (
-							<TableRow>
-								<TableCell colSpan={999}>
-									<EmptyState message="No provisioner jobs found" />
-								</TableCell>
-							</TableRow>
-						)
-					) : isLoadingError ? (
-						<TableRow>
-							<TableCell colSpan={999}>
-								<EmptyState
-									message="Error loading the provisioner jobs"
-									cta={<Button onClick={() => refetch()}>Retry</Button>}
-								/>
-							</TableCell>
-						</TableRow>
-					) : (
-						<TableRow>
-							<TableCell colSpan={999}>
-								<Loader />
-							</TableCell>
-						</TableRow>
-					)}
-				</TableBody>
-			</Table>
-		</section>
-	);
-};
-
 type JobRowProps = {
 	job: ProvisionerJob;
 };
 
-const JobRow: FC<JobRowProps> = ({ job }) => {
+export const JobRow: FC<JobRowProps> = ({ job }) => {
 	const metadata = job.metadata;
 	const [isOpen, setIsOpen] = useState(false);
 
@@ -133,20 +52,16 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 					<Badge size="sm">{job.type}</Badge>
 				</TableCell>
 				<TableCell>
-					{job.metadata.template_name ? (
-						<div className="flex items-center gap-1 whitespace-nowrap">
-							<Avatar
-								variant="icon"
-								src={metadata.template_icon}
-								fallback={
-									metadata.template_display_name || metadata.template_name
-								}
-							/>
-							{metadata.template_display_name ?? metadata.template_name}
-						</div>
-					) : (
-						<span className="whitespace-nowrap">Not linked</span>
-					)}
+					<div className="flex items-center gap-1 whitespace-nowrap">
+						<Avatar
+							variant="icon"
+							src={metadata.template_icon}
+							fallback={
+								metadata.template_display_name || metadata.template_name
+							}
+						/>
+						{metadata.template_display_name || metadata.template_name}
+					</div>
 				</TableCell>
 				<TableCell>
 					<TruncateTags tags={job.tags} />
@@ -173,7 +88,13 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 								<span className="[&:first-letter]:uppercase">{job.error}</span>
 							</div>
 						)}
-						<DataGrid>
+						<dl
+							className={cn([
+								"text-xs text-content-secondary",
+								"m-0 grid grid-cols-[auto_1fr] gap-x-4 items-center",
+								"[&_dd]:text-content-primary [&_dd]:font-mono [&_dd]:leading-[22px] [&_dt]:font-medium",
+							])}
+						>
 							<dt>Job ID:</dt>
 							<dd>{job.id}</dd>
 
@@ -206,7 +127,7 @@ const JobRow: FC<JobRowProps> = ({ job }) => {
 									))}
 								</Tags>
 							</dd>
-						</DataGrid>
+						</dl>
 					</TableCell>
 				</TableRow>
 			)}

diff --git a/...s/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobStatusIndicator.stories.tsx b/...s/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobStatusIndicator.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MockProvisionerJob } from "testHelpers/entities";
+import { JobStatusIndicator } from "./JobStatusIndicator";
+
+const meta: Meta<typeof JobStatusIndicator> = {
+	title: "pages/OrganizationProvisionerJobsPage/JobStatusIndicator",
+	component: JobStatusIndicator,
+};
+
+export default meta;
+type Story = StoryObj<typeof JobStatusIndicator>;
+
+export const Succeeded: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "succeeded",
+		},
+	},
+};
+
+export const Failed: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "failed",
+		},
+	},
+};
+
+export const Pending: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "pending",
+			queue_position: 1,
+			queue_size: 1,
+		},
+	},
+};
+
+export const Running: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "running",
+		},
+	},
+};
+
+export const Canceling: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "canceling",
+		},
+	},
+};
+
+export const Canceled: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "canceled",
+		},
+	},
+};
+
+export const Unknown: Story = {
+	args: {
+		job: {
+			...MockProvisionerJob,
+			status: "unknown",
+		},
+	},
+};