Skip to content

Commit ac7961a

Browse files
johnstcnBrunoQuaresma
johnstcn
and
BrunoQuaresma
authored
feat: add Organization Provisioner Keys view (#17889)
Fixes #17698 **Demo:** https://github.com/user-attachments/assets/ba92693f-29b7-43ee-8d69-3d77214f3230 --------- Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
1 parent 61f22a5 commit ac7961a

File tree

10 files changed

+471
-6
lines changed

10 files changed

+471
-6
lines changed

‎site/src/api/queries/organizations.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ const getProvisionerDaemonGroupsKey = (organization: string) => [
187187
"provisionerDaemons",
188188
];
189189

190-
const provisionerDaemonGroups = (organization: string) => {
190+
export const provisionerDaemonGroups = (organization: string) => {
191191
return {
192192
queryKey: getProvisionerDaemonGroupsKey(organization),
193193
queryFn: () => API.getProvisionerDaemonGroupsByOrganization(organization),

‎site/src/components/Badge/Badge.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { cn } from "utils/cn";
99

1010
const badgeVariants = cva(
1111
`inline-flex items-center rounded-md border px-2 py-1 transition-colors
12-
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
1312
[&_svg]:pointer-events-none [&_svg]:pr-0.5 [&_svg]:py-0.5 [&_svg]:mr-0.5`,
1413
{
1514
variants: {
@@ -30,11 +29,23 @@ const badgeVariants = cva(
3029
none: "border-transparent",
3130
solid: "border border-solid",
3231
},
32+
hover: {
33+
false: null,
34+
true: "no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link",
35+
},
3336
},
37+
compoundVariants: [
38+
{
39+
hover: true,
40+
variant: "default",
41+
class: "hover:bg-surface-tertiary",
42+
},
43+
],
3444
defaultVariants: {
3545
variant: "default",
3646
size: "md",
3747
border: "solid",
48+
hover: false,
3849
},
3950
},
4051
);
@@ -46,14 +57,20 @@ export interface BadgeProps
4657
}
4758

4859
export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
49-
({ className, variant, size, border, asChild = false, ...props }, ref) => {
60+
(
61+
{ className, variant, size, border, hover, asChild = false, ...props },
62+
ref,
63+
) => {
5064
const Comp = asChild ? Slot : "div";
5165

5266
return (
5367
<Comp
5468
{...props}
5569
ref={ref}
56-
className={cn(badgeVariants({ variant, size, border }), className)}
70+
className={cn(
71+
badgeVariants({ variant, size, border, hover }),
72+
className,
73+
)}
5774
/>
5875
);
5976
},

‎site/src/modules/management/OrganizationSidebarView.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,11 @@ const OrganizationSettingsNavigation: FC<
190190
>
191191
Provisioners
192192
</SettingsSidebarNavItem>
193+
<SettingsSidebarNavItem
194+
href={urlForSubpage(organization.name, "provisioner-keys")}
195+
>
196+
Provisioner Keys
197+
</SettingsSidebarNavItem>
193198
<SettingsSidebarNavItem
194199
href={urlForSubpage(organization.name, "provisioner-jobs")}
195200
>

‎site/src/modules/provisioners/ProvisionerTags.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const ProvisionerTags: FC<HTMLProps<HTMLDivElement>> = ({
99
return (
1010
<div
1111
{...props}
12-
className={cn(["flex items-center gap-1 flex-wrap", className])}
12+
className={cn(["flex items-center gap-1 flex-wrap py-0.5", className])}
1313
/>
1414
);
1515
};

‎site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPage.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { provisionerDaemonGroups } from "api/queries/organizations";
2+
import { EmptyState } from "components/EmptyState/EmptyState";
3+
import { useDashboard } from "modules/dashboard/useDashboard";
4+
import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
5+
import { RequirePermission } from "modules/permissions/RequirePermission";
6+
import type { FC } from "react";
7+
import { Helmet } from "react-helmet-async";
8+
import { useQuery } from "react-query";
9+
import { useParams } from "react-router-dom";
10+
import { pageTitle } from "utils/page";
11+
import { OrganizationProvisionerKeysPageView } from "./OrganizationProvisionerKeysPageView";
12+
13+
const OrganizationProvisionerKeysPage: FC = () => {
14+
const { organization: organizationName } = useParams() as {
15+
organization: string;
16+
};
17+
const { organization, organizationPermissions } = useOrganizationSettings();
18+
const { entitlements } = useDashboard();
19+
const provisionerKeyDaemonsQuery = useQuery({
20+
...provisionerDaemonGroups(organizationName),
21+
select: (data) =>
22+
[...data].sort((a, b) => b.daemons.length - a.daemons.length),
23+
});
24+
25+
if (!organization) {
26+
return <EmptyState message="Organization not found" />;
27+
}
28+
29+
const helmet = (
30+
<Helmet>
31+
<title>
32+
{pageTitle(
33+
"Provisioner Keys",
34+
organization.display_name || organization.name,
35+
)}
36+
</title>
37+
</Helmet>
38+
);
39+
40+
if (!organizationPermissions?.viewProvisioners) {
41+
return (
42+
<>
43+
{helmet}
44+
<RequirePermission isFeatureVisible={false} />
45+
</>
46+
);
47+
}
48+
49+
return (
50+
<>
51+
{helmet}
52+
<OrganizationProvisionerKeysPageView
53+
showPaywall={!entitlements.features.multiple_organizations.enabled}
54+
provisionerKeyDaemons={provisionerKeyDaemonsQuery.data}
55+
error={provisionerKeyDaemonsQuery.error}
56+
onRetry={provisionerKeyDaemonsQuery.refetch}
57+
/>
58+
</>
59+
);
60+
};
61+
62+
export default OrganizationProvisionerKeysPage;

‎site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
type ProvisionerKeyDaemons,
4+
ProvisionerKeyIDBuiltIn,
5+
ProvisionerKeyIDPSK,
6+
ProvisionerKeyIDUserAuth,
7+
} from "api/typesGenerated";
8+
import {
9+
MockProvisioner,
10+
MockProvisionerKey,
11+
mockApiError,
12+
} from "testHelpers/entities";
13+
import { OrganizationProvisionerKeysPageView } from "./OrganizationProvisionerKeysPageView";
14+
15+
const mockProvisionerKeyDaemons: ProvisionerKeyDaemons[] = [
16+
{
17+
key: {
18+
...MockProvisionerKey,
19+
},
20+
daemons: [
21+
{
22+
...MockProvisioner,
23+
name: "Test Provisioner 1",
24+
id: "daemon-1",
25+
},
26+
{
27+
...MockProvisioner,
28+
name: "Test Provisioner 2",
29+
id: "daemon-2",
30+
},
31+
],
32+
},
33+
{
34+
key: {
35+
...MockProvisionerKey,
36+
name: "no-daemons",
37+
},
38+
daemons: [],
39+
},
40+
// Built-in provisioners, user-auth, and PSK keys are not shown here.
41+
{
42+
key: {
43+
...MockProvisionerKey,
44+
id: ProvisionerKeyIDBuiltIn,
45+
name: "built-in",
46+
},
47+
daemons: [],
48+
},
49+
{
50+
key: {
51+
...MockProvisionerKey,
52+
id: ProvisionerKeyIDUserAuth,
53+
name: "user-auth",
54+
},
55+
daemons: [],
56+
},
57+
{
58+
key: {
59+
...MockProvisionerKey,
60+
id: ProvisionerKeyIDPSK,
61+
name: "PSK",
62+
},
63+
daemons: [],
64+
},
65+
];
66+
67+
const meta: Meta<typeof OrganizationProvisionerKeysPageView> = {
68+
title: "pages/OrganizationProvisionerKeysPage",
69+
component: OrganizationProvisionerKeysPageView,
70+
args: {
71+
error: undefined,
72+
provisionerKeyDaemons: mockProvisionerKeyDaemons,
73+
onRetry: () => {},
74+
},
75+
};
76+
77+
export default meta;
78+
type Story = StoryObj<typeof OrganizationProvisionerKeysPageView>;
79+
80+
export const Default: Story = {
81+
args: {
82+
error: undefined,
83+
provisionerKeyDaemons: mockProvisionerKeyDaemons,
84+
onRetry: () => {},
85+
showPaywall: false,
86+
},
87+
};
88+
89+
export const Paywalled: Story = {
90+
...Default,
91+
args: {
92+
showPaywall: true,
93+
},
94+
};
95+
96+
export const Empty: Story = {
97+
...Default,
98+
args: {
99+
provisionerKeyDaemons: [],
100+
},
101+
};
102+
103+
export const WithError: Story = {
104+
...Default,
105+
args: {
106+
provisionerKeyDaemons: undefined,
107+
error: mockApiError({
108+
message: "Error loading provisioner keys",
109+
detail: "Something went wrong. This is an unhelpful error message.",
110+
}),
111+
},
112+
};

‎site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import {
2+
type ProvisionerKeyDaemons,
3+
ProvisionerKeyIDBuiltIn,
4+
ProvisionerKeyIDPSK,
5+
ProvisionerKeyIDUserAuth,
6+
} from "api/typesGenerated";
7+
import { Button } from "components/Button/Button";
8+
import { EmptyState } from "components/EmptyState/EmptyState";
9+
import { Link } from "components/Link/Link";
10+
import { Loader } from "components/Loader/Loader";
11+
import { Paywall } from "components/Paywall/Paywall";
12+
import {
13+
SettingsHeader,
14+
SettingsHeaderDescription,
15+
SettingsHeaderTitle,
16+
} from "components/SettingsHeader/SettingsHeader";
17+
import {
18+
Table,
19+
TableBody,
20+
TableCell,
21+
TableHead,
22+
TableHeader,
23+
TableRow,
24+
} from "components/Table/Table";
25+
import type { FC } from "react";
26+
import { docs } from "utils/docs";
27+
import { ProvisionerKeyRow } from "./ProvisionerKeyRow";
28+
29+
// If the user using provisioner keys for external provisioners you're unlikely to
30+
// want to keep the built-in provisioners.
31+
const HIDDEN_PROVISIONER_KEYS = [
32+
ProvisionerKeyIDBuiltIn,
33+
ProvisionerKeyIDUserAuth,
34+
ProvisionerKeyIDPSK,
35+
];
36+
37+
interface OrganizationProvisionerKeysPageViewProps {
38+
showPaywall: boolean | undefined;
39+
provisionerKeyDaemons: ProvisionerKeyDaemons[] | undefined;
40+
error: unknown;
41+
onRetry: () => void;
42+
}
43+
44+
export const OrganizationProvisionerKeysPageView: FC<
45+
OrganizationProvisionerKeysPageViewProps
46+
> = ({ showPaywall, provisionerKeyDaemons, error, onRetry }) => {
47+
return (
48+
<section>
49+
<SettingsHeader>
50+
<SettingsHeaderTitle>Provisioner Keys</SettingsHeaderTitle>
51+
<SettingsHeaderDescription>
52+
Manage provisioner keys used to authenticate provisioner instances.{" "}
53+
<Link href={docs("/admin/provisioners")}>View docs</Link>
54+
</SettingsHeaderDescription>
55+
</SettingsHeader>
56+
57+
{showPaywall ? (
58+
<Paywall
59+
message="Provisioners"
60+
description="Provisioners run your Terraform to create templates and workspaces. You need a Premium license to use this feature for multiple organizations."
61+
documentationLink={docs("/")}
62+
/>
63+
) : (
64+
<Table className="mt-6">
65+
<TableHeader>
66+
<TableRow>
67+
<TableHead>Name</TableHead>
68+
<TableHead>Tags</TableHead>
69+
<TableHead>Provisioners</TableHead>
70+
<TableHead>Created</TableHead>
71+
</TableRow>
72+
</TableHeader>
73+
<TableBody>
74+
{provisionerKeyDaemons ? (
75+
provisionerKeyDaemons.length === 0 ? (
76+
<TableRow>
77+
<TableCell colSpan={5}>
78+
<EmptyState
79+
message="No provisioner keys"
80+
description="Create your first provisioner key to authenticate external provisioner daemons."
81+
/>
82+
</TableCell>
83+
</TableRow>
84+
) : (
85+
provisionerKeyDaemons
86+
.filter(
87+
(pkd) => !HIDDEN_PROVISIONER_KEYS.includes(pkd.key.id),
88+
)
89+
.map((pkd) => (
90+
<ProvisionerKeyRow
91+
key={pkd.key.id}
92+
provisionerKey={pkd.key}
93+
provisioners={pkd.daemons}
94+
defaultIsOpen={false}
95+
/>
96+
))
97+
)
98+
) : error ? (
99+
<TableRow>
100+
<TableCell colSpan={5}>
101+
<EmptyState
102+
message="Error loading provisioner keys"
103+
cta={
104+
<Button onClick={onRetry} size="sm">
105+
Retry
106+
</Button>
107+
}
108+
/>
109+
</TableCell>
110+
</TableRow>
111+
) : (
112+
<TableRow>
113+
<TableCell colSpan={999}>
114+
<Loader />
115+
</TableCell>
116+
</TableRow>
117+
)}
118+
</TableBody>
119+
</Table>
120+
)}
121+
</section>
122+
);
123+
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy