Sep 17, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
 import Tooltip from "@mui/material/Tooltip";
 import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
 HelpTooltip,
 HelpTooltipContent,
 HelpTooltipText,
 HelpTooltipTitle,
 HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { Pill } from "components/Pill/Pill";
 import {
 Popover,
 PopoverContent,
 PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
 import { type FC, useState } from "react";
 import { createDayString } from "utils/createDayString";
 import { docs } from "utils/docs";
 >
 {type === "builtin" && (
 <div css={{ lineHeight: "160%" }}>
 <h4 css={{ fontWeight: 500, margin: 0 }}>
 Built-in provisioners
 </h4>
 <BuiltinProvisionerTitle />
 <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>
 <PskProvisionerTitle />
 <span css={{ color: theme.palette.text.secondary }}>
 {provisionerCount} &mdash;{" "}
 {allProvisionersAreSameVersion ? (
 )}
 {type === "key" && (
 <div css={{ lineHeight: "160%" }}>
 <h4 css={{ fontWeight: 500, margin: 0 }}>
 Key group &ndash; {keyName}
 </h4>
 <h4 css={styles.groupTitle}>Key group &ndash; {keyName}</h4>
 <span css={{ color: theme.palette.text.secondary }}>
 {provisionerCount} &mdash;{" "}
 {allProvisionersAreSameVersion ? (
 }}
 >
 <div css={{ lineHeight: 1.6 }}>
 <h4 css={{ fontWeight: 500, margin: 0 }}>{provisioner.name}</h4>
 <h4 css={styles.groupTitle}>{provisioner.name}</h4>
 <span
 css={{ color: theme.palette.text.secondary, fontSize: 13 }}
 >
 },
 }}
 >
 <h4 css={styles.title}>Release version</h4>
 <h4 css={styles.versionPopoverTitle}>
 Release version
 </h4>
 <p css={styles.text}>{provisioner.version}</p>
 <h4 css={styles.title}>Protocol version</h4>
 <h4 css={styles.versionPopoverTitle}>
 Protocol version
 </h4>
 <p css={styles.text}>{provisioner.api_version}</p>
 {provisioner.api_version !==
 buildInfo?.provisioner_api_version && (
 {provisioner.version !== buildInfo?.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>
 that doesn&apos;t match your Coder deployment.
 Pleaseupgrade to a newer version.{" "}
 <Link href={docs("/")}>Learn more&hellip;</Link>
 </p>
 )}
 </PopoverContent>
 );
 };

 const BuiltinProvisionerTitle: FC = () => {
 return (
 <h4 css={styles.groupTitle}>
 <Stack direction="row" alignItems="end" spacing={1}>
 <span>Built-in provisioners</span>
 <HelpTooltip>
 <HelpTooltipTrigger />
 <HelpTooltipContent>
 <HelpTooltipTitle>Built-in provisioners</HelpTooltipTitle>
 <HelpTooltipText>
 These provisioners are running as part of a coderd instance.
 Built-in provisioners are only available for the default
 organization. <Link href={docs("/")}>Learn more&hellip;</Link>
 </HelpTooltipText>
 </HelpTooltipContent>
 </HelpTooltip>
 </Stack>
 </h4>
 );
 };
 const PskProvisionerTitle: FC = () => {
 return (
 <h4 css={styles.groupTitle}>
 <Stack direction="row" alignItems="end" spacing={1}>
 <span>PSK provisioners</span>
 <HelpTooltip>
 <HelpTooltipTrigger />
 <HelpTooltipContent>
 <HelpTooltipTitle>PSK provisioners</HelpTooltipTitle>
 <HelpTooltipText>
 These provisioners all use pre-shared key authentication. PSK
 provisioners are only available for the default organization.{" "}
 <Link href={docs("/")}>Learn more&hellip;</Link>
 </HelpTooltipText>
 </HelpTooltipContent>
 </HelpTooltip>
 </Stack>
 </h4>
 );
 };

 const styles = {
 title: (theme) => ({
 groupTitle: {
 fontWeight: 500,
 margin: 0,
 },

 versionPopoverTitle: (theme) => ({
 marginTop: 0,
 marginBottom: 0,
 color: theme.palette.text.primary,
 fontWeight: 600,
 }),

 text:(theme) => ({
 text: {
 marginTop: 0,
 marginBottom: 12,
 }),
 },
 } satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,12 +6,20 @@ 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 {
		HelpTooltip,
		HelpTooltipContent,
		HelpTooltipText,
		HelpTooltipTitle,
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import { Pill } from "components/Pill/Pill";
		import {
		Popover,
		PopoverContent,
		PopoverTrigger,
		} from "components/Popover/Popover";
		import { Stack } from "components/Stack/Stack";
		import { type FC, useState } from "react";
		import { createDayString } from "utils/createDayString";
		import { docs } from "utils/docs";
Expand DownExpand Up		@@ -82,17 +90,15 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		>
		{type === "builtin" && (
		<div css={{ lineHeight: "160%" }}>
		<h4 css={{ fontWeight: 500, margin: 0 }}>
		Built-in provisioners
		</h4>
		<BuiltinProvisionerTitle />
		<span css={{ color: theme.palette.text.secondary }}>
		{provisionerCount} — Built-in
		</span>
		</div>
		)}
		{type === "psk" && (
		<div css={{ lineHeight: "160%" }}>
		<h4 css={{ fontWeight: 500, margin: 0 }}>PSK provisioners</h4>
		<PskProvisionerTitle />
		<span css={{ color: theme.palette.text.secondary }}>
		{provisionerCount} —{" "}
		{allProvisionersAreSameVersion ? (
Expand All		@@ -105,9 +111,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		)}
		{type === "key" && (
		<div css={{ lineHeight: "160%" }}>
		<h4 css={{ fontWeight: 500, margin: 0 }}>
		Key group – {keyName}
		</h4>
		<h4 css={styles.groupTitle}>Key group – {keyName}</h4>
		<span css={{ color: theme.palette.text.secondary }}>
		{provisionerCount} —{" "}
		{allProvisionersAreSameVersion ? (
Expand DownExpand Up		@@ -167,7 +171,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		}}
		>
		<div css={{ lineHeight: 1.6 }}>
		<h4 css={{ fontWeight: 500, margin: 0 }}>{provisioner.name}</h4>
		<h4 css={styles.groupTitle}>{provisioner.name}</h4>
		<span
		css={{ color: theme.palette.text.secondary, fontSize: 13 }}
		>
Expand All		@@ -194,18 +198,21 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		},
		}}
		>
		<h4 css={styles.title}>Release version</h4>
		<h4 css={styles.versionPopoverTitle}>
		Release version
		</h4>
		<p css={styles.text}>{provisioner.version}</p>
		<h4 css={styles.title}>Protocol version</h4>
		<h4 css={styles.versionPopoverTitle}>
		Protocol version
		</h4>
		<p css={styles.text}>{provisioner.api_version}</p>
		{provisioner.api_version !==
		buildInfo?.provisioner_api_version && (
		{provisioner.version !== buildInfo?.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>
		that doesn't match your Coder deployment.
		Pleaseupgrade to a newer version.{" "}
		<Link href={docs("/")}>Learn more…</Link>
		</p>
		)}
		</PopoverContent>
Expand DownExpand Up		@@ -256,8 +263,54 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		);
		};

		const BuiltinProvisionerTitle: FC = () => {
		return (
		<h4 css={styles.groupTitle}>
		<Stack direction="row" alignItems="end" spacing={1}>
		<span>Built-in provisioners</span>
		<HelpTooltip>
		<HelpTooltipTrigger />
		<HelpTooltipContent>
		<HelpTooltipTitle>Built-in provisioners</HelpTooltipTitle>
		<HelpTooltipText>
		These provisioners are running as part of a coderd instance.
		Built-in provisioners are only available for the default
		organization. <Link href={docs("/")}>Learn more…</Link>
		</HelpTooltipText>
		</HelpTooltipContent>
		</HelpTooltip>
		</Stack>
		</h4>
		);
		};
		const PskProvisionerTitle: FC = () => {
		return (
		<h4 css={styles.groupTitle}>
		<Stack direction="row" alignItems="end" spacing={1}>
		<span>PSK provisioners</span>
		<HelpTooltip>
		<HelpTooltipTrigger />
		<HelpTooltipContent>
		<HelpTooltipTitle>PSK provisioners</HelpTooltipTitle>
		<HelpTooltipText>
		These provisioners all use pre-shared key authentication. PSK
		provisioners are only available for the default organization.{" "}
		<Link href={docs("/")}>Learn more…</Link>
		</HelpTooltipText>
		</HelpTooltipContent>
		</HelpTooltip>
		</Stack>
		</h4>
		);
		};

		const styles = {
		title: (theme) => ({
		groupTitle: {
		fontWeight: 500,
		margin: 0,
		},

		versionPopoverTitle: (theme) => ({
		marginTop: 0,
		marginBottom: 0,
		color: theme.palette.text.primary,
Expand All		@@ -266,8 +319,8 @@ const styles = {
		fontWeight: 600,
		}),

		text:(theme) => ({
		text: {
		marginTop: 0,
		marginBottom: 12,
		}),
		},
		} satisfies Record<string, Interpolation<Theme>>;