feat: add Organization Provisioner Keys view #17889
Next
Next commit
feat(site): add Organization Provisioner Keys view
- Loading branch information
commit f30fa7605345ab2d36003aea180f249175fa4238
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { buildInfo } from "api/queries/buildInfo"; | ||
| import { provisionerDaemonGroups } from "api/queries/organizations"; | ||
| import { EmptyState } from "components/EmptyState/EmptyState"; | ||
| import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata"; | ||
| 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 { metadata } = useEmbeddedMetadata(); | ||
| const buildInfoQuery = useQuery(buildInfo(metadata["build-info"])); | ||
| const provisionerKeyDaemonsQuery = useQuery({ | ||
| ...provisionerDaemonGroups(organizationName), | ||
| }); | ||
|
|
||
| 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} | ||
| buildVersion={buildInfoQuery.data?.version} | ||
| provisionerKeyDaemons={provisionerKeyDaemonsQuery.data} | ||
| error={provisionerKeyDaemonsQuery.error} | ||
| onRetry={provisionerKeyDaemonsQuery.refetch} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default OrganizationProvisionerKeysPage; |
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,49 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { MockProvisioner, MockProvisionerKey } from "testHelpers/entities"; | ||
| import { OrganizationProvisionerKeysPageView } from "./OrganizationProvisionerKeysPageView"; | ||
|
|
||
| const mockProvisionerKeyDaemons = [ | ||
| { | ||
| key: { | ||
| ...MockProvisionerKey, | ||
| }, | ||
| daemons: [ | ||
| { | ||
| ...MockProvisioner, | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| 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 Example: Story = {}; | ||
|
|
||
| export const Paywalled: Story = { | ||
| args: { | ||
| showPaywall: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const NoProvisionerKeys: Story = { | ||
| args: { | ||
| provisionerKeyDaemons: [], | ||
| }, | ||
| }; | ||
|
|
||
| export const ErrorLoadingProvisionerKeys: Story = { | ||
| args: { | ||
| error: "Failed to load provisioner keys", | ||
| }, | ||
| }; |
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,121 @@ | ||
| 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"; | ||
|
|
||
| interface OrganizationProvisionerKeysPageViewProps { | ||
| showPaywall: boolean | undefined; | ||
| provisionerKeyDaemons: ProvisionerKeyDaemons[] | undefined; | ||
| buildVersion: string | undefined; | ||
| error: unknown; | ||
| onRetry: () => void; | ||
| } | ||
|
|
||
| export const OrganizationProvisionerKeysPageView: FC< | ||
| OrganizationProvisionerKeysPageViewProps | ||
| > = ({ showPaywall, provisionerKeyDaemons, buildVersion, 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>Created</TableHead> | ||
| <TableHead>Name</TableHead> | ||
| <TableHead>ID</TableHead> | ||
| <TableHead>Tags</TableHead> | ||
| <TableHead>Provisioners</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) => { | ||
| return ( | ||
| pkd.key.id !== ProvisionerKeyIDBuiltIn && | ||
| pkd.key.id !== ProvisionerKeyIDUserAuth && | ||
| pkd.key.id !== ProvisionerKeyIDPSK | ||
| ); | ||
| }) | ||
| .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> | ||
| ); | ||
| }; | ||
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,97 @@ | ||
| import type { ProvisionerDaemon, ProvisionerKey } from "api/typesGenerated"; | ||
| import { Button } from "components/Button/Button"; | ||
| import { CopyButton } from "components/CopyButton/CopyButton"; | ||
| import { TableCell, TableRow } from "components/Table/Table"; | ||
| import { ChevronDownIcon, ChevronRightIcon } from "lucide-react"; | ||
| import { ProvisionerTag } from "modules/provisioners/ProvisionerTags"; | ||
| import { type FC, useState } from "react"; | ||
| import { Link as RouterLink } from "react-router-dom"; | ||
| import { cn } from "utils/cn"; | ||
| import { relativeTime } from "utils/time"; | ||
|
|
||
| type ProvisionerKeyRowProps = { | ||
| readonly provisionerKey: ProvisionerKey; | ||
| readonly provisioners: readonly ProvisionerDaemon[]; | ||
| defaultIsOpen: boolean; | ||
| }; | ||
|
|
||
| export const ProvisionerKeyRow: FC<ProvisionerKeyRowProps> = ({ | ||
| provisionerKey, | ||
| provisioners, | ||
| defaultIsOpen = false, | ||
| }) => { | ||
| const [isOpen, setIsOpen] = useState(defaultIsOpen); | ||
|
|
||
| return ( | ||
| <> | ||
| <TableRow key={provisionerKey.id}> | ||
| <TableCell> | ||
| <Button | ||
| variant="subtle" | ||
| size="sm" | ||
| className={cn([ | ||
| isOpen && "text-content-primary", | ||
| "p-0 h-auto min-w-0 align-middle", | ||
| ])} | ||
| onClick={() => setIsOpen((v) => !v)} | ||
| > | ||
| {isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />} | ||
| <span className="sr-only">({isOpen ? "Hide" : "Show more"})</span> | ||
| <span className="block first-letter:uppercase"> | ||
| {relativeTime(new Date(provisionerKey.created_at))} | ||
| </span> | ||
| </Button> | ||
| </TableCell> | ||
| <TableCell>{provisionerKey.name}</TableCell> | ||
| <TableCell> | ||
| <span className="font-mono text-content-primary"> | ||
| {provisionerKey.id} | ||
| </span> | ||
| <CopyButton text={provisionerKey.id} label="Copy ID" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| {Object.entries(provisionerKey.tags).map(([k, v]) => ( | ||
| <span key={k}> | ||
| <ProvisionerTag label={k} value={v} /> | ||
| </span> | ||
| ))} | ||
| </TableCell> | ||
| <TableCell>{provisioners.length}</TableCell> | ||
| </TableRow> | ||
|
|
||
| {isOpen && ( | ||
| <TableRow> | ||
| <TableCell colSpan={999} className="p-4 border-t-0"> | ||
johnstcn marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| {provisioners.length === 0 ? ( | ||
| <span className="text-muted-foreground"> | ||
| No provisioners found for this key. | ||
| </span> | ||
| ) : ( | ||
| <dl> | ||
| <dt>Provisioners:</dt> | ||
| {provisioners.map((provisioner) => ( | ||
| <dd key={provisioner.id}> | ||
| <span className="font-mono text-content-primary"> | ||
| {provisioner.name} ({provisioner.id}){" "} | ||
| </span> | ||
| <CopyButton | ||
| text={provisioner.id} | ||
| label="Copy provisioner ID" | ||
| /> | ||
| <Button size="xs" variant="outline" asChild> | ||
| <RouterLink | ||
| to={`../provisioners?${new URLSearchParams({ ids: provisioner.id })}`} | ||
| > | ||
| View provisioner | ||
| </RouterLink> | ||
| </Button> | ||
| </dd> | ||
| ))} | ||
| </dl> | ||
| )} | ||
| </TableCell> | ||
| </TableRow> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
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
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