-
Notifications
You must be signed in to change notification settings - Fork 929
feat: add Organization Provisioner Keys view #17889
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
f30fa76
feat(site): add Organization Provisioner Keys view
johnstcn 6f9a9e9
render provisioners in a table
johnstcn 2118a07
update storybook
johnstcn 964b6f6
fixup! update storybook
johnstcn f6c77e8
indent expanded row content
johnstcn 2866a3b
Few design changes
BrunoQuaresma 5efc4bc
FMT
BrunoQuaresma dffbd85
Fix unexported
BrunoQuaresma 3979e76
fix WithError story
johnstcn File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
...anizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { provisionerDaemonGroups } from "api/queries/organizations"; | ||
| import { EmptyState } from "components/EmptyState/EmptyState"; | ||
| import { useDashboard } from "modules/dashboard/useDashboard"; | ||
| import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout"; | ||
| import { RequirePermission } from "modules/permissions/RequirePermission"; | ||
| import type { FC } from "react"; | ||
| import { Helmet } from "react-helmet-async"; | ||
| import { useQuery } from "react-query"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { pageTitle } from "utils/page"; | ||
| import { OrganizationProvisionerKeysPageView } from "./OrganizationProvisionerKeysPageView"; | ||
|
|
||
| const OrganizationProvisionerKeysPage: FC = () => { | ||
| const { organization: organizationName } = useParams() as { | ||
| organization: string; | ||
| }; | ||
| const { organization, organizationPermissions } = useOrganizationSettings(); | ||
| const { entitlements } = useDashboard(); | ||
| const provisionerKeyDaemonsQuery = useQuery({ | ||
| ...provisionerDaemonGroups(organizationName), | ||
| select: (data) => | ||
| [...data].sort((a, b) => b.daemons.length - a.daemons.length), | ||
| }); | ||
|
|
||
| if (!organization) { | ||
| return <EmptyState message="Organization not found" />; | ||
| } | ||
|
|
||
| const helmet = ( | ||
| <Helmet> | ||
| <title> | ||
| {pageTitle( | ||
| "Provisioner Keys", | ||
| organization.display_name || organization.name, | ||
| )} | ||
| </title> | ||
| </Helmet> | ||
| ); | ||
|
|
||
| if (!organizationPermissions?.viewProvisioners) { | ||
| return ( | ||
| <> | ||
| {helmet} | ||
| <RequirePermission isFeatureVisible={false} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {helmet} | ||
| <OrganizationProvisionerKeysPageView | ||
| showPaywall={!entitlements.features.multiple_organizations.enabled} | ||
| provisionerKeyDaemons={provisionerKeyDaemonsQuery.data} | ||
| error={provisionerKeyDaemonsQuery.error} | ||
| onRetry={provisionerKeyDaemonsQuery.refetch} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default OrganizationProvisionerKeysPage; |
112 changes: 112 additions & 0 deletions
112
...tingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.stories.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { | ||
| type ProvisionerKeyDaemons, | ||
| ProvisionerKeyIDBuiltIn, | ||
| ProvisionerKeyIDPSK, | ||
| ProvisionerKeyIDUserAuth, | ||
| } from "api/typesGenerated"; | ||
| import { | ||
| MockProvisioner, | ||
| MockProvisionerKey, | ||
| mockApiError, | ||
| } from "testHelpers/entities"; | ||
| import { OrganizationProvisionerKeysPageView } from "./OrganizationProvisionerKeysPageView"; | ||
|
|
||
| const mockProvisionerKeyDaemons: ProvisionerKeyDaemons[] = [ | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| }, | ||
| daemons: [ | ||
| { | ||
| ...MockProvisioner, | ||
| name: "Test Provisioner 1", | ||
| id: "daemon-1", | ||
| }, | ||
| { | ||
| ...MockProvisioner, | ||
| name: "Test Provisioner 2", | ||
| id: "daemon-2", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| name: "no-daemons", | ||
| }, | ||
| daemons: [], | ||
| }, | ||
| // Built-in provisioners, user-auth, and PSK keys are not shown here. | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| id: ProvisionerKeyIDBuiltIn, | ||
| name: "built-in", | ||
| }, | ||
| daemons: [], | ||
| }, | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| id: ProvisionerKeyIDUserAuth, | ||
| name: "user-auth", | ||
| }, | ||
| daemons: [], | ||
| }, | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| id: ProvisionerKeyIDPSK, | ||
| name: "PSK", | ||
| }, | ||
| daemons: [], | ||
| }, | ||
| ]; | ||
|
|
||
| const meta: Meta<typeof OrganizationProvisionerKeysPageView> = { | ||
| title: "pages/OrganizationProvisionerKeysPage", | ||
| component: OrganizationProvisionerKeysPageView, | ||
| args: { | ||
| error: undefined, | ||
| provisionerKeyDaemons: mockProvisionerKeyDaemons, | ||
| onRetry: () => {}, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof OrganizationProvisionerKeysPageView>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| error: undefined, | ||
| provisionerKeyDaemons: mockProvisionerKeyDaemons, | ||
| onRetry: () => {}, | ||
| showPaywall: false, | ||
| }, | ||
| }; | ||
|
|
||
| export const Paywalled: Story = { | ||
| ...Default, | ||
| args: { | ||
| showPaywall: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const Empty: Story = { | ||
| ...Default, | ||
| args: { | ||
| provis F438 ionerKeyDaemons: [], | ||
| }, | ||
| }; | ||
|
|
||
| export const WithError: Story = { | ||
| ...Default, | ||
| args: { | ||
| provisionerKeyDaemons: undefined, | ||
| error: mockApiError({ | ||
| message: "Error loading provisioner keys", | ||
| detail: "Something went wrong. This is an unhelpful error message.", | ||
| }), | ||
| }, | ||
| }; |
123 changes: 123 additions & 0 deletions
123
...ationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { | ||
| type ProvisionerKeyDaemons, | ||
| ProvisionerKeyIDBuiltIn, | ||
| ProvisionerKeyIDPSK, | ||
| ProvisionerKeyIDUserAuth, | ||
| } from "api/typesGenerated"; | ||
| import { Button } from "components/Button/Button"; | ||
| import { EmptyState } from "components/EmptyState/EmptyState"; | ||
| import { Link } from "components/Link/Link"; | ||
| import { Loader } from "components/Loader/Loader"; | ||
| import { Paywall } from "components/Paywall/Paywall"; | ||
| import { | ||
| SettingsHeader, | ||
| SettingsHeaderDescription, | ||
| SettingsHeaderTitle, | ||
| } from "components/SettingsHeader/SettingsHeader"; | ||
| import { | ||
| Table, | ||
| TableBody, | ||
| TableCell, | ||
| TableHead, | ||
| TableHeader, | ||
| TableRow, | ||
| } from "components/Table/Table"; | ||
| import type { FC } from "react"; | ||
| import { docs } from "utils/docs"; | ||
| import { ProvisionerKeyRow } from "./ProvisionerKeyRow"; | ||
|
|
||
| // If the user using provisioner keys for external provisioners you're unlikely to | ||
| // want to keep the built-in provisioners. | ||
| const HIDDEN_PROVISIONER_KEYS = [ | ||
| ProvisionerKeyIDBuiltIn, | ||
| ProvisionerKeyIDUserAuth, | ||
| ProvisionerKeyIDPSK, | ||
| ]; | ||
|
|
||
| interface OrganizationProvisionerKeysPageViewProps { | ||
| showPaywall: boolean | undefined; | ||
| provisionerKeyDaemons: ProvisionerKeyDaemons[] | undefined; | ||
| error: unknown; | ||
| onRetry: () => void; | ||
| } | ||
|
|
||
| export const OrganizationProvisionerKeysPageView: FC< | ||
| OrganizationProvisionerKeysPageViewProps | ||
| > = ({ showPaywall, provisionerKeyDaemons, error, onRetry }) => { | ||
| return ( | ||
| <section> | ||
| <SettingsHeader> | ||
| <SettingsHeaderTitle>Provisioner Keys</SettingsHeaderTitle> | ||
| <SettingsHeaderDescription> | ||
| Manage provisioner keys used to authenticate provisioner instances.{" "} | ||
| <Link href={docs("/admin/provisioners")}>View docs</Link> | ||
| </SettingsHeaderDescription> | ||
| </SettingsHeader> | ||
|
|
||
| {showPaywall ? ( | ||
| <Paywall | ||
| message="Provisioners" | ||
| description="Provisioners run your Terraform to create templates and workspaces. You need a Premium license to use this feature for multiple organizations." | ||
| documentationLink={docs("/")} | ||
| /> | ||
| ) : ( | ||
| <Table className="mt-6"> | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableHead>Name</TableHead> | ||
| <TableHead>Tags</TableHead> | ||
| <TableHead>Provisioners</TableHead> | ||
| <TableHead>Created</TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {provisionerKeyDaemons ? ( | ||
| provisionerKeyDaemons.length === 0 ? ( | ||
| <TableRow> | ||
| <TableCell colSpan={5}> | ||
| <EmptyState | ||
| message="No provisioner keys" | ||
| description="Create your first provisioner key to authenticate external provisioner daemons." | ||
| /> | ||
| </TableCell> | ||
| </TableRow> | ||
| ) : ( | ||
| provisionerKeyDaemons | ||
| .filter( | ||
| (pkd) => !HIDDEN_PROVISIONER_KEYS.includes(pkd.key.id), | ||
| ) | ||
| .map((pkd) => ( | ||
| <ProvisionerKeyRow | ||
| key={pkd.key.id} | ||
| provisionerKey={pkd.key} | ||
| provisioners={pkd.daemons} | ||
| defaultIsOpen={false} | ||
| /> | ||
| )) | ||
| ) | ||
| ) : error ? ( | ||
| <TableRow> | ||
| <TableCell colSpan={5}> | ||
| <EmptyState | ||
| message="Error loading provisioner keys" | ||
| cta={ | ||
| <Button onClick={onRetry} size="sm"> | ||
| Retry | ||
| </Button> | ||
| } | ||
| /> | ||
| </TableCell> | ||
| </TableRow> | ||
| ) : ( | ||
| <TableRow> | ||
| <TableCell colSpan={999}> | ||
| <Loader /> | ||
| </TableCell> | ||
| </TableRow> | ||
| )} | ||
| </TableBody> | ||
| </Table> | ||
| )} | ||
| </section> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not just multi-org right? Keys themselves require license too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a copy-paste of the existing paywall: https://github.com/coder/coder/blob/main/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx#L100-L102