Sep 17, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 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
 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/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
 HelpTooltip,
 PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
 import type { ProvisionerDaemonWithWarnings } from "pages/ManagementSettingsPage/OrganizationProvisionersPageView";
 import { type FC, useState } from "react";
 import { createDayString } from "utils/createDayString";
 import { docs } from "utils/docs";
 readonly buildInfo?: BuildInfoResponse;
 readonly keyName?: string;
 readonly type: ProvisionerGroupType;
 readonly provisioners:ProvisionerDaemonWithWarnings[];
 readonly provisioners:ProvisionerDaemon[];
 }

 export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 );
 const upToDate =
 allProvisionersAreSameVersion && buildInfo?.version === provisioner.version;
 const protocolUpToDate =
 allProvisionersAreSameVersion &&
 buildInfo?.provisioner_api_version === provisioner.api_version;
 const provisionerCount =
 provisioners.length === 1
 ? "1 provisioner"
 : `${provisioners.length} provisioners`;

 // Count how many total warnings there are in this group, and how many
 // provisioners they come from.
 let warningCount = 0;
 let warningProvisionerCount = 0;
 for (const provisioner of provisioners) {
 const provisionerWarningCount = provisioner.warnings?.length ?? 0;
 warningCount += provisionerWarningCount;
 warningProvisionerCount += provisionerWarningCount > 0 ? 1 : 0;
 }

 const extraTags = Object.entries(provisioner.tags).filter(
 ([key]) => key !== "scope" && key !== "owner",
 );
 const isWarning = warningCount > 0;

 return (
 <div
 css={[
 {
 borderRadius: 8,
 border: `1px solid ${theme.palette.divider}`,
 fontSize: 14,
 },
 isWarning && { borderColor: theme.roles.warning.fill.outline },
 ]}
 css={{
 borderRadius: 8,
 border: `1px solid ${theme.palette.divider}`,
 fontSize: 14,
 }}
 >
 <header
 css={{
 {provisioners.map((provisioner) => (
 <div
 key={provisioner.id}
 css={[
 {
 borderRadius: 8,
 border: `1px solid ${theme.palette.divider}`,
 fontSize: 14,
 padding: "12px 18px",
 width: 310,
 },
 provisioner.warnings &&
 provisioner.warnings.length > 0 && {
 borderColor: theme.roles.warning.fill.outline,
 },
 ]}
 css={{
 borderRadius: 8,
 border: `1px solid ${theme.palette.divider}`,
 fontSize: 14,
 padding: "12px 18px",
 width: 310,
 }}
 >
 <div css={{ lineHeight: 1.6 }}>
 <h4 css={styles.groupTitle}>{provisioner.name}</h4>
 color: theme.palette.text.secondary,
 }}
 >
 {warningCount > 0 ? (
 <span>
 {warningCount === 1 ? "1 warning" : `${warningCount} warnings`} from{" "}
 {warningProvisionerCount === 1
 ? "1 provisioner"
 : `${warningProvisionerCount} provisioners`}
 </span>
 ) : (
 <span>No warnings from {provisionerCount}</span>
 )}
 <span>No warnings from {provisionerCount}</span>
 <Button
 variant="text"
 css={{
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
 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: [], keys: new Map() };
 const type = "builtin";
 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 (type ==="builtin") {
 if (it.key_id ===ProvisionerKeyIDBuiltIn) {
 groups.builtin.push(it);
 continue;
 }
 if (type ==="psk") {
 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)) {
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx
 provisioners: {
 builtin: [MockProvisioner, MockProvisioner2],
 psk: [MockProvisioner, MockUserProvisioner, MockProvisionerWithTags],
 userAuth: [],
 keys: new Map([
 [
 "ベン",
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import Button from "@mui/material/Button";
 import type {
 BuildInfoResponse,
 HealthMessage,
 ProvisionerDaemon,
 } from "api/typesGenerated";
 import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { ProvisionerGroup } from "modules/provisioners/ProvisionerGroup";
 import type { FC } from "react";
 import { docs } from "utils/docs";

 export interface ProvisionerDaemonWithWarnings extends ProvisionerDaemon {
 readonly warnings?: readonly HealthMessage[];
 }

 export interface ProvisionersByGroup {
 builtin: ProvisionerDaemonWithWarnings[];
 psk: ProvisionerDaemonWithWarnings[];
 keys: Map<string, ProvisionerDaemonWithWarnings[]>;
 builtin: ProvisionerDaemon[];
 psk: ProvisionerDaemon[];
 userAuth: ProvisionerDaemon[];
 keys: Map<string, ProvisionerDaemon[]>;
 }

 interface OrganizationProvisionersPageViewProps {
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
 export const MockProvisioner: TypesGen.ProvisionerDaemon = {
 created_at: "2022-05-17T17:39:01.382927298Z",
 id: "test-provisioner",
 key_id: "00000000-0000-0000-0000-000000000001",
 organization_id: MockOrganization.id,
 name: "Test Provisioner",
 provisioners: ["echo"],
 last_seen_at: new Date().toISOString(),
 };

 export const MockUserAuthProvisioner: TypesGen.ProvisionerDaemon = {
 ...MockProvisioner,
 id: "test-user-auth-provisioner",
 key_id: "00000000-0000-0000-0000-000000000002",
 name: `${MockUser.name}'s provisioner`,
 tags: { scope: "user" },
 };

 export const MockPskProvisioner: TypesGen.ProvisionerDaemon = {
 ...MockProvisioner,
 id: "test-psk-provisioner",
 key_id: "00000000-0000-0000-0000-000000000003",
 name: "Test psk provisioner",
 };

 export const MockKeyProvisioner: TypesGen.ProvisionerDaemon = {
 ...MockProvisioner,
 id: "test-key-provisioner",
 key_id: MockProvisionerKey.id,
 organization_id: MockProvisionerKey.organization,
 name: "Test key provisioner",
 tags: MockProvisionerKey.tags,
 };

 export const MockProvisioner2: TypesGen.ProvisionerDaemon = {
 ...MockProvisioner,
 id: "test-provisioner-2",
 name: "Test Provisioner 2",
 key_id: MockProvisionerKey.id,
 };

 export const MockUserProvisioner: TypesGen.ProvisionerDaemon = {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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(),
		);
		});
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@ 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 } from "api/typesGenerated";
		import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
		import {
		HelpTooltip,
Expand All		@@ -20,7 +20,6 @@ import {
		PopoverTrigger,
		} from "components/Popover/Popover";
		import { Stack } from "components/Stack/Stack";
		import type { ProvisionerDaemonWithWarnings } from "pages/ManagementSettingsPage/OrganizationProvisionersPageView";
		import { type FC, useState } from "react";
		import { createDayString } from "utils/createDayString";
		import { docs } from "utils/docs";
Expand All		@@ -32,7 +31,7 @@ interface ProvisionerGroupProps {
		readonly buildInfo?: BuildInfoResponse;
		readonly keyName?: string;
		readonly type: ProvisionerGroupType;
		readonly provisioners:ProvisionerDaemonWithWarnings[];
		readonly provisioners:ProvisionerDaemon[];
		}

		export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
Expand All		@@ -55,39 +54,22 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		);
		const upToDate =
		allProvisionersAreSameVersion && buildInfo?.version === provisioner.version;
		const protocolUpToDate =
		allProvisionersAreSameVersion &&
		buildInfo?.provisioner_api_version === provisioner.api_version;
		const provisionerCount =
		provisioners.length === 1
		? "1 provisioner"
		: `${provisioners.length} provisioners`;

		// Count how many total warnings there are in this group, and how many
		// provisioners they come from.
		let warningCount = 0;
		let warningProvisionerCount = 0;
		for (const provisioner of provisioners) {
		const provisionerWarningCount = provisioner.warnings?.length ?? 0;
		warningCount += provisionerWarningCount;
		warningProvisionerCount += provisionerWarningCount > 0 ? 1 : 0;
		}

		const extraTags = Object.entries(provisioner.tags).filter(
		([key]) => key !== "scope" && key !== "owner",
		);
		const isWarning = warningCount > 0;

		return (
		<div
		css={[
		{
		borderRadius: 8,
		border: `1px solid ${theme.palette.divider}`,
		fontSize: 14,
		},
		isWarning && { borderColor: theme.roles.warning.fill.outline },
		]}
		css={{
		borderRadius: 8,
		border: `1px solid ${theme.palette.divider}`,
		fontSize: 14,
		}}
		>
		<header
		css={{
Expand DownExpand Up		@@ -180,19 +162,13 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		{provisioners.map((provisioner) => (
		<div
		key={provisioner.id}
		css={[
		{
		borderRadius: 8,
		border: `1px solid ${theme.palette.divider}`,
		fontSize: 14,
		padding: "12px 18px",
		width: 310,
		},
		provisioner.warnings &&
		provisioner.warnings.length > 0 && {
		borderColor: theme.roles.warning.fill.outline,
		},
		]}
		css={{
		borderRadius: 8,
		border: `1px solid ${theme.palette.divider}`,
		fontSize: 14,
		padding: "12px 18px",
		width: 310,
		}}
		>
		<div css={{ lineHeight: 1.6 }}>
		<h4 css={styles.groupTitle}>{provisioner.name}</h4>
Expand DownExpand Up		@@ -267,16 +243,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
		color: theme.palette.text.secondary,
		}}
		>
		{warningCount > 0 ? (
		<span>
		{warningCount === 1 ? "1 warning" : `${warningCount} warnings`} from{" "}
		{warningProvisionerCount === 1
		? "1 provisioner"
		: `${warningProvisionerCount} provisioners`}
		</span>
		) : (
		<span>No warnings from {provisionerCount}</span>
		)}
		<span>No warnings from {provisionerCount}</span>
		<Button
		variant="text"
		css={{
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,22 +18,35 @@ import {
		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: [], keys: new Map() };
		const type = "builtin";
		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 (type ==="builtin") {
		if (it.key_id ===ProvisionerKeyIDBuiltIn) {
		groups.builtin.push(it);
		continue;
		}
		if (type ==="psk") {
		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)) {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,6 +24,7 @@ export const Provisioners: Story = {
		provisioners: {
		builtin: [MockProvisioner, MockProvisioner2],
		psk: [MockProvisioner, MockUserProvisioner, MockProvisionerWithTags],
		userAuth: [],
		keys: new Map([
		[
		"ベン",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,24 +1,17 @@
		import OpenInNewIcon from "@mui/icons-material/OpenInNew";
		import Button from "@mui/material/Button";
		import type {
		BuildInfoResponse,
		HealthMessage,
		ProvisionerDaemon,
		} from "api/typesGenerated";
		import type { BuildInfoResponse, ProvisionerDaemon } from "api/typesGenerated";
		import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
		import { Stack } from "components/Stack/Stack";
		import { ProvisionerGroup } from "modules/provisioners/ProvisionerGroup";
		import type { FC } from "react";
		import { docs } from "utils/docs";

		export interface ProvisionerDaemonWithWarnings extends ProvisionerDaemon {
		readonly warnings?: readonly HealthMessage[];
		}

		export interface ProvisionersByGroup {
		builtin: ProvisionerDaemonWithWarnings[];
		psk: ProvisionerDaemonWithWarnings[];
		keys: Map<string, ProvisionerDaemonWithWarnings[]>;
		builtin: ProvisionerDaemon[];
		psk: ProvisionerDaemon[];
		userAuth: ProvisionerDaemon[];
		keys: Map<string, ProvisionerDaemon[]>;
		}

		interface OrganizationProvisionersPageViewProps {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -578,6 +578,7 @@ export const MockProvisionerKey: TypesGen.ProvisionerKey = {
		export const MockProvisioner: TypesGen.ProvisionerDaemon = {
		created_at: "2022-05-17T17:39:01.382927298Z",
		id: "test-provisioner",
		key_id: "00000000-0000-0000-0000-000000000001",
		organization_id: MockOrganization.id,
		name: "Test Provisioner",
		provisioners: ["echo"],
Expand All		@@ -587,10 +588,35 @@ export const MockProvisioner: TypesGen.ProvisionerDaemon = {
		last_seen_at: new Date().toISOString(),
		};

		export const MockUserAuthProvisioner: TypesGen.ProvisionerDaemon = {
		...MockProvisioner,
		id: "test-user-auth-provisioner",
		key_id: "00000000-0000-0000-0000-000000000002",
		name: `${MockUser.name}'s provisioner`,
		tags: { scope: "user" },
		};

		export const MockPskProvisioner: TypesGen.ProvisionerDaemon = {
		...MockProvisioner,
		id: "test-psk-provisioner",
		key_id: "00000000-0000-0000-0000-000000000003",
		name: "Test psk provisioner",
		};

		export const MockKeyProvisioner: TypesGen.ProvisionerDaemon = {
		...MockProvisioner,
		id: "test-key-provisioner",
		key_id: MockProvisionerKey.id,
		organization_id: MockProvisionerKey.organization,
		name: "Test key provisioner",
		tags: MockProvisionerKey.tags,
		};

		export const MockProvisioner2: TypesGen.ProvisionerDaemon = {
		...MockProvisioner,
		id: "test-provisioner-2",
		name: "Test Provisioner 2",
		key_id: MockProvisionerKey.id,
		};

		export const MockUserProvisioner: TypesGen.ProvisionerDaemon = {
Expand Down