Skip to content

Commit

Permalink
feat: Plural OIDC clients (#1382)
Browse files Browse the repository at this point in the history
  • Loading branch information
maciaszczykm authored Oct 21, 2024
1 parent cbbf5e2 commit f93ca0b
Show file tree
Hide file tree
Showing 12 changed files with 984 additions and 37 deletions.
2 changes: 1 addition & 1 deletion www/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@nivo/geo": "0.83.0",
"@nivo/line": "0.83.0",
"@octokit/core": "4.2.1",
"@pluralsh/design-system": "3.75.0",
"@pluralsh/design-system": "3.75.1",
"@react-spring/web": "9.7.3",
"@stripe/react-stripe-js": "2.1.0",
"@stripe/stripe-js": "1.54.0",
Expand Down
4 changes: 2 additions & 2 deletions www/src/components/app/oidc/OIDC.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export function CreateProvider({ installation }: any) {
const [bindings, setBindings] = useState([])
const [mutation, { loading, error }] = useCreateProviderMutation({
variables: {
id: installation.id,
installationId: installation.id,
attributes: { ...attributes, bindings: bindings.map(sanitize) },
},
update: (cache, { data }) =>
Expand Down Expand Up @@ -384,7 +384,7 @@ export function UpdateProvider({ installation }: any) {

const [mutation, { loading, error }] = useUpdateProviderMutation({
variables: {
id: installation.id,
installationId: installation.id,
attributes: {
...{
redirectUris: attributes.redirectUris,
Expand Down
24 changes: 19 additions & 5 deletions www/src/components/cluster/Cluster.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,17 @@ import { useNavigate, useParams } from 'react-router-dom'

import { CLUSTERS_ROOT_CRUMB } from 'components/overview/clusters/Clusters'

import { useTheme } from 'styled-components'

import ClustersContext from '../../contexts/ClustersContext'
import CurrentUserContext from '../../contexts/CurrentUserContext'
import { ensureURLValidity } from '../../utils/url'
import { ClusterPicker } from '../utils/ClusterPicker'
import ImpersonateServiceAccount from '../utils/ImpersonateServiceAccount'
import { ResponsiveLayoutPage } from '../utils/layout/ResponsiveLayoutPage'

import { EditPluralOIDCClients } from '../overview/clusters/plural-cloud/EditPluralOIDCClients'

import { ClusterAdminsModal } from './ClusterAdminsModal'
import { ClusterApps } from './ClusterApps'
import { ClusterDependencyModal } from './ClusterDependencyModal'
Expand All @@ -29,6 +33,7 @@ import { ClusterSidecar } from './ClusterSidecar'
import { CollapsibleButton } from './misc'

export function Cluster() {
const theme = useTheme()
const [dependencyOpen, setDependencyOpen] = useState(false)
const [promoteOpen, setPromoteOpen] = useState(false)
const [adminsOpen, setAdminsOpen] = useState(false)
Expand Down Expand Up @@ -69,10 +74,7 @@ export function Cluster() {
}

return (
<ResponsiveLayoutPage
gap="large"
overflowY="auto"
>
<ResponsiveLayoutPage gap="large">
<Flex
direction="column"
grow={1}
Expand Down Expand Up @@ -172,12 +174,24 @@ export function Cluster() {
direction="column"
gap="medium"
grow={1}
minHeight={0}
>
<ImpersonateServiceAccount
id={cluster?.owner?.id}
skip={!cluster.owner?.serviceAccount}
>
<ClusterApps cluster={cluster} />
<>
<ClusterApps cluster={cluster} />
<div
css={{
...theme.partials.text.body1Bold,
marginTop: theme.spacing.medium,
}}
>
Plural OIDC clients
</div>
<EditPluralOIDCClients instanceName={cluster.name} />
</>
</ImpersonateServiceAccount>
</Flex>
</Flex>
Expand Down
2 changes: 2 additions & 0 deletions www/src/components/cluster/ClusterApps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,13 @@ export function ClusterApps({
placeholder="Search for a repository"
disabled={isEmpty(apps)}
border="none"
borderRadius={0}
value={search}
width="100%"
onChange={({ target: { value } }) => setSearch(value)}
/>
}
flexGrow={0}
>
{!isEmpty(apps) ? (
<InfiniteScroller
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ import {
AppIcon,
Button,
Chip,
CloudIcon,
ConsoleIcon,
Flex,
ListBoxItem,
PeopleIcon,
PersonPlusIcon,
Tooltip,
TrashCanIcon,
} from '@pluralsh/design-system'
import { createColumnHelper } from '@tanstack/react-table'
import { ProviderIcon } from 'components/utils/ProviderIcon'
Expand All @@ -30,6 +34,7 @@ import { CellCaption, CellWrap } from '../SelfHostedTableCols'
import { ConsoleInstanceOIDC } from './ConsoleInstanceOIDC'
import { DeleteInstanceModal } from './DeleteInstance'
import { EditInstanceSizeModal } from './EditInstance'
import { EditPluralOIDCClientsModal } from './EditPluralOIDCClients'

const columnHelper = createColumnHelper<ConsoleInstanceFragment>()

Expand Down Expand Up @@ -159,6 +164,7 @@ const ColOwner = columnHelper.accessor((instance) => instance.owner, {
enum MenuItemKey {
EditSize = 'editSize',
EditOidc = 'editOidc',
EditPluralOIDCClients = 'editPluralOIDCClients',
Delete = 'delete',
}

Expand Down Expand Up @@ -194,7 +200,8 @@ const ColActions = columnHelper.accessor((instance) => instance, {
<MoreMenu onSelectionChange={(newKey) => setMenuKey(newKey)}>
<ListBoxItem
key={MenuItemKey.EditSize}
label="Edit instance size"
label="Edit cloud instance size"
leftContent={<CloudIcon />}
/>
<ListBoxItem
key={MenuItemKey.EditOidc}
Expand All @@ -203,11 +210,18 @@ const ColActions = columnHelper.accessor((instance) => instance, {
<span>Edit cluster managers</span>
</Tooltip>
}
leftContent={<PersonPlusIcon />}
/>
<ListBoxItem
key={MenuItemKey.EditPluralOIDCClients}
label="Edit Plural OIDC clients"
leftContent={<PeopleIcon />}
/>
<ListBoxItem
key={MenuItemKey.Delete}
destructive
label="Delete instance"
leftContent={<TrashCanIcon color="icon-danger" />}
/>
</MoreMenu>
{/* Modals */}
Expand All @@ -223,6 +237,11 @@ const ColActions = columnHelper.accessor((instance) => instance, {
serviceAccount={instance.console?.owner}
showHeading={false}
/>
<EditPluralOIDCClientsModal
open={menuKey === MenuItemKey.EditPluralOIDCClients}
onClose={onClose}
instance={instance}
/>
<DeleteInstanceModal
open={menuKey === MenuItemKey.Delete}
onClose={onClose}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
Accordion,
AccordionItem,
Button,
ConsoleIcon,
Flex,
FormField,
Modal,
Expand Down Expand Up @@ -57,6 +58,7 @@ export function ConsoleInstanceOIDC({
label="Enable login for your team members for this console instance"
>
<Button
startIcon={<ConsoleIcon />}
secondary
onClick={() => setOpen(true)}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { Button, Input, Modal } from '@pluralsh/design-system'
import {
OidcProviderFragment,
useDeleteProviderMutation,
} from 'generated/graphql'
import { useTheme } from 'styled-components'

import { useState } from 'react'

import { GqlError } from '../../../utils/Alert'

export function DeletePluralOIDCClientModal({
open,
onClose,
provider,
refetch,
}: {
open: boolean
onClose: () => void
provider?: OidcProviderFragment
refetch: () => void
}) {
return (
<Modal
open={open}
onClose={onClose}
header="Confirm deletion"
size="large"
>
<DeletePluralOIDCClient
onClose={onClose}
provider={provider}
refetch={refetch}
/>
</Modal>
)
}

function DeletePluralOIDCClient({
onClose,
provider,
refetch,
}: {
onClose: () => void
provider?: OidcProviderFragment
refetch: () => void
}) {
const theme = useTheme()
const [confirmText, setConfirmText] = useState('')

const [mutation, { loading, error }] = useDeleteProviderMutation({
variables: { id: provider?.id ?? '' },
onCompleted: () => {
onClose()
refetch()
},
})

return (
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xlarge,
}}
>
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.small,
}}
>
<p>
Are you sure you want to delete this OIDC client? This action is not
reversible.
<br />
<br />
Type "
<span css={{ color: theme.colors['text-danger'] }}>
{provider?.name}
</span>
" to confirm deletion.
</p>
<Input
placeholder="Enter OIDC client name"
value={confirmText}
onChange={(e) => setConfirmText(e.target.value)}
/>
</div>
{error && (
<GqlError
error={error}
header="Delete OIDC provider request failed"
/>
)}
<div
css={{
display: 'flex',
justifyContent: 'end',
gap: theme.spacing.small,
}}
>
<Button
secondary
onClick={onClose}
>
Cancel
</Button>
<Button
destructive
disabled={confirmText !== provider?.name}
loading={loading}
onClick={mutation}
>
Delete
</Button>
</div>
</div>
)
}
Loading

0 comments on commit f93ca0b

Please sign in to comment.