chore: add help tooltips explaining provisioner types (#14625)

aslilac · web-flow · commit de3945c29100 · 2024-09-17T15:20:35.000-06:00
* work

* do the stuff

* 🧹

* feat: show more detailed provisioner version info

* 🧹

* descriptive lil help guys :)

* 🧹

* hook up to api

* :)

* v2.99.99
diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
@@ -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";
@@ -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} &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 ? (
@@ -105,9 +111,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 					)}
 					{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 ? (
@@ -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 }}
 								>
@@ -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&apos;t match your Coder deployment.
+															Please upgrade to a newer version.{" "}
+															<Link href={docs("/")}>Learn more&hellip;</Link>
 														</p>
 													)}
 												</PopoverContent>
@@ -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&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,
@@ -266,8 +319,8 @@ const styles = {
 		fontWeight: 600,
 	}),
 
-	text: (theme) => ({
+	text: {
 		marginTop: 0,
 		marginBottom: 12,
-	}),
+	},
 } satisfies Record<string, Interpolation<Theme>>;
