opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* work

* do the stuff

* 🧹

* feat: show more detailed provisioner version info

* 🧹

* descriptive lil help guys :)

* 🧹

* hook up to api

* :)

* v2.99.99
This commit is contained in:
Kayla Washburn-Love
2024-09-17 15:20:35 -06:00
committed by GitHub
parent bbc7b5085d
commit de3945c291
1 changed files with 71 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/modules/provisioners/ProvisionerGroup.tsx
+71 -18
View File
@@ -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,9 +90,7 @@ 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>
@@ -92,7 +98,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
)}
{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>>;