coder · BrunoQuaresma · Apr 4, 2025 · Apr 2, 2025 · Apr 4, 2025 · Apr 4, 2025
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from "class-variance-authority";
-import { type FC, createContext, useContext } from "react";
+import { type FC, createContext, forwardRef, useContext } from "react";
 import { cn } from "utils/cn";
 
 const statusIndicatorVariants = cva(
@@ -33,21 +33,19 @@ export interface StatusIndicatorProps
 	extends React.HTMLAttributes<HTMLDivElement>,
 		StatusIndicatorContextValue {}
 
-export const StatusIndicator: FC<StatusIndicatorProps> = ({
-	size,
-	variant,
-	className,
-	...props
-}) => {
-	return (
-		<StatusIndicatorContext.Provider value={{ size, variant }}>
-			<div
-				className={cn(statusIndicatorVariants({ variant, size }), className)}
-				{...props}
-			/>
-		</StatusIndicatorContext.Provider>
-	);
-};
+export const StatusIndicator = forwardRef<HTMLDivElement, StatusIndicatorProps>(
+	({ size, variant, className, ...props }, ref) => {
+		return (
+			<StatusIndicatorContext.Provider value={{ size, variant }}>
+				<div
+					ref={ref}
+					className={cn(statusIndicatorVariants({ variant, size }), className)}
+					{...props}
+				/>
+			</StatusIndicatorContext.Provider>
+		);
+	},
+);
 
 const dotVariants = cva("rounded-full inline-block border-4 border-solid", {
 	variants: {

diff --git a/...erJobsPage/JobStatusIndicator.stories.tsx → ...ovisioners/JobStatusIndicator.stories.tsx b/...erJobsPage/JobStatusIndicator.stories.tsx → ...ovisioners/JobStatusIndicator.stories.tsx
@@ -3,7 +3,7 @@ import { MockProvisionerJob } from "testHelpers/entities";
 import { JobStatusIndicator } from "./JobStatusIndicator";
 
 const meta: Meta<typeof JobStatusIndicator> = {
-	title: "pages/OrganizationProvisionerJobsPage/JobStatusIndicator",
+	title: "modules/provisioners/JobStatusIndicator",
 	component: JobStatusIndicator,
 };
 
@@ -12,65 +12,43 @@ type Story = StoryObj<typeof JobStatusIndicator>;
 
 export const Succeeded: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "succeeded",
-		},
+		status: "succeeded",
 	},
 };
 
 export const Failed: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "failed",
-		},
+		status: "failed",
 	},
 };
 
 export const Pending: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "pending",
-			queue_position: 1,
-			queue_size: 1,
-		},
+		status: "pending",
+		queue: { size: 1, position: 1 },
 	},
 };
 
 export const Running: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "running",
-		},
+		status: "running",
 	},
 };
 
 export const Canceling: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "canceling",
-		},
+		status: "canceling",
 	},
 };
 
 export const Canceled: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "canceled",
-		},
+		status: "canceled",
 	},
 };
 
 export const Unknown: Story = {
 	args: {
-		job: {
-			...MockProvisionerJob,
-			status: "unknown",
-		},
+		status: "unknown",
 	},
 };
diff --git a/...rovisionerJobsPage/JobStatusIndicator.tsx → ...dules/provisioners/JobStatusIndicator.tsx b/...rovisionerJobsPage/JobStatusIndicator.tsx → ...dules/provisioners/JobStatusIndicator.tsx
@@ -1,4 +1,4 @@
-import type { ProvisionerJob, ProvisionerJobStatus } from "api/typesGenerated";
+import type { ProvisionerJobStatus } from "api/typesGenerated";
 import {
 	StatusIndicator,
 	StatusIndicatorDot,
@@ -21,18 +21,22 @@ const variantByStatus: Record<
 };
 
 type JobStatusIndicatorProps = {
-	job: ProvisionerJob;
+	status: ProvisionerJobStatus;
+	queue?: { size: number; position: number };
 };
 
-export const JobStatusIndicator: FC<JobStatusIndicatorProps> = ({ job }) => {
+export const JobStatusIndicator: FC<JobStatusIndicatorProps> = ({
+	status,
+	queue,
+}) => {
 	return (
-		<StatusIndicator size="sm" variant={variantByStatus[job.status]}>
+		<StatusIndicator size="sm" variant={variantByStatus[status]}>
 			<StatusIndicatorDot />
-			<span className="[&:first-letter]:uppercase">{job.status}</span>
-			{job.status === "failed" && (
+			<span className="[&:first-letter]:uppercase">{status}</span>
+			{status === "failed" && (
 				<TriangleAlertIcon className="size-icon-xs p-[1px]" />
 			)}
-			{job.status === "pending" && `(${job.queue_position}/${job.queue_size})`}
+			{status === "pending" && queue && `(${queue.position}/${queue.size})`}
 		</StatusIndicator>
 	);
 };
diff --git a/site/src/modules/provisioners/ProvisionerTags.stories.tsx b/site/src/modules/provisioners/ProvisionerTags.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	ProvisionerTag,
+	ProvisionerTags,
+	ProvisionerTruncateTags,
+} from "./ProvisionerTags";
+
+const meta: Meta = {
+	title: "modules/provisioners/ProvisionerTags",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Tag: Story = {
+	render: () => {
+		return <ProvisionerTag label="cluster" value="dogfood-v2" />;
+	},
+};
+
+export const Tags: Story = {
+	render: () => {
+		return (
+			<ProvisionerTags>
+				<ProvisionerTag label="cluster" value="dogfood-v2" />
+				<ProvisionerTag label="env" value="gke" />
+				<ProvisionerTag label="scope" value="organization" />
+			</ProvisionerTags>
+		);
+	},
+};
+
+export const TruncateTags: Story = {
+	render: () => {
+		return (
+			<ProvisionerTruncateTags
+				tags={{
+					cluster: "dogfood-v2",
+					env: "gke",
+					scope: "organization",
+				}}
+			/>
+		);
+	},
+};
diff --git a/.../OrganizationProvisionerJobsPage/Tags.tsx → .../modules/provisioners/ProvisionerTags.tsx b/.../OrganizationProvisionerJobsPage/Tags.tsx → .../modules/provisioners/ProvisionerTags.tsx
@@ -2,7 +2,7 @@ import { Badge } from "components/Badge/Badge";
 import type { FC, HTMLProps } from "react";
 import { cn } from "utils/cn";
 
-export const Tags: FC<HTMLProps<HTMLDivElement>> = ({
+export const ProvisionerTags: FC<HTMLProps<HTMLDivElement>> = ({
 	className,
 	...props
 }) => {
@@ -14,12 +14,12 @@ export const Tags: FC<HTMLProps<HTMLDivElement>> = ({
 	);
 };
 
-type TagProps = {
+type ProvisionerTagProps = {
 	label: string;
 	value?: string;
 };
 
-export const Tag: FC<TagProps> = ({ label, value }) => {
+export const ProvisionerTag: FC<ProvisionerTagProps> = ({ label, value }) => {
 	return (
 		<Badge size="sm" className="whitespace-nowrap">
 			[{label}
@@ -28,11 +28,11 @@ export const Tag: FC<TagProps> = ({ label, value }) => {
 	);
 };
 
-type TagsProps = {
+type ProvisionerTagsProps = {
 	tags: Record<string, string>;
 };
 
-export const TruncateTags: FC<TagsProps> = ({ tags }) => {
+export const ProvisionerTruncateTags: FC<ProvisionerTagsProps> = ({ tags }) => {
 	const keys = Object.keys(tags);
 
 	if (keys.length === 0) {
@@ -44,9 +44,9 @@ export const TruncateTags: FC<TagsProps> = ({ tags }) => {
 	const remainderCount = keys.length - 1;
 
 	return (
-		<Tags>
-			<Tag label={firstKey} value={firstValue} />
+		<ProvisionerTags>
+			<ProvisionerTag label={firstKey} value={firstValue} />
 			{remainderCount > 0 && <Badge size="sm">+{remainderCount}</Badge>}
-		</Tags>
+		</ProvisionerTags>
 	);
 };
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx
@@ -1,18 +1,23 @@
 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 { TableCell, TableRow } from "components/Table/Table";
 import {
 	ChevronDownIcon,
 	ChevronRightIcon,
 	TriangleAlertIcon,
 } from "lucide-react";
+import { JobStatusIndicator } from "modules/provisioners/JobStatusIndicator";
+import {
+	ProvisionerTag,
+	ProvisionerTags,
+	ProvisionerTruncateTags,
+} from "modules/provisioners/ProvisionerTags";
 import { type FC, useState } from "react";
 import { cn } from "utils/cn";
 import { relativeTime } from "utils/time";
 import { CancelJobButton } from "./CancelJobButton";
-import { JobStatusIndicator } from "./JobStatusIndicator";
-import { Tag, Tags, TruncateTags } from "./Tags";
 
 type JobRowProps = {
 	job: ProvisionerJob;
@@ -21,32 +26,32 @@ type JobRowProps = {
 export const JobRow: FC<JobRowProps> = ({ job }) => {
 	const metadata = job.metadata;
 	const [isOpen, setIsOpen] = useState(false);
+	const queue = {
+		size: job.queue_size,
+		position: job.queue_position,
+	};
 
 	return (
 		<>
 			<TableRow key={job.id}>
 				<TableCell>
-					<button
+					<Button
+						variant="subtle"
+						size="sm"
 						className={cn([
-							"flex items-center gap-1 p-0 bg-transparent border-0 text-inherit text-xs cursor-pointer",
-							"transition-colors hover:text-content-primary font-medium whitespace-nowrap",
 							isOpen && "text-content-primary",
+							"p-0 h-auto min-w-0 align-middle",
 						])}
-						type="button"
 						onClick={() => {
 							setIsOpen((v) => !v);
 						}}
 					>
-						{isOpen ? (
-							<ChevronDownIcon className="size-icon-sm p-0.5" />
-						) : (
-							<ChevronRightIcon className="size-icon-sm p-0.5" />
-						)}
+						{isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
-						<span className="[&:first-letter]:uppercase">
+						<span className="block first-letter:uppercase">
 							{relativeTime(new Date(job.created_at))}
 						</span>
-					</button>
+					</Button>
 				</TableCell>
 				<TableCell>
 					<Badge size="sm">{job.type}</Badge>
@@ -68,10 +73,10 @@ export const JobRow: FC<JobRowProps> = ({ job }) => {
 					)}
 				</TableCell>
 				<TableCell>
-					<TruncateTags tags={job.tags} />
+					<ProvisionerTruncateTags tags={job.tags} />
 				</TableCell>
 				<TableCell>
-					<JobStatusIndicator job={job} />
+					<JobStatusIndicator status={job.status} queue={queue} />
 				</TableCell>
 				<TableCell className="text-right">
 					<CancelJobButton job={job} />
@@ -125,11 +130,11 @@ export const JobRow: FC<JobRowProps> = ({ job }) => {
 
 							<dt>Tags:</dt>
 							<dd>
-								<Tags>
+								<ProvisionerTags>
 									{Object.entries(job.tags).map(([key, value]) => (
-										<Tag key={key} label={key} value={value} />
+										<ProvisionerTag key={key} label={key} value={value} />
 									))}
-								</Tags>
+								</ProvisionerTags>
 							</dd>
 						</dl>
 					</TableCell>