From 3163986357f89760bb8be4043757ce5135cdfc95 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 17 Oct 2024 11:28:47 +0200 Subject: [PATCH 01/47] add icons to the menu --- .../clusters/plural-cloud/CloudInstanceTableCols.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx index cf5dfa3b3..6fcb257bc 100644 --- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx +++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx @@ -2,10 +2,12 @@ import { AppIcon, Button, Chip, + CloudIcon, ConsoleIcon, Flex, ListBoxItem, Tooltip, + TrashCanIcon, } from '@pluralsh/design-system' import { createColumnHelper } from '@tanstack/react-table' import { ProviderIcon } from 'components/utils/ProviderIcon' @@ -194,7 +196,8 @@ const ColActions = columnHelper.accessor((instance) => instance, { setMenuKey(newKey)}> } /> instance, { key={MenuItemKey.Delete} destructive label="Delete instance" + leftContent={} /> {/* Modals */} From 6e901780ef9a7745a019d6dd03e5c5b5aeaa1786 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 17 Oct 2024 11:32:43 +0200 Subject: [PATCH 02/47] add new menu entry --- .../clusters/plural-cloud/CloudInstanceTableCols.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx index 6fcb257bc..c3bfaf8f1 100644 --- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx +++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx @@ -6,6 +6,7 @@ import { ConsoleIcon, Flex, ListBoxItem, + PeopleIcon, Tooltip, TrashCanIcon, } from '@pluralsh/design-system' @@ -161,6 +162,7 @@ const ColOwner = columnHelper.accessor((instance) => instance.owner, { enum MenuItemKey { EditSize = 'editSize', EditOidc = 'editOidc', + EditPluralOIDCClients = 'editPluralOIDCClients', Delete = 'delete', } @@ -207,6 +209,11 @@ const ColActions = columnHelper.accessor((instance) => instance, { } /> + } + /> Date: Thu, 17 Oct 2024 11:42:15 +0200 Subject: [PATCH 03/47] add oidc providers query --- www/src/generated/graphql.ts | 62 ++++++++++++++++++++++++++++++++++++ www/src/graph/oauth.graphql | 13 ++++++++ 2 files changed, 75 insertions(+) diff --git a/www/src/generated/graphql.ts b/www/src/generated/graphql.ts index 8b9f27b6a..4133a5d24 100644 --- a/www/src/generated/graphql.ts +++ b/www/src/generated/graphql.ts @@ -5616,6 +5616,16 @@ export type ConsentMutationVariables = Exact<{ export type ConsentMutation = { __typename?: 'RootMutationType', oauthConsent?: { __typename?: 'OauthResponse', redirectTo: string } | null }; +export type OidcProvidersQueryVariables = Exact<{ + first?: InputMaybe; + last?: InputMaybe; + after?: InputMaybe; + before?: InputMaybe; +}>; + + +export type OidcProvidersQuery = { __typename?: 'RootQueryType', oidcProviders?: { __typename?: 'OidcProviderConnection', pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean }, edges?: Array<{ __typename?: 'OidcProviderEdge', node?: { __typename?: 'OidcProvider', id: string, clientId: string, authMethod: OidcAuthMethod, clientSecret: string, redirectUris?: Array | null, bindings?: Array<{ __typename?: 'OidcProviderBinding', id: string, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null } | null> | null, configuration?: { __typename?: 'OuathConfiguration', issuer?: string | null, authorizationEndpoint?: string | null, tokenEndpoint?: string | null, jwksUri?: string | null, userinfoEndpoint?: string | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null } | null } | null> | null } | null }; + export type CreateProviderMutationVariables = Exact<{ id: Scalars['ID']['input']; attributes: OidcAttributes; @@ -9021,6 +9031,57 @@ export function useConsentMutation(baseOptions?: Apollo.MutationHookOptions; export type ConsentMutationResult = Apollo.MutationResult; export type ConsentMutationOptions = Apollo.BaseMutationOptions; +export const OidcProvidersDocument = gql` + query OIDCProviders($first: Int, $last: Int, $after: String, $before: String) { + oidcProviders(first: $first, last: $last, after: $after, before: $before) { + pageInfo { + ...PageInfo + } + edges { + node { + ...OIDCProvider + } + } + } +} + ${PageInfoFragmentDoc} +${OidcProviderFragmentDoc}`; + +/** + * __useOidcProvidersQuery__ + * + * To run a query within a React component, call `useOidcProvidersQuery` and pass it any options that fit your needs. + * When your component renders, `useOidcProvidersQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useOidcProvidersQuery({ + * variables: { + * first: // value for 'first' + * last: // value for 'last' + * after: // value for 'after' + * before: // value for 'before' + * }, + * }); + */ +export function useOidcProvidersQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(OidcProvidersDocument, options); + } +export function useOidcProvidersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(OidcProvidersDocument, options); + } +export function useOidcProvidersSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(OidcProvidersDocument, options); + } +export type OidcProvidersQueryHookResult = ReturnType; +export type OidcProvidersLazyQueryHookResult = ReturnType; +export type OidcProvidersSuspenseQueryHookResult = ReturnType; +export type OidcProvidersQueryResult = Apollo.QueryResult; export const CreateProviderDocument = gql` mutation CreateProvider($id: ID!, $attributes: OidcAttributes!) { createOidcProvider(installationId: $id, attributes: $attributes) { @@ -11869,6 +11930,7 @@ export const namedOperations = { KeyBackup: 'KeyBackup', Notifications: 'Notifications', OIDCConsent: 'OIDCConsent', + OIDCProviders: 'OIDCProviders', Subscription: 'Subscription', Cards: 'Cards', Invoices: 'Invoices', diff --git a/www/src/graph/oauth.graphql b/www/src/graph/oauth.graphql index 5958feb3c..e779fa603 100644 --- a/www/src/graph/oauth.graphql +++ b/www/src/graph/oauth.graphql @@ -55,6 +55,19 @@ mutation Consent($challenge: String!, $scopes: [String]) { } } +query OIDCProviders($first: Int, $last: Int, $after: String, $before: String) { + oidcProviders(first: $first, last: $last, after: $after, before: $before) { + pageInfo { + ...PageInfo + } + edges { + node { + ...OIDCProvider + } + } + } +} + mutation CreateProvider($id: ID!, $attributes: OidcAttributes!) { createOidcProvider(installationId: $id, attributes: $attributes) { ...OIDCProvider From 35a12c4255a26c84ab195c63a5b1ae08c7b5aaf6 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 17 Oct 2024 11:49:41 +0200 Subject: [PATCH 04/47] add oidc providers modal --- .../plural-cloud/CloudInstanceTableCols.tsx | 6 ++ .../plural-cloud/EditPluralOIDCClients.tsx | 86 +++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx index c3bfaf8f1..7eee81d32 100644 --- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx +++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx @@ -33,6 +33,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() @@ -234,6 +235,11 @@ const ColActions = columnHelper.accessor((instance) => instance, { serviceAccount={instance.console?.owner} showHeading={false} /> + void + instance: ConsoleInstanceFragment +}) { + return ( + + + + ) +} + +function EditPluralOIDCClients({ + onClose, + instance, +}: { + onClose: () => void + instance: ConsoleInstanceFragment +}) { + const theme = useTheme() + const { data, loading, pageInfo, fetchNextPage } = useFetchPaginatedData( + { queryHook: useOidcProvidersQuery, keyPath: ['oidcProviders'] }, + {} + ) + + const oidcProviders = useMemo( + () => mapExistingNodes(data?.oidcProviders), + [data?.oidcProviders] + ) + + return ( +
+ {JSON.stringify(oidcProviders)} + +
+ ) +} From 1a109955369adbcfc1657cde66dfa13a758183dd Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 17 Oct 2024 12:23:13 +0200 Subject: [PATCH 05/47] add oidc providers table --- .../plural-cloud/EditPluralOIDCClients.tsx | 79 +++++++++++++++++-- www/src/generated/graphql.ts | 28 ++++--- www/src/graph/oauth.graphql | 2 + 3 files changed, 89 insertions(+), 20 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 7e8bf155d..eb4680cbe 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -1,14 +1,19 @@ import { + AppIcon, Button, + ConsoleIcon, Flex, ListBoxItem, Modal, + PlusIcon, Select, + Table, } from '@pluralsh/design-system' import { FormFieldSC } from 'components/create-cluster/steps/ConfigureCloudInstanceStep' import { ConsoleInstanceFragment, ConsoleSize, + OidcProviderFragment, useGroupMembersQuery, useNotificationsQuery, useOidcProvidersQuery, @@ -21,8 +26,27 @@ import { GqlError } from 'components/utils/Alert' import { useTheme } from 'styled-components' import { firstLetterUppercase } from './CloudInstanceTableCols' -import { useFetchPaginatedData } from '../../../utils/useFetchPaginatedData' +import { + DEFAULT_REACT_VIRTUAL_OPTIONS, + useFetchPaginatedData, +} from '../../../utils/useFetchPaginatedData' import { mapExistingNodes } from '../../../../utils/graphql' +import { createColumnHelper } from '@tanstack/react-table' +import { CellWrap } from '../SelfHostedTableCols' + +const columnHelper = createColumnHelper() + +const columns = [ + columnHelper.accessor((row) => row, { + id: 'name', + enableSorting: true, + cell: ({ getValue }) => { + const oidcProvider = getValue() + + return
{oidcProvider.name}
+ }, + }), +] export function EditPluralOIDCClientsModal({ open, @@ -55,13 +79,14 @@ function EditPluralOIDCClients({ instance: ConsoleInstanceFragment }) { const theme = useTheme() - const { data, loading, pageInfo, fetchNextPage } = useFetchPaginatedData( - { queryHook: useOidcProvidersQuery, keyPath: ['oidcProviders'] }, - {} - ) + const { data, loading, pageInfo, setVirtualSlice, fetchNextPage } = + useFetchPaginatedData( + { queryHook: useOidcProvidersQuery, keyPath: ['oidcProviders'] }, + {} + ) const oidcProviders = useMemo( - () => mapExistingNodes(data?.oidcProviders), + () => mapExistingNodes(data?.oidcProviders) ?? [], [data?.oidcProviders] ) @@ -73,7 +98,47 @@ function EditPluralOIDCClients({ gap: theme.spacing.xlarge, }} > - {JSON.stringify(oidcProviders)} +
+ +
+ Add new Plural OIDC client +
+ + + + + ) +} diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index eb4680cbe..2fa9c0049 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -1,52 +1,18 @@ -import { - AppIcon, - Button, - ConsoleIcon, - Flex, - ListBoxItem, - Modal, - PlusIcon, - Select, - Table, -} from '@pluralsh/design-system' -import { FormFieldSC } from 'components/create-cluster/steps/ConfigureCloudInstanceStep' +import { Button, Modal, PlusIcon, Table } from '@pluralsh/design-system' import { ConsoleInstanceFragment, - ConsoleSize, OidcProviderFragment, - useGroupMembersQuery, - useNotificationsQuery, useOidcProvidersQuery, - useUpdateConsoleInstanceMutation, } from 'generated/graphql' import { useMemo, useState } from 'react' - -import { GqlError } from 'components/utils/Alert' - import { useTheme } from 'styled-components' - -import { firstLetterUppercase } from './CloudInstanceTableCols' import { DEFAULT_REACT_VIRTUAL_OPTIONS, useFetchPaginatedData, } from '../../../utils/useFetchPaginatedData' import { mapExistingNodes } from '../../../../utils/graphql' import { createColumnHelper } from '@tanstack/react-table' -import { CellWrap } from '../SelfHostedTableCols' - -const columnHelper = createColumnHelper() - -const columns = [ - columnHelper.accessor((row) => row, { - id: 'name', - enableSorting: true, - cell: ({ getValue }) => { - const oidcProvider = getValue() - - return
{oidcProvider.name}
- }, - }), -] +import { EditPluralOIDCClientModal } from './EditPluralOIDCClient' export function EditPluralOIDCClientsModal({ open, @@ -57,28 +23,55 @@ export function EditPluralOIDCClientsModal({ onClose: () => void instance: ConsoleInstanceFragment }) { + const theme = useTheme() + return ( - +
+ + +
) } +const columnHelper = createColumnHelper() + +const columns = [ + columnHelper.accessor((row) => row, { + id: 'name', + enableSorting: true, + cell: ({ getValue }) => { + const oidcProvider = getValue() + + return
{oidcProvider.name}
+ }, + }), +] + function EditPluralOIDCClients({ - onClose, instance, }: { - onClose: () => void instance: ConsoleInstanceFragment }) { const theme = useTheme() + const [createOpen, setCreateOpen] = useState(false) const { data, loading, pageInfo, setVirtualSlice, fetchNextPage } = useFetchPaginatedData( { queryHook: useOidcProvidersQuery, keyPath: ['oidcProviders'] }, @@ -93,59 +86,50 @@ function EditPluralOIDCClients({ return (
+
setCreateOpen(true)} css={{ - border: theme.borders['fill-two'], - borderRadius: theme.borderRadiuses.large, + ...theme.partials.text.body2Bold, + borderTop: theme.borders['fill-two'], + display: 'flex', + justifyContent: 'space-between', + padding: theme.spacing.medium, + + '&:hover': { + backgroundColor: theme.colors['fill-one-hover'], + cursor: 'pointer', + }, }} > -
-
- Add new Plural OIDC client -
+ Add new Plural OIDC client - + setCreateOpen(false)} + instance={instance} + /> ) } From 2aa2cc3286142e810241a33a8a987e57e3907fd2 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 17 Oct 2024 14:37:32 +0200 Subject: [PATCH 07/47] add oidc providers to cluster details --- www/src/components/cluster/Cluster.tsx | 6 ++++- .../plural-cloud/EditPluralOIDCClient.tsx | 10 +++++---- .../plural-cloud/EditPluralOIDCClients.tsx | 22 ++++++++++++++----- 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/www/src/components/cluster/Cluster.tsx b/www/src/components/cluster/Cluster.tsx index 15da3ff9e..bfce968ed 100644 --- a/www/src/components/cluster/Cluster.tsx +++ b/www/src/components/cluster/Cluster.tsx @@ -27,6 +27,7 @@ import ClusterMetadataPanel from './ClusterMetadataPanel' import { ClusterPromoteModal } from './ClusterPromoteModal' import { ClusterSidecar } from './ClusterSidecar' import { CollapsibleButton } from './misc' +import { EditPluralOIDCClients } from '../overview/clusters/plural-cloud/EditPluralOIDCClients' export function Cluster() { const [dependencyOpen, setDependencyOpen] = useState(false) @@ -177,7 +178,10 @@ export function Cluster() { id={cluster?.owner?.id} skip={!cluster.owner?.serviceAccount} > - + <> + + + diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index cd61fb328..62ab94e10 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -41,20 +41,22 @@ import { isEmpty } from 'lodash' export function EditPluralOIDCClientModal({ open, onClose, - instance, + instanceName, oidcProvider, + useModalOverlay = true, }: { open: boolean onClose: () => void - instance: ConsoleInstanceFragment + instanceName: string oidcProvider?: OidcProviderFragment + useModalOverlay?: boolean }) { return ( - + + +
Date: Fri, 18 Oct 2024 11:01:29 +0200 Subject: [PATCH 18/47] improve form --- .../plural-cloud/EditPluralOIDCClient.tsx | 70 ++++++++++++++++--- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index b95804ea8..3c077aa0f 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -1,14 +1,12 @@ -import { Button, FormField, Input, Modal } from '@pluralsh/design-system' +import { Button, Chip, FormField, Input, Modal } from '@pluralsh/design-system' import { InputMaybe, OidcProviderFragment } from 'generated/graphql' -import { useState } from 'react' +import { useCallback, useState } from 'react' import { useTheme } from 'styled-components' -import { isEmpty } from 'lodash' import { BindingInput, fetchGroups, fetchUsers, } from '../../../account/Typeaheads' -import { UrlsInput } from '../../../app/oidc/OIDC' export function EditPluralOIDCClientModal({ open, @@ -51,9 +49,23 @@ function EditPluralOIDCClient({ const [name, setName] = useState(provider?.name ?? '') const [description, setDescription] = useState(provider?.description ?? '') const [bindings, setBindings] = useState(provider?.bindings ?? []) + const [url, setUrl] = useState('') const [redirectUris, setRedirectUris] = useState[]>( provider?.redirectUris ?? [] ) + + const addUrl = useCallback(() => { + if (redirectUris.indexOf(url) > -1) return + + setRedirectUris([...redirectUris, url]) + setUrl('') + }, [url, setUrl, redirectUris, setRedirectUris]) + + const removeUrl = useCallback( + (url) => setRedirectUris(redirectUris.filter((item) => item !== url)), + [redirectUris, setRedirectUris] + ) + return (
- +
+
+ setUrl(value)} + /> + +
+
+ {redirectUris.map((url, i) => ( + removeUrl(url)} + > + {url} + + ))} +
+
From a9c57337f6196ee8862424c956ba355e17777072 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 11:14:28 +0200 Subject: [PATCH 19/47] add url prefix and suffix --- .../plural-cloud/EditPluralOIDCClient.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 3c077aa0f..22b75a815 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -8,6 +8,9 @@ import { fetchUsers, } from '../../../account/Typeaheads' +const urlPrefix = 'https://' +const urlSuffix = '/oauth2/callback' + export function EditPluralOIDCClientModal({ open, onClose, @@ -55,9 +58,11 @@ function EditPluralOIDCClient({ ) const addUrl = useCallback(() => { - if (redirectUris.indexOf(url) > -1) return + const u = `${urlPrefix}${url}${urlSuffix}` + + if (redirectUris.includes(u)) return - setRedirectUris([...redirectUris, url]) + setRedirectUris([...redirectUris, u]) setUrl('') }, [url, setUrl, redirectUris, setRedirectUris]) @@ -133,13 +138,11 @@ function EditPluralOIDCClient({ gap: theme.spacing.small, }} > -
+
setUrl(value)} From 8ee7080ff3cccabe3c5ceb262386c4e76cf884f8 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 12:03:01 +0200 Subject: [PATCH 20/47] add mutations --- www/src/components/app/oidc/OIDC.tsx | 4 +- .../plural-cloud/EditPluralOIDCClient.tsx | 46 +++++++++++++++++-- www/src/generated/graphql.ts | 20 +++++--- www/src/graph/oauth.graphql | 8 ++-- 4 files changed, 62 insertions(+), 16 deletions(-) diff --git a/www/src/components/app/oidc/OIDC.tsx b/www/src/components/app/oidc/OIDC.tsx index 3cd42dd40..fc224c493 100644 --- a/www/src/components/app/oidc/OIDC.tsx +++ b/www/src/components/app/oidc/OIDC.tsx @@ -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 }) => @@ -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, diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 22b75a815..7caa866e6 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -1,12 +1,20 @@ import { Button, Chip, FormField, Input, Modal } from '@pluralsh/design-system' -import { InputMaybe, OidcProviderFragment } from 'generated/graphql' -import { useCallback, useState } from 'react' +import { + InputMaybe, + OidcAttributes, + OidcAuthMethod, + OidcProviderFragment, + useCreateProviderMutation, + useUpdateProviderMutation, +} from 'generated/graphql' +import { useCallback, useMemo, useState } from 'react' import { useTheme } from 'styled-components' import { BindingInput, fetchGroups, fetchUsers, } from '../../../account/Typeaheads' +import { GqlError } from '../../../utils/Alert' const urlPrefix = 'https://' const urlSuffix = '/oauth2/callback' @@ -71,6 +79,29 @@ function EditPluralOIDCClient({ [redirectUris, setRedirectUris] ) + const attributes: OidcAttributes = useMemo( + () => ({ + name, + bindings, + redirectUris, + authMethod: OidcAuthMethod.Basic, // TODO + description, + }), + [name, description, bindings, description] + ) + + const onCompleted = useCallback(() => { + // TODO: How to show client ID and client secret? + onClose() + }, [onClose]) + + const [mutation, { loading, error }] = createMode + ? useCreateProviderMutation({ variables: { attributes }, onCompleted }) + : useUpdateProviderMutation({ + variables: { id: provider.id, attributes }, // FIXME + onCompleted, + }) + return (
+ {error && ( + + )}
diff --git a/www/src/generated/graphql.ts b/www/src/generated/graphql.ts index 8bdf1fd93..13e67254a 100644 --- a/www/src/generated/graphql.ts +++ b/www/src/generated/graphql.ts @@ -5627,7 +5627,7 @@ export type OidcProvidersQueryVariables = Exact<{ export type OidcProvidersQuery = { __typename?: 'RootQueryType', oidcProviders?: { __typename?: 'OidcProviderConnection', pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean }, edges?: Array<{ __typename?: 'OidcProviderEdge', node?: { __typename?: 'OidcProvider', id: string, name?: string | null, description?: string | null, clientId: string, authMethod: OidcAuthMethod, clientSecret: string, redirectUris?: Array | null, bindings?: Array<{ __typename?: 'OidcProviderBinding', id: string, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null } | null> | null, configuration?: { __typename?: 'OuathConfiguration', issuer?: string | null, authorizationEndpoint?: string | null, tokenEndpoint?: string | null, jwksUri?: string | null, userinfoEndpoint?: string | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null } | null } | null> | null } | null }; export type CreateProviderMutationVariables = Exact<{ - id: Scalars['ID']['input']; + installationId?: InputMaybe; attributes: OidcAttributes; }>; @@ -5635,7 +5635,8 @@ export type CreateProviderMutationVariables = Exact<{ export type CreateProviderMutation = { __typename?: 'RootMutationType', createOidcProvider?: { __typename?: 'OidcProvider', id: string, name?: string | null, description?: string | null, clientId: string, authMethod: OidcAuthMethod, clientSecret: string, redirectUris?: Array | null, bindings?: Array<{ __typename?: 'OidcProviderBinding', id: string, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null } | null> | null, configuration?: { __typename?: 'OuathConfiguration', issuer?: string | null, authorizationEndpoint?: string | null, tokenEndpoint?: string | null, jwksUri?: string | null, userinfoEndpoint?: string | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null } | null }; export type UpdateProviderMutationVariables = Exact<{ - id: Scalars['ID']['input']; + id?: InputMaybe; + installationId?: InputMaybe; attributes: OidcAttributes; }>; @@ -9085,8 +9086,8 @@ export type OidcProvidersLazyQueryHookResult = ReturnType; export type OidcProvidersQueryResult = Apollo.QueryResult; export const CreateProviderDocument = gql` - mutation CreateProvider($id: ID!, $attributes: OidcAttributes!) { - createOidcProvider(installationId: $id, attributes: $attributes) { + mutation CreateProvider($installationId: ID, $attributes: OidcAttributes!) { + createOidcProvider(installationId: $installationId, attributes: $attributes) { ...OIDCProvider } } @@ -9106,7 +9107,7 @@ export type CreateProviderMutationFn = Apollo.MutationFunction; export type CreateProviderMutationOptions = Apollo.BaseMutationOptions; export const UpdateProviderDocument = gql` - mutation UpdateProvider($id: ID!, $attributes: OidcAttributes!) { - updateOidcProvider(installationId: $id, attributes: $attributes) { + mutation UpdateProvider($id: ID, $installationId: ID, $attributes: OidcAttributes!) { + updateOidcProvider( + id: $id + installationId: $installationId + attributes: $attributes + ) { ...OIDCProvider } } @@ -9141,6 +9146,7 @@ export type UpdateProviderMutationFn = Apollo.MutationFunction Date: Fri, 18 Oct 2024 12:26:09 +0200 Subject: [PATCH 21/47] small adjustments --- .../clusters/plural-cloud/EditPluralOIDCClient.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 7caa866e6..6611be513 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -56,7 +56,6 @@ function EditPluralOIDCClient({ provider?: OidcProviderFragment }) { const theme = useTheme() - const createMode = !provider const [name, setName] = useState(provider?.name ?? '') const [description, setDescription] = useState(provider?.description ?? '') const [bindings, setBindings] = useState(provider?.bindings ?? []) @@ -95,10 +94,10 @@ function EditPluralOIDCClient({ onClose() }, [onClose]) - const [mutation, { loading, error }] = createMode + const [mutation, { loading, error }] = !provider ? useCreateProviderMutation({ variables: { attributes }, onCompleted }) : useUpdateProviderMutation({ - variables: { id: provider.id, attributes }, // FIXME + variables: { id: provider.id, attributes }, onCompleted, }) @@ -212,7 +211,7 @@ function EditPluralOIDCClient({ )} @@ -228,7 +227,7 @@ function EditPluralOIDCClient({ loading={loading} onClick={mutation} > - {createMode ? 'Create' : 'Save'} + {!provider ? 'Create' : 'Save'}
From a98e322133ea8a8cd6bf3e413d1463a6cacf73f7 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:03:52 +0200 Subject: [PATCH 22/47] update design system --- www/package.json | 2 +- www/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/www/package.json b/www/package.json index 4841400d1..939415ecb 100644 --- a/www/package.json +++ b/www/package.json @@ -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", diff --git a/www/yarn.lock b/www/yarn.lock index 36a6ddfe1..5cc18b513 100644 --- a/www/yarn.lock +++ b/www/yarn.lock @@ -4025,9 +4025,9 @@ __metadata: languageName: node linkType: hard -"@pluralsh/design-system@npm:3.75.0": - version: 3.75.0 - resolution: "@pluralsh/design-system@npm:3.75.0" +"@pluralsh/design-system@npm:3.75.1": + version: 3.75.1 + resolution: "@pluralsh/design-system@npm:3.75.1" dependencies: "@floating-ui/react-dom-interactions": 0.13.3 "@loomhq/loom-embed": 1.5.0 @@ -4073,7 +4073,7 @@ __metadata: react-dom: ">=18.3.1" react-transition-group: ">=4.4.5" styled-components: ">=6.1.13" - checksum: 5097f1502fa1fa5e0cffa7bcc572068cf856572542bfd22aab12524261b1a99571c4c20ab012719d50b34b3f27d01b3632227d9a70d9831fdfa91582139e6b72 + checksum: 21d5c62cd65666096d6065b5ff964ade97381183309fc4fc0b3cd256718e8f3d04624877f61574e6bd032876e028334eeb23b0e749bf9a5f9ed6fdce903b63a0 languageName: node linkType: hard @@ -20093,7 +20093,7 @@ __metadata: "@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 "@pluralsh/eslint-config-typescript": 2.5.150 "@pluralsh/stylelint-config": 2.0.10 "@react-spring/web": 9.7.3 From 5989a71e6a86231b41f87ac77165c57c6d7930c7 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:21:16 +0200 Subject: [PATCH 23/47] layout fixes --- www/src/components/cluster/Cluster.tsx | 6 +- .../plural-cloud/EditPluralOIDCClients.tsx | 61 ++++++++++++------- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/www/src/components/cluster/Cluster.tsx b/www/src/components/cluster/Cluster.tsx index 525376fde..6480ea2b0 100644 --- a/www/src/components/cluster/Cluster.tsx +++ b/www/src/components/cluster/Cluster.tsx @@ -72,10 +72,7 @@ export function Cluster() { } return ( - + -
+ justifyContent: 'center', + flexGrow: 1, + }} + > + ) : ( +
+ )}
setCreateOpen(true)} css={{ From ae142e1c785a44483cada5584daa865c982b5b90 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:30:56 +0200 Subject: [PATCH 24/47] layout fixes --- .../plural-cloud/EditPluralOIDCClients.tsx | 56 +++++++++++-------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 5f8a1ef8d..5061cba10 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -154,7 +154,8 @@ export function EditPluralOIDCClients({ display: 'flex', flexDirection: 'column', flexGrow: 1, - overflow: 'auto', // FIXME: Scroll only table. + position: 'relative', + overflow: 'auto', }} > {isEmpty(oidcProviders) ? ( @@ -167,39 +168,46 @@ export function EditPluralOIDCClients({ }} > ) : ( -
+
+
+ )}
setCreateOpen(true)} css={{ ...theme.partials.text.body2Bold, + backgroundColor: theme.colors['fill-two'], alignItems: 'center', borderTop: theme.borders['fill-two'], display: 'flex', justifyContent: 'space-between', padding: theme.spacing.small, + position: 'sticky', + bottom: 0, + right: 0, + left: 0, '&:hover': { backgroundColor: theme.colors['fill-one-hover'], From 8efe2912f186b304a371a907aad3d646de91c2b4 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:34:43 +0200 Subject: [PATCH 25/47] fix type problem --- .../plural-cloud/EditPluralOIDCClients.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 5061cba10..d69cd13ba 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -70,6 +70,11 @@ export function EditPluralOIDCClientsModal({ ) } +type TableMetaT = { + instanceName: string + useModalOverlay?: boolean +} + const columnHelper = createColumnHelper() const columns = [ @@ -105,6 +110,7 @@ const columns = [ meta: { gridTemplate: 'max-content' }, cell: function Cell({ row: { original: provider }, table }) { const [editOpen, setEditOpen] = useState(false) + const { instanceName, useModalOverlay } = table.options.meta as TableMetaT return ( <> @@ -116,8 +122,8 @@ const columns = [ setEditOpen(false)} - instanceName={table.options.meta?.instanceName} - useModalOverlay={table.options.meta?.useModalOverlay} + instanceName={instanceName} + useModalOverlay={useModalOverlay} provider={provider} /> @@ -179,7 +185,9 @@ export function EditPluralOIDCClients({ isFetchingNextPage={loading} onVirtualSliceChange={setVirtualSlice} reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} - reactTableOptions={{ meta: { instanceName, useModalOverlay } }} + reactTableOptions={{ + meta: { instanceName, useModalOverlay } as TableMetaT, + }} style={{ border: 'none', borderBottomLeftRadius: 0, From f641cea0cd6b1446aa3084f773a2fc30eec14be2 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:36:34 +0200 Subject: [PATCH 26/47] remove flex grow --- www/src/components/cluster/ClusterApps.tsx | 1 + .../plural-cloud/EditPluralOIDCClients.tsx | 54 +++++++++---------- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/www/src/components/cluster/ClusterApps.tsx b/www/src/components/cluster/ClusterApps.tsx index 30ab6179d..651bd5929 100644 --- a/www/src/components/cluster/ClusterApps.tsx +++ b/www/src/components/cluster/ClusterApps.tsx @@ -54,6 +54,7 @@ export function ClusterApps({ onChange={({ target: { value } }) => setSearch(value)} /> } + flexGrow={0} > {!isEmpty(apps) ? ( ) : ( -
-
- +
)}
setCreateOpen(true)} From 4ba3ef4f0ec76b2a6f4ddc816ebbabe4e20ddb46 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:47:01 +0200 Subject: [PATCH 27/47] fix list colors --- .../plural-cloud/EditPluralOIDCClient.tsx | 6 ++--- .../plural-cloud/EditPluralOIDCClients.tsx | 24 ++++++++++--------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 6611be513..67f7babad 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -24,19 +24,19 @@ export function EditPluralOIDCClientModal({ onClose, instanceName, provider, - useModalOverlay = true, + insideModal = false, }: { open: boolean onClose: () => void instanceName: string provider?: OidcProviderFragment - useModalOverlay?: boolean + insideModal?: boolean }) { return ( diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index ce739ff3c..0720aa5fb 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -55,7 +55,7 @@ export function EditPluralOIDCClientsModal({ >
) From aff4998318894829e195f6e78a2ff35f73f517f4 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:50:08 +0200 Subject: [PATCH 28/47] add refetch --- .../clusters/plural-cloud/EditPluralOIDCClient.tsx | 8 +++++++- .../clusters/plural-cloud/EditPluralOIDCClients.tsx | 9 ++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 67f7babad..7d7bd7fe8 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -25,12 +25,14 @@ export function EditPluralOIDCClientModal({ instanceName, provider, insideModal = false, + refetch, }: { open: boolean onClose: () => void instanceName: string provider?: OidcProviderFragment insideModal?: boolean + refetch: () => void }) { return ( ) @@ -51,9 +54,11 @@ export function EditPluralOIDCClientModal({ function EditPluralOIDCClient({ onClose, provider, + refetch, }: { onClose: () => void provider?: OidcProviderFragment + refetch: () => void }) { const theme = useTheme() const [name, setName] = useState(provider?.name ?? '') @@ -92,7 +97,8 @@ function EditPluralOIDCClient({ const onCompleted = useCallback(() => { // TODO: How to show client ID and client secret? onClose() - }, [onClose]) + refetch() + }, [onClose, refetch]) const [mutation, { loading, error }] = !provider ? useCreateProviderMutation({ variables: { attributes }, onCompleted }) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 0720aa5fb..15abaf527 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -73,6 +73,7 @@ export function EditPluralOIDCClientsModal({ type TableMetaT = { instanceName: string insideModal?: boolean + refetch: () => void } const columnHelper = createColumnHelper() @@ -110,7 +111,8 @@ const columns = [ meta: { gridTemplate: 'max-content' }, cell: function Cell({ row: { original: provider }, table }) { const [editOpen, setEditOpen] = useState(false) - const { instanceName, insideModal } = table.options.meta as TableMetaT + const { instanceName, insideModal, refetch } = table.options + .meta as TableMetaT return ( <> @@ -125,6 +127,7 @@ const columns = [ instanceName={instanceName} insideModal={insideModal} provider={provider} + refetch={refetch} /> ) @@ -141,7 +144,7 @@ export function EditPluralOIDCClients({ }) { const theme = useTheme() const [createOpen, setCreateOpen] = useState(false) - const { data, loading, pageInfo, setVirtualSlice, fetchNextPage } = + const { data, loading, pageInfo, setVirtualSlice, fetchNextPage, refetch } = useFetchPaginatedData( { queryHook: useOidcProvidersQuery, keyPath: ['oidcProviders'] }, {} @@ -183,7 +186,7 @@ export function EditPluralOIDCClients({ onVirtualSliceChange={setVirtualSlice} reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS} reactTableOptions={{ - meta: { instanceName, insideModal } as TableMetaT, + meta: { instanceName, insideModal, refetch } as TableMetaT, }} style={{ border: 'none', From 3988aeb525f836d960fd5cab59149334e85ed4ef Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 14:51:54 +0200 Subject: [PATCH 29/47] add missing arg --- .../overview/clusters/plural-cloud/EditPluralOIDCClients.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 15abaf527..0955200e1 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -232,6 +232,7 @@ export function EditPluralOIDCClients({ onClose={() => setCreateOpen(false)} instanceName={instanceName} insideModal={insideModal} + refetch={refetch} /> ) From bed3cf3bf7d3ec194d270ed844b856c399b4ea3d Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 15:23:00 +0200 Subject: [PATCH 30/47] memoize mutation --- .../plural-cloud/EditPluralOIDCClient.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 7d7bd7fe8..44296bd59 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -83,6 +83,11 @@ function EditPluralOIDCClient({ [redirectUris, setRedirectUris] ) + const m = useMemo( + () => (!provider ? useCreateProviderMutation : useUpdateProviderMutation), + [provider] + ) + const attributes: OidcAttributes = useMemo( () => ({ name, @@ -100,12 +105,10 @@ function EditPluralOIDCClient({ refetch() }, [onClose, refetch]) - const [mutation, { loading, error }] = !provider - ? useCreateProviderMutation({ variables: { attributes }, onCompleted }) - : useUpdateProviderMutation({ - variables: { id: provider.id, attributes }, - onCompleted, - }) + const [mutation, { loading, error }] = m({ + variables: { id: provider?.id, attributes }, + onCompleted, + }) return (
Date: Fri, 18 Oct 2024 15:36:58 +0200 Subject: [PATCH 31/47] fix attributes format --- .../plural-cloud/EditPluralOIDCClient.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 44296bd59..aca922e9d 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -4,6 +4,7 @@ import { OidcAttributes, OidcAuthMethod, OidcProviderFragment, + PolicyBinding, useCreateProviderMutation, useUpdateProviderMutation, } from 'generated/graphql' @@ -51,6 +52,16 @@ export function EditPluralOIDCClientModal({ ) } +export const bindingsToBindingAttributes = ( + bindings: Nullable[] +) => + bindings?.map((binding) => { + if (binding?.group?.id) return { groupId: binding.group.id } + if (binding?.user?.id) return { userId: binding.user.id } + + return null + }) + function EditPluralOIDCClient({ onClose, provider, @@ -91,7 +102,7 @@ function EditPluralOIDCClient({ const attributes: OidcAttributes = useMemo( () => ({ name, - bindings, + bindings: bindingsToBindingAttributes(bindings), redirectUris, authMethod: OidcAuthMethod.Basic, // TODO description, @@ -160,7 +171,7 @@ function EditPluralOIDCClient({ placeholder="Search for group" bindings={bindings .filter(({ group }) => !!group) - .map(({ group }) => group?.name)} + .map(({ group: { name } }) => name)} fetcher={fetchGroups} add={(group) => setBindings([...bindings, { group }])} remove={(name) => From 0df915e01545c2625a725364ced1ea5d80485a2c Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 16:06:31 +0200 Subject: [PATCH 32/47] add deletion --- .../plural-cloud/DeletePluralOIDCClient.tsx | 123 ++++++++++++++++++ .../plural-cloud/EditPluralOIDCClients.tsx | 27 +++- www/src/generated/graphql.ts | 41 ++++++ www/src/graph/oauth.graphql | 6 + 4 files changed, 195 insertions(+), 2 deletions(-) create mode 100644 www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx diff --git a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx new file mode 100644 index 000000000..92dae0e9b --- /dev/null +++ b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx @@ -0,0 +1,123 @@ +import { Button, Input, Modal } from '@pluralsh/design-system' +import { + OidcProviderFragment, + useDeleteProviderMutation, +} from 'generated/graphql' +import { useTheme } from 'styled-components' + +import { GqlError } from '../../../utils/Alert' +import { useState } from 'react' + +export function DeletePluralOIDCClientModal({ + open, + onClose, + provider, + insideModal = false, + refetch, +}: { + open: boolean + onClose: () => void + provider?: OidcProviderFragment + insideModal?: boolean + refetch: () => void +}) { + return ( + + + + ) +} + +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 ( +
+
+

+ Are you sure you want to delete this OIDC client? This action is not + reversible. +
+
+ Type " + + {provider?.name} + + " to confirm deletion. +

+ setConfirmText(e.target.value)} + /> +
+ {error && ( + + )} +
+ + +
+
+ ) +} diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 0955200e1..095fc49b6 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -6,6 +6,7 @@ import { PencilIcon, PlusIcon, Table, + TrashCanIcon, } from '@pluralsh/design-system' import { ConsoleInstanceFragment, @@ -23,6 +24,7 @@ import { createColumnHelper } from '@tanstack/react-table' import { EditPluralOIDCClientModal } from './EditPluralOIDCClient' import ImpersonateServiceAccount from '../../../utils/ImpersonateServiceAccount' import { isEmpty } from 'lodash' +import { DeletePluralOIDCClientModal } from './DeletePluralOIDCClient' export function EditPluralOIDCClientsModal({ open, @@ -110,17 +112,24 @@ const columns = [ id: 'actions', meta: { gridTemplate: 'max-content' }, cell: function Cell({ row: { original: provider }, table }) { + const theme = useTheme() const [editOpen, setEditOpen] = useState(false) + const [deleteOpen, setDeleteOpen] = useState(false) const { instanceName, insideModal, refetch } = table.options .meta as TableMetaT return ( - <> +
setEditOpen(true)} icon={} /> + setDeleteOpen(true)} + icon={} + /> setEditOpen(false)} @@ -129,7 +138,14 @@ const columns = [ provider={provider} refetch={refetch} /> - + setDeleteOpen(false)} + insideModal={insideModal} + provider={provider} + refetch={refetch} + /> +
) }, }), @@ -234,6 +250,13 @@ export function EditPluralOIDCClients({ insideModal={insideModal} refetch={refetch} /> + setCreateOpen(false)} + instanceName={instanceName} + insideModal={insideModal} + refetch={refetch} + />
) } diff --git a/www/src/generated/graphql.ts b/www/src/generated/graphql.ts index 13e67254a..65d978673 100644 --- a/www/src/generated/graphql.ts +++ b/www/src/generated/graphql.ts @@ -5643,6 +5643,13 @@ export type UpdateProviderMutationVariables = Exact<{ export type UpdateProviderMutation = { __typename?: 'RootMutationType', updateOidcProvider?: { __typename?: 'OidcProvider', id: string, name?: string | null, description?: string | null, clientId: string, authMethod: OidcAuthMethod, clientSecret: string, redirectUris?: Array | null, bindings?: Array<{ __typename?: 'OidcProviderBinding', id: string, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null } | null> | null, configuration?: { __typename?: 'OuathConfiguration', issuer?: string | null, authorizationEndpoint?: string | null, tokenEndpoint?: string | null, jwksUri?: string | null, userinfoEndpoint?: string | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null } | null }; +export type DeleteProviderMutationVariables = Exact<{ + id: Scalars['ID']['input']; +}>; + + +export type DeleteProviderMutation = { __typename?: 'RootMutationType', deleteOidcProvider?: { __typename?: 'OidcProvider', id: string, name?: string | null, description?: string | null, clientId: string, authMethod: OidcAuthMethod, clientSecret: string, redirectUris?: Array | null, bindings?: Array<{ __typename?: 'OidcProviderBinding', id: string, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null, group?: { __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null } | null> | null, configuration?: { __typename?: 'OuathConfiguration', issuer?: string | null, authorizationEndpoint?: string | null, tokenEndpoint?: string | null, jwksUri?: string | null, userinfoEndpoint?: string | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null } | null }; + export type LimitFragment = { __typename?: 'Limit', dimension: string, quantity: number }; export type LineItemFragment = { __typename?: 'LineItem', name: string, dimension: string, cost: number, period?: string | null, type?: PlanType | null }; @@ -9158,6 +9165,39 @@ export function useUpdateProviderMutation(baseOptions?: Apollo.MutationHookOptio export type UpdateProviderMutationHookResult = ReturnType; export type UpdateProviderMutationResult = Apollo.MutationResult; export type UpdateProviderMutationOptions = Apollo.BaseMutationOptions; +export const DeleteProviderDocument = gql` + mutation DeleteProvider($id: ID!) { + deleteOidcProvider(id: $id) { + ...OIDCProvider + } +} + ${OidcProviderFragmentDoc}`; +export type DeleteProviderMutationFn = Apollo.MutationFunction; + +/** + * __useDeleteProviderMutation__ + * + * To run a mutation, you first call `useDeleteProviderMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useDeleteProviderMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [deleteProviderMutation, { data, loading, error }] = useDeleteProviderMutation({ + * variables: { + * id: // value for 'id' + * }, + * }); + */ +export function useDeleteProviderMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(DeleteProviderDocument, options); + } +export type DeleteProviderMutationHookResult = ReturnType; +export type DeleteProviderMutationResult = Apollo.MutationResult; +export type DeleteProviderMutationOptions = Apollo.BaseMutationOptions; export const SubscriptionDocument = gql` query Subscription { account { @@ -11988,6 +12028,7 @@ export const namedOperations = { Consent: 'Consent', CreateProvider: 'CreateProvider', UpdateProvider: 'UpdateProvider', + DeleteProvider: 'DeleteProvider', UpdateAccountBilling: 'UpdateAccountBilling', CreatePlatformSubscription: 'CreatePlatformSubscription', DowngradeToFreePlanMutation: 'DowngradeToFreePlanMutation', diff --git a/www/src/graph/oauth.graphql b/www/src/graph/oauth.graphql index aed640bc3..84be38685 100644 --- a/www/src/graph/oauth.graphql +++ b/www/src/graph/oauth.graphql @@ -81,3 +81,9 @@ mutation UpdateProvider($id: ID, $installationId: ID, $attributes: OidcAttribute ...OIDCProvider } } + +mutation DeleteProvider($id: ID!) { + deleteOidcProvider(id: $id) { + ...OIDCProvider + } +} \ No newline at end of file From afacb674534df38f90c86564add55ea1e9aed67e Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 16:07:28 +0200 Subject: [PATCH 33/47] update message --- .../overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx index 92dae0e9b..ca895ce87 100644 --- a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx @@ -85,7 +85,7 @@ function DeletePluralOIDCClient({ " to confirm deletion.

setConfirmText(e.target.value)} /> From faca83bf84744d5236e6a9282dd3cc4c9c16a35a Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Fri, 18 Oct 2024 16:39:54 +0200 Subject: [PATCH 34/47] add client id and secret --- .../plural-cloud/EditPluralOIDCClient.tsx | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index aca922e9d..61cc1d214 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -1,4 +1,12 @@ -import { Button, Chip, FormField, Input, Modal } from '@pluralsh/design-system' +import { + Button, + Chip, + Codeline, + Divider, + FormField, + Input, + Modal, +} from '@pluralsh/design-system' import { InputMaybe, OidcAttributes, @@ -116,7 +124,7 @@ function EditPluralOIDCClient({ refetch() }, [onClose, refetch]) - const [mutation, { loading, error }] = m({ + const [mutation, { data, loading, error }] = m({ variables: { id: provider?.id, attributes }, onCompleted, }) @@ -136,6 +144,32 @@ function EditPluralOIDCClient({ gap: theme.spacing.small, }} > + + + {provider?.clientId} + + + + + {provider?.clientSecret} + + + Date: Fri, 18 Oct 2024 16:42:37 +0200 Subject: [PATCH 35/47] fix scrolling area --- .../overview/clusters/plural-cloud/EditPluralOIDCClient.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 61cc1d214..715bfbd1a 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -135,6 +135,7 @@ function EditPluralOIDCClient({ display: 'flex', flexDirection: 'column', gap: theme.spacing.xlarge, + overflow: 'hidden', }} >
From ba604742527d93902bea49d14729df3fd3c75763 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 09:07:09 +0200 Subject: [PATCH 36/47] add loading indicator --- .../overview/clusters/plural-cloud/EditPluralOIDCClients.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 095fc49b6..a94c5812b 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -2,6 +2,7 @@ import { Button, EmptyState, IconFrame, + LoopingLogo, Modal, PencilIcon, PlusIcon, @@ -171,6 +172,8 @@ export function EditPluralOIDCClients({ [data?.oidcProviders] ) + if (!data) return + return (
Date: Mon, 21 Oct 2024 09:07:30 +0200 Subject: [PATCH 37/47] add loading indicator --- .../overview/clusters/plural-cloud/EditPluralOIDCClients.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index a94c5812b..3fceadb97 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -172,7 +172,7 @@ export function EditPluralOIDCClients({ [data?.oidcProviders] ) - if (!data) return + if (loading && !data) return return (
Date: Mon, 21 Oct 2024 09:30:01 +0200 Subject: [PATCH 38/47] add auth method input --- .../plural-cloud/EditPluralOIDCClient.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 715bfbd1a..2dc5706d5 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -5,7 +5,9 @@ import { Divider, FormField, Input, + ListBoxItem, Modal, + Select, } from '@pluralsh/design-system' import { InputMaybe, @@ -87,6 +89,9 @@ function EditPluralOIDCClient({ const [redirectUris, setRedirectUris] = useState[]>( provider?.redirectUris ?? [] ) + const [authMethod, setAuthMethod] = useState( + provider?.authMethod ?? OidcAuthMethod.Basic + ) const addUrl = useCallback(() => { const u = `${urlPrefix}${url}${urlSuffix}` @@ -112,7 +117,7 @@ function EditPluralOIDCClient({ name, bindings: bindingsToBindingAttributes(bindings), redirectUris, - authMethod: OidcAuthMethod.Basic, // TODO + authMethod, description, }), [name, description, bindings, description] @@ -216,6 +221,23 @@ function EditPluralOIDCClient({ ) } /> + + +
Date: Mon, 21 Oct 2024 09:31:18 +0200 Subject: [PATCH 39/47] make auth method required --- .../overview/clusters/plural-cloud/EditPluralOIDCClient.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 2dc5706d5..6a1415a46 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -221,7 +221,10 @@ function EditPluralOIDCClient({ ) } /> - + setName(value)} - /> - - - setDescription(value)} - /> - - !!user) - .map(({ user }) => user?.email)} - fetcher={fetchUsers} - add={(user) => setBindings([...bindings, { user }])} - remove={(email) => - setBindings( - bindings.filter(({ user }) => !user || user.email !== email) - ) - } - /> - !!group) - .map(({ group: { name } }) => name)} - fetcher={fetchGroups} - add={(group) => setBindings([...bindings, { group }])} - remove={(name) => - setBindings( - bindings.filter(({ group }) => !group || group.name !== name) - ) - } - /> - - - - -
-
+ setUrl(value)} + autoFocus + value={name} + onChange={({ target: { value } }) => setName(value)} /> - -
-
+ + setDescription(value)} + /> + + !!user) + .map(({ user }) => user?.email)} + fetcher={fetchUsers} + add={(user) => setBindings([...bindings, { user }])} + remove={(email) => + setBindings( + bindings.filter(({ user }) => !user || user.email !== email) + ) + } + /> + !!group) + .map(({ group: { name } }) => name)} + fetcher={fetchGroups} + add={(group) => setBindings([...bindings, { group }])} + remove={(name) => + setBindings( + bindings.filter(({ group }) => !group || group.name !== name) + ) + } + /> + - {redirectUris.map((url, i) => ( - removeUrl(url)} + + + +
+
+ setUrl(value)} + /> + +
+
- {url} - - ))} -
-
- + {redirectUris.map((url, i) => ( + removeUrl(url)} + > + {url} + + ))} +
+
+ + + )}
{error && ( )} -
- - +
+ {!data ? ( + <> + +
+ + + ) : ( + + )}
) From 8f3e43d67c0ffb238fb99fa3cc0ee68f365f9f74 Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 11:59:13 +0200 Subject: [PATCH 43/47] show client id and secret after creation --- .../clusters/plural-cloud/EditPluralOIDCClient.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index f84502dfe..72df25f5b 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -184,6 +184,11 @@ function EditPluralOIDCClient({ onCompleted, }) + const newProvider: Nullable = + (data as any)?.updateOidcProvider || (data as any)?.createOidcProvider + const clientId = provider?.clientId ?? newProvider?.clientId + const clientSecret = provider?.clientSecret ?? newProvider?.clientSecret + return (
- {provider?.clientId} + {clientId} - {provider?.clientSecret} + {clientSecret} {!data && ( From ca7bd46d315d9a13bb40beb8b49aa0d666f1817c Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 12:15:44 +0200 Subject: [PATCH 44/47] refactor --- .../plural-cloud/EditPluralOIDCClient.tsx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 72df25f5b..8bec27126 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -152,11 +152,6 @@ function EditPluralOIDCClient({ [redirectUris, setRedirectUris] ) - const m = useMemo( - () => (createMode ? useCreateProviderMutation : useUpdateProviderMutation), - [provider] - ) - const attributes: OidcAttributes = useMemo( () => ({ name, @@ -179,15 +174,21 @@ function EditPluralOIDCClient({ } }, [onClose, refetch]) - const [mutation, { data, loading, error }] = m({ - variables: { id: provider?.id, attributes }, - onCompleted, - }) + const [create, { data, loading: creating, error: createError }] = + useCreateProviderMutation({ + variables: { attributes }, + onCompleted, + }) + + const [update, { loading: updating, error: updateError }] = + useUpdateProviderMutation({ + variables: { id: provider?.id, attributes }, + onCompleted, + }) - const newProvider: Nullable = - (data as any)?.updateOidcProvider || (data as any)?.createOidcProvider - const clientId = provider?.clientId ?? newProvider?.clientId - const clientSecret = provider?.clientSecret ?? newProvider?.clientSecret + const clientId = provider?.clientId ?? data?.createOidcProvider?.clientId + const clientSecret = + provider?.clientSecret ?? data?.createOidcProvider?.clientSecret return (
)}
- {error && ( + {createError && ( + + )} + {updateError && ( )}
From edf4afcc5cc65cf6ee6962977ae5f0cff8ae5d4b Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 12:21:54 +0200 Subject: [PATCH 45/47] remove duplicated element --- .../clusters/plural-cloud/EditPluralOIDCClients.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index 3fceadb97..f85da0c99 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -253,13 +253,6 @@ export function EditPluralOIDCClients({ insideModal={insideModal} refetch={refetch} /> - setCreateOpen(false)} - instanceName={instanceName} - insideModal={insideModal} - refetch={refetch} - />
) } From a0cc62d3b86f1818e1cc47ae8cf54f4008d874ac Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 13:11:37 +0200 Subject: [PATCH 46/47] revert overlay --- .../clusters/plural-cloud/DeletePluralOIDCClient.tsx | 3 --- .../clusters/plural-cloud/EditPluralOIDCClient.tsx | 3 --- .../clusters/plural-cloud/EditPluralOIDCClients.tsx | 7 +------ 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx index ca895ce87..1e2b752c9 100644 --- a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx @@ -12,20 +12,17 @@ export function DeletePluralOIDCClientModal({ open, onClose, provider, - insideModal = false, refetch, }: { open: boolean onClose: () => void provider?: OidcProviderFragment - insideModal?: boolean refetch: () => void }) { return ( diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx index 8bec27126..2f1cb62fc 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx @@ -36,14 +36,12 @@ export function EditPluralOIDCClientModal({ onClose, instanceName, provider, - insideModal = false, refetch, }: { open: boolean onClose: () => void instanceName: string provider?: OidcProviderFragment - insideModal?: boolean refetch: () => void }) { const theme = useTheme() @@ -55,7 +53,6 @@ export function EditPluralOIDCClientModal({ diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx index f85da0c99..9f95ec4e6 100644 --- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx +++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx @@ -75,7 +75,6 @@ export function EditPluralOIDCClientsModal({ type TableMetaT = { instanceName: string - insideModal?: boolean refetch: () => void } @@ -116,8 +115,7 @@ const columns = [ const theme = useTheme() const [editOpen, setEditOpen] = useState(false) const [deleteOpen, setDeleteOpen] = useState(false) - const { instanceName, insideModal, refetch } = table.options - .meta as TableMetaT + const { instanceName, refetch } = table.options.meta as TableMetaT return (
@@ -135,14 +133,12 @@ const columns = [ open={editOpen} onClose={() => setEditOpen(false)} instanceName={instanceName} - insideModal={insideModal} provider={provider} refetch={refetch} /> setDeleteOpen(false)} - insideModal={insideModal} provider={provider} refetch={refetch} /> @@ -250,7 +246,6 @@ export function EditPluralOIDCClients({ open={createOpen} onClose={() => setCreateOpen(false)} instanceName={instanceName} - insideModal={insideModal} refetch={refetch} />
From 07d7c27d2271fa1334dc074a6d1ec87cd13ef4cb Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Mon, 21 Oct 2024 13:14:55 +0200 Subject: [PATCH 47/47] lint --- www/src/components/cluster/Cluster.tsx | 6 ++-- .../plural-cloud/CloudInstanceTableCols.tsx | 2 +- .../plural-cloud/DeletePluralOIDCClient.tsx | 7 +++-- .../plural-cloud/EditPluralOIDCClient.tsx | 29 ++++++++++--------- .../plural-cloud/EditPluralOIDCClients.tsx | 22 +++++++++----- www/src/graph/oauth.graphql | 14 +++++++-- 6 files changed, 49 insertions(+), 31 deletions(-) diff --git a/www/src/components/cluster/Cluster.tsx b/www/src/components/cluster/Cluster.tsx index 6480ea2b0..f8dd2e670 100644 --- a/www/src/components/cluster/Cluster.tsx +++ b/www/src/components/cluster/Cluster.tsx @@ -13,6 +13,8 @@ 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' @@ -20,6 +22,8 @@ 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' @@ -27,8 +31,6 @@ import ClusterMetadataPanel from './ClusterMetadataPanel' import { ClusterPromoteModal } from './ClusterPromoteModal' import { ClusterSidecar } from './ClusterSidecar' import { CollapsibleButton } from './misc' -import { EditPluralOIDCClients } from '../overview/clusters/plural-cloud/EditPluralOIDCClients' -import { useTheme } from 'styled-components' export function Cluster() { const theme = useTheme() diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx index 0daa2e3c2..598bd6aa0 100644 --- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx +++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx @@ -221,7 +221,7 @@ const ColActions = columnHelper.accessor((instance) => instance, { key={MenuItemKey.Delete} destructive label="Delete instance" - leftContent={} + leftContent={} /> {/* Modals */} diff --git a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx index 1e2b752c9..634cbccd8 100644 --- a/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx +++ b/www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx @@ -5,9 +5,10 @@ import { } from 'generated/graphql' import { useTheme } from 'styled-components' -import { GqlError } from '../../../utils/Alert' import { useState } from 'react' +import { GqlError } from '../../../utils/Alert' + export function DeletePluralOIDCClientModal({ open, onClose, @@ -23,7 +24,7 @@ export function DeletePluralOIDCClientModal({ )}
{createToastVisible && ( The Client ID and Client secret have been generated. @@ -86,10 +87,10 @@ export function EditPluralOIDCClientModal({ {editToastVisible && ( OIDC client successfully saved. @@ -157,7 +158,7 @@ function EditPluralOIDCClient({ authMethod, description, }), - [name, description, authMethod, bindings, description] + [name, description, authMethod, bindings, redirectUris] ) const onCompleted = useCallback(() => { @@ -169,7 +170,7 @@ function EditPluralOIDCClient({ onEdit() onClose() } - }, [onClose, refetch]) + }, [onClose, onCreate, onEdit, refetch]) const [create, { data, loading: creating, error: createError }] = useCreateProviderMutation({ @@ -285,12 +286,12 @@ function EditPluralOIDCClient({ > @@ -347,13 +348,13 @@ function EditPluralOIDCClient({ {createError && ( )} {updateError && ( )}
{provider.name} @@ -127,7 +133,7 @@ const columns = [ setDeleteOpen(true)} - icon={} + icon={} /> {isEmpty(oidcProviders) ? ( + /> ) : (
Add new Plural OIDC client - } /> + } />