Skip to content

Commit

Permalink
add create/edit modal
Browse files Browse the repository at this point in the history
  • Loading branch information
maciaszczykm committed Oct 17, 2024
1 parent 1a10995 commit a151447
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 88 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import {
AppIcon,

Check failure on line 2 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'AppIcon' is defined but never used. Allowed unused vars must match /^_/u
Button,
ConsoleIcon,

Check failure on line 4 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'ConsoleIcon' is defined but never used. Allowed unused vars must match /^_/u
Flex,

Check failure on line 5 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'Flex' is defined but never used. Allowed unused vars must match /^_/u
FormField,
Input,
ListBoxItem,

Check failure on line 8 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'ListBoxItem' is defined but never used. Allowed unused vars must match /^_/u
MailIcon,

Check failure on line 9 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'MailIcon' is defined but never used. Allowed unused vars must match /^_/u
Modal,
PlusIcon,

Check failure on line 11 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'PlusIcon' is defined but never used. Allowed unused vars must match /^_/u
Select,

Check failure on line 12 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'Select' is defined but never used. Allowed unused vars must match /^_/u
Table,

Check failure on line 13 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'Table' is defined but never used. Allowed unused vars must match /^_/u
} from '@pluralsh/design-system'
import { FormFieldSC } from 'components/create-cluster/steps/ConfigureCloudInstanceStep'

Check failure on line 15 in www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

View workflow job for this annotation

GitHub Actions / Lint

'FormFieldSC' is defined but never used. Allowed unused vars must match /^_/u
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'
import { isEmpty } from 'lodash'

export function EditPluralOIDCClientModal({
open,
onClose,
instance,
oidcProvider,
}: {
open: boolean
onClose: () => void
instance: ConsoleInstanceFragment
oidcProvider?: OidcProviderFragment
}) {
return (
<Modal
open={open}
onClose={onClose}
overlayStyles={{ background: 'none' }} // TODO
header={`${instance.name} - Edit Plural OIDC clients`}
>
<EditPluralOIDCClient
onClose={onClose}
oidcProvider={oidcProvider}
/>
</Modal>
)
}

function EditPluralOIDCClient({
onClose,
oidcProvider,
}: {
onClose: () => void
oidcProvider?: OidcProviderFragment
}) {
const theme = useTheme()
const createMode = isEmpty(oidcProvider)
const [name, setName] = useState(oidcProvider?.name ?? '')
const [description, setDescription] = useState(oidcProvider?.name ?? '')

return (
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xlarge,
}}
>
<div>
<FormField
label="Name"
required
>
<Input
autoFocus
value={name}
onChange={({ target: { value } }) => setName(value)}
/>
</FormField>
<FormField label="Description">
<Input
value={description}
onChange={({ target: { value } }) => setDescription(value)}
/>
</FormField>
</div>
<div css={{ display: 'flex', justifyContent: 'space-between' }}>
<Button
secondary
onClick={onClose}
>
Back to Plural OIDC clients
</Button>
<Button
secondary
onClick={onClose}
>
{createMode ? 'Create' : 'Save'}
</Button>
</div>
</div>
)
}
Original file line number Diff line number Diff line change
@@ -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<OidcProviderFragment>()

const columns = [
columnHelper.accessor((row) => row, {
id: 'name',
enableSorting: true,
cell: ({ getValue }) => {
const oidcProvider = getValue()

return <div>{oidcProvider.name}</div>
},
}),
]
import { EditPluralOIDCClientModal } from './EditPluralOIDCClient'

export function EditPluralOIDCClientsModal({
open,
Expand All @@ -57,28 +23,55 @@ export function EditPluralOIDCClientsModal({
onClose: () => void
instance: ConsoleInstanceFragment
}) {
const theme = useTheme()

return (
<Modal
open={open}
onClose={onClose}
header={`${instance.name} - Edit Plural OIDC clients`}
>
<EditPluralOIDCClients
onClose={onClose}
instance={instance}
/>
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xlarge,
}}
>
<EditPluralOIDCClients instance={instance} />
<Button
secondary
onClick={onClose}
css={{ alignSelf: 'flex-end' }}
>
Cancel
</Button>
</div>
</Modal>
)
}

const columnHelper = createColumnHelper<OidcProviderFragment>()

const columns = [
columnHelper.accessor((row) => row, {
id: 'name',
enableSorting: true,
cell: ({ getValue }) => {
const oidcProvider = getValue()

return <div>{oidcProvider.name}</div>
},
}),
]

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'] },
Expand All @@ -93,59 +86,50 @@ function EditPluralOIDCClients({
return (
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xlarge,
border: theme.borders['fill-two'],
borderRadius: theme.borderRadiuses.large,
}}
>
<Table
virtualizeRows
rowBg="raised"
data={oidcProviders}
columns={columns}
hideHeader
hasNextPage={pageInfo?.hasNextPage}
fetchNextPage={fetchNextPage}
isFetchingNextPage={loading}
onVirtualSliceChange={setVirtualSlice}
reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
style={{
border: 'none',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
height: '100%',
}}
/>
<div
onClick={() => 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',
},
}}
>
<Table
virtualizeRows
rowBg="raised"
data={oidcProviders}
columns={columns}
hideHeader
hasNextPage={pageInfo?.hasNextPage}
fetchNextPage={fetchNextPage}
isFetchingNextPage={loading}
onVirtualSliceChange={setVirtualSlice}
reactVirtualOptions={DEFAULT_REACT_VIRTUAL_OPTIONS}
style={{
border: 'none',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
height: '100%',
}}
/>
<div
css={{
...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 <PlusIcon color={'icon-light'} />
</div>
Add new Plural OIDC client <PlusIcon color={'icon-light'} />
</div>
<Button
secondary
onClick={onClose}
css={{ alignSelf: 'flex-end' }}
>
Cancel
</Button>
<EditPluralOIDCClientModal
open={createOpen}
onClose={() => setCreateOpen(false)}
instance={instance}
/>
</div>
)
}

0 comments on commit a151447

Please sign in to comment.