From 1ba2ae1816b4c2cc8d5b6384fd49cd6679ea4994 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 18:33:40 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=E3=81=8D=E3=82=8C=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/provisioners/ProvisionerGroup.tsx | 42 ++++++++++----- ...ganizationProvisionersPageView.stories.tsx | 30 +++++++---- .../OrganizationProvisionersPageView.tsx | 51 +++++++++++++------ 3 files changed, 83 insertions(+), 40 deletions(-) diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx index 69546609027dd..478509643d1dc 100644 --- a/site/src/modules/provisioners/ProvisionerGroup.tsx +++ b/site/src/modules/provisioners/ProvisionerGroup.tsx @@ -1,6 +1,7 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import Business from "@mui/icons-material/Business"; import Person from "@mui/icons-material/Person"; +import Sell from "@mui/icons-material/Sell"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import Tooltip from "@mui/material/Tooltip"; @@ -21,6 +22,7 @@ import { } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; import { StatusIndicator } from "components/StatusIndicator/StatusIndicator"; +import isEqual from "lodash/isEqual"; import { type FC, useState } from "react"; import { createDayString } from "utils/createDayString"; import { docs } from "utils/docs"; @@ -30,7 +32,8 @@ type ProvisionerGroupType = "builtin" | "psk" | "key"; interface ProvisionerGroupProps { readonly buildInfo?: BuildInfoResponse; - readonly keyName?: string; + readonly keyName: string; + readonly keyTags: Record; readonly type: ProvisionerGroupType; readonly provisioners: readonly ProvisionerDaemon[]; } @@ -38,6 +41,7 @@ interface ProvisionerGroupProps { export const ProvisionerGroup: FC = ({ buildInfo, keyName, + keyTags, type, provisioners, }) => { @@ -61,7 +65,7 @@ export const ProvisionerGroup: FC = ({ provisioners.length === 1 ? "1 provisioner" : `${provisioners.length} provisioners`; - const extraTags = Object.entries(firstProvisioner.tags).filter( + const extraTags = Object.entries(keyTags).filter( ([key]) => key !== "scope" && key !== "owner", ); @@ -90,6 +94,10 @@ export const ProvisionerGroup: FC = ({ ? "1 provisioner" : `${provisionersWithWarnings} provisioners`; + const hasMultipleTagVariants = + type === "psk" && + provisioners.some((it) => !isEqual(it.tags, { scope: "organization" })); + return (
= ({ justifyContent: "right", }} > - - : } - > - {daemonScope} + {!hasMultipleTagVariants ? ( + + : + } + > + {daemonScope} + + + ) : ( + }> + Multiple tags - + )} {type === "key" && extraTags.map(([key, value]) => ( @@ -172,9 +188,9 @@ export const ProvisionerGroup: FC = ({
{provisionersWithWarningInfo.map((provisioner) => ( @@ -186,7 +202,6 @@ export const ProvisionerGroup: FC = ({ border: `1px solid ${theme.palette.divider}`, fontSize: 14, padding: "14px 18px", - width: 375, }, provisioner.warningCount > 0 && styles.warningBorder, ]} @@ -222,7 +237,7 @@ export const ProvisionerGroup: FC = ({ )}
- {type === "psk" && ( + {hasMultipleTagVariants && ( )} @@ -343,6 +358,7 @@ const PskProvisionerTags: FC = ({ tags }) => { css={{ "& .MuiPaper-root": { padding: 20, + minWidth: "unset", maxWidth: 340, width: "fit-content", }, diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx index 19544a941b5b8..5cc0d5b8f4e82 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx @@ -37,6 +37,10 @@ export const Provisioners: Story = { MockProvisionerWithTags, ], }, + { + key: MockProvisionerPskKey, + daemons: [MockProvisioner, MockProvisioner2], + }, { key: { ...MockProvisionerKey, id: "ジャイデン", name: "ジャイデン" }, daemons: [MockProvisioner, MockProvisioner2], @@ -53,18 +57,22 @@ export const Provisioners: Story = { ], }, { - key: { ...MockProvisionerKey, id: "ケイラ", name: "ケイラ" }, - daemons: [ - { - ...MockProvisioner, - tags: { - ...MockProvisioner.tags, - 都市: "ユタ", - きっぷ: "yes", - ちいさい: "no", - }, + key: { + ...MockProvisionerKey, + id: "ケイラ", + name: "ケイラ", + tags: { + ...MockProvisioner.tags, + 都市: "ユタ", + きっぷ: "yes", + ちいさい: "no", }, - ], + }, + daemons: Array.from({ length: 117 }, (_, i) => ({ + ...MockProvisioner, + id: `ケイラ-${i}`, + name: `ケイラ-${i}`, + })), }, ], }, diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx index 5f0b5f4047806..e8203bb5f0050 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.tsx @@ -25,11 +25,17 @@ export const OrganizationProvisionersPageView: FC< > = ({ buildInfo, provisioners }) => { const isEmpty = provisioners.every((group) => group.daemons.length === 0); + const provisionerGroupsCount = provisioners.length; + const provisionersCount = provisioners.reduce( + (a, group) => a + group.daemons.length, + 0, + ); + return (
} @@ -42,22 +48,34 @@ export const OrganizationProvisionersPageView: FC< > Provisioners + {isEmpty ? ( + } + target="_blank" + href={docs("/admin/provisioners")} + > + Show me how to create a provisioner + + } + /> + ) : ( +
({ + margin: 0, + fontSize: 12, + paddingBottom: 18, + color: theme.palette.text.secondary, + })} + > + Showing {provisionerGroupsCount} groups and {provisionersCount}{" "} + provisioners +
+ )} - {isEmpty && ( - } - target="_blank" - href={docs("/admin/provisioners")} - > - Show me how to create a provisioner - - } - /> - )} {provisioners.map((group) => { const type = getGroupType(group.key); @@ -74,6 +92,7 @@ export const OrganizationProvisionersPageView: FC< key={group.key.id} buildInfo={buildInfo} keyName={group.key.name} + keyTags={group.key.tags} type={type} provisioners={group.daemons} /> From d8b88843035423b9b068778dc1f8dad9e1d6845f Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 18:39:49 +0000 Subject: [PATCH 2/6] =?UTF-8?q?=E3=81=A8=E3=81=A6=E3=82=82=E5=A4=A7?= =?UTF-8?q?=E3=81=8D=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/modules/provisioners/ProvisionerGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx index 478509643d1dc..714b414c28edc 100644 --- a/site/src/modules/provisioners/ProvisionerGroup.tsx +++ b/site/src/modules/provisioners/ProvisionerGroup.tsx @@ -190,7 +190,7 @@ export const ProvisionerGroup: FC = ({ padding: "0 24px 24px", display: "grid", gap: 12, - gridTemplateColumns: "repeat(auto-fill, minmax(375px, 1fr))", + gridTemplateColumns: "repeat(auto-fill, minmax(385px, 1fr))", }} > {provisionersWithWarningInfo.map((provisioner) => ( From 70d0b7dc6348f71cf8170ddae75c38a55f8bf597 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 20:14:49 +0000 Subject: [PATCH 3/6] improve storybook test --- ...ganizationProvisionersPageView.stories.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx index 5cc0d5b8f4e82..8e6d263eb79b0 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { screen, userEvent } from "@storybook/test"; import { MockBuildInfo, MockProvisioner, @@ -76,6 +77,31 @@ export const Provisioners: Story = { }, ], }, + play: async ({ step }) => { + await step("open all details", async () => { + const expandButtons = await screen.findAllByText( + "Show provisioner details", + ); + for (const it of expandButtons) { + await userEvent.click(it); + } + }); + + await step("close uninteresting/large details", async () => { + const collapseButtons = await screen.findAllByText( + "Hide provisioner details", + ); + + await userEvent.click(collapseButtons[2]); + await userEvent.click(collapseButtons[3]); + await userEvent.click(collapseButtons[5]); + }); + + await step("show version popover", async () => { + const outOfDate = await screen.findByText("Out of date"); + await userEvent.hover(outOfDate); + }); + }, }; export const Empty: Story = { From cee2cbc6f075a27334aa036b98608c00af98408b Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 20:28:49 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OrganizationProvisionersPageView.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx index 8e6d263eb79b0..b80ed384ffca6 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx @@ -79,18 +79,18 @@ export const Provisioners: Story = { }, play: async ({ step }) => { await step("open all details", async () => { - const expandButtons = await screen.findAllByText( - "Show provisioner details", - ); + const expandButtons = await screen.findAllByRole("button", { + name: "Show provisioner details", + }); for (const it of expandButtons) { await userEvent.click(it); } }); await step("close uninteresting/large details", async () => { - const collapseButtons = await screen.findAllByText( - "Hide provisioner details", - ); + const collapseButtons = await screen.findAllByRole("button", { + name: "Hide provisioner details", + }); await userEvent.click(collapseButtons[2]); await userEvent.click(collapseButtons[3]); From 669afbe2f979bdb62e3735f3bfd742c7c8a3a632 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 20:38:07 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?= =?UTF-8?q?=E3=81=AE=E5=90=8D=E5=89=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/provisioners/ProvisionerGroup.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx index 714b414c28edc..b6077da9614bc 100644 --- a/site/src/modules/provisioners/ProvisionerGroup.tsx +++ b/site/src/modules/provisioners/ProvisionerGroup.tsx @@ -1,7 +1,7 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import Business from "@mui/icons-material/Business"; -import Person from "@mui/icons-material/Person"; -import Sell from "@mui/icons-material/Sell"; +import BusinessIcon from "@mui/icons-material/Business"; +import PersonIcon from "@mui/icons-material/Person"; +import TagIcon from "@mui/icons-material/Sell"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; import Tooltip from "@mui/material/Tooltip"; @@ -166,14 +166,18 @@ export const ProvisionerGroup: FC = ({ : + daemonScope === "organization" ? ( + + ) : ( + + ) } > {daemonScope} ) : ( - }> + }> Multiple tags )} @@ -332,7 +336,8 @@ interface PskProvisionerTagsProps { const PskProvisionerTags: FC = ({ tags }) => { const daemonScope = tags.scope || "organization"; - const iconScope = daemonScope === "organization" ? : ; + const iconScope = + daemonScope === "organization" ? : ; const extraTags = Object.entries(tags).filter( ([tag]) => tag !== "scope" && tag !== "owner", From d3469a9f1f0e27215194fe3c5f6387368853bf62 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 20 Sep 2024 20:41:26 +0000 Subject: [PATCH 6/6] =?UTF-8?q?=E3=82=B8=E3=82=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OrganizationProvisionersPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx index b80ed384ffca6..439fba6c2f432 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx @@ -43,7 +43,7 @@ export const Provisioners: Story = { daemons: [MockProvisioner, MockProvisioner2], }, { - key: { ...MockProvisionerKey, id: "ジャイデン", name: "ジャイデン" }, + key: { ...MockProvisionerKey, id: "ジェイデン", name: "ジェイデン" }, daemons: [MockProvisioner, MockProvisioner2], }, {