Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement: OIDC styling improvements #1383

Merged
merged 3 commits into from
Oct 22, 2024
Merged

enhancement: OIDC styling improvements #1383

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5329f68
update empty state styling
maciaszczykm Oct 21, 2024
510cdf4
update form styling
maciaszczykm Oct 21, 2024
495897b
lint
maciaszczykm Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
354 changes: 181 additions & 173 deletions www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
Chip,
Codeline,
Divider,
FillLevelProvider,
FormField,
Input,
ListBoxItem,
Expand Down Expand Up @@ -170,7 +171,7 @@
onEdit()
onClose()
}
}, [onClose, onCreate, onEdit, refetch])

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

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useCallback has a missing dependency: 'createMode'. Either include it or remove the dependency array

const [create, { data, loading: creating, error: createError }] =
useCreateProviderMutation({
Expand All @@ -189,202 +190,209 @@
provider?.clientSecret ?? data?.createOidcProvider?.clientSecret

return (
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.xlarge,
overflow: 'hidden',
}}
>
<FillLevelProvider value={0}>
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.small,
overflow: 'auto',
gap: theme.spacing.xlarge,
overflow: 'hidden',
}}
>
<FormField label="Client ID">
<Codeline
displayText={
clientId ?? 'A client ID will be generated upon creation'
}
>
{clientId}
</Codeline>
</FormField>
<FormField label="Client secret">
<Codeline
displayText={
clientSecret
? '•••••••••••••••••••••'
: 'A client secret will be generated upon creation'
}
>
{clientSecret}
</Codeline>
</FormField>
{!data && (
<>
<Divider
backgroundColor="border-fill-two"
marginTop="medium"
marginBottom="medium"
/>
<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>
<BindingInput
label="User bindings"
placeholder="Search for user"
bindings={bindings
.filter(({ user }) => !!user)
.map(({ user }) => user?.email)}
fetcher={fetchUsers}
add={(user) => setBindings([...bindings, { user }])}
remove={(email) =>
setBindings(
bindings.filter(({ user }) => !user || user.email !== email)
)
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.small,
overflow: 'auto',
}}
>
<FormField label="Client ID">
<Codeline
backgroundColor={'fill-two'}

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

View workflow job for this annotation

GitHub Actions / Lint 

Curly braces are unnecessary here
displayText={
clientId ?? 'A client ID will be generated upon creation'
}
/>
<BindingInput
label="Group bindings"
placeholder="Search for group"
bindings={bindings
.filter(({ group }) => !!group)
.map(({ group: { name } }) => name)}
fetcher={fetchGroups}
add={(group) => setBindings([...bindings, { group }])}
remove={(name) =>
setBindings(
bindings.filter(({ group }) => !group || group.name !== name)
)
>
{clientId}
</Codeline>
</FormField>
<FormField label="Client secret">
<Codeline
backgroundColor={'fill-two'}

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

View workflow job for this annotation

GitHub Actions / Lint 

Curly braces are unnecessary here
displayText={
clientSecret
? '•••••••••••••••••••••'
: 'A client secret will be generated upon creation'
}
/>
<FormField
label="Auth method"
required
>
<Select
selectedKey={authMethod}
onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
{clientSecret}
</Codeline>
</FormField>
{!data && (
<>
<Divider
backgroundColor="border-fill-two"
marginTop="medium"
marginBottom="medium"
/>
<FormField
label="Name"
required
>
<ListBoxItem
key={OidcAuthMethod.Basic}
label="Basic"
textValue={OidcAuthMethod.Basic}
<Input
autoFocus
value={name}
onChange={({ target: { value } }) => setName(value)}
/>
<ListBoxItem
key={OidcAuthMethod.Post}
label="Post"
textValue={OidcAuthMethod.Post}
</FormField>
<FormField label="Description">
<Input
value={description}
onChange={({ target: { value } }) => setDescription(value)}
/>
</Select>
</FormField>
<FormField label="Redirect URIs">
<div
css={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing.small,
}}
</FormField>
<BindingInput
label="User bindings"
placeholder="Search for user"
bindings={bindings
.filter(({ user }) => !!user)
.map(({ user }) => user?.email)}
fetcher={fetchUsers}
add={(user) => setBindings([...bindings, { user }])}
remove={(email) =>
setBindings(
bindings.filter(({ user }) => !user || user.email !== email)
)
}
/>
<BindingInput
label="Group bindings"
placeholder="Search for group"
bindings={bindings
.filter(({ group }) => !!group)
.map(({ group: { name } }) => name)}
fetcher={fetchGroups}
add={(group) => setBindings([...bindings, { group }])}
remove={(name) =>
setBindings(
bindings.filter(
({ group }) => !group || group.name !== name
)
)
}
/>
<FormField
label="Auth method"
required
>
<div css={{ display: 'flex' }}>
<Input
value={url}
prefix={urlPrefix}
suffix={urlSuffix}
width="100%"
placeholder="Enter a redirect URI"
onChange={({ target: { value } }) => setUrl(value)}
<Select
selectedKey={authMethod}
onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
>
<ListBoxItem
key={OidcAuthMethod.Basic}
label="Basic"
textValue={OidcAuthMethod.Basic}
/>
<Button
onClick={addUrl}
secondary
marginLeft="small"
>
Add
</Button>
</div>
<ListBoxItem
key={OidcAuthMethod.Post}
label="Post"
textValue={OidcAuthMethod.Post}
/>
</Select>
</FormField>
<FormField label="Redirect URIs">
<div
css={{
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing.xxsmall,
flexDirection: 'column',
gap: theme.spacing.small,
}}
>
{redirectUris.map((url, i) => (
<Chip
key={i}
size="small"
clickable
closeButton
onClick={() => removeUrl(url)}
<div css={{ display: 'flex' }}>
<Input
value={url}
prefix={urlPrefix}
suffix={urlSuffix}
width="100%"
placeholder="Enter a redirect URI"
onChange={({ target: { value } }) => setUrl(value)}
/>
<Button
onClick={addUrl}
secondary
marginLeft="small"
>
{url}
</Chip>
))}
Add
</Button>
</div>
<div
css={{
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing.xxsmall,
}}
>
{redirectUris.map((url, i) => (
<Chip
key={i}
size="small"
clickable
closeButton
onClick={() => removeUrl(url)}
fillLevel={2}
>
{url}
</Chip>
))}
</div>
</div>
</div>
</FormField>
</>
</FormField>
</>
)}
</div>
{createError && (
<GqlError
error={createError}
header="Create OIDC provider request failed"
/>
)}
</div>
{createError && (
<GqlError
error={createError}
header="Create OIDC provider request failed"
/>
)}
{updateError && (
<GqlError
error={updateError}
header="Update OIDC provider request failed"
/>
)}
<div
css={{
display: 'flex',
justifyContent: 'end',
gap: theme.spacing.small,
}}
>
{!data ? (
<>
<Button
secondary
onClick={onClose}
>
Back to Plural OIDC clients
</Button>
<div css={{ flexGrow: 1 }} />
<Button
disabled={!name || !authMethod}
loading={creating || updating}
onClick={() => (createMode ? create() : update())}
>
{createMode ? 'Create' : 'Save'}
</Button>
</>
) : (
<Button onClick={onClose}>Close</Button>
{updateError && (
<GqlError
error={updateError}
header="Update OIDC provider request failed"
/>
)}
<div
css={{
display: 'flex',
justifyContent: 'end',
gap: theme.spacing.small,
}}
>
{!data ? (
<>
<Button
secondary
onClick={onClose}
>
Back to Plural OIDC clients
</Button>
<div css={{ flexGrow: 1 }} />
<Button
disabled={!name || !authMethod}
loading={creating || updating}
onClick={() => (createMode ? create() : update())}
>
{createMode ? 'Create' : 'Save'}
</Button>
</>
) : (
<Button onClick={onClose}>Close</Button>
)}
</div>
</div>
</div>
</FillLevelProvider>
)
}
Loading
Loading