fixing comment on issue: (#522)

* fixing comment on issue:

https://github.com/keycloak/keycloak-admin-ui/issues/428#issuecomment-818504696

* fixed top margin

* fixed devider length
This commit is contained in:
Erik Jan de Wit 2021-04-20 21:46:07 +02:00 committed by GitHub
parent 9e5104b668
commit 5c94dd584b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 98 deletions

View file

@ -177,7 +177,7 @@ export const AdvancedTab = ({
} }
return ( return (
<PageSection variant="light"> <PageSection variant="light" className="pf-u-py-0">
<ScrollForm sections={sections}> <ScrollForm sections={sections}>
<> <>
<Text className="pf-u-pb-lg"> <Text className="pf-u-pb-lg">

View file

@ -40,7 +40,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
return ( return (
<> <>
<ScrollForm <ScrollForm
className="pf-u-p-lg" className="pf-u-px-lg"
sections={[ sections={[
t("capabilityConfig"), t("capabilityConfig"),
t("generalSettings"), t("generalSettings"),

View file

@ -11,6 +11,7 @@ import {
ClipboardCopy, ClipboardCopy,
Divider, Divider,
FormGroup, FormGroup,
PageSection,
Select, Select,
SelectOption, SelectOption,
SelectVariant, SelectVariant,
@ -143,109 +144,110 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
}); });
return ( return (
<FormAccess isHorizontal className="pf-u-mt-md" role="manage-clients"> <PageSection>
<ClientSecretConfirm /> <FormAccess isHorizontal className="pf-u-mt-md" role="manage-clients">
<AccessTokenConfirm /> <ClientSecretConfirm />
<Card isFlat> <AccessTokenConfirm />
<CardBody> <Card isFlat>
<FormGroup <CardBody>
label={t("clientAuthenticator")} <FormGroup
fieldId="kc-client-authenticator-type" label={t("clientAuthenticator")}
labelIcon={ fieldId="kc-client-authenticator-type"
<HelpItem labelIcon={
helpText="clients-help:client-authenticator-type" <HelpItem
forLabel={t("clientAuthenticator")} helpText="clients-help:client-authenticator-type"
forID="kc-client-authenticator-type" forLabel={t("clientAuthenticator")}
/> forID="kc-client-authenticator-type"
} />
> }
<Controller
name="clientAuthenticatorType"
control={control}
render={({ onChange, value }) => (
<Select
toggleId="kc-client-authenticator-type"
required
onToggle={() => isOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
isOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("clientAuthenticator")}
isOpen={open}
>
{providers.map((option) => (
<SelectOption
selected={option.id === value}
key={option.id}
value={option.id}
>
{option.displayName}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
{clientAuthenticatorType === "client-jwt" && <SignedJWT />}
{clientAuthenticatorType === "client-x509" && <X509 />}
<ActionGroup>
<Button
variant="primary"
onClick={() => save()}
isDisabled={!isDirty}
> >
{t("common:save")} <Controller
</Button> name="clientAuthenticatorType"
</ActionGroup> control={control}
</CardBody> render={({ onChange, value }) => (
<CardBody> <Select
toggleId="kc-client-authenticator-type"
required
onToggle={() => isOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
isOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("clientAuthenticator")}
isOpen={open}
>
{providers.map((option) => (
<SelectOption
selected={option.id === value}
key={option.id}
value={option.id}
>
{option.displayName}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
{clientAuthenticatorType === "client-jwt" && <SignedJWT />}
{clientAuthenticatorType === "client-x509" && <X509 />}
<ActionGroup>
<Button
variant="primary"
onClick={() => save()}
isDisabled={!isDirty}
>
{t("common:save")}
</Button>
</ActionGroup>
</CardBody>
{(clientAuthenticatorType === "client-secret" ||
clientAuthenticatorType === "client-secret-jwt") && <Divider />}
{(clientAuthenticatorType === "client-secret" || {(clientAuthenticatorType === "client-secret" ||
clientAuthenticatorType === "client-secret-jwt") && ( clientAuthenticatorType === "client-secret-jwt") && (
<> <CardBody>
<Divider className="pf-u-mb-md" />
<ClientSecret <ClientSecret
secret={secret} secret={secret}
toggle={toggleClientSecretConfirm} toggle={toggleClientSecretConfirm}
/> />
</> </CardBody>
)} )}
</CardBody> </Card>
</Card> <Card isFlat>
<Card isFlat> <CardBody>
<CardBody> <FormGroup
<FormGroup label={t("registrationAccessToken")}
label={t("registrationAccessToken")} fieldId="kc-access-token"
fieldId="kc-access-token" labelIcon={
labelIcon={ <HelpItem
<HelpItem helpText="clients-help:registration-access-token"
helpText="clients-help:registration-access-token" forLabel={t("registrationAccessToken")}
forLabel={t("registrationAccessToken")} forID="kc-access-token"
forID="kc-access-token" />
/> }
} >
> <Split hasGutter>
<Split hasGutter> <SplitItem isFilled>
<SplitItem isFilled> <ClipboardCopy id="kc-access-token" isReadOnly>
<ClipboardCopy id="kc-access-token" isReadOnly> {accessToken}
{accessToken} </ClipboardCopy>
</ClipboardCopy> </SplitItem>
</SplitItem> <SplitItem>
<SplitItem> <Button
<Button variant="secondary"
variant="secondary" onClick={toggleAccessTokenConfirm}
onClick={toggleAccessTokenConfirm} isDisabled={isDirty}
isDisabled={isDirty} >
> {t("regenerate")}
{t("regenerate")} </Button>
</Button> </SplitItem>
</SplitItem> </Split>
</Split> </FormGroup>
</FormGroup> </CardBody>
</CardBody> </Card>
</Card> </FormAccess>
</FormAccess> </PageSection>
); );
}; };