Skip to content

Commit 85b684c

Browse files
maciaszczykmmaciaszczykm
authored
enhancement: OIDC styling improvements (#1383)
1 parent f93ca0b commit 85b684c

File tree

2 files changed

+184
-174
lines changed

2 files changed

+184
-174
lines changed

‎www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx

+181-173
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Chip,
55
Codeline,
66
Divider,
7+
FillLevelProvider,
78
FormField,
89
Input,
910
ListBoxItem,
@@ -189,202 +190,209 @@ function EditPluralOIDCClient({
189190
provider?.clientSecret ?? data?.createOidcProvider?.clientSecret
190191

191192
return (
192-
<div
193-
css={{
194-
display: 'flex',
195-
flexDirection: 'column',
196-
gap: theme.spacing.xlarge,
197-
overflow: 'hidden',
198-
}}
199-
>
193+
<FillLevelProvider value={0}>
200194
<div
201195
css={{
202196
display: 'flex',
203197
flexDirection: 'column',
204-
gap: theme.spacing.small,
205-
overflow: 'auto',
198+
gap: theme.spacing.xlarge,
199+
overflow: 'hidden',
206200
}}
207201
>
208-
<FormField label="Client ID">
209-
<Codeline
210-
displayText={
211-
clientId ?? 'A client ID will be generated upon creation'
212-
}
213-
>
214-
{clientId}
215-
</Codeline>
216-
</FormField>
217-
<FormField label="Client secret">
218-
<Codeline
219-
displayText={
220-
clientSecret
221-
? '•••••••••••••••••••••'
222-
: 'A client secret will be generated upon creation'
223-
}
224-
>
225-
{clientSecret}
226-
</Codeline>
227-
</FormField>
228-
{!data && (
229-
<>
230-
<Divider
231-
backgroundColor="border-fill-two"
232-
marginTop="medium"
233-
marginBottom="medium"
234-
/>
235-
<FormField
236-
label="Name"
237-
required
238-
>
239-
<Input
240-
autoFocus
241-
value={name}
242-
onChange={({ target: { value } }) => setName(value)}
243-
/>
244-
</FormField>
245-
<FormField label="Description">
246-
<Input
247-
value={description}
248-
onChange={({ target: { value } }) => setDescription(value)}
249-
/>
250-
</FormField>
251-
<BindingInput
252-
label="User bindings"
253-
placeholder="Search for user"
254-
bindings={bindings
255-
.filter(({ user }) => !!user)
256-
.map(({ user }) => user?.email)}
257-
fetcher={fetchUsers}
258-
add={(user) => setBindings([...bindings, { user }])}
259-
remove={(email) =>
260-
setBindings(
261-
bindings.filter(({ user }) => !user || user.email !== email)
262-
)
202+
<div
203+
css={{
204+
display: 'flex',
205+
flexDirection: 'column',
206+
gap: theme.spacing.small,
207+
overflow: 'auto',
208+
}}
209+
>
210+
<FormField label="Client ID">
211+
<Codeline
212+
backgroundColor="fill-two"
213+
displayText={
214+
clientId ?? 'A client ID will be generated upon creation'
263215
}
264-
/>
265-
<BindingInput
266-
label="Group bindings"
267-
placeholder="Search for group"
268-
bindings={bindings
269-
.filter(({ group }) => !!group)
270-
.map(({ group: { name } }) => name)}
271-
fetcher={fetchGroups}
272-
add={(group) => setBindings([...bindings, { group }])}
273-
remove={(name) =>
274-
setBindings(
275-
bindings.filter(({ group }) => !group || group.name !== name)
276-
)
216+
>
217+
{clientId}
218+
</Codeline>
219+
</FormField>
220+
<FormField label="Client secret">
221+
<Codeline
222+
backgroundColor="fill-two"
223+
displayText={
224+
clientSecret
225+
? '•••••••••••••••••••••'
226+
: 'A client secret will be generated upon creation'
277227
}
278-
/>
279-
<FormField
280-
label="Auth method"
281-
required
282228
>
283-
<Select
284-
selectedKey={authMethod}
285-
onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
229+
{clientSecret}
230+
</Codeline>
231+
</FormField>
232+
{!data && (
233+
<>
234+
<Divider
235+
backgroundColor="border-fill-two"
236+
marginTop="medium"
237+
marginBottom="medium"
238+
/>
239+
<FormField
240+
label="Name"
241+
required
286242
>
287-
<ListBoxItem
288-
key={OidcAuthMethod.Basic}
289-
label="Basic"
290-
textValue={OidcAuthMethod.Basic}
243+
<Input
244+
autoFocus
245+
value={name}
246+
onChange={({ target: { value } }) => setName(value)}
291247
/>
292-
<ListBoxItem
293-
key={OidcAuthMethod.Post}
294-
label="Post"
295-
textValue={OidcAuthMethod.Post}
248+
</FormField>
249+
<FormField label="Description">
250+
<Input
251+
value={description}
252+
onChange={({ target: { value } }) => setDescription(value)}
296253
/>
297-
</Select>
298-
</FormField>
299-
<FormField label="Redirect URIs">
300-
<div
301-
css={{
302-
display: 'flex',
303-
flexDirection: 'column',
304-
gap: theme.spacing.small,
305-
}}
254+
</FormField>
255+
<BindingInput
256+
label="User bindings"
257+
placeholder="Search for user"
258+
bindings={bindings
259+
.filter(({ user }) => !!user)
260+
.map(({ user }) => user?.email)}
261+
fetcher={fetchUsers}
262+
add={(user) => setBindings([...bindings, { user }])}
263+
remove={(email) =>
264+
setBindings(
265+
bindings.filter(({ user }) => !user || user.email !== email)
266+
)
267+
}
268+
/>
269+
<BindingInput
270+
label="Group bindings"
271+
placeholder="Search for group"
272+
bindings={bindings
273+
.filter(({ group }) => !!group)
274+
.map(({ group: { name } }) => name)}
275+
fetcher={fetchGroups}
276+
add={(group) => setBindings([...bindings, { group }])}
277+
remove={(name) =>
278+
setBindings(
279+
bindings.filter(
280+
({ group }) => !group || group.name !== name
281+
)
282+
)
283+
}
284+
/>
285+
<FormField
286+
label="Auth method"
287+
required
306288
>
307-
<div css={{ display: 'flex' }}>
308-
<Input
309-
value={url}
310-
prefix={urlPrefix}
311-
suffix={urlSuffix}
312-
width="100%"
313-
placeholder="Enter a redirect URI"
314-
onChange={({ target: { value } }) => setUrl(value)}
289+
<Select
290+
selectedKey={authMethod}
291+
onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
292+
>
293+
<ListBoxItem
294+
key={OidcAuthMethod.Basic}
295+
label="Basic"
296+
textValue={OidcAuthMethod.Basic}
315297
/>
316-
<Button
317-
onClick={addUrl}
318-
secondary
319-
marginLeft="small"
320-
>
321-
Add
322-
</Button>
323-
</div>
298+
<ListBoxItem
299+
key={OidcAuthMethod.Post}
300+
label="Post"
301+
textValue={OidcAuthMethod.Post}
302+
/>
303+
</Select>
304+
</FormField>
305+
<FormField label="Redirect URIs">
324306
<div
325307
css={{
326308
display: 'flex',
327-
flexWrap: 'wrap',
328-
gap: theme.spacing.xxsmall,
309+
flexDirection: 'column',
310+
gap: theme.spacing.small,
329311
}}
330312
>
331-
{redirectUris.map((url, i) => (
332-
<Chip
333-
key={i}
334-
size="small"
335-
clickable
336-
closeButton
337-
onClick={() => removeUrl(url)}
313+
<div css={{ display: 'flex' }}>
314+
<Input
315+
value={url}
316+
prefix={urlPrefix}
317+
suffix={urlSuffix}
318+
width="100%"
319+
placeholder="Enter a redirect URI"
320+
onChange={({ target: { value } }) => setUrl(value)}
321+
/>
322+
<Button
323+
onClick={addUrl}
324+
secondary
325+
marginLeft="small"
338326
>
339-
{url}
340-
</Chip>
341-
))}
327+
Add
328+
</Button>
329+
</div>
330+
<div
331+
css={{
332+
display: 'flex',
333+
flexWrap: 'wrap',
334+
gap: theme.spacing.xxsmall,
335+
}}
336+
>
337+
{redirectUris.map((url, i) => (
338+
<Chip
339+
key={i}
340+
size="small"
341+
clickable
342+
closeButton
343+
onClick={() => removeUrl(url)}
344+
fillLevel={2}
345+
>
346+
{url}
347+
</Chip>
348+
))}
349+
</div>
342350
</div>
343-
</div>
344-
</FormField>
345-
</>
351+
</FormField>
352+
</>
353+
)}
354+
</div>
355+
{createError && (
356+
<GqlError
357+
error={createError}
358+
header="Create OIDC provider request failed"
359+
/>
346360
)}
347-
</div>
348-
{createError && (
349-
<GqlError
350-
error={createError}
351-
header="Create OIDC provider request failed"
352-
/>
353-
)}
354-
{updateError && (
355-
<GqlError
356-
error={updateError}
357-
header="Update OIDC provider request failed"
358-
/>
359-
)}
360-
<div
361-
css={{
362-
display: 'flex',
363-
justifyContent: 'end',
364-
gap: theme.spacing.small,
365-
}}
366-
>
367-
{!data ? (
368-
<>
369-
<Button
370-
secondary
371-
onClick={onClose}
372-
>
373-
Back to Plural OIDC clients
374-
</Button>
375-
<div css={{ flexGrow: 1 }} />
376-
<Button
377-
disabled={!name || !authMethod}
378-
loading={creating || updating}
379-
onClick={() => (createMode ? create() : update())}
380-
>
381-
{createMode ? 'Create' : 'Save'}
382-
</Button>
383-
</>
384-
) : (
385-
<Button onClick={onClose}>Close</Button>
361+
{updateError && (
362+
<GqlError
363+
error={updateError}
364+
header="Update OIDC provider request failed"
365+
/>
386366
)}
367+
<div
368+
css={{
369+
display: 'flex',
370+
justifyContent: 'end',
371+
gap: theme.spacing.small,
372+
}}
373+
>
374+
{!data ? (
375+
<>
376+
<Button
377+
secondary
378+
onClick={onClose}
379+
>
380+
Back to Plural OIDC clients
381+
</Button>
382+
<div css={{ flexGrow: 1 }} />
383+
<Button
384+
disabled={!name || !authMethod}
385+
loading={creating || updating}
386+
onClick={() => (createMode ? create() : update())}
387+
>
388+
{createMode ? 'Create' : 'Save'}
389+
</Button>
390+
</>
391+
) : (
392+
<Button onClick={onClose}>Close</Button>
393+
)}
394+
</div>
387395
</div>
388-
</div>
396+
</FillLevelProvider>
389397
)
390398
}

0 commit comments

Comments
 (0)