coder · aslilac · Sep 17, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx
@@ -31,7 +31,7 @@ const Example: Story = {
 		await step("click to open", async () => {
 			await userEvent.click(canvas.getByRole("button"));
 			await waitFor(() =>
-				expect(screen.getByText(/v99\.999\.9999/i)).toBeInTheDocument(),
+				expect(screen.getByText(/v2\.99\.99/i)).toBeInTheDocument(),
 			);
 		});
 	},

diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
@@ -67,6 +67,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 						display: "flex",
 						flexWrap: "wrap",
 						gap: 12,
+						justifyContent: "right",
 					}}
 				>
 					<Tooltip title="Scope">

diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
@@ -0,0 +1,273 @@
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import Business from "@mui/icons-material/Business";
+import Person from "@mui/icons-material/Person";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import Tooltip from "@mui/material/Tooltip";
+import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Pill } from "components/Pill/Pill";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "components/Popover/Popover";
+import { type FC, useState } from "react";
+import { createDayString } from "utils/createDayString";
+import { docs } from "utils/docs";
+import { ProvisionerTag } from "./ProvisionerTag";
+
+type ProvisionerGroupType = "builtin" | "psk" | "key";
+
+interface ProvisionerGroupProps {
+	readonly buildInfo?: BuildInfoResponse;
+	readonly keyName?: string;
+	readonly type: ProvisionerGroupType;
+	readonly provisioners: ProvisionerDaemon[];
+}
+
+export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
+	buildInfo,
+	keyName,
+	type,
+	provisioners,
+}) => {
+	const [provisioner] = provisioners;
+	const theme = useTheme();
+
+	const [showDetails, setShowDetails] = useState(false);
+
+	const daemonScope = provisioner.tags.scope || "organization";
+	const iconScope = daemonScope === "organization" ? <Business /> : <Person />;
+
+	const provisionerVersion = provisioner.version;
+	const allProvisionersAreSameVersion = provisioners.every(
+		(provisioner) => provisioner.version === provisionerVersion,
+	);
+	const upToDate =
+		allProvisionersAreSameVersion && buildInfo?.version === provisioner.version;
+	const provisionerCount =
+		provisioners.length === 1
+			? "1 provisioner"
+			: `${provisioners.length} provisioners`;
+
+	const extraTags = Object.entries(provisioner.tags).filter(
+		([key]) => key !== "scope" && key !== "owner",
+	);
+
+	return (
+		<div
+			css={{
+				borderRadius: 8,
+				border: `1px solid ${theme.palette.divider}`,
+				fontSize: 14,
+			}}
+		>
+			<header
+				css={{
+					padding: 24,
+					display: "flex",
+					alignItems: "center",
+					justifyContenxt: "space-between",
+					gap: 24,
+				}}
+			>
+				<div
+					css={{
+						display: "flex",
+						alignItems: "center",
+						gap: 24,
+						objectFit: "fill",
+					}}
+				>
+					{type === "builtin" && (
+						<div css={{ lineHeight: "160%" }}>
+							<h4 css={{ fontWeight: 500, margin: 0 }}>
+								Built-in provisioners
+							</h4>
+							<span css={{ color: theme.palette.text.secondary }}>
+								{provisionerCount} &mdash; Built-in
+							</span>
+						</div>
+					)}
+					{type === "psk" && (
+						<div css={{ lineHeight: "160%" }}>
+							<h4 css={{ fontWeight: 500, margin: 0 }}>PSK provisioners</h4>
+							<span css={{ color: theme.palette.text.secondary }}>
+								{provisionerCount} &mdash;{" "}
+								{allProvisionersAreSameVersion ? (
+									<code>{provisionerVersion}</code>
+								) : (
+									<span>Multiple versions</span>
+								)}
+							</span>
+						</div>
+					)}
+					{type === "key" && (
+						<div css={{ lineHeight: "160%" }}>
+							<h4 css={{ fontWeight: 500, margin: 0 }}>
+								Key group &ndash; {keyName}
+							</h4>
+							<span css={{ color: theme.palette.text.secondary }}>
+								{provisionerCount} &mdash;{" "}
+								{allProvisionersAreSameVersion ? (
+									<code>{provisionerVersion}</code>
+								) : (
+									<span>Multiple versions</span>
+								)}
+							</span>
+						</div>
+					)}
+				</div>
+				<div
+					css={{
+						marginLeft: "auto",
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 12,
+						justifyContent: "right",
+					}}
+				>
+					<Tooltip title="Scope">
+						<Pill size="lg" icon={iconScope}>
+							<span
+								css={{
+									":first-letter": { textTransform: "uppercase" },
+								}}
+							>
+								{daemonScope}
+							</span>
+						</Pill>
+					</Tooltip>
+					{type === "key" &&
+						extraTags.map(([key, value]) => (
+							<ProvisionerTag key={key} tagName={key} tagValue={value} />
+						))}
+				</div>
+			</header>
+
+			{showDetails && (
+				<div
+					css={{
+						padding: "0 24px 24px",
+						display: "flex",
+						gap: 12,
+						flexWrap: "wrap",
+					}}
+				>
+					{provisioners.map((provisioner) => (
+						<div
+							key={provisioner.id}
+							css={{
+								borderRadius: 8,
+								border: `1px solid ${theme.palette.divider}`,
+								fontSize: 14,
+								padding: "12px 18px",
+								width: 310,
+							}}
+						>
+							<div css={{ lineHeight: 1.6 }}>
+								<h4 css={{ fontWeight: 500, margin: 0 }}>{provisioner.name}</h4>
+								<span
+									css={{ color: theme.palette.text.secondary, fontSize: 13 }}
+								>
+									{type === "builtin" ? (
+										<span>Built-in</span>
+									) : (
+										<>
+											<Popover mode="hover">
+												<PopoverTrigger>
+													<span>
+														{buildInfo
+															? provisioner.version === buildInfo.version
+																? "Up to date"
+																: "Out of date"
+															: provisioner.version}
+													</span>
+												</PopoverTrigger>
+												<PopoverContent
+													transformOrigin={{ vertical: -8, horizontal: 0 }}
+													css={{
+														"& .MuiPaper-root": {
+															padding: "20px 20px 8px",
+															maxWidth: 340,
+														},
+													}}
+												>
+													<h4 css={styles.title}>Release version</h4>
+													<p css={styles.text}>{provisioner.version}</p>
+													<h4 css={styles.title}>Protocol version</h4>
+													<p css={styles.text}>{provisioner.api_version}</p>
+													{provisioner.api_version !==
+														buildInfo?.provisioner_api_version && (
+														<p css={[styles.text, { fontSize: 13 }]}>
+															This provisioner is out of date. You may
+															experience issues when using a provisioner version
+															that doesn’t match your Coder deployment. Please
+															upgrade to a newer version.{" "}
+															<Link href={docs("/")}>Learn more…</Link>
+														</p>
+													)}
+												</PopoverContent>
+											</Popover>{" "}
+											&mdash;{" "}
+											{provisioner.last_seen_at && (
+												<span data-chromatic="ignore">
+													Last seen {createDayString(provisioner.last_seen_at)}
+												</span>
+											)}
+										</>
+									)}
+								</span>
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+
+			<div
+				css={{
+					borderTop: `1px solid ${theme.palette.divider}`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: "8px 8px 8px 24px",
+					fontSize: 12,
+					color: theme.palette.text.secondary,
+				}}
+			>
+				<span>No warnings from {provisionerCount}</span>
+				<Button
+					variant="text"
+					css={{
+						display: "flex",
+						alignItems: "center",
+						gap: 4,
+						color: theme.roles.info.text,
+						fontSize: "inherit",
+					}}
+					onClick={() => setShowDetails((it) => !it)}
+				>
+					{showDetails ? "Hide" : "Show"} provisioner details{" "}
+					<DropdownArrow close={showDetails} />
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+const styles = {
+	title: (theme) => ({
+		marginTop: 0,
+		marginBottom: 0,
+		color: theme.palette.text.primary,
+		fontSize: 14,
+		lineHeight: "150%",
+		fontWeight: 600,
+	}),
+
+	text: (theme) => ({
+		marginTop: 0,
+		marginBottom: 12,
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
@@ -1,24 +1,72 @@
+import { buildInfo } from "api/queries/buildInfo";
 import {
 	organizationsPermissions,
 	provisionerDaemons,
 } from "api/queries/organizations";
-import type { Organization } from "api/typesGenerated";
+import type { Organization, ProvisionerDaemon } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Loader } from "components/Loader/Loader";
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import NotFoundPage from "pages/404Page/404Page";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
-import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView";
+import {
+	OrganizationProvisionersPageView,
+	type ProvisionersByGroup,
+} from "./OrganizationProvisionersPageView";
+
+const ProvisionerKeyIDBuiltIn = "00000000-0000-0000-0000-000000000001";
+const ProvisionerKeyIDUserAuth = "00000000-0000-0000-0000-000000000002";
+const ProvisionerKeyIDPSK = "00000000-0000-0000-0000-000000000003";
+
+function groupProvisioners(
+	provisioners: readonly ProvisionerDaemon[],
+): ProvisionersByGroup {
+	const groups: ProvisionersByGroup = {
+		builtin: [],
+		psk: [],
+		userAuth: [],
+		keys: new Map(),
+	};
+	// NOTE: I'll fix this at the end of the PR chain
+	const keyName = "TODO";
+
+	for (const it of provisioners) {
+		if (it.key_id === ProvisionerKeyIDBuiltIn) {
+			groups.builtin.push(it);
+			continue;
+		}
+		if (it.key_id === ProvisionerKeyIDPSK) {
+			groups.psk.push(it);
+			continue;
+		}
+		if (it.key_id === ProvisionerKeyIDUserAuth) {
+			groups.userAuth.push(it);
+			continue;
+		}
+
+		const keyGroup = groups.keys.get(keyName) ?? [];
+		if (!groups.keys.has(keyName)) {
+			groups.keys.set(keyName, keyGroup);
+		}
+		keyGroup.push(it);
+	}
+
+	return groups;
+}
 
 const OrganizationProvisionersPage: FC = () => {
 	const { organization: organizationName } = useParams() as {
 		organization: string;
 	};
 	const { organizations } = useOrganizationSettings();
 
+	const { metadata } = useEmbeddedMetadata();
+	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
+
 	const organization = organizations
 		? getOrganizationByName(organizations, organizationName)
 		: undefined;
@@ -54,7 +102,12 @@ const OrganizationProvisionersPage: FC = () => {
 		return <NotFoundPage />;
 	}
 
-	return <OrganizationProvisionersPageView provisioners={provisioners} />;
+	return (
+		<OrganizationProvisionersPageView
+			buildInfo={buildInfoQuery.data}
+			provisioners={groupProvisioners(provisioners)}
+		/>
+	);
 };
 
 export default OrganizationProvisionersPage;