clean up tags

aslilac · aslilac · commit f7489325e993 · 2024-10-01T16:49:38.000Z
diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
@@ -102,6 +102,10 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 			? "1 provisioner"
 			: `${provisionersWithWarnings} provisioners`;
 
+	const hasMultipleTagVariants =
+		(type === "psk" || type === "userAuth") &&
+		provisioners.some((it) => !isSimpleTagSet(it.tags));
+
 	return (
 		<div
 			css={[
@@ -166,7 +170,32 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 						gap: 12,
 						justifyContent: "right",
 					}}
-				></div>
+				>
+					{!hasMultipleTagVariants ? (
+						<Tooltip title="Scope">
+							<Pill
+								size="lg"
+								icon={
+									daemonScope === "organization" ? (
+										<BusinessIcon />
+									) : (
+										<PersonIcon />
+									)
+								}
+							>
+								<span css={{ textTransform: "capitalize" }}>{daemonScope}</span>
+							</Pill>
+						</Tooltip>
+					) : (
+						<Pill size="lg" icon={<TagIcon />}>
+							Multiple tags
+						</Pill>
+					)}
+					{type === "key" &&
+						extraTags.map(([key, value]) => (
+							<ProvisionerTag key={key} tagName={key} tagValue={value} />
+						))}
+				</div>
 			</header>
 
 			{showDetails && (
@@ -222,7 +251,9 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
 										)}
 									</span>
 								</div>
-								<ProvisionerTags tags={provisioner.tags} />
+								{hasMultipleTagVariants && (
+									<InlineProvisionerTags tags={provisioner.tags} />
+								)}
 							</Stack>
 						</div>
 					))}
@@ -307,11 +338,11 @@ const ProvisionerVersionPopover: FC<ProvisionerVersionPopoverProps> = ({
 	);
 };
 
-interface ProvisionerTagsProps {
+interface InlineProvisionerTagsProps {
 	tags: Record<string, string>;
 }
 
-const ProvisionerTags: FC<ProvisionerTagsProps> = ({ tags }) => {
+const InlineProvisionerTags: FC<InlineProvisionerTagsProps> = ({ tags }) => {
 	const daemonScope = tags.scope || "organization";
 	const iconScope =
 		daemonScope === "organization" ? <BusinessIcon /> : <PersonIcon />;
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx
@@ -7,6 +7,7 @@ import {
 	MockProvisionerBuiltinKey,
 	MockProvisionerKey,
 	MockProvisionerPskKey,
+	MockProvisionerUserAuthKey,
 	MockProvisionerWithTags,
 	MockUserProvisioner,
 	mockApiError,
@@ -79,6 +80,17 @@ export const Provisioners: Story = {
 					name: `ケイラ-${i}`,
 				})),
 			},
+			{
+				key: MockProvisionerUserAuthKey,
+				daemons: [
+					MockUserProvisioner,
+					{
+						...MockUserProvisioner,
+						id: "mock-user-provisioner-2",
+						name: "Test User Provisioner 2",
+					},
+				],
+			},
 		],
 	},
 	play: async ({ step }) => {
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -610,7 +610,7 @@ export const MockProvisioner2: TypesGen.ProvisionerDaemon = {
 };
 
 export const MockUserProvisioner: TypesGen.ProvisionerDaemon = {
-	...MockProvisioner,
+	...MockUserAuthProvisioner,
 	id: "test-user-provisioner",
 	name: "Test User Provisioner",
 	tags: { scope: "user", owner: "12345678-abcd-1234-abcd-1234567890abcd" },
