libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Remove useless React fragments (#1062)

Browse source
This commit is contained in:
Jon Koops 2021-08-26 14:15:28 +02:00 committed by GitHub
parent b15c240d9e
commit e062603ff2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 3157 additions and 3328 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -30,6 +30,8 @@ module.exports = {
// react/prop-types cannot handle generic props, so we need to disable it.
// https://github.com/yannickcr/eslint-plugin-react/issues/2777#issuecomment-814968432
"react/prop-types": "off",
// Prevent fragments from being added that have only a single child.
"react/jsx-no-useless-fragment": "error"
},
overrides: [
{

50
src/PageHeader.tsx
View file

@ -27,37 +27,27 @@ export const Header = () => {
const adminClient = useAdminClient();
const { t } = useTranslation();
const ManageAccountDropdownItem = () => {
return (
<>
{adminClient.keycloak && (
<DropdownItem
key="manage account"
id="manage-account"
onClick={() => adminClient.keycloak?.accountManagement()}
>
{t("manageAccount")}
</DropdownItem>
)}
</>
);
};
const ManageAccountDropdownItem = () =>
adminClient.keycloak ? (
<DropdownItem
key="manage account"
id="manage-account"
onClick={() => adminClient.keycloak?.accountManagement()}
>
{t("manageAccount")}
</DropdownItem>
) : null;
const SignOutDropdownItem = () => {
return (
<>
{adminClient.keycloak && (
<DropdownItem
id="sign-out"
key="sign out"
onClick={() => adminClient.keycloak?.logout({ redirectUri: "" })}
>
{t("signOut")}
</DropdownItem>
)}
</>
);
};
const SignOutDropdownItem = () =>
adminClient.keycloak ? (
<DropdownItem
id="sign-out"
key="sign out"
onClick={() => adminClient.keycloak?.logout({ redirectUri: "" })}
>
{t("signOut")}
</DropdownItem>
) : null;
const ServerInfoDropdownItem = () => {
const { realm } = useRealm();

44
src/client-scopes/ClientScopesSection.tsx
View file

@ -107,22 +107,20 @@ export const ClientScopesSection = () => {
});
const TypeSelector = (scope: ClientScopeDefaultOptionalType) => (
<>
<CellDropdown
clientScope={scope}
type={scope.type}
all
onSelect={async (value) => {
try {
await changeScope(adminClient, scope, value);
addAlert(t("clientScopeSuccess"), AlertVariant.success);
refresh();
} catch (error) {
addError("client-scopes:clientScopeError", error);
}
}}
/>
</>
<CellDropdown
clientScope={scope}
type={scope.type}
all
onSelect={async (value) => {
try {
await changeScope(adminClient, scope, value);
addAlert(t("clientScopeSuccess"), AlertVariant.success);
refresh();
} catch (error) {
addError("client-scopes:clientScopeError", error);
}
}}
/>
);
const ClientScopeDetailLink = ({
@ -130,14 +128,12 @@ export const ClientScopesSection = () => {
type,
name,
}: ClientScopeDefaultOptionalType) => (
<>
<Link
key={id}
to={toClientScope({ realm, id: id!, type, tab: "settings" })}
>
{name}
</Link>
</>
<Link
key={id}
to={toClientScope({ realm, id: id!, type, tab: "settings" })}
>
{name}
</Link>
);
return (
<>

4
src/client-scopes/add/MapperDialog.tsx
View file

@ -128,10 +128,10 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
<DataListItemCells
dataListCells={[
<DataListCell key={`name-${mapper.id}`}>
<>{mapper.name}</>
{mapper.name}
</DataListCell>,
<DataListCell key={`helpText-${mapper.id}`}>
<>{mapper.helpText}</>
{mapper.helpText}
</DataListCell>,
]}
/>

8
src/client-scopes/details/MapperList.tsx
View file

@ -99,11 +99,9 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
);
const MapperLink = ({ id, name }: Row) => (
<>
<Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
{name}
</Link>
</>
<Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
{name}
</Link>
);
return (

54
src/client-scopes/details/MappingDetails.tsx
View file

@ -164,40 +164,36 @@ export const MappingDetails = () => {
onSubmit={handleSubmit(save)}
role="manage-clients"
>
<>
{!mapperId.match(isGuid) && (
<FormGroup
label={t("common:name")}
labelIcon={
<HelpItem
helpText="client-scopes-help:mapperName"
forLabel={t("common:name")}
forID="name"
/>
}
fieldId="name"
isRequired
{!mapperId.match(isGuid) && (
<FormGroup
label={t("common:name")}
labelIcon={
<HelpItem
helpText="client-scopes-help:mapperName"
forLabel={t("common:name")}
forID="name"
/>
}
fieldId="name"
isRequired
validated={
errors.name ? ValidatedOptions.error : ValidatedOptions.default
}
helperTextInvalid={t("common:required")}
>
<TextInput
ref={register({ required: true })}
type="text"
id="name"
name="name"
validated={
errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
helperTextInvalid={t("common:required")}
>
<TextInput
ref={register({ required: true })}
type="text"
id="name"
name="name"
validated={
errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
)}
</>
/>
</FormGroup>
)}
<FormGroup
label={t("realmRolePrefix")}
labelIcon={

418
src/clients/ClientSettings.tsx
View file

@ -38,217 +38,215 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
);
return (
<>
<ScrollForm
className="pf-u-px-lg"
sections={[
t("generalSettings"),
t("capabilityConfig"),
t("accessSettings"),
t("loginSettings"),
]}
>
<Form isHorizontal>
<ClientDescription />
</Form>
<CapabilityConfig />
<FormAccess isHorizontal role="manage-clients">
<FormGroup
label={t("rootUrl")}
fieldId="kc-root-url"
labelIcon={
<HelpItem
helpText="clients-help:rootUrl"
forLabel={t("rootUrl")}
forID="kc-root-url"
/>
}
>
<TextInput
type="text"
id="kc-root-url"
name="rootUrl"
ref={register}
<ScrollForm
className="pf-u-px-lg"
sections={[
t("generalSettings"),
t("capabilityConfig"),
t("accessSettings"),
t("loginSettings"),
]}
>
<Form isHorizontal>
<ClientDescription />
</Form>
<CapabilityConfig />
<FormAccess isHorizontal role="manage-clients">
<FormGroup
label={t("rootUrl")}
fieldId="kc-root-url"
labelIcon={
<HelpItem
helpText="clients-help:rootUrl"
forLabel={t("rootUrl")}
forID="kc-root-url"
/>
</FormGroup>
<FormGroup
label={t("validRedirectUri")}
fieldId="kc-redirect"
labelIcon={
<HelpItem
helpText="clients-help:validRedirectURIs"
forLabel={t("validRedirectUri")}
forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
/>
}
>
<MultiLineInput
name="redirectUris"
aria-label={t("validRedirectUri")}
addButtonLabel="clients:addRedirectUri"
/>
</FormGroup>
<FormGroup
label={t("homeURL")}
fieldId="kc-home-url"
labelIcon={
<HelpItem
helpText="clients-help:homeURL"
forLabel={t("homeURL")}
forID={t(`common:helpLabel`, { label: t("homeURL") })}
/>
}
>
<TextInput
type="text"
id="kc-home-url"
name="baseUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("webOrigins")}
fieldId="kc-web-origins"
labelIcon={
<HelpItem
helpText="clients-help:webOrigins"
forLabel={t("webOrigins")}
forID={t(`common:helpLabel`, { label: t("webOrigins") })}
/>
}
>
<MultiLineInput
name="webOrigins"
aria-label={t("webOrigins")}
addButtonLabel="clients:addWebOrigins"
/>
</FormGroup>
<FormGroup
label={t("adminURL")}
fieldId="kc-admin-url"
labelIcon={
<HelpItem
helpText="clients-help:adminURL"
forLabel={t("adminURL")}
forID="kc-admin-url"
/>
}
>
<TextInput
type="text"
id="kc-admin-url"
name="adminUrl"
ref={register}
/>
</FormGroup>
</FormAccess>
<FormAccess isHorizontal role="manage-clients">
<FormGroup
label={t("loginTheme")}
labelIcon={
<HelpItem
helpText="clients-help:loginTheme"
forLabel={t("loginTheme")}
forID="loginTheme"
/>
}
fieldId="loginTheme"
>
<Controller
name="attributes.login_theme"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
toggleId="loginTheme"
onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setLoginThemeOpen(false);
}}
selections={value || t("common:choose")}
variant={SelectVariant.single}
aria-label={t("loginTheme")}
isOpen={loginThemeOpen}
>
<SelectOption key="empty" value="">
{t("common:choose")}
</SelectOption>
<>
{loginThemes?.map((theme) => (
<SelectOption
selected={theme.name === value}
key={theme.name}
value={theme.name}
/>
))}
</>
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("consentRequired")}
fieldId="kc-consent"
hasNoPaddingTop
>
<Controller
name="consentRequired"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-consent-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value}
onChange={onChange}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("displayOnClient")}
fieldId="kc-display-on-client"
hasNoPaddingTop
>
<Controller
name="attributes.display-on-consent-screen"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-display-on-client-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
isDisabled={!consentRequired}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("consentScreenText")}
fieldId="kc-consent-screen-text"
>
<TextArea
id="kc-consent-screen-text"
name="attributes.consent-screen-text"
ref={register}
isDisabled={
!(consentRequired && displayOnConsentScreen === "true")
}
/>
</FormGroup>
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
}
>
<TextInput
type="text"
id="kc-root-url"
name="rootUrl"
ref={register}
/>
</FormAccess>
</ScrollForm>
</>
</FormGroup>
<FormGroup
label={t("validRedirectUri")}
fieldId="kc-redirect"
labelIcon={
<HelpItem
helpText="clients-help:validRedirectURIs"
forLabel={t("validRedirectUri")}
forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
/>
}
>
<MultiLineInput
name="redirectUris"
aria-label={t("validRedirectUri")}
addButtonLabel="clients:addRedirectUri"
/>
</FormGroup>
<FormGroup
label={t("homeURL")}
fieldId="kc-home-url"
labelIcon={
<HelpItem
helpText="clients-help:homeURL"
forLabel={t("homeURL")}
forID={t(`common:helpLabel`, { label: t("homeURL") })}
/>
}
>
<TextInput
type="text"
id="kc-home-url"
name="baseUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("webOrigins")}
fieldId="kc-web-origins"
labelIcon={
<HelpItem
helpText="clients-help:webOrigins"
forLabel={t("webOrigins")}
forID={t(`common:helpLabel`, { label: t("webOrigins") })}
/>
}
>
<MultiLineInput
name="webOrigins"
aria-label={t("webOrigins")}
addButtonLabel="clients:addWebOrigins"
/>
</FormGroup>
<FormGroup
label={t("adminURL")}
fieldId="kc-admin-url"
labelIcon={
<HelpItem
helpText="clients-help:adminURL"
forLabel={t("adminURL")}
forID="kc-admin-url"
/>
}
>
<TextInput
type="text"
id="kc-admin-url"
name="adminUrl"
ref={register}
/>
</FormGroup>
</FormAccess>
<FormAccess isHorizontal role="manage-clients">
<FormGroup
label={t("loginTheme")}
labelIcon={
<HelpItem
helpText="clients-help:loginTheme"
forLabel={t("loginTheme")}
forID="loginTheme"
/>
}
fieldId="loginTheme"
>
<Controller
name="attributes.login_theme"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
toggleId="loginTheme"
onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setLoginThemeOpen(false);
}}
selections={value || t("common:choose")}
variant={SelectVariant.single}
aria-label={t("loginTheme")}
isOpen={loginThemeOpen}
>
<SelectOption key="empty" value="">
{t("common:choose")}
</SelectOption>
{/* The type for the children of Select are incorrect, so we need a fragment here. */}
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>
{loginThemes?.map((theme) => (
<SelectOption
selected={theme.name === value}
key={theme.name}
value={theme.name}
/>
))}
</>
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("consentRequired")}
fieldId="kc-consent"
hasNoPaddingTop
>
<Controller
name="consentRequired"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-consent-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value}
onChange={onChange}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("displayOnClient")}
fieldId="kc-display-on-client"
hasNoPaddingTop
>
<Controller
name="attributes.display-on-consent-screen"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-display-on-client-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
isDisabled={!consentRequired}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("consentScreenText")}
fieldId="kc-consent-screen-text"
>
<TextArea
id="kc-consent-screen-text"
name="attributes.consent-screen-text"
ref={register}
isDisabled={!(consentRequired && displayOnConsentScreen === "true")}
/>
</FormGroup>
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
/>
</FormAccess>
</ScrollForm>
);
};

32
src/clients/ClientsSection.tsx
View file

@ -70,27 +70,23 @@ export const ClientsSection = () => {
});
const ClientDetailLink = (client: ClientRepresentation) => (
<>
<Link
key={client.id}
to={toClient({ realm, clientId: client.id!, tab: "settings" })}
>
{client.clientId}
{!client.enabled && (
<Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
{t("common:disabled")}
</Badge>
)}
</Link>
</>
<Link
key={client.id}
to={toClient({ realm, clientId: client.id!, tab: "settings" })}
>
{client.clientId}
{!client.enabled && (
<Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
{t("common:disabled")}
</Badge>
)}
</Link>
);
const ClientDescription = (client: ClientRepresentation) => (
<>
<TableText wrapModifier="truncate">
{emptyFormatter()(client.description)}
</TableText>
</>
<TableText wrapModifier="truncate">
{emptyFormatter()(client.description)}
</TableText>
);
return (

500
src/clients/add/CapabilityConfig.tsx
View file

@ -38,264 +38,260 @@ export const CapabilityConfig = ({
unWrap={unWrap}
className="keycloak__capability-config__form"
>
<>
{protocol === "openid-connect" && (
<>
<FormGroup
hasNoPaddingTop
label={t("clientAuthentication")}
fieldId="kc-authentication"
labelIcon={
<HelpItem
helpText="clients-help:authentication"
forLabel={t("authentication")}
forID={t(`common:helpLabel`, { label: t("authentication") })}
/>
}
>
<Controller
name="publicClient"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
data-testid="authentication"
id="kc-authentication-switch"
name="publicClient"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={!value}
onChange={(value) => {
onChange(!value);
if (!value) {
setValue("authorizationServicesEnabled", false);
setValue("serviceAccountsEnabled", false);
}
}}
/>
)}
{protocol === "openid-connect" && (
<>
<FormGroup
hasNoPaddingTop
label={t("clientAuthentication")}
fieldId="kc-authentication"
labelIcon={
<HelpItem
helpText="clients-help:authentication"
forLabel={t("authentication")}
forID={t(`common:helpLabel`, { label: t("authentication") })}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("clientAuthorization")}
fieldId="kc-authorization"
labelIcon={
<HelpItem
helpText="clients-help:authorization"
forLabel={t("authorization")}
forID={t(`common:helpLabel`, { label: t("authorization") })}
}
>
<Controller
name="publicClient"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
data-testid="authentication"
id="kc-authentication-switch"
name="publicClient"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={!value}
onChange={(value) => {
onChange(!value);
if (!value) {
setValue("authorizationServicesEnabled", false);
setValue("serviceAccountsEnabled", false);
}
}}
/>
}
>
<Controller
name="authorizationServicesEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
data-testid="authorization"
id="kc-authorization-switch"
name="authorizationServicesEnabled"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value && !clientAuthentication}
onChange={(value) => {
onChange(value);
if (value) {
setValue("serviceAccountsEnabled", true);
}
}}
isDisabled={clientAuthentication}
/>
)}
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("clientAuthorization")}
fieldId="kc-authorization"
labelIcon={
<HelpItem
helpText="clients-help:authorization"
forLabel={t("authorization")}
forID={t(`common:helpLabel`, { label: t("authorization") })}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("authenticationFlow")}
fieldId="kc-flow"
>
<Grid>
<GridItem lg={4} sm={6}>
<Controller
name="standardFlowEnabled"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="standard"
label={t("standardFlow")}
id="kc-flow-standard"
name="standardFlowEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:standardFlow"
forLabel={t("standardFlow")}
forID={t(`common:helpLabel`, {
label: t("standardFlow"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
<GridItem lg={8} sm={6}>
<Controller
name="directAccessGrantsEnabled"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="direct"
label={t("directAccess")}
id="kc-flow-direct"
name="directAccessGrantsEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:directAccess"
forLabel={t("directAccess")}
forID={t(`common:helpLabel`, {
label: t("directAccess"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
<GridItem lg={4} sm={6}>
<Controller
name="implicitFlowEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="implicit"
label={t("implicitFlow")}
id="kc-flow-implicit"
name="implicitFlowEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:implicitFlow"
forLabel={t("implicitFlow")}
forID={t(`common:helpLabel`, {
label: t("implicitFlow"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
<GridItem lg={8} sm={6}>
<Controller
name="serviceAccountsEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="service-account"
label={t("serviceAccount")}
id="kc-flow-service-account"
name="serviceAccountsEnabled"
isChecked={
value || (clientAuthentication && authorization)
}
onChange={onChange}
isDisabled={
(clientAuthentication && !authorization) ||
(!clientAuthentication && authorization)
}
/>
<HelpItem
helpText="clients-help:serviceAccount"
forLabel={t("serviceAccount")}
forID={t(`common:helpLabel`, {
label: t("serviceAccount"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
</Grid>
</FormGroup>
</>
)}
</>
<>
{protocol === "saml" && (
<>
<FormGroup
labelIcon={
<HelpItem
helpText="clients-help:encryptAssertions"
forLabel={t("encryptAssertions")}
forID={t(`common:helpLabel`, {
label: t("encryptAssertions"),
})}
}
>
<Controller
name="authorizationServicesEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<Switch
data-testid="authorization"
id="kc-authorization-switch"
name="authorizationServicesEnabled"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value && !clientAuthentication}
onChange={(value) => {
onChange(value);
if (value) {
setValue("serviceAccountsEnabled", true);
}
}}
isDisabled={clientAuthentication}
/>
}
label={t("encryptAssertions")}
fieldId="kc-encrypt"
hasNoPaddingTop
>
<Controller
name="attributes.saml_encrypt"
control={control}
defaultValue="false"
render={({ onChange, value }) => (
<Switch
data-testid="encrypt"
id="kc-encrypt"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
/>
)}
/>
</FormGroup>
<FormGroup
labelIcon={
<HelpItem
helpText="clients-help:clientSignature"
forLabel={t("clientSignature")}
forID={t(`common:helpLabel`, { label: t("clientSignature") })}
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("authenticationFlow")}
fieldId="kc-flow"
>
<Grid>
<GridItem lg={4} sm={6}>
<Controller
name="standardFlowEnabled"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="standard"
label={t("standardFlow")}
id="kc-flow-standard"
name="standardFlowEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:standardFlow"
forLabel={t("standardFlow")}
forID={t(`common:helpLabel`, {
label: t("standardFlow"),
})}
/>
</InputGroup>
)}
/>
}
label={t("clientSignature")}
fieldId="kc-client-signature"
hasNoPaddingTop
>
<Controller
name="attributes.saml_client_signature"
control={control}
defaultValue="false"
render={({ onChange, value }) => (
<Switch
data-testid="client-signature"
id="kc-client-signature"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
/>
)}
</GridItem>
<GridItem lg={8} sm={6}>
<Controller
name="directAccessGrantsEnabled"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="direct"
label={t("directAccess")}
id="kc-flow-direct"
name="directAccessGrantsEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:directAccess"
forLabel={t("directAccess")}
forID={t(`common:helpLabel`, {
label: t("directAccess"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
<GridItem lg={4} sm={6}>
<Controller
name="implicitFlowEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="implicit"
label={t("implicitFlow")}
id="kc-flow-implicit"
name="implicitFlowEnabled"
isChecked={value}
onChange={onChange}
/>
<HelpItem
helpText="clients-help:implicitFlow"
forLabel={t("implicitFlow")}
forID={t(`common:helpLabel`, {
label: t("implicitFlow"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
<GridItem lg={8} sm={6}>
<Controller
name="serviceAccountsEnabled"
defaultValue={false}
control={control}
render={({ onChange, value }) => (
<InputGroup>
<Checkbox
data-testid="service-account"
label={t("serviceAccount")}
id="kc-flow-service-account"
name="serviceAccountsEnabled"
isChecked={
value || (clientAuthentication && authorization)
}
onChange={onChange}
isDisabled={
(clientAuthentication && !authorization) ||
(!clientAuthentication && authorization)
}
/>
<HelpItem
helpText="clients-help:serviceAccount"
forLabel={t("serviceAccount")}
forID={t(`common:helpLabel`, {
label: t("serviceAccount"),
})}
/>
</InputGroup>
)}
/>
</GridItem>
</Grid>
</FormGroup>
</>
)}
{protocol === "saml" && (
<>
<FormGroup
labelIcon={
<HelpItem
helpText="clients-help:encryptAssertions"
forLabel={t("encryptAssertions")}
forID={t(`common:helpLabel`, {
label: t("encryptAssertions"),
})}
/>
</FormGroup>
</>
)}
</>
}
label={t("encryptAssertions")}
fieldId="kc-encrypt"
hasNoPaddingTop
>
<Controller
name="attributes.saml_encrypt"
control={control}
defaultValue="false"
render={({ onChange, value }) => (
<Switch
data-testid="encrypt"
id="kc-encrypt"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
/>
)}
/>
</FormGroup>
<FormGroup
labelIcon={
<HelpItem
helpText="clients-help:clientSignature"
forLabel={t("clientSignature")}
forID={t(`common:helpLabel`, { label: t("clientSignature") })}
/>
}
label={t("clientSignature")}
fieldId="kc-client-signature"
hasNoPaddingTop
>
<Controller
name="attributes.saml_client_signature"
control={control}
defaultValue="false"
render={({ onChange, value }) => (
<Switch
data-testid="client-signature"
id="kc-client-signature"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange("" + value)}
/>
)}
/>
</FormGroup>
</>
)}
</FormAccess>
);
};

90
src/clients/credentials/SignedJWT.tsx
View file

@ -21,52 +21,50 @@ export const SignedJWT = () => {
const [open, isOpen] = useState(false);
return (
<>
<FormGroup
label={t("signatureAlgorithm")}
fieldId="kc-signature-algorithm"
labelIcon={
<HelpItem
helpText="clients-help:signature-algorithm"
forLabel={t("signatureAlgorithm")}
forID="kc-signature-algorithm"
/>
}
>
<Controller
name="attributes.token-endpoint-auth-signing-alg"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
maxHeight={200}
toggleId="kc-signature-algorithm"
onToggle={() => isOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
isOpen(false);
}}
selections={value || t("anyAlgorithm")}
variant={SelectVariant.single}
aria-label={t("signatureAlgorithm")}
isOpen={open}
>
<SelectOption selected={value === ""} key="any" value="">
{t("anyAlgorithm")}
</SelectOption>
<>
{providers.map((option) => (
<SelectOption
selected={option === value}
key={option}
value={option}
/>
))}
</>
</Select>
)}
<FormGroup
label={t("signatureAlgorithm")}
fieldId="kc-signature-algorithm"
labelIcon={
<HelpItem
helpText="clients-help:signature-algorithm"
forLabel={t("signatureAlgorithm")}
forID="kc-signature-algorithm"
/>
</FormGroup>
</>
}
>
<Controller
name="attributes.token-endpoint-auth-signing-alg"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
maxHeight={200}
toggleId="kc-signature-algorithm"
onToggle={() => isOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
isOpen(false);
}}
selections={value || t("anyAlgorithm")}
variant={SelectVariant.single}
aria-label={t("signatureAlgorithm")}
isOpen={open}
>
<SelectOption selected={value === ""} key="any" value="">
{t("anyAlgorithm")}
</SelectOption>
<>
{providers.map((option) => (
<SelectOption
selected={option === value}
key={option}
value={option}
/>
))}
</>
</Select>
)}
/>
</FormGroup>
);
};

47
src/clients/keys/Keys.tsx
View file

@ -153,32 +153,29 @@ export const Keys = ({ clientId, save }: KeysProps) => {
)}
/>
</FormGroup>
{useJwksUrl !== "true" && (
<>
{keyInfo ? (
<FormGroup
label={t("certificate")}
fieldId="certificate"
labelIcon={
<HelpItem
helpText="clients-help:certificate"
forLabel={t("certificate")}
forID="certificate"
/>
}
>
<TextArea
readOnly
rows={5}
id="certificate"
value={keyInfo.certificate}
{useJwksUrl !== "true" &&
(keyInfo ? (
<FormGroup
label={t("certificate")}
fieldId="certificate"
labelIcon={
<HelpItem
helpText="clients-help:certificate"
forLabel={t("certificate")}
forID="certificate"
/>
</FormGroup>
) : (
"No client certificate configured"
)}
</>
)}
}
>
<TextArea
readOnly
rows={5}
id="certificate"
value={keyInfo.certificate}
/>
</FormGroup>
) : (
"No client certificate configured"
))}
{useJwksUrl === "true" && (
<FormGroup
label={t("jwksUrl")}

40
src/clients/scopes/ClientScopes.tsx
View file

@ -140,27 +140,25 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
};
const TypeSelector = (scope: Row) => (
<>
<CellDropdown
clientScope={scope}
type={scope.type}
onSelect={async (value) => {
try {
await changeScope(
adminClient,
clientId,
scope,
scope.type,
value as ClientScope
);
addAlert(t("clientScopeSuccess"), AlertVariant.success);
refresh();
} catch (error) {
addError("clients:clientScopeError", error);
}
}}
/>
</>
<CellDropdown
clientScope={scope}
type={scope.type}
onSelect={async (value) => {
try {
await changeScope(
adminClient,
clientId,
scope,
scope.type,
value as ClientScope
);
addAlert(t("clientScopeSuccess"), AlertVariant.success);
refresh();
} catch (error) {
addError("clients:clientScopeError", error);
}
}}
/>
);
return (

24
src/clients/service-account/ServiceAccount.tsx
View file

@ -97,18 +97,14 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
addError("clients:roleMappingUpdatedError", error);
}
};
return (
<>
{serviceAccount && (
<RoleMapping
name={client.clientId!}
id={serviceAccount.id!}
type="service-account"
loader={loader}
save={assignRoles}
onHideRolesToggle={() => setHide(!hide)}
/>
)}
</>
);
return serviceAccount ? (
<RoleMapping
name={client.clientId!}
id={serviceAccount.id!}
type="service-account"
loader={loader}
save={assignRoles}
onHideRolesToggle={() => setHide(!hide)}
/>
) : null;
};

194
src/components/attribute-form/AttributeForm.tsx
View file

@ -75,60 +75,73 @@ export const AttributesForm = ({
}, [fields]);
return (
<>
<FormAccess role="manage-realm" onSubmit={handleSubmit(save)}>
<TableComposable
className="kc-attributes__table"
aria-label="Role attribute keys and values"
variant="compact"
borders={false}
>
<Thead>
<Tr>
<Th id="key" width={40}>
{columns[0]}
</Th>
<Th id="value" width={40}>
{columns[1]}
</Th>
</Tr>
</Thead>
<Tbody>
{fields.map((attribute, rowIndex) => (
<Tr key={attribute.id}>
<FormAccess role="manage-realm" onSubmit={handleSubmit(save)}>
<TableComposable
className="kc-attributes__table"
aria-label="Role attribute keys and values"
variant="compact"
borders={false}
>
<Thead>
<Tr>
<Th id="key" width={40}>
{columns[0]}
</Th>
<Th id="value" width={40}>
{columns[1]}
</Th>
</Tr>
</Thead>
<Tbody>
{fields.map((attribute, rowIndex) => (
<Tr key={attribute.id}>
<Td
key={`${attribute.id}-key`}
id={`text-input-${rowIndex}-key`}
dataLabel={columns[0]}
>
<TextInput
name={`attributes[${rowIndex}].key`}
ref={register()}
aria-label="key-input"
defaultValue={attribute.key}
validated={
errors.attributes?.[rowIndex] ? "error" : "default"
}
/>
</Td>
<Td
key={`${attribute}-value`}
id={`text-input-${rowIndex}-value`}
dataLabel={columns[1]}
>
<TextInput
name={`attributes[${rowIndex}].value`}
ref={register()}
aria-label="value-input"
defaultValue={attribute.value}
/>
</Td>
{rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
<Td
key={`${attribute.id}-key`}
id={`text-input-${rowIndex}-key`}
dataLabel={columns[0]}
key="minus-button"
id={`kc-minus-button-${rowIndex}`}
dataLabel={columns[2]}
>
<TextInput
name={`attributes[${rowIndex}].key`}
ref={register()}
aria-label="key-input"
defaultValue={attribute.key}
validated={
errors.attributes?.[rowIndex] ? "error" : "default"
}
/>
</Td>
<Td
key={`${attribute}-value`}
id={`text-input-${rowIndex}-value`}
dataLabel={columns[1]}
>
<TextInput
name={`attributes[${rowIndex}].value`}
ref={register()}
aria-label="value-input"
defaultValue={attribute.value}
/>
</Td>
{rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
<Td
key="minus-button"
id={`kc-minus-button-${rowIndex}`}
dataLabel={columns[2]}
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
variant="link"
className="kc-attributes__minus-icon"
onClick={() => remove(rowIndex)}
>
<MinusCircleIcon />
</Button>
</Td>
)}
{rowIndex === fields.length - 1 && (
<Td key="add-button" id="add-button" dataLabel={columns[2]}>
{fields.length !== 1 && (
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
@ -138,55 +151,36 @@ export const AttributesForm = ({
>
<MinusCircleIcon />
</Button>
</Td>
)}
{rowIndex === fields.length - 1 && (
<Td key="add-button" id="add-button" dataLabel={columns[2]}>
{fields.length !== 1 && (
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
variant="link"
className="kc-attributes__minus-icon"
onClick={() => remove(rowIndex)}
>
<MinusCircleIcon />
</Button>
)}
</Td>
)}
</Tr>
))}
<Tr>
<Td>
<Button
aria-label={t("roles:addAttributeText")}
id="plus-icon"
variant="link"
className="kc-attributes__plus-icon"
onClick={() => append({ key: "", value: "" })}
icon={<PlusCircleIcon />}
isDisabled={!watchLast}
>
{t("roles:addAttributeText")}
</Button>
</Td>
)}
</Td>
)}
</Tr>
</Tbody>
</TableComposable>
<ActionGroup className="kc-attributes__action-group">
<Button variant="primary" type="submit" isDisabled={!watchLast}>
{t("common:save")}
</Button>
<Button
onClick={reset}
variant="link"
isDisabled={!formState.isDirty}
>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</>
))}
<Tr>
<Td>
<Button
aria-label={t("roles:addAttributeText")}
id="plus-icon"
variant="link"
className="kc-attributes__plus-icon"
onClick={() => append({ key: "", value: "" })}
icon={<PlusCircleIcon />}
isDisabled={!watchLast}
>
{t("roles:addAttributeText")}
</Button>
</Td>
</Tr>
</Tbody>
</TableComposable>
<ActionGroup className="kc-attributes__action-group">
<Button variant="primary" type="submit" isDisabled={!watchLast}>
{t("common:save")}
</Button>
<Button onClick={reset} variant="link" isDisabled={!formState.isDirty}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
);
};

58
src/components/bread-crumb/GroupBreadCrumbs.tsx
View file

@ -22,37 +22,31 @@ export const GroupBreadCrumbs = () => {
});
}, [history]);
return (
<>
{subGroups.length !== 0 && (
<Breadcrumb>
<BreadcrumbItem key="home">
<Link to={`/${realm}/groups`}>{t("groups")}</Link>
</BreadcrumbItem>
{subGroups.map((group, i) => {
const isLastGroup = i === subGroups.length - 1;
return (
<BreadcrumbItem key={group.id} isActive={isLastGroup}>
{!isLastGroup && (
<Link
to={location.pathname.substr(
0,
location.pathname.indexOf(group.id!) + group.id!.length
)}
onClick={() => remove(group)}
>
{group.name}
</Link>
return subGroups.length !== 0 ? (
<Breadcrumb>
<BreadcrumbItem key="home">
<Link to={`/${realm}/groups`}>{t("groups")}</Link>
</BreadcrumbItem>
{subGroups.map((group, i) => {
const isLastGroup = i === subGroups.length - 1;
return (
<BreadcrumbItem key={group.id} isActive={isLastGroup}>
{!isLastGroup && (
<Link
to={location.pathname.substr(
0,
location.pathname.indexOf(group.id!) + group.id!.length
)}
{isLastGroup &&
(group.id === "search"
? group.name
: t("groups:groupDetails"))}
</BreadcrumbItem>
);
})}
</Breadcrumb>
)}
</>
);
onClick={() => remove(group)}
>
{group.name}
</Link>
)}
{isLastGroup &&
(group.id === "search" ? group.name : t("groups:groupDetails"))}
</BreadcrumbItem>
);
})}
</Breadcrumb>
) : null;
};

2
src/components/bread-crumb/PageBreadCrumbs.tsx
View file

@ -37,7 +37,7 @@ export const PageBreadCrumbs = () => {
{crumbs.map(({ match, breadcrumb: crumb }, i) => (
<BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
{crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
{crumbs.length - 1 === i && <>{crumb}</>}
{crumbs.length - 1 === i && crumb}
</BreadcrumbItem>
))}
</Breadcrumb>

8
src/components/error/ErrorRenderer.tsx
View file

@ -24,11 +24,9 @@ export const ErrorRenderer = ({ error, resetErrorBoundary }: FallbackProps) => {
/>
}
actionLinks={
<React.Fragment>
<AlertActionLink onClick={resetErrorBoundary}>
{t("retry")}
</AlertActionLink>
</React.Fragment>
<AlertActionLink onClick={resetErrorBoundary}>
{t("retry")}
</AlertActionLink>
}
></Alert>
</PageSection>

4
src/components/group/GroupPickerDialog.tsx
View file

@ -192,7 +192,7 @@ export const GroupPickerDialog = ({
{group.name}
</Button>
)}
{navigation.length - 1 === i && <>{group.name}</>}
{navigation.length - 1 === i && group.name}
</BreadcrumbItem>
))}
</Breadcrumb>
@ -255,7 +255,7 @@ export const GroupPickerDialog = ({
dataListCells={[
<DataListCell key={`name-${group.id}`}>
{filter === "" ? (
<>{group.name}</>
group.name
) : (
<GroupPath group={findSubGroup(group, filter)} />
)}

46
src/components/help-enabler/HelpItem.tsx
View file

@ -23,30 +23,24 @@ export const HelpItem = ({
}: HelpItemProps) => {
const { t } = useTranslation();
const { enabled } = useHelp();
return (
<>
{enabled && (
<Popover
bodyContent={
isValidElement(helpText) ? helpText : t(helpText as string)
}
>
<>
{!unWrap && (
<button
id={id}
aria-label={t(`helpLabel`, { label: forLabel })}
onClick={(e) => e.preventDefault()}
aria-describedby={forID}
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign={noVerticalAlign} />
</button>
)}
{unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
</>
</Popover>
)}
</>
);
return enabled ? (
<Popover
bodyContent={isValidElement(helpText) ? helpText : t(helpText as string)}
>
<>
{!unWrap && (
<button
id={id}
aria-label={t(`helpLabel`, { label: forLabel })}
onClick={(e) => e.preventDefault()}
aria-describedby={forID}
className="pf-c-form__group-label-help"
>
<HelpIcon noVerticalAlign={noVerticalAlign} />
</button>
)}
{unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
</>
</Popover>
) : null;
};

72
src/components/list-empty-state/ListEmptyState.tsx
View file

@ -40,42 +40,40 @@ export const ListEmptyState = ({
icon,
}: ListEmptyStateProps) => {
return (
<>
<EmptyState data-testid="empty-state" variant="large">
{hasIcon && isSearchVariant ? (
<EmptyStateIcon icon={SearchIcon} />
) : (
hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
)}
<Title headingLevel="h1" size="lg">
{message}
</Title>
<EmptyStateBody>{instructions}</EmptyStateBody>
{primaryActionText && (
<Button
data-testid={`${message
.replace(/\W+/g, "-")
.toLowerCase()}-empty-action`}
variant="primary"
onClick={onPrimaryAction}
>
{primaryActionText}
</Button>
)}
{secondaryActions && (
<EmptyStateSecondaryActions>
{secondaryActions.map((action) => (
<Button
key={action.text}
variant={action.type || ButtonVariant.secondary}
onClick={action.onClick}
>
{action.text}
</Button>
))}
</EmptyStateSecondaryActions>
)}
</EmptyState>
</>
<EmptyState data-testid="empty-state" variant="large">
{hasIcon && isSearchVariant ? (
<EmptyStateIcon icon={SearchIcon} />
) : (
hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
)}
<Title headingLevel="h1" size="lg">
{message}
</Title>
<EmptyStateBody>{instructions}</EmptyStateBody>
{primaryActionText && (
<Button
data-testid={`${message
.replace(/\W+/g, "-")
.toLowerCase()}-empty-action`}
variant="primary"
onClick={onPrimaryAction}
>
{primaryActionText}
</Button>
)}
{secondaryActions && (
<EmptyStateSecondaryActions>
{secondaryActions.map((action) => (
<Button
key={action.text}
variant={action.type || ButtonVariant.secondary}
onClick={action.onClick}
>
{action.text}
</Button>
))}
</EmptyStateSecondaryActions>
)}
</EmptyState>
);
};

7
src/components/table-toolbar/KeycloakDataTable.tsx
View file

@ -427,12 +427,7 @@ export function KeycloakDataTable<T>({
{loading && <Loading />}
</PaginatingTableToolbar>
)}
<>
{!loading &&
(!data || data?.length === 0) &&
search === "" &&
emptyState}
</>
{!loading && (!data || data?.length === 0) && search === "" && emptyState}
</>
);
}

2
src/components/table-toolbar/PaginatingTableToolbar.tsx
View file

@ -73,7 +73,7 @@ export const PaginatingTableToolbar: FunctionComponent<TableToolbarProps> = ({
}
subToolbar={subToolbar}
toolbarItemFooter={
count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : <></>
count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : null
}
inputGroupName={inputGroupName}
inputGroupPlaceholder={inputGroupPlaceholder}

57
src/components/table-toolbar/TableToolbar.tsx
View file

@ -1,6 +1,5 @@
import React, {
FormEvent,
Fragment,
FunctionComponent,
ReactNode,
useState,
@ -74,35 +73,33 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
<>
<Toolbar>
<ToolbarContent>
<Fragment>
{inputGroupName && (
<ToolbarItem>
<InputGroup>
{searchTypeComponent}
{inputGroupPlaceholder && (
<>
<TextInput
name={inputGroupName}
id={inputGroupName}
type="search"
aria-label={t("search")}
placeholder={inputGroupPlaceholder}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<Button
variant={ButtonVariant.control}
aria-label={t("search")}
onClick={onSearch}
>
<SearchIcon />
</Button>
</>
)}
</InputGroup>
</ToolbarItem>
)}
</Fragment>
{inputGroupName && (
<ToolbarItem>
<InputGroup>
{searchTypeComponent}
{inputGroupPlaceholder && (
<>
<TextInput
name={inputGroupName}
id={inputGroupName}
type="search"
aria-label={t("search")}
placeholder={inputGroupPlaceholder}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<Button
variant={ButtonVariant.control}
aria-label={t("search")}
onClick={onSearch}
>
<SearchIcon />
</Button>
</>
)}
</InputGroup>
</ToolbarItem>
)}
{toolbarItem}
</ToolbarContent>
</Toolbar>

2
src/components/view-header/ViewHeader.tsx
View file

@ -101,7 +101,7 @@ export const ViewHeader = ({
</Badge>{" "}
</Fragment>
)}
{isValidElement(badge.text) && <>{badge.text}</>}{" "}
{isValidElement(badge.text) && badge.text}{" "}
</Fragment>
))}
</LevelItem>

8
src/dashboard/Dashboard.tsx
View file

@ -125,14 +125,10 @@ const Dashboard = () => {
{feature}{" "}
{isExperimentalFeature(feature) ? (
<Label color="orange">{t("experimental")}</Label>
) : (
<></>
)}
) : null}
{isPreviewFeature(feature) ? (
<Label color="blue">{t("preview")}</Label>
) : (
<></>
)}
) : null}
</ListItem>
))}
</List>

302
src/events/AdminEvents.tsx
View file

@ -137,165 +137,161 @@ export const AdminEvents = () => {
};
const LinkResource = (row: AdminEventRepresentation) => (
<>
<Truncate text={row.resourcePath}>
{(text) => (
<>
{row.resourceType !== "COMPONENT" && (
<Link
to={`/${realm}/${row.resourcePath}${
row.resourceType !== "GROUP" ? "/settings" : ""
}`}
>
{text}
</Link>
)}
{row.resourceType === "COMPONENT" && <span>{text}</span>}
</>
)}
</Truncate>
</>
<Truncate text={row.resourcePath}>
{(text) => (
<>
{row.resourceType !== "COMPONENT" && (
<Link
to={`/${realm}/${row.resourcePath}${
row.resourceType !== "GROUP" ? "/settings" : ""
}`}
>
{text}
</Link>
)}
{row.resourceType === "COMPONENT" && <span>{text}</span>}
</>
)}
</Truncate>
);
const adminEventSearchFormDisplay = () => {
return (
<>
<Flex
direction={{ default: "column" }}
spaceItems={{ default: "spaceItemsNone" }}
>
<FlexItem>
<Dropdown
id="admin-events-search-select"
data-testid="AdminEventsSearchSelector"
className="pf-u-ml-md"
toggle={
<DropdownToggle
data-testid="adminEventsSearchSelectorToggle"
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
className="keycloak__events_search_selector_dropdown__toggle"
>
{t("searchForAdminEvent")}
</DropdownToggle>
}
isOpen={searchDropdownOpen}
>
<Form
isHorizontal
className="keycloak__admin_events_search__form"
data-testid="searchForm"
<Flex
direction={{ default: "column" }}
spaceItems={{ default: "spaceItemsNone" }}
>
<FlexItem>
<Dropdown
id="admin-events-search-select"
data-testid="AdminEventsSearchSelector"
className="pf-u-ml-md"
toggle={
<DropdownToggle
data-testid="adminEventsSearchSelectorToggle"
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
className="keycloak__events_search_selector_dropdown__toggle"
>
<FormGroup
label={t("resourceType")}
fieldId="kc-resourceType"
className="keycloak__events_search__form_multiline_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("operationType")}
fieldId="kc-operationType"
className="keycloak__events_search__form_multiline_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("user")}
fieldId="kc-user"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-user"
name="user"
data-testid="user-searchField"
/>
</FormGroup>
<FormGroup
label={t("realm")}
fieldId="kc-realm"
className="keycloak__events_search__form_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("ipAddress")}
fieldId="kc-ipAddress"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-ipAddress"
name="ipAddress"
data-testid="ipAddress-searchField"
/>
</FormGroup>
<FormGroup
label={t("dateFrom")}
fieldId="kc-dateFrom"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-dateFrom"
name="dateFrom"
className="pf-c-form-control pf-m-icon pf-m-calendar"
placeholder="yyyy-MM-dd"
data-testid="dateFrom-searchField"
/>
</FormGroup>
<FormGroup
label={t("dateTo")}
fieldId="kc-dateTo"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-dateTo"
name="dateTo"
className="pf-c-form-control pf-m-icon pf-m-calendar"
placeholder="yyyy-MM-dd"
data-testid="dateTo-searchField"
/>
</FormGroup>
<ActionGroup>
<Button
className="keycloak__admin_events_search__form_btn"
variant={"primary"}
data-testid="search-events-btn"
isDisabled={!isDirty}
>
{t("searchAdminEventsBtn")}
</Button>
</ActionGroup>
</Form>
</Dropdown>
<Button
className="pf-u-ml-md"
onClick={refresh}
data-testid="refresh-btn"
{t("searchForAdminEvent")}
</DropdownToggle>
}
isOpen={searchDropdownOpen}
>
<Form
isHorizontal
className="keycloak__admin_events_search__form"
data-testid="searchForm"
>
{t("refresh")}
</Button>
</FlexItem>
</Flex>
</>
<FormGroup
label={t("resourceType")}
fieldId="kc-resourceType"
className="keycloak__events_search__form_multiline_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("operationType")}
fieldId="kc-operationType"
className="keycloak__events_search__form_multiline_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("user")}
fieldId="kc-user"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-user"
name="user"
data-testid="user-searchField"
/>
</FormGroup>
<FormGroup
label={t("realm")}
fieldId="kc-realm"
className="keycloak__events_search__form_label"
>
<Select
variant={SelectVariant.single}
onToggle={(isOpen) => setSelectOpen(isOpen)}
isOpen={selectOpen}
></Select>
</FormGroup>
<FormGroup
label={t("ipAddress")}
fieldId="kc-ipAddress"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-ipAddress"
name="ipAddress"
data-testid="ipAddress-searchField"
/>
</FormGroup>
<FormGroup
label={t("dateFrom")}
fieldId="kc-dateFrom"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-dateFrom"
name="dateFrom"
className="pf-c-form-control pf-m-icon pf-m-calendar"
placeholder="yyyy-MM-dd"
data-testid="dateFrom-searchField"
/>
</FormGroup>
<FormGroup
label={t("dateTo")}
fieldId="kc-dateTo"
className="keycloak__events_search__form_label"
>
<TextInput
ref={register()}
type="text"
id="kc-dateTo"
name="dateTo"
className="pf-c-form-control pf-m-icon pf-m-calendar"
placeholder="yyyy-MM-dd"
data-testid="dateTo-searchField"
/>
</FormGroup>
<ActionGroup>
<Button
className="keycloak__admin_events_search__form_btn"
variant={"primary"}
data-testid="search-events-btn"
isDisabled={!isDirty}
>
{t("searchAdminEventsBtn")}
</Button>
</ActionGroup>
</Form>
</Dropdown>
<Button
className="pf-u-ml-md"
onClick={refresh}
data-testid="refresh-btn"
>
{t("refresh")}
</Button>
</FlexItem>
</Flex>
);
};

20
src/groups/GroupTable.tsx
View file

@ -77,17 +77,15 @@ export const GroupTable = () => {
};
const GroupNameCell = (group: GroupRepresentation) => (
<>
<Link
key={group.id}
to={`${location.pathname}/${group.id}`}
onClick={() => {
setSubGroups([...subGroups, group]);
}}
>
{group.name}
</Link>
</>
<Link
key={group.id}
to={`${location.pathname}/${group.id}`}
onClick={() => {
setSubGroups([...subGroups, group]);
}}
>
{group.name}
</Link>
);
const handleModalToggle = () => {

8
src/groups/Members.tsx
View file

@ -99,11 +99,9 @@ export const Members = () => {
};
const UserDetailLink = (user: MembersOf) => (
<>
<Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
{user.username}
</Link>
</>
<Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
{user.username}
</Link>
);
return (
<>

20
src/groups/SearchGroups.tsx
View file

@ -62,17 +62,15 @@ export const SearchGroups = () => {
};
const GroupNameCell = (group: SearchGroup) => (
<>
<Link
key={group.id}
to={`/${realm}/groups/search/${group.link}`}
onClick={() =>
setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
}
>
{group.name}
</Link>
</>
<Link
key={group.id}
to={`/${realm}/groups/search/${group.link}`}
onClick={() =>
setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
}
>
{group.name}
</Link>
);
const flatten = (

32
src/identity-providers/IdentityProvidersSection.tsx
View file

@ -70,23 +70,21 @@ export const IdentityProvidersSection = () => {
const loader = () => Promise.resolve(_.sortBy(providers, "alias"));
const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
<>
<Link
key={identityProvider.providerId}
to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`}
>
{identityProvider.alias}
{!identityProvider.enabled && (
<Badge
key={`${identityProvider.providerId}-disabled`}
isRead
className="pf-u-ml-sm"
>
{t("common:disabled")}
</Badge>
)}
</Link>
</>
<Link
key={identityProvider.providerId}
to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`}
>
{identityProvider.alias}
{!identityProvider.enabled && (
<Badge
key={`${identityProvider.providerId}-disabled`}
isRead
className="pf-u-ml-sm"
>
{t("common:disabled")}
</Badge>
)}
</Link>
);
const navigateToCreate = (providerId: string) =>

4
src/identity-providers/add/AdvancedSettings.tsx
View file

@ -64,6 +64,8 @@ const LoginFlow = ({
aria-label={t(label)}
isOpen={open}
>
{/* The type for the children of Select are incorrect, so we need a fragment here. */}
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>
{defaultValue === "" && (
<SelectOption key="empty" value={defaultValue}>
@ -71,6 +73,8 @@ const LoginFlow = ({
</SelectOption>
)}
</>
{/* The type for the children of Select are incorrect, so we need a fragment here. */}
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>
{flows?.map((option) => (
<SelectOption

167
src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
View file

@ -32,95 +32,90 @@ export const ExtendedNonDiscoverySettings = () => {
const [promptOpen, setPromptOpen] = useState(false);
return (
<>
<ExpandableSection
toggleText={t("advanced")}
onToggle={() => setIsExpanded(!isExpanded)}
isExpanded={isExpanded}
>
<Form isHorizontal>
<SwitchField label="passLoginHint" field="config.loginHint" />
<SwitchField label="passCurrentLocale" field="config.uiLocales" />
<SwitchField
field="config.backchannelSupported"
label="backchannelLogout"
<ExpandableSection
toggleText={t("advanced")}
onToggle={() => setIsExpanded(!isExpanded)}
isExpanded={isExpanded}
>
<Form isHorizontal>
<SwitchField label="passLoginHint" field="config.loginHint" />
<SwitchField label="passCurrentLocale" field="config.uiLocales" />
<SwitchField
field="config.backchannelSupported"
label="backchannelLogout"
/>
<SwitchField field="config.disableUserInfo" label="disableUserInfo" />
<TextField field="config.defaultScope" label="scopes" />
<FormGroupField label="prompt">
<Controller
name="config.prompt"
defaultValue={promptOptions[0]}
control={control}
render={({ onChange, value }) => (
<Select
toggleId="prompt"
required
onToggle={() => setPromptOpen(!promptOpen)}
onSelect={(_, value) => {
onChange(value as string);
setPromptOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("prompt")}
isOpen={promptOpen}
>
{promptOptions.map((option) => (
<SelectOption
selected={option === value}
key={option}
value={option}
>
{t(`prompts.${option}`)}
</SelectOption>
))}
</Select>
)}
/>
<SwitchField field="config.disableUserInfo" label="disableUserInfo" />
<TextField field="config.defaultScope" label="scopes" />
<FormGroupField label="prompt">
<Controller
name="config.prompt"
defaultValue={promptOptions[0]}
control={control}
render={({ onChange, value }) => (
<Select
toggleId="prompt"
required
onToggle={() => setPromptOpen(!promptOpen)}
onSelect={(_, value) => {
onChange(value as string);
setPromptOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("prompt")}
isOpen={promptOpen}
>
{promptOptions.map((option) => (
<SelectOption
selected={option === value}
key={option}
value={option}
>
{t(`prompts.${option}`)}
</SelectOption>
))}
</Select>
)}
</FormGroupField>
<SwitchField
field="config.acceptsPromptNoneForwardFromClient"
label="acceptsPromptNone"
/>
<FormGroup
label={t("allowedClockSkew")}
labelIcon={
<HelpItem
helpText={"identity-providers-help:allowedClockSkew"}
forLabel={t("allowedClockSkew")}
forID="allowedClockSkew"
/>
</FormGroupField>
<SwitchField
field="config.acceptsPromptNoneForwardFromClient"
label="acceptsPromptNone"
/>
<FormGroup
label={t("allowedClockSkew")}
labelIcon={
<HelpItem
helpText={"identity-providers-help:allowedClockSkew"}
forLabel={t("allowedClockSkew")}
forID="allowedClockSkew"
}
fieldId="allowedClockSkew"
>
<Controller
name="config.allowedClockSkew"
control={control}
defaultValue={0}
render={({ onChange, value }) => (
<NumberInput
value={value}
data-testid="allowedClockSkew"
onMinus={() => onChange(value - 1)}
onChange={onChange}
onPlus={() => onChange(value + 1)}
inputName="input"
inputAriaLabel={t("allowedClockSkew")}
minusBtnAriaLabel={t("common:minus")}
plusBtnAriaLabel={t("common:plus")}
min={0}
unit={t("common:times.seconds")}
/>
}
fieldId="allowedClockSkew"
>
<Controller
name="config.allowedClockSkew"
control={control}
defaultValue={0}
render={({ onChange, value }) => (
<NumberInput
value={value}
data-testid="allowedClockSkew"
onMinus={() => onChange(value - 1)}
onChange={onChange}
onPlus={() => onChange(value + 1)}
inputName="input"
inputAriaLabel={t("allowedClockSkew")}
minusBtnAriaLabel={t("common:minus")}
plusBtnAriaLabel={t("common:plus")}
min={0}
unit={t("common:times.seconds")}
/>
)}
/>
</FormGroup>
<TextField
field="config.forwardParameters"
label="forwardParameters"
)}
/>
</Form>
</ExpandableSection>
</>
</FormGroup>
<TextField field="config.forwardParameters" label="forwardParameters" />
</Form>
</ExpandableSection>
);
};

2
src/identity-providers/icons/FontAwesomeIcon.tsx
View file

@ -41,6 +41,6 @@ export const FontAwesomeIcon = ({ icon }: FontAwesomeIconProps) => {
/>
);
default:
return <></>;
return null;
}
};

2
src/realm-roles/AliasRendererComponent.tsx
View file

@ -28,7 +28,7 @@ export const AliasRendererComponent = ({
}, [containerId]);
if (filterType === "roles" || !containerName) {
return <>{name}</>;
return name;
}
if (filterType === "clients" || containerName) {

187
src/realm-roles/AssociatedRolesTab.tsx
View file

@ -134,9 +134,8 @@ export const AssociatedRolesTab = ({
refresh();
}, [additionalRoles, isInheritedHidden]);
const InheritedRoleName = (role: RoleRepresentation) => {
return <>{inheritanceMap.current[role.id!]}</>;
};
const InheritedRoleName = (role: RoleRepresentation) =>
inheritanceMap.current[role.id!];
const AliasRenderer = ({ id, name, clientId }: Role) => {
return (
@ -201,98 +200,96 @@ export const AssociatedRolesTab = ({
const goToCreate = () => history.push(`${url}/add-role`);
return (
<>
<PageSection variant="light" padding={{ default: "noPadding" }}>
<DeleteConfirm />
<DeleteAssociatedRolesConfirm />
<AssociatedRolesModal
onConfirm={addComposites}
existingCompositeRoles={additionalRoles}
open={open}
toggleDialog={() => setOpen(!open)}
/>
<KeycloakDataTable
key={key}
loader={loader}
ariaLabelKey="roles:roleList"
searchPlaceholderKey="roles:searchFor"
canSelectAll
onSelect={(rows) => {
setSelectedRows([...rows]);
}}
toolbarItem={
<>
<ToolbarItem>
<Checkbox
label="Hide inherited roles"
key="associated-roles-check"
id="kc-hide-inherited-roles-checkbox"
onChange={() => setIsInheritedHidden(!isInheritedHidden)}
isChecked={isInheritedHidden}
/>
</ToolbarItem>
<ToolbarItem>
<Button
key="add-role-button"
onClick={() => toggleModal()}
data-testid="add-role-button"
>
{t("addRole")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
variant="link"
isDisabled={selectedRows.length === 0}
key="remove-role-button"
onClick={() => {
toggleDeleteAssociatedRolesDialog();
}}
>
{t("removeRoles")}
</Button>
</ToolbarItem>
</>
}
actions={[
{
title: t("common:remove"),
onRowClick: (role) => {
setSelectedRows([role]);
toggleDeleteDialog();
},
<PageSection variant="light" padding={{ default: "noPadding" }}>
<DeleteConfirm />
<DeleteAssociatedRolesConfirm />
<AssociatedRolesModal
onConfirm={addComposites}
existingCompositeRoles={additionalRoles}
open={open}
toggleDialog={() => setOpen(!open)}
/>
<KeycloakDataTable
key={key}
loader={loader}
ariaLabelKey="roles:roleList"
searchPlaceholderKey="roles:searchFor"
canSelectAll
onSelect={(rows) => {
setSelectedRows([...rows]);
}}
toolbarItem={
<>
<ToolbarItem>
<Checkbox
label="Hide inherited roles"
key="associated-roles-check"
id="kc-hide-inherited-roles-checkbox"
onChange={() => setIsInheritedHidden(!isInheritedHidden)}
isChecked={isInheritedHidden}
/>
</ToolbarItem>
<ToolbarItem>
<Button
key="add-role-button"
onClick={() => toggleModal()}
data-testid="add-role-button"
>
{t("addRole")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
variant="link"
isDisabled={selectedRows.length === 0}
key="remove-role-button"
onClick={() => {
toggleDeleteAssociatedRolesDialog();
}}
>
{t("removeRoles")}
</Button>
</ToolbarItem>
</>
}
actions={[
{
title: t("common:remove"),
onRowClick: (role) => {
setSelectedRows([role]);
toggleDeleteDialog();
},
]}
columns={[
{
name: "name",
displayKey: "roles:roleName",
cellRenderer: AliasRenderer,
cellFormatters: [emptyFormatter()],
},
{
name: "containerId",
displayKey: "roles:inheritedFrom",
cellRenderer: InheritedRoleName,
cellFormatters: [emptyFormatter()],
},
{
name: "description",
displayKey: "common:description",
cellFormatters: [emptyFormatter()],
},
]}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noRoles")}
instructions={t("noRolesInstructions")}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
</>
},
]}
columns={[
{
name: "name",
displayKey: "roles:roleName",
cellRenderer: AliasRenderer,
cellFormatters: [emptyFormatter()],
},
{
name: "containerId",
displayKey: "roles:inheritedFrom",
cellRenderer: InheritedRoleName,
cellFormatters: [emptyFormatter()],
},
{
name: "description",
displayKey: "common:description",
cellFormatters: [emptyFormatter()],
},
]}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noRoles")}
instructions={t("noRolesInstructions")}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
);
};

192
src/realm-roles/RoleAttributes.tsx
View file

@ -45,61 +45,74 @@ export const RoleAttributes = ({
const watchFirstKey = watch("attributes[0].key", "");
return (
<>
<FormAccess role="manage-realm">
<TableComposable
className="kc-role-attributes__table"
aria-label="Role attribute keys and values"
variant="compact"
borders={false}
>
<Thead>
<Tr>
<Th id="key" width={40}>
{columns[0]}
</Th>
<Th id="value" width={40}>
{columns[1]}
</Th>
</Tr>
</Thead>
<Tbody>
{fields.map((attribute, rowIndex) => (
<Tr key={attribute.id}>
<FormAccess role="manage-realm">
<TableComposable
className="kc-role-attributes__table"
aria-label="Role attribute keys and values"
variant="compact"
borders={false}
>
<Thead>
<Tr>
<Th id="key" width={40}>
{columns[0]}
</Th>
<Th id="value" width={40}>
{columns[1]}
</Th>
</Tr>
</Thead>
<Tbody>
{fields.map((attribute, rowIndex) => (
<Tr key={attribute.id}>
<Td
key={`${attribute.id}-key`}
id={`text-input-${rowIndex}-key`}
dataLabel={columns[0]}
>
<TextInput
name={`attributes[${rowIndex}].key`}
ref={register()}
aria-label="key-input"
defaultValue={attribute.key}
validated={
errors.attributes?.[rowIndex] ? "error" : "default"
}
/>
</Td>
<Td
key={`${attribute}-value`}
id={`text-input-${rowIndex}-value`}
dataLabel={columns[1]}
>
<TextInput
name={`attributes[${rowIndex}].value`}
ref={register()}
aria-label="value-input"
defaultValue={attribute.value}
validated={errors.description ? "error" : "default"}
/>
</Td>
{rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
<Td
key={`${attribute.id}-key`}
id={`text-input-${rowIndex}-key`}
dataLabel={columns[0]}
key="minus-button"
id={`kc-minus-button-${rowIndex}`}
dataLabel={columns[2]}
>
<TextInput
name={`attributes[${rowIndex}].key`}
ref={register()}
aria-label="key-input"
defaultValue={attribute.key}
validated={
errors.attributes?.[rowIndex] ? "error" : "default"
}
/>
</Td>
<Td
key={`${attribute}-value`}
id={`text-input-${rowIndex}-value`}
dataLabel={columns[1]}
>
<TextInput
name={`attributes[${rowIndex}].value`}
ref={register()}
aria-label="value-input"
defaultValue={attribute.value}
validated={errors.description ? "error" : "default"}
/>
</Td>
{rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
<Td
key="minus-button"
id={`kc-minus-button-${rowIndex}`}
dataLabel={columns[2]}
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
variant="link"
className="kc-role-attributes__minus-icon"
onClick={() => remove(rowIndex)}
>
<MinusCircleIcon />
</Button>
</Td>
)}
{rowIndex === fields.length - 1 && (
<Td key="add-button" id="add-button" dataLabel={columns[2]}>
{fields[rowIndex].key === "" && (
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
@ -109,50 +122,35 @@ export const RoleAttributes = ({
>
<MinusCircleIcon />
</Button>
</Td>
)}
{rowIndex === fields.length - 1 && (
<Td key="add-button" id="add-button" dataLabel={columns[2]}>
{fields[rowIndex].key === "" && (
<Button
id={`minus-button-${rowIndex}`}
aria-label={`remove ${attribute.key} with value ${attribute.value} `}
variant="link"
className="kc-role-attributes__minus-icon"
onClick={() => remove(rowIndex)}
>
<MinusCircleIcon />
</Button>
)}
<Button
aria-label={t("roles:addAttributeText")}
id="plus-icon"
variant="link"
className="kc-role-attributes__plus-icon"
onClick={() => append({ key: "", value: "" })}
icon={<PlusCircleIcon />}
isDisabled={!formState.isValid}
/>
</Td>
)}
</Tr>
))}
</Tbody>
</TableComposable>
<ActionGroup className="kc-role-attributes__action-group">
<Button
data-testid="realm-roles-save-button"
variant="primary"
isDisabled={!watchFirstKey}
onClick={save}
>
{t("common:save")}
</Button>
<Button onClick={reset} variant="link">
{t("common:reload")}
</Button>
</ActionGroup>
</FormAccess>
</>
)}
<Button
aria-label={t("roles:addAttributeText")}
id="plus-icon"
variant="link"
className="kc-role-attributes__plus-icon"
onClick={() => append({ key: "", value: "" })}
icon={<PlusCircleIcon />}
isDisabled={!formState.isValid}
/>
</Td>
)}
</Tr>
))}
</Tbody>
</TableComposable>
<ActionGroup className="kc-role-attributes__action-group">
<Button
data-testid="realm-roles-save-button"
variant="primary"
isDisabled={!watchFirstKey}
onClick={save}
>
{t("common:save")}
</Button>
<Button onClick={reset} variant="link">
{t("common:reload")}
</Button>
</ActionGroup>
</FormAccess>
);
};

6
src/realm-roles/RolesList.tsx
View file

@ -126,11 +126,7 @@ export const RolesList = ({
ariaLabelKey="roles:roleList"
searchPlaceholderKey="roles:searchFor"
isPaginated={paginated}
toolbarItem={
<>
<Button onClick={goToCreate}>{t("createRole")}</Button>
</>
}
toolbarItem={<Button onClick={goToCreate}>{t("createRole")}</Button>}
actions={[
{
title: t("common:delete"),

162
src/realm-roles/UsersInRoleTab.tsx
View file

@ -42,60 +42,22 @@ export const UsersInRoleTab = () => {
const { enabled } = useHelp();
return (
<>
<PageSection data-testid="users-page" variant="light">
<KeycloakDataTable
isPaginated
loader={loader}
ariaLabelKey="roles:roleList"
searchPlaceholderKey=""
toolbarItem={
enabled && (
<Popover
aria-label="Basic popover"
position="bottom"
bodyContent={
<div>
{t("roles:whoWillAppearPopoverText")}
<Button
className="kc-groups-link"
variant="link"
onClick={() => history.push(`/${realm}/groups`)}
>
{t("groups")}
</Button>
{t("or")}
<Button
className="kc-users-link"
variant="link"
onClick={() => history.push(`/${realm}/users`)}
>
{t("users")}.
</Button>
</div>
}
footerContent={t("roles:whoWillAppearPopoverFooterText")}
>
<Button
variant="link"
className="kc-who-will-appear-button"
key="who-will-appear-button"
icon={<QuestionCircleIcon />}
>
{t("roles:whoWillAppearLinkText")}
</Button>
</Popover>
)
}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noDirectUsers")}
instructions={
<PageSection data-testid="users-page" variant="light">
<KeycloakDataTable
isPaginated
loader={loader}
ariaLabelKey="roles:roleList"
searchPlaceholderKey=""
toolbarItem={
enabled && (
<Popover
aria-label="Basic popover"
position="bottom"
bodyContent={
<div>
{t("noUsersEmptyStateDescription")}
{t("roles:whoWillAppearPopoverText")}
<Button
className="kc-groups-link-empty-state"
className="kc-groups-link"
variant="link"
onClick={() => history.push(`/${realm}/groups`)}
>
@ -103,41 +65,77 @@ export const UsersInRoleTab = () => {
</Button>
{t("or")}
<Button
className="kc-users-link-empty-state"
className="kc-users-link"
variant="link"
onClick={() => history.push(`/${realm}/users`)}
>
{t("users")}
{t("users")}.
</Button>
{t("noUsersEmptyStateDescriptionContinued")}
</div>
}
/>
}
columns={[
{
name: "username",
displayKey: "roles:userName",
cellFormatters: [emptyFormatter()],
},
{
name: "email",
displayKey: "roles:email",
cellFormatters: [emptyFormatter()],
},
{
name: "lastName",
displayKey: "roles:lastName",
cellFormatters: [emptyFormatter()],
},
{
name: "firstName",
displayKey: "roles:firstName",
cellFormatters: [upperCaseFormatter(), emptyFormatter()],
},
]}
/>
</PageSection>
</>
footerContent={t("roles:whoWillAppearPopoverFooterText")}
>
<Button
variant="link"
className="kc-who-will-appear-button"
key="who-will-appear-button"
icon={<QuestionCircleIcon />}
>
{t("roles:whoWillAppearLinkText")}
</Button>
</Popover>
)
}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("noDirectUsers")}
instructions={
<div>
{t("noUsersEmptyStateDescription")}
<Button
className="kc-groups-link-empty-state"
variant="link"
onClick={() => history.push(`/${realm}/groups`)}
>
{t("groups")}
</Button>
{t("or")}
<Button
className="kc-users-link-empty-state"
variant="link"
onClick={() => history.push(`/${realm}/users`)}
>
{t("users")}
</Button>
{t("noUsersEmptyStateDescriptionContinued")}
</div>
}
/>
}
columns={[
{
name: "username",
displayKey: "roles:userName",
cellFormatters: [emptyFormatter()],
},
{
name: "email",
displayKey: "roles:email",
cellFormatters: [emptyFormatter()],
},
{
name: "lastName",
displayKey: "roles:lastName",
cellFormatters: [emptyFormatter()],
},
{
name: "firstName",
displayKey: "roles:firstName",
cellFormatters: [upperCaseFormatter(), emptyFormatter()],
},
]}
/>
</PageSection>
);
};

313
src/realm-settings/GeneralTab.tsx
View file

@ -49,172 +49,167 @@ export const RealmSettingsGeneralTab = ({
const requireSslTypes = ["all", "external", "none"];
return (
<>
<PageSection variant="light">
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
<PageSection variant="light">
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
<Controller
name="realm"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<ClipboardCopy onChange={onChange}>{value}</ClipboardCopy>
)}
/>
</FormGroup>
<FormGroup label={t("displayName")} fieldId="kc-display-name">
<TextInput
type="text"
id="kc-display-name"
name="displayName"
ref={register}
/>
</FormGroup>
<FormGroup label={t("htmlDisplayName")} fieldId="kc-html-display-name">
<TextInput
type="text"
id="kc-html-display-name"
name="displayNameHtml"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("frontendUrl")}
fieldId="kc-frontend-url"
labelIcon={
<HelpItem
helpText="realm-settings-help:frontendUrl"
forLabel={t("frontendUrl")}
forID={t(`common:helpLabel`, { label: t("frontendUrl") })}
/>
}
>
<FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
<Controller
name="realm"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<ClipboardCopy onChange={onChange}>{value}</ClipboardCopy>
)}
<TextInput
type="text"
id="kc-frontend-url"
name="attributes.frontendUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("requireSsl")}
fieldId="kc-require-ssl"
labelIcon={
<HelpItem
helpText="realm-settings-help:requireSsl"
forLabel={t("requireSsl")}
forID={t(`common:helpLabel`, { label: t("requireSsl") })}
/>
</FormGroup>
<FormGroup label={t("displayName")} fieldId="kc-display-name">
<TextInput
type="text"
id="kc-display-name"
name="displayName"
ref={register}
}
>
<Controller
name="sslRequired"
defaultValue="none"
control={control}
render={({ onChange, value }) => (
<Select
toggleId="kc-require-ssl"
onToggle={() => setOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
setOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("requireSsl")}
isOpen={open}
>
{requireSslTypes.map((sslType) => (
<SelectOption
selected={sslType === value}
key={sslType}
value={sslType}
>
{t(`sslType.${sslType}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("userManagedAccess")}
labelIcon={
<HelpItem
helpText="realm-settings-help:userManagedAccess"
forLabel={t("userManagedAccess")}
forID={t(`common:helpLabel`, { label: t("userManagedAccess") })}
/>
</FormGroup>
<FormGroup
label={t("htmlDisplayName")}
fieldId="kc-html-display-name"
>
<TextInput
type="text"
id="kc-html-display-name"
name="displayNameHtml"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("frontendUrl")}
fieldId="kc-frontend-url"
labelIcon={
<HelpItem
helpText="realm-settings-help:frontendUrl"
forLabel={t("frontendUrl")}
forID={t(`common:helpLabel`, { label: t("frontendUrl") })}
}
fieldId="kc-user-manged-access"
>
<Controller
name="userManagedAccessAllowed"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-user-managed-access"
data-testid="user-managed-access-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value}
onChange={onChange}
/>
}
>
<TextInput
type="text"
id="kc-frontend-url"
name="attributes.frontendUrl"
ref={register}
)}
/>
</FormGroup>
<FormGroup
label={t("endpoints")}
labelIcon={
<HelpItem
helpText="realm-settings-help:endpoints"
forLabel={t("endpoints")}
forID={t(`common:helpLabel`, { label: t("endpoints") })}
/>
</FormGroup>
<FormGroup
label={t("requireSsl")}
fieldId="kc-require-ssl"
labelIcon={
<HelpItem
helpText="realm-settings-help:requireSsl"
forLabel={t("requireSsl")}
forID={t(`common:helpLabel`, { label: t("requireSsl") })}
}
fieldId="kc-endpoints"
>
<Stack>
<StackItem>
<FormattedLink
href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
title={t("openIDEndpointConfiguration")}
/>
}
>
<Controller
name="sslRequired"
defaultValue="none"
control={control}
render={({ onChange, value }) => (
<Select
toggleId="kc-require-ssl"
onToggle={() => setOpen(!open)}
onSelect={(_, value) => {
onChange(value as string);
setOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("requireSsl")}
isOpen={open}
>
{requireSslTypes.map((sslType) => (
<SelectOption
selected={sslType === value}
key={sslType}
value={sslType}
>
{t(`sslType.${sslType}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("userManagedAccess")}
labelIcon={
<HelpItem
helpText="realm-settings-help:userManagedAccess"
forLabel={t("userManagedAccess")}
forID={t(`common:helpLabel`, { label: t("userManagedAccess") })}
</StackItem>
<StackItem>
<FormattedLink
href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
title={t("samlIdentityProviderMetadata")}
/>
}
fieldId="kc-user-manged-access"
>
<Controller
name="userManagedAccessAllowed"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-user-managed-access"
data-testid="user-managed-access-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value}
onChange={onChange}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("endpoints")}
labelIcon={
<HelpItem
helpText="realm-settings-help:endpoints"
forLabel={t("endpoints")}
forID={t(`common:helpLabel`, { label: t("endpoints") })}
/>
}
fieldId="kc-endpoints"
>
<Stack>
<StackItem>
<FormattedLink
href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
title={t("openIDEndpointConfiguration")}
/>
</StackItem>
<StackItem>
<FormattedLink
href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
title={t("samlIdentityProviderMetadata")}
/>
</StackItem>
</Stack>
</FormGroup>
</StackItem>
</Stack>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="general-tab-save"
isDisabled={!isDirty}
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
</>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="general-tab-save"
isDisabled={!isDirty}
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
);
};

234
src/realm-settings/KeysListTab.tsx
View file

@ -130,52 +130,46 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
const goToCreate = () => history.push(`${url}/add-role`);
const ProviderRenderer = ({ provider }: KeyData) => {
return <>{provider}</>;
};
const ProviderRenderer = ({ provider }: KeyData) => provider;
const ButtonRenderer = ({ type, publicKey, certificate }: KeyData) => {
if (type === "EC") {
return (
<>
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
);
} else if (type === "RSA") {
return (
<div className="button-wrapper">
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-public-key"
id="kc-rsa-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
</>
);
} else if (type === "RSA") {
return (
<>
<div className="button-wrapper">
<Button
onClick={() => {
togglePublicKeyDialog();
setPublicKey(publicKey!);
}}
variant="secondary"
id="kc-rsa-public-key"
>
{t("realm-settings:publicKeys").slice(0, -1)}
</Button>
<Button
onClick={() => {
toggleCertificateDialog();
setCertificate(certificate!);
}}
variant="secondary"
id="kc-certificate"
>
{t("realm-settings:certificate")}
</Button>
</div>
</>
<Button
onClick={() => {
toggleCertificateDialog();
setCertificate(certificate!);
}}
variant="secondary"
id="kc-certificate"
>
{t("realm-settings:certificate")}
</Button>
</div>
);
}
};
@ -200,93 +194,91 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
];
return (
<>
<PageSection variant="light" padding={{ default: "noPadding" }}>
<PublicKeyDialog />
<CertificateDialog />
<KeycloakDataTable
isNotCompact={true}
key={key}
loader={
filterType === "Active keys"
? activeKeysLoader
: filterType === "Passive keys"
? passiveKeysLoader
: filterType === "Disabled keys"
? disabledKeysLoader
: loader
}
ariaLabelKey="realm-settings:keysList"
searchPlaceholderKey="realm-settings:searchKey"
searchTypeComponent={
<Select
width={300}
data-testid="filter-type-select"
isOpen={filterDropdownOpen}
className="kc-filter-type-select"
variant={SelectVariant.single}
onToggle={() => setFilterDropdownOpen(!filterDropdownOpen)}
toggleIcon={<FilterIcon />}
onSelect={(_, value) => {
setFilterType(value as string);
refresh();
setFilterDropdownOpen(false);
}}
selections={filterType}
>
{options}
</Select>
}
canSelectAll
columns={[
{
name: "algorithm",
displayKey: "realm-settings:algorithm",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(15)],
},
{
name: "type",
displayKey: "realm-settings:type",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "kid",
displayKey: "realm-settings:kid",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "provider",
displayKey: "realm-settings:provider",
cellRenderer: ProviderRenderer,
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "publicKeys",
displayKey: "realm-settings:publicKeys",
cellRenderer: ButtonRenderer,
cellFormatters: [],
transforms: [cellWidth(20)],
},
]}
isSearching={!!filterType}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("realm-settings:noKeys")}
instructions={
t(`realm-settings:noKeysDescription`) +
`${filterType.toLocaleLowerCase()}.`
}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
</>
<PageSection variant="light" padding={{ default: "noPadding" }}>
<PublicKeyDialog />
<CertificateDialog />
<KeycloakDataTable
isNotCompact={true}
key={key}
loader={
filterType === "Active keys"
? activeKeysLoader
: filterType === "Passive keys"
? passiveKeysLoader
: filterType === "Disabled keys"
? disabledKeysLoader
: loader
}
ariaLabelKey="realm-settings:keysList"
searchPlaceholderKey="realm-settings:searchKey"
searchTypeComponent={
<Select
width={300}
data-testid="filter-type-select"
isOpen={filterDropdownOpen}
className="kc-filter-type-select"
variant={SelectVariant.single}
onToggle={() => setFilterDropdownOpen(!filterDropdownOpen)}
toggleIcon={<FilterIcon />}
onSelect={(_, value) => {
setFilterType(value as string);
refresh();
setFilterDropdownOpen(false);
}}
selections={filterType}
>
{options}
</Select>
}
canSelectAll
columns={[
{
name: "algorithm",
displayKey: "realm-settings:algorithm",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(15)],
},
{
name: "type",
displayKey: "realm-settings:type",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "kid",
displayKey: "realm-settings:kid",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "provider",
displayKey: "realm-settings:provider",
cellRenderer: ProviderRenderer,
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "publicKeys",
displayKey: "realm-settings:publicKeys",
cellRenderer: ButtonRenderer,
cellFormatters: [],
transforms: [cellWidth(20)],
},
]}
isSearching={!!filterType}
emptyState={
<ListEmptyState
hasIcon={true}
message={t("realm-settings:noKeys")}
instructions={
t(`realm-settings:noKeysDescription`) +
`${filterType.toLocaleLowerCase()}.`
}
primaryActionText={t("createRole")}
onPrimaryAction={goToCreate}
/>
}
/>
</PageSection>
);
};

124
src/realm-settings/KeysProvidersTab.tsx
View file

@ -256,60 +256,58 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
<DeleteConfirm />
<PageSection variant="light" padding={{ default: "noPadding" }}>
<Toolbar>
<>
<ToolbarGroup className="providers-toolbar">
<ToolbarItem>
<InputGroup>
<TextInput
name={"inputGroupName"}
id={"inputGroupName"}
type="search"
aria-label={t("common:search")}
placeholder={t("common:search")}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<Button
variant={ButtonVariant.control}
aria-label={t("common:search")}
>
<SearchIcon />
</Button>
</InputGroup>
</ToolbarItem>
<ToolbarItem>
<Dropdown
data-testid="addProviderDropdown"
className="add-provider-dropdown"
isOpen={providerDropdownOpen}
toggle={
<DropdownToggle
onToggle={(val) => setProviderDropdownOpen(val)}
isPrimary
>
{t("realm-settings:addProvider")}
</DropdownToggle>
}
dropdownItems={[
providerTypes.map((item) => (
<DropdownItem
onClick={() => {
handleModalToggle();
setProviderDropdownOpen(false);
setDefaultConsoleDisplayName(item);
}}
data-testid={`option-${item}`}
key={item}
>
{item}
</DropdownItem>
)),
]}
<ToolbarGroup className="providers-toolbar">
<ToolbarItem>
<InputGroup>
<TextInput
name={"inputGroupName"}
id={"inputGroupName"}
type="search"
aria-label={t("common:search")}
placeholder={t("common:search")}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
</ToolbarItem>
</ToolbarGroup>
</>
<Button
variant={ButtonVariant.control}
aria-label={t("common:search")}
>
<SearchIcon />
</Button>
</InputGroup>
</ToolbarItem>
<ToolbarItem>
<Dropdown
data-testid="addProviderDropdown"
className="add-provider-dropdown"
isOpen={providerDropdownOpen}
toggle={
<DropdownToggle
onToggle={(val) => setProviderDropdownOpen(val)}
isPrimary
>
{t("realm-settings:addProvider")}
</DropdownToggle>
}
dropdownItems={[
providerTypes.map((item) => (
<DropdownItem
onClick={() => {
handleModalToggle();
setProviderDropdownOpen(false);
setDefaultConsoleDisplayName(item);
}}
data-testid={`option-${item}`}
key={item}
>
{item}
</DropdownItem>
)),
]}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
<DataList
aria-label={t("groups")}
@ -375,21 +373,19 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
data-testid="provider-name"
key={`name-${idx}`}
>
<>
<Link
key={component.name}
data-testid="provider-name-link"
to={`${url}/${component.id}/${component.providerId}/settings`}
>
{component.name}
</Link>
</>
<Link
key={component.name}
data-testid="provider-name-link"
to={`${url}/${component.id}/${component.providerId}/settings`}
>
{component.name}
</Link>
</DataListCell>,
<DataListCell key={`providerId-${idx}`}>
<>{component.providerId}</>
{component.providerId}
</DataListCell>,
<DataListCell key={`providerDescription-${idx}`}>
<>{component.providerDescription}</>
{component.providerDescription}
</DataListCell>,
<DataListAction
aria-labelledby="data-list-action"

365
src/realm-settings/LoginTab.tsx
View file

@ -18,198 +18,193 @@ export const RealmSettingsLoginTab = ({
const { t } = useTranslation("realm-settings");
return (
<>
<PageSection variant="light">
<FormPanel
className="kc-login-screen"
title="Login screen customization"
>
<FormAccess isHorizontal role="manage-realm">
<FormGroup
label={t("userRegistration")}
fieldId="kc-user-reg"
labelIcon={
<HelpItem
helpText={t("userRegistrationHelpText")}
forLabel={t("userRegistration")}
forID={t(`common:helpLabel`, {
label: t("userRegistration"),
})}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-user-reg-switch"
data-testid="user-reg-switch"
name="registrationAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.registrationAllowed}
onChange={(value) => {
save({ ...realm, registrationAllowed: value });
}}
<PageSection variant="light">
<FormPanel className="kc-login-screen" title="Login screen customization">
<FormAccess isHorizontal role="manage-realm">
<FormGroup
label={t("userRegistration")}
fieldId="kc-user-reg"
labelIcon={
<HelpItem
helpText={t("userRegistrationHelpText")}
forLabel={t("userRegistration")}
forID={t(`common:helpLabel`, {
label: t("userRegistration"),
})}
/>
</FormGroup>
<FormGroup
label={t("forgotPassword")}
fieldId="kc-forgot-pw"
labelIcon={
<HelpItem
helpText={t("forgotPasswordHelpText")}
forLabel={t("forgotPassword")}
forID={t(`common:helpLabel`, { label: t("forgotPassword") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-forgot-pw-switch"
data-testid="forgot-pw-switch"
name="resetPasswordAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.resetPasswordAllowed}
onChange={(value) => {
save({ ...realm, resetPasswordAllowed: value });
}}
}
hasNoPaddingTop
>
<Switch
id="kc-user-reg-switch"
data-testid="user-reg-switch"
name="registrationAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.registrationAllowed}
onChange={(value) => {
save({ ...realm, registrationAllowed: value });
}}
/>
</FormGroup>
<FormGroup
label={t("forgotPassword")}
fieldId="kc-forgot-pw"
labelIcon={
<HelpItem
helpText={t("forgotPasswordHelpText")}
forLabel={t("forgotPassword")}
forID={t(`common:helpLabel`, { label: t("forgotPassword") })}
/>
</FormGroup>
<FormGroup
label={t("rememberMe")}
fieldId="kc-remember-me"
labelIcon={
<HelpItem
helpText={t("rememberMeHelpText")}
forLabel={t("rememberMe")}
forID={t(`common:helpLabel`, { label: t("rememberMe") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-remember-me-switch"
data-testid="remember-me-switch"
name="rememberMe"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.rememberMe}
onChange={(value) => {
save({ ...realm, rememberMe: value });
}}
}
hasNoPaddingTop
>
<Switch
id="kc-forgot-pw-switch"
data-testid="forgot-pw-switch"
name="resetPasswordAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.resetPasswordAllowed}
onChange={(value) => {
save({ ...realm, resetPasswordAllowed: value });
}}
/>
</FormGroup>
<FormGroup
label={t("rememberMe")}
fieldId="kc-remember-me"
labelIcon={
<HelpItem
helpText={t("rememberMeHelpText")}
forLabel={t("rememberMe")}
forID={t(`common:helpLabel`, { label: t("rememberMe") })}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel className="kc-email-settings" title="Email settings">
<FormAccess isHorizontal role="manage-realm">
<FormGroup
label={t("emailAsUsername")}
fieldId="kc-email-as-username"
labelIcon={
<HelpItem
helpText={t("emailAsUsernameHelpText")}
forLabel={t("emailAsUsername")}
forID={t(`common:helpLabel`, { label: t("emailAsUsername") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-email-as-username-switch"
data-testid="email-as-username-switch"
name="registrationEmailAsUsername"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.registrationEmailAsUsername}
onChange={(value) => {
save({ ...realm, registrationEmailAsUsername: value });
}}
}
hasNoPaddingTop
>
<Switch
id="kc-remember-me-switch"
data-testid="remember-me-switch"
name="rememberMe"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.rememberMe}
onChange={(value) => {
save({ ...realm, rememberMe: value });
}}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel className="kc-email-settings" title="Email settings">
<FormAccess isHorizontal role="manage-realm">
<FormGroup
label={t("emailAsUsername")}
fieldId="kc-email-as-username"
labelIcon={
<HelpItem
helpText={t("emailAsUsernameHelpText")}
forLabel={t("emailAsUsername")}
forID={t(`common:helpLabel`, { label: t("emailAsUsername") })}
/>
</FormGroup>
<FormGroup
label={t("loginWithEmail")}
fieldId="kc-login-with-email"
labelIcon={
<HelpItem
helpText={t("loginWithEmailHelpText")}
forLabel={t("loginWithEmail")}
forID={t(`common:helpLabel`, { label: t("loginWithEmail") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-login-with-email-switch"
data-testid="login-with-email-switch"
name="loginWithEmailAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.loginWithEmailAllowed}
onChange={(value) => {
save({ ...realm, loginWithEmailAllowed: value });
}}
}
hasNoPaddingTop
>
<Switch
id="kc-email-as-username-switch"
data-testid="email-as-username-switch"
name="registrationEmailAsUsername"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.registrationEmailAsUsername}
onChange={(value) => {
save({ ...realm, registrationEmailAsUsername: value });
}}
/>
</FormGroup>
<FormGroup
label={t("loginWithEmail")}
fieldId="kc-login-with-email"
labelIcon={
<HelpItem
helpText={t("loginWithEmailHelpText")}
forLabel={t("loginWithEmail")}
forID={t(`common:helpLabel`, { label: t("loginWithEmail") })}
/>
</FormGroup>
<FormGroup
label={t("duplicateEmails")}
fieldId="kc-duplicate-emails"
labelIcon={
<HelpItem
helpText={t("duplicateEmailsHelpText")}
forLabel={t("duplicateEmails")}
forID={t(`common:helpLabel`, { label: t("duplicateEmails") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-duplicate-emails-switch"
data-testid="duplicate-emails-switch"
label={t("common:on")}
labelOff={t("common:off")}
name="duplicateEmailsAllowed"
isChecked={
realm?.duplicateEmailsAllowed &&
!realm?.loginWithEmailAllowed &&
!realm?.registrationEmailAsUsername
}
onChange={(value) => {
save({ ...realm, duplicateEmailsAllowed: value });
}}
isDisabled={
realm?.loginWithEmailAllowed ||
realm?.registrationEmailAsUsername
}
}
hasNoPaddingTop
>
<Switch
id="kc-login-with-email-switch"
data-testid="login-with-email-switch"
name="loginWithEmailAllowed"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.loginWithEmailAllowed}
onChange={(value) => {
save({ ...realm, loginWithEmailAllowed: value });
}}
/>
</FormGroup>
<FormGroup
label={t("duplicateEmails")}
fieldId="kc-duplicate-emails"
labelIcon={
<HelpItem
helpText={t("duplicateEmailsHelpText")}
forLabel={t("duplicateEmails")}
forID={t(`common:helpLabel`, { label: t("duplicateEmails") })}
/>
</FormGroup>
<FormGroup
label={t("verifyEmail")}
fieldId="kc-verify-email"
labelIcon={
<HelpItem
helpText={t("verifyEmailHelpText")}
forLabel={t("verifyEmail")}
forID={t(`common:helpLabel`, { label: t("verifyEmail") })}
/>
}
hasNoPaddingTop
>
<Switch
id="kc-duplicate-emails-switch"
data-testid="duplicate-emails-switch"
label={t("common:on")}
labelOff={t("common:off")}
name="duplicateEmailsAllowed"
isChecked={
realm?.duplicateEmailsAllowed &&
!realm?.loginWithEmailAllowed &&
!realm?.registrationEmailAsUsername
}
hasNoPaddingTop
>
<Switch
id="kc-verify-email-switch"
data-testid="verify-email-switch"
name="verifyEmail"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.verifyEmail}
onChange={(value) => {
save({ ...realm, verifyEmail: value });
}}
onChange={(value) => {
save({ ...realm, duplicateEmailsAllowed: value });
}}
isDisabled={
realm?.loginWithEmailAllowed ||
realm?.registrationEmailAsUsername
}
/>
</FormGroup>
<FormGroup
label={t("verifyEmail")}
fieldId="kc-verify-email"
labelIcon={
<HelpItem
helpText={t("verifyEmailHelpText")}
forLabel={t("verifyEmail")}
forID={t(`common:helpLabel`, { label: t("verifyEmail") })}
/>
</FormGroup>
</FormAccess>
</FormPanel>
</PageSection>
</>
}
hasNoPaddingTop
>
<Switch
id="kc-verify-email-switch"
data-testid="verify-email-switch"
name="verifyEmail"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={realm?.verifyEmail}
onChange={(value) => {
save({ ...realm, verifyEmail: value });
}}
/>
</FormGroup>
</FormAccess>
</FormPanel>
</PageSection>
);
};

24
src/realm-settings/RealmSettingsSection.tsx
View file

@ -53,19 +53,17 @@ export const EditProviderCrumb = () => {
const { realm } = useRealm();
return (
<>
<Breadcrumb>
<BreadcrumbItem
render={(props) => (
<Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
{t("keys")}
</Link>
)}
/>
<BreadcrumbItem>{t("providers")}</BreadcrumbItem>
<BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
</Breadcrumb>
</>
<Breadcrumb>
<BreadcrumbItem
render={(props) => (
<Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
{t("keys")}
</Link>
)}
/>
<BreadcrumbItem>{t("providers")}</BreadcrumbItem>
<BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
</Breadcrumb>
);
};

690
src/realm-settings/SessionsTab.tsx
View file

@ -70,337 +70,294 @@ export const RealmSettingsSessionsTab = ({
};
return (
<>
<PageSection variant="light">
<FormPanel
title={t("SSOSessionSettings")}
className="kc-sso-session-template"
<PageSection variant="light">
<FormPanel
title={t("SSOSessionSettings")}
className="kc-sso-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
onSubmit={handleSubmit(save)}
>
<FormAccess
isHorizontal
role="manage-realm"
onSubmit={handleSubmit(save)}
<FormGroup
label={t("SSOSessionIdle")}
fieldId="SSOSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionIdle"
forLabel={t("SSOSessionIdle")}
forID="SSOSessionIdle"
id="SSOSessionIdle"
/>
}
>
<FormGroup
label={t("SSOSessionIdle")}
fieldId="SSOSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionIdle"
forLabel={t("SSOSessionIdle")}
forID="SSOSessionIdle"
id="SSOSessionIdle"
<Controller
name="ssoSessionIdleTimeout"
defaultValue={realm?.ssoSessionIdleTimeout}
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-idle"
data-testid="sso-session-idle-input"
aria-label="sso-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
}
>
<Controller
name="ssoSessionIdleTimeout"
defaultValue={realm?.ssoSessionIdleTimeout}
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-idle"
data-testid="sso-session-idle-input"
aria-label="sso-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
)}
/>
</FormGroup>
<FormGroup
label={t("SSOSessionMax")}
fieldId="SSOSessionMax"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionMax"
forLabel={t("SSOSessionMax")}
forID="SSOSessionMax"
id="SSOSessionMax"
/>
}
>
<Controller
name="ssoSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-max"
data-testid="sso-session-max-input"
aria-label="sso-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("SSOSessionMax")}
fieldId="SSOSessionMax"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionMax"
forLabel={t("SSOSessionMax")}
forID="SSOSessionMax"
id="SSOSessionMax"
/>
</FormGroup>
}
>
<Controller
name="ssoSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-max"
data-testid="sso-session-max-input"
aria-label="sso-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("SSOSessionIdleRememberMe")}
fieldId="SSOSessionIdleRememberMe"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionIdleRememberMe"
forLabel={t("SSOSessionIdleRememberMe")}
forID="SSOSessionIdleRememberMe"
id="SSOSessionIdleRememberMe"
/>
}
>
<Controller
name="ssoSessionIdleTimeoutRememberMe"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-idle-remember-me"
data-testid="sso-session-idle-remember-me-input"
aria-label="sso-session-idle-remember-me-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("SSOSessionIdleRememberMe")}
fieldId="SSOSessionIdleRememberMe"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionIdleRememberMe"
forLabel={t("SSOSessionIdleRememberMe")}
forID="SSOSessionIdleRememberMe"
id="SSOSessionIdleRememberMe"
/>
</FormGroup>
}
>
<Controller
name="ssoSessionIdleTimeoutRememberMe"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-idle-remember-me"
data-testid="sso-session-idle-remember-me-input"
aria-label="sso-session-idle-remember-me-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("SSOSessionMaxRememberMe")}
fieldId="SSOSessionMaxRememberMe"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionMaxRememberMe"
forLabel={t("SSOSessionMaxRememberMe")}
forID="SSOSessionMaxRememberMe"
id="SSOSessionMaxRememberMe"
/>
}
>
<Controller
name="ssoSessionMaxLifespanRememberMe"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-max-remember-me"
aria-label="sso-session-max-remember-me-input"
data-testid="sso-session-max-remember-me-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("SSOSessionMaxRememberMe")}
fieldId="SSOSessionMaxRememberMe"
labelIcon={
<HelpItem
helpText="realm-settings-help:ssoSessionMaxRememberMe"
forLabel={t("SSOSessionMaxRememberMe")}
forID="SSOSessionMaxRememberMe"
id="SSOSessionMaxRememberMe"
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("clientSessionSettings")}
className="kc-client-session-template"
}
>
<Controller
name="ssoSessionMaxLifespanRememberMe"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-sso-session-max-remember-me"
aria-label="sso-session-max-remember-me-input"
data-testid="sso-session-max-remember-me-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("clientSessionSettings")}
className="kc-client-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("clientSessionIdle")}
fieldId="clientSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientSessionIdle"
forLabel={t("clientSessionIdle")}
forID="clientSessionIdle"
id="clientSessionIdle"
/>
}
>
<Controller
name="clientSessionIdleTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-session-idle"
data-testid="client-session-idle-input"
aria-label="client-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("clientSessionIdle")}
fieldId="clientSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientSessionIdle"
forLabel={t("clientSessionIdle")}
forID="clientSessionIdle"
id="clientSessionIdle"
/>
</FormGroup>
}
>
<Controller
name="clientSessionIdleTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-session-idle"
data-testid="client-session-idle-input"
aria-label="client-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("clientSessionMax")}
fieldId="clientSessionMax"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientSessionMax"
forLabel={t("clientSessionMax")}
forID="clientSessionMax"
id="clientSessionMax"
/>
}
>
<Controller
name="clientSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-session-max"
data-testid="client-session-max-input"
aria-label="client-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("clientSessionMax")}
fieldId="clientSessionMax"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientSessionMax"
forLabel={t("clientSessionMax")}
forID="clientSessionMax"
id="clientSessionMax"
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("offlineSessionSettings")}
className="kc-offline-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
}
>
<FormGroup
label={t("offlineSessionIdle")}
fieldId="offlineSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionIdle"
forLabel={t("offlineSessionIdle")}
forID="offlineSessionIdle"
id="offlineSessionIdle"
<Controller
name="clientSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-session-max"
data-testid="client-session-max-input"
aria-label="client-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
}
>
<Controller
name="offlineSessionIdleTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-offline-session-idle"
data-testid="offline-session-idle-input"
aria-label="offline-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
)}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("offlineSessionSettings")}
className="kc-offline-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("offlineSessionIdle")}
fieldId="offlineSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionIdle"
forLabel={t("offlineSessionIdle")}
forID="offlineSessionIdle"
id="offlineSessionIdle"
/>
</FormGroup>
}
>
<Controller
name="offlineSessionIdleTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-offline-session-idle"
data-testid="offline-session-idle-input"
aria-label="offline-session-idle-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label={t("offlineSessionMaxLimited")}
fieldId="kc-offlineSessionMaxLimited"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionMaxLimited"
forLabel={t("offlineSessionMaxLimited")}
forID="offlineSessionMaxLimited"
id="offlineSessionMaxLimited"
/>
}
>
<Controller
name="offlineSessionMaxLifespanEnabled"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-offline-session-max"
data-testid="offline-session-max-switch"
aria-label="offline-session-max-switch"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
onChange={(value) => onChange(value.toString())}
/>
)}
<FormGroup
hasNoPaddingTop
label={t("offlineSessionMaxLimited")}
fieldId="kc-offlineSessionMaxLimited"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionMaxLimited"
forLabel={t("offlineSessionMaxLimited")}
forID="offlineSessionMaxLimited"
id="offlineSessionMaxLimited"
/>
</FormGroup>
{offlineSessionMaxEnabled && (
<FormGroup
label={t("offlineSessionMax")}
fieldId="offlineSessionMax"
id="offline-session-max-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionMax"
forLabel={t("offlineSessionMax")}
forID="offlineSessionMax"
id="offlineSessionMax"
/>
}
>
<Controller
name="offlineSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-offline-session-max"
data-testid="offline-session-max-input"
aria-label="offline-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
)}
</FormAccess>
</FormPanel>
<FormPanel
className="kc-login-settings-template"
title={t("loginSettings")}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
}
>
<Controller
name="offlineSessionMaxLifespanEnabled"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-offline-session-max"
data-testid="offline-session-max-switch"
aria-label="offline-session-max-switch"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
{offlineSessionMaxEnabled && (
<FormGroup
label={t("loginTimeout")}
id="kc-login-timeout-label"
fieldId="offlineSessionIdle"
label={t("offlineSessionMax")}
fieldId="offlineSessionMax"
id="offline-session-max-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginTimeout"
forLabel={t("loginTimeout")}
forID="loginTimeout"
id="loginTimeout"
helpText="realm-settings-help:offlineSessionMax"
forLabel={t("offlineSessionMax")}
forID="offlineSessionMax"
id="offlineSessionMax"
/>
}
>
<Controller
name="accessCodeLifespanLogin"
name="offlineSessionMaxLifespan"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-login-timeout"
data-testid="login-timeout-input"
aria-label="login-timeout-input"
className="kc-offline-session-max"
data-testid="offline-session-max-input"
aria-label="offline-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
@ -408,51 +365,92 @@ export const RealmSettingsSessionsTab = ({
)}
/>
</FormGroup>
<FormGroup
label={t("loginActionTimeout")}
fieldId="loginActionTimeout"
id="login-action-timeout-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginActionTimeout"
forLabel={t("loginActionTimeout")}
forID="loginActionTimeout"
id="loginActionTimeout"
/>
}
>
<Controller
name="accessCodeLifespanUserAction"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-login-action-timeout"
data-testid="login-action-timeout-input"
aria-label="login-action-timeout-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
)}
</FormAccess>
</FormPanel>
<FormPanel
className="kc-login-settings-template"
title={t("loginSettings")}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("loginTimeout")}
id="kc-login-timeout-label"
fieldId="offlineSessionIdle"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginTimeout"
forLabel={t("loginTimeout")}
forID="loginTimeout"
id="loginTimeout"
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="sessions-tab-save"
isDisabled={!formState.isDirty}
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</FormPanel>
</PageSection>
</>
}
>
<Controller
name="accessCodeLifespanLogin"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-login-timeout"
data-testid="login-timeout-input"
aria-label="login-timeout-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("loginActionTimeout")}
fieldId="loginActionTimeout"
id="login-action-timeout-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginActionTimeout"
forLabel={t("loginActionTimeout")}
forID="loginActionTimeout"
id="loginActionTimeout"
/>
}
>
<Controller
name="accessCodeLifespanUserAction"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-login-action-timeout"
data-testid="login-action-timeout-input"
aria-label="login-action-timeout-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="sessions-tab-save"
isDisabled={!formState.isDirty}
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</FormPanel>
</PageSection>
);
};

606
src/realm-settings/ThemesTab.tsx
View file

@ -55,314 +55,308 @@ export const RealmSettingsThemesTab = ({
});
return (
<>
<PageSection variant="light">
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
<PageSection variant="light">
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("loginTheme")}
fieldId="kc-login-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginTheme"
forLabel={t("loginTheme")}
forID="kc-login-theme"
/>
}
>
<FormGroup
label={t("loginTheme")}
fieldId="kc-login-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:loginTheme"
forLabel={t("loginTheme")}
forID="kc-login-theme"
/>
}
>
<Controller
name="loginTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-login-theme"
onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setLoginThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("loginTheme")}
isOpen={loginThemeOpen}
placeholderText="Select a theme"
data-testid="select-login-theme"
>
{themeTypes.login.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`login-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("accountTheme")}
fieldId="kc-account-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:accountTheme"
forLabel={t("accountTheme")}
forID="kc-account-theme"
/>
}
>
<Controller
name="accountTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-account-theme"
onToggle={() => setAccountThemeOpen(!accountThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setAccountThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("accountTheme")}
isOpen={accountThemeOpen}
placeholderText="Select a theme"
data-testid="select-account-theme"
>
{themeTypes.account.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`account-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("adminTheme")}
fieldId="kc-admin-console-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:adminConsoleTheme"
forLabel={t("adminTheme")}
forID="kc-admin-console-theme"
/>
}
>
<Controller
name="adminTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-admin-console-theme"
onToggle={() =>
setAdminConsoleThemeOpen(!adminConsoleThemeOpen)
}
onSelect={(_, value) => {
onChange(value as string);
setAdminConsoleThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("adminConsoleTheme")}
isOpen={adminConsoleThemeOpen}
placeholderText="Select a theme"
data-testid="select-admin-theme"
>
{themeTypes.admin.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`admin-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("emailTheme")}
fieldId="kc-email-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:emailTheme"
forLabel={t("emailTheme")}
forID="kc-email-theme"
/>
}
>
<Controller
name="emailTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-email-theme"
onToggle={() => setEmailThemeOpen(!emailThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setEmailThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("emailTheme")}
isOpen={emailThemeOpen}
placeholderText="Select a theme"
data-testid="select-email-theme"
>
{themeTypes.email.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`email-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("internationalization")}
fieldId="kc-internationalization"
>
<Controller
name="internationalizationEnabled"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-t-internationalization"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
data-testid={
value
? "internationalization-enabled"
: "internationalization-disabled"
}
onChange={onChange}
/>
)}
/>
</FormGroup>
{internationalizationEnabled && (
<>
<FormGroup
label={t("supportedLocales")}
fieldId="kc-t-supported-locales"
<Controller
name="loginTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-login-theme"
onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setLoginThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("loginTheme")}
isOpen={loginThemeOpen}
placeholderText="Select a theme"
data-testid="select-login-theme"
>
<Controller
name="supportedLocales"
control={control}
defaultValue={themeTypes?.account![0].locales}
render={({ value, onChange }) => (
<Select
toggleId="kc-t-supported-locales"
onToggle={() => {
setSupportedLocalesOpen(!supportedLocalesOpen);
}}
onSelect={(_, v) => {
const option = v as string;
if (!value) {
onChange([option]);
} else if (value!.includes(option)) {
onChange(
value.filter((item: string) => item !== option)
);
} else {
onChange([...value, option]);
}
}}
onClear={() => {
onChange([]);
}}
selections={value}
variant={SelectVariant.typeaheadMulti}
aria-label={t("supportedLocales")}
isOpen={supportedLocalesOpen}
placeholderText={"Select locales"}
>
{themeTypes?.login![0].locales.map(
(locale: string, idx: number) => (
<SelectOption
selected={true}
key={`locale-${idx}`}
value={locale}
>
{t(`allSupportedLocales.${locale}`)}
</SelectOption>
)
)}
</Select>
)}
/>
</FormGroup>
<FormGroup label={t("defaultLocale")} fieldId="kc-default-locale">
<Controller
name="defaultLocale"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-t-default-locale"
onToggle={() => setDefaultLocaleOpen(!defaultLocaleOpen)}
onSelect={(_, value) => {
onChange(value as string);
setDefaultLocaleOpen(false);
}}
selections={value && t(`allSupportedLocales.${value}`)}
variant={SelectVariant.single}
aria-label={t("defaultLocale")}
isOpen={defaultLocaleOpen}
placeholderText="Select one"
data-testid="select-default-locale"
>
{watchSupportedLocales.map(
(locale: string, idx: number) => (
<SelectOption
key={`default-locale-${idx}`}
value={locale}
>
{t(`allSupportedLocales.${locale}`)}
</SelectOption>
)
)}
</Select>
)}
/>
</FormGroup>
</>
)}
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="themes-tab-save"
{themeTypes.login.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`login-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("accountTheme")}
fieldId="kc-account-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:accountTheme"
forLabel={t("accountTheme")}
forID="kc-account-theme"
/>
}
>
<Controller
name="accountTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-account-theme"
onToggle={() => setAccountThemeOpen(!accountThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setAccountThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("accountTheme")}
isOpen={accountThemeOpen}
placeholderText="Select a theme"
data-testid="select-account-theme"
>
{themeTypes.account.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`account-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("adminTheme")}
fieldId="kc-admin-console-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:adminConsoleTheme"
forLabel={t("adminTheme")}
forID="kc-admin-console-theme"
/>
}
>
<Controller
name="adminTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-admin-console-theme"
onToggle={() =>
setAdminConsoleThemeOpen(!adminConsoleThemeOpen)
}
onSelect={(_, value) => {
onChange(value as string);
setAdminConsoleThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("adminConsoleTheme")}
isOpen={adminConsoleThemeOpen}
placeholderText="Select a theme"
data-testid="select-admin-theme"
>
{themeTypes.admin.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`admin-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("emailTheme")}
fieldId="kc-email-theme"
labelIcon={
<HelpItem
helpText="realm-settings-help:emailTheme"
forLabel={t("emailTheme")}
forID="kc-email-theme"
/>
}
>
<Controller
name="emailTheme"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-email-theme"
onToggle={() => setEmailThemeOpen(!emailThemeOpen)}
onSelect={(_, value) => {
onChange(value as string);
setEmailThemeOpen(false);
}}
selections={value}
variant={SelectVariant.single}
aria-label={t("emailTheme")}
isOpen={emailThemeOpen}
placeholderText="Select a theme"
data-testid="select-email-theme"
>
{themeTypes.email.map((theme, idx) => (
<SelectOption
selected={theme.name === value}
key={`email-theme-${idx}`}
value={theme.name}
>
{t(`${theme.name}`)}
</SelectOption>
))}
</Select>
)}
/>
</FormGroup>
<FormGroup
label={t("internationalization")}
fieldId="kc-internationalization"
>
<Controller
name="internationalizationEnabled"
control={control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-t-internationalization"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
data-testid={
value
? "internationalization-enabled"
: "internationalization-disabled"
}
onChange={onChange}
/>
)}
/>
</FormGroup>
{internationalizationEnabled && (
<>
<FormGroup
label={t("supportedLocales")}
fieldId="kc-t-supported-locales"
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
</>
<Controller
name="supportedLocales"
control={control}
defaultValue={themeTypes?.account![0].locales}
render={({ value, onChange }) => (
<Select
toggleId="kc-t-supported-locales"
onToggle={() => {
setSupportedLocalesOpen(!supportedLocalesOpen);
}}
onSelect={(_, v) => {
const option = v as string;
if (!value) {
onChange([option]);
} else if (value!.includes(option)) {
onChange(
value.filter((item: string) => item !== option)
);
} else {
onChange([...value, option]);
}
}}
onClear={() => {
onChange([]);
}}
selections={value}
variant={SelectVariant.typeaheadMulti}
aria-label={t("supportedLocales")}
isOpen={supportedLocalesOpen}
placeholderText={"Select locales"}
>
{themeTypes?.login![0].locales.map(
(locale: string, idx: number) => (
<SelectOption
selected={true}
key={`locale-${idx}`}
value={locale}
>
{t(`allSupportedLocales.${locale}`)}
</SelectOption>
)
)}
</Select>
)}
/>
</FormGroup>
<FormGroup label={t("defaultLocale")} fieldId="kc-default-locale">
<Controller
name="defaultLocale"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<Select
toggleId="kc-t-default-locale"
onToggle={() => setDefaultLocaleOpen(!defaultLocaleOpen)}
onSelect={(_, value) => {
onChange(value as string);
setDefaultLocaleOpen(false);
}}
selections={value && t(`allSupportedLocales.${value}`)}
variant={SelectVariant.single}
aria-label={t("defaultLocale")}
isOpen={defaultLocaleOpen}
placeholderText="Select one"
data-testid="select-default-locale"
>
{watchSupportedLocales.map(
(locale: string, idx: number) => (
<SelectOption
key={`default-locale-${idx}`}
value={locale}
>
{t(`allSupportedLocales.${locale}`)}
</SelectOption>
)
)}
</Select>
)}
/>
</FormGroup>
</>
)}
<ActionGroup>
<Button variant="primary" type="submit" data-testid="themes-tab-save">
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</PageSection>
);
};

812
src/realm-settings/TokensTab.tsx
View file

@ -101,302 +101,259 @@ export const RealmSettingsTokensTab = ({
}
};
return (
<>
<PageSection variant="light">
<FormPanel
title={t("realm-settings:general")}
className="kc-sso-session-template"
<PageSection variant="light">
<FormPanel
title={t("realm-settings:general")}
className="kc-sso-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
onSubmit={form.handleSubmit(save)}
>
<FormAccess
isHorizontal
role="manage-realm"
onSubmit={form.handleSubmit(save)}
>
<FormGroup
label={t("defaultSigAlg")}
fieldId="kc-default-signature-algorithm"
labelIcon={
<HelpItem
helpText="realm-settings-help:defaultSigAlg"
forLabel={t("defaultSigAlg")}
forID={t("common:helpLabel", { label: t("algorithm") })}
/>
}
>
<Controller
name="defaultSignatureAlgorithm"
defaultValue={"RS256"}
control={form.control}
render={({ onChange, value }) => (
<Select
toggleId="kc-default-sig-alg"
onToggle={() =>
setDefaultSigAlgDrpdwnOpen(!defaultSigAlgDrpdwnIsOpen)
}
onSelect={(_, value) => {
onChange(value.toString());
setDefaultSigAlgDrpdwnOpen(false);
}}
selections={[value.toString()]}
variant={SelectVariant.single}
aria-label={t("defaultSigAlg")}
isOpen={defaultSigAlgDrpdwnIsOpen}
data-testid="select-default-sig-alg"
>
{defaultSigAlgOptions!.map((p, idx) => (
<SelectOption
selected={p === value}
key={`default-sig-alg-${idx}`}
value={p}
></SelectOption>
))}
</Select>
)}
<FormGroup
label={t("defaultSigAlg")}
fieldId="kc-default-signature-algorithm"
labelIcon={
<HelpItem
helpText="realm-settings-help:defaultSigAlg"
forLabel={t("defaultSigAlg")}
forID={t("common:helpLabel", { label: t("algorithm") })}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("realm-settings:refreshTokens")}
className="kc-client-session-template"
}
>
<Controller
name="defaultSignatureAlgorithm"
defaultValue={"RS256"}
control={form.control}
render={({ onChange, value }) => (
<Select
toggleId="kc-default-sig-alg"
onToggle={() =>
setDefaultSigAlgDrpdwnOpen(!defaultSigAlgDrpdwnIsOpen)
}
onSelect={(_, value) => {
onChange(value.toString());
setDefaultSigAlgDrpdwnOpen(false);
}}
selections={[value.toString()]}
variant={SelectVariant.single}
aria-label={t("defaultSigAlg")}
isOpen={defaultSigAlgDrpdwnIsOpen}
data-testid="select-default-sig-alg"
>
{defaultSigAlgOptions!.map((p, idx) => (
<SelectOption
selected={p === value}
key={`default-sig-alg-${idx}`}
value={p}
></SelectOption>
))}
</Select>
)}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("realm-settings:refreshTokens")}
className="kc-client-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
<FormGroup
hasNoPaddingTop
label={t("revokeRefreshToken")}
fieldId="kc-revoke-refresh-token"
labelIcon={
<HelpItem
helpText="realm-settings-help:revokeRefreshToken"
forLabel={t("revokeRefreshToken")}
forID="revokeRefreshToken"
id="revokeRefreshToken"
/>
}
>
<FormGroup
hasNoPaddingTop
label={t("revokeRefreshToken")}
fieldId="kc-revoke-refresh-token"
labelIcon={
<HelpItem
helpText="realm-settings-help:revokeRefreshToken"
forLabel={t("revokeRefreshToken")}
forID="revokeRefreshToken"
id="revokeRefreshToken"
<Controller
name="revokeRefreshToken"
control={form.control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-revoke-refresh-token"
data-testid="revoke-refresh-token-switch"
aria-label="revoke-refresh-token-switch"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
onChange={onChange}
/>
}
>
<Controller
name="revokeRefreshToken"
control={form.control}
defaultValue={false}
render={({ onChange, value }) => (
<Switch
id="kc-revoke-refresh-token"
data-testid="revoke-refresh-token-switch"
aria-label="revoke-refresh-token-switch"
label={t("common:enabled")}
labelOff={t("common:disabled")}
isChecked={value}
onChange={onChange}
/>
)}
)}
/>
</FormGroup>
<FormGroup
label={t("refreshTokenMaxReuse")}
labelIcon={
<HelpItem
helpText="realm-settings-help:refreshTokenMaxReuse"
forLabel={t("refreshTokenMaxReuse")}
forID="refreshTokenMaxReuse"
/>
</FormGroup>
<FormGroup
label={t("refreshTokenMaxReuse")}
labelIcon={
<HelpItem
helpText="realm-settings-help:refreshTokenMaxReuse"
forLabel={t("refreshTokenMaxReuse")}
forID="refreshTokenMaxReuse"
}
fieldId="refreshTokenMaxReuse"
>
<Controller
name="refreshTokenMaxReuse"
defaultValue={0}
control={form.control}
render={({ onChange, value }) => (
<NumberInput
type="text"
id="refreshTokenMaxReuseMs"
value={value}
onPlus={() => onChange(value + 1)}
onMinus={() => onChange(value - 1)}
onChange={(event) =>
onChange(Number((event.target as HTMLInputElement).value))
}
/>
}
fieldId="refreshTokenMaxReuse"
>
<Controller
name="refreshTokenMaxReuse"
defaultValue={0}
control={form.control}
render={({ onChange, value }) => (
<NumberInput
type="text"
id="refreshTokenMaxReuseMs"
value={value}
onPlus={() => onChange(value + 1)}
onMinus={() => onChange(value - 1)}
onChange={(event) =>
onChange(Number((event.target as HTMLInputElement).value))
}
/>
)}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("realm-settings:accessTokens")}
className="kc-offline-session-template"
)}
/>
</FormGroup>
</FormAccess>
</FormPanel>
<FormPanel
title={t("realm-settings:accessTokens")}
className="kc-offline-session-template"
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
>
<FormGroup
label={t("accessTokenLifespan")}
fieldId="accessTokenLifespan"
helperText={`It is recommended for this value to be shorter than the SSO session idle timeout: ${interpolateTimespan(
forHumans(realm?.ssoSessionIdleTimeout!)
)}`}
labelIcon={
<HelpItem
helpText="realm-settings-help:accessTokenLifespan"
forLabel={t("accessTokenLifespan")}
forID="accessTokenLifespan"
id="accessTokenLifespan"
/>
}
>
<Controller
name="accessTokenLifespan"
defaultValue=""
helperTextInvalid={t("common:required")}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
validated={
value > realm?.ssoSessionIdleTimeout!
? "warning"
: "default"
}
className="kc-access-token-lifespan"
data-testid="access-token-lifespan-input"
aria-label="access-token-lifespan"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("accessTokenLifespan")}
fieldId="accessTokenLifespan"
helperText={`It is recommended for this value to be shorter than the SSO session idle timeout: ${interpolateTimespan(
forHumans(realm?.ssoSessionIdleTimeout!)
)}`}
labelIcon={
<HelpItem
helpText="realm-settings-help:accessTokenLifespan"
forLabel={t("accessTokenLifespan")}
forID="accessTokenLifespan"
id="accessTokenLifespan"
/>
</FormGroup>
}
>
<Controller
name="accessTokenLifespan"
defaultValue=""
helperTextInvalid={t("common:required")}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
validated={
value > realm?.ssoSessionIdleTimeout!
? "warning"
: "default"
}
className="kc-access-token-lifespan"
data-testid="access-token-lifespan-input"
aria-label="access-token-lifespan"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("accessTokenLifespanImplicitFlow")}
fieldId="accessTokenLifespanImplicitFlow"
labelIcon={
<HelpItem
helpText="realm-settings-help:accessTokenLifespanImplicitFlow"
forLabel={t("accessTokenLifespanImplicitFlow")}
forID="accessTokenLifespanImplicitFlow"
id="accessTokenLifespanImplicitFlow"
/>
}
>
<Controller
name="accessTokenLifespanForImplicitFlow"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-access-token-lifespan-implicit"
data-testid="access-token-lifespan-implicit-input"
aria-label="access-token-lifespan-implicit"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
<FormGroup
label={t("accessTokenLifespanImplicitFlow")}
fieldId="accessTokenLifespanImplicitFlow"
labelIcon={
<HelpItem
helpText="realm-settings-help:accessTokenLifespanImplicitFlow"
forLabel={t("accessTokenLifespanImplicitFlow")}
forID="accessTokenLifespanImplicitFlow"
id="accessTokenLifespanImplicitFlow"
/>
</FormGroup>
<FormGroup
label={t("clientLoginTimeout")}
fieldId="clientLoginTimeout"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientLoginTimeout"
forLabel={t("clientLoginTimeout")}
forID="clientLoginTimeout"
id="clientLoginTimeout"
/>
}
>
<Controller
name="accessCodeLifespan"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-login-timeout"
data-testid="client-login-timeout-input"
aria-label="client-login-timeout"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
{offlineSessionMaxEnabled && (
<FormGroup
label={t("offlineSessionMax")}
fieldId="offlineSessionMax"
id="offline-session-max-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:offlineSessionMax"
forLabel={t("offlineSessionMax")}
forID="offlineSessionMax"
id="offlineSessionMax"
/>
}
>
<Controller
name="offlineSessionMaxLifespan"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-offline-session-max"
data-testid="offline-session-max-input"
aria-label="offline-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
)}
</FormAccess>
</FormPanel>
<FormPanel
className="kc-login-settings-template"
title={t("actionTokens")}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
}
>
<Controller
name="accessTokenLifespanForImplicitFlow"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-access-token-lifespan-implicit"
data-testid="access-token-lifespan-implicit-input"
aria-label="access-token-lifespan-implicit"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("clientLoginTimeout")}
fieldId="clientLoginTimeout"
labelIcon={
<HelpItem
helpText="realm-settings-help:clientLoginTimeout"
forLabel={t("clientLoginTimeout")}
forID="clientLoginTimeout"
id="clientLoginTimeout"
/>
}
>
<Controller
name="accessCodeLifespan"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-client-login-timeout"
data-testid="client-login-timeout-input"
aria-label="client-login-timeout"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
{offlineSessionMaxEnabled && (
<FormGroup
label={t("userInitiatedActionLifespan")}
id="kc-user-initiated-action-lifespan"
fieldId="userInitiatedActionLifespan"
label={t("offlineSessionMax")}
fieldId="offlineSessionMax"
id="offline-session-max-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:userInitiatedActionLifespan"
forLabel={t("userInitiatedActionLifespan")}
forID="userInitiatedActionLifespan"
id="userInitiatedActionLifespan"
helpText="realm-settings-help:offlineSessionMax"
forLabel={t("offlineSessionMax")}
forID="offlineSessionMax"
id="offlineSessionMax"
/>
}
>
<Controller
name="actionTokenGeneratedByUserLifespan"
defaultValue={""}
name="offlineSessionMaxLifespan"
defaultValue=""
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-user-initiated-action-lifespan"
data-testid="user-initiated-action-lifespan"
aria-label="user-initiated-action-lifespan"
className="kc-offline-session-max"
data-testid="offline-session-max-input"
aria-label="offline-session-max-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
@ -404,141 +361,182 @@ export const RealmSettingsTokensTab = ({
)}
/>
</FormGroup>
<FormGroup
label={t("defaultAdminInitiated")}
fieldId="defaultAdminInitiated"
id="default-admin-initiated-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:defaultAdminInitiatedActionLifespan"
forLabel={t("defaultAdminInitiated")}
forID="defaultAdminInitiated"
id="defaultAdminInitiated"
)}
</FormAccess>
</FormPanel>
<FormPanel
className="kc-login-settings-template"
title={t("actionTokens")}
>
<FormAccess
isHorizontal
role="manage-realm"
className="pf-u-mt-lg"
onSubmit={form.handleSubmit(save)}
>
<FormGroup
label={t("userInitiatedActionLifespan")}
id="kc-user-initiated-action-lifespan"
fieldId="userInitiatedActionLifespan"
labelIcon={
<HelpItem
helpText="realm-settings-help:userInitiatedActionLifespan"
forLabel={t("userInitiatedActionLifespan")}
forID="userInitiatedActionLifespan"
id="userInitiatedActionLifespan"
/>
}
>
<Controller
name="actionTokenGeneratedByUserLifespan"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-user-initiated-action-lifespan"
data-testid="user-initiated-action-lifespan"
aria-label="user-initiated-action-lifespan"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
}
>
<Controller
name="actionTokenGeneratedByAdminLifespan"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-default-admin-initiated"
data-testid="default-admin-initated-input"
aria-label="default-admin-initated-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
)}
/>
</FormGroup>
<FormGroup
label={t("defaultAdminInitiated")}
fieldId="defaultAdminInitiated"
id="default-admin-initiated-label"
labelIcon={
<HelpItem
helpText="realm-settings-help:defaultAdminInitiatedActionLifespan"
forLabel={t("defaultAdminInitiated")}
forID="defaultAdminInitiated"
id="defaultAdminInitiated"
/>
</FormGroup>
<Text
className="kc-override-action-tokens-subtitle"
component={TextVariants.h1}
}
>
<Controller
name="actionTokenGeneratedByAdminLifespan"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-default-admin-initiated"
data-testid="default-admin-initated-input"
aria-label="default-admin-initated-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<Text
className="kc-override-action-tokens-subtitle"
component={TextVariants.h1}
>
{t("overrideActionTokens")}
</Text>
<FormGroup
label={t("emailVerification")}
fieldId="emailVerification"
id="email-verification"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-verify-email"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-email-verification"
data-testid="email-verification-input"
aria-label="email-verification-input"
value={value}
onChange={(value: any) => onChange(value.toString())}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("idpAccountEmailVerification")}
fieldId="idpAccountEmailVerification"
id="idp-acct-label"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-idp-verify-account-via-email"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-idp-email-verification"
data-testid="idp-email-verification-input"
aria-label="idp-email-verification"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("forgotPassword")}
fieldId="forgotPassword"
id="forgot-password-label"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-reset-credentials"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-forgot-pw"
data-testid="forgot-pw-input"
aria-label="forgot-pw-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("executeActions")}
fieldId="executeActions"
id="execute-actions"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-execute-actions"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-execute-actions"
data-testid="execute-actions-input"
aria-label="execute-actions-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="tokens-tab-save"
isDisabled={!form.formState.isDirty}
>
{t("overrideActionTokens")}
</Text>
<FormGroup
label={t("emailVerification")}
fieldId="emailVerification"
id="email-verification"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-verify-email"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-email-verification"
data-testid="email-verification-input"
aria-label="email-verification-input"
value={value}
onChange={(value: any) => onChange(value.toString())}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("idpAccountEmailVerification")}
fieldId="idpAccountEmailVerification"
id="idp-acct-label"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-idp-verify-account-via-email"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-idp-email-verification"
data-testid="idp-email-verification-input"
aria-label="idp-email-verification"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("forgotPassword")}
fieldId="forgotPassword"
id="forgot-password-label"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-reset-credentials"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-forgot-pw"
data-testid="forgot-pw-input"
aria-label="forgot-pw-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("executeActions")}
fieldId="executeActions"
id="execute-actions"
>
<Controller
name="attributes.actionTokenGeneratedByUserLifespan-execute-actions"
defaultValue={""}
control={form.control}
render={({ onChange, value }) => (
<TimeSelector
className="kc-execute-actions"
data-testid="execute-actions-input"
aria-label="execute-actions-input"
value={value}
onChange={onChange}
units={["minutes", "hours", "days"]}
/>
)}
/>
</FormGroup>
<ActionGroup>
<Button
variant="primary"
type="submit"
data-testid="tokens-tab-save"
isDisabled={!form.formState.isDirty}
>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</FormPanel>
</PageSection>
</>
{t("common:save")}
</Button>
<Button variant="link" onClick={reset}>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</FormPanel>
</PageSection>
);
};

16
src/realm-settings/event-config/EventsTypeTable.tsx
View file

@ -39,15 +39,13 @@ export function EventsTypeTable({
onSelect={onSelect ? onSelect : undefined}
canSelectAll={!!onSelect}
toolbarItem={
<>
{addTypes && (
<ToolbarItem>
<Button id="addTypes" onClick={addTypes} data-testid="addTypes">
{t("addSavedTypes")}
</Button>
</ToolbarItem>
)}
</>
addTypes && (
<ToolbarItem>
<Button id="addTypes" onClick={addTypes} data-testid="addTypes">
{t("addSavedTypes")}
</Button>
</ToolbarItem>
)
}
actions={
!onDelete

26
src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
View file

@ -195,20 +195,18 @@ export const AESGeneratedForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

26
src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
View file

@ -194,20 +194,18 @@ export const ECDSAGeneratedForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

26
src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
View file

@ -202,20 +202,18 @@ export const HMACGeneratedForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

26
src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
View file

@ -209,20 +209,18 @@ export const JavaKeystoreForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

26
src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
View file

@ -203,20 +203,18 @@ export const RSAGeneratedForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

26
src/realm-settings/key-providers/rsa/RSAForm.tsx
View file

@ -212,20 +212,18 @@ export const RSAForm = ({
/>
)}
{editMode && (
<>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</>
<TextInput
ref={form.register()}
type="text"
id="name"
name="name"
defaultValue={providerId}
validated={
form.errors.name
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
)}
</FormGroup>
<FormGroup

4
src/user-federation/kerberos/KerberosSettingsRequired.tsx
View file

@ -316,9 +316,7 @@ export const KerberosSettingsRequired = ({
)}
></Controller>
</FormGroup>
) : (
<></>
)}
) : null}
<FormGroup
label={t("updateFirstLogin")}

52
src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx
View file

@ -15,33 +15,31 @@ export const LdapMapperHardcodedLdapGroup = ({
const helpText = useTranslation("user-federation-help").t;
return (
<>
<FormGroup
label={t("group")}
labelIcon={
<HelpItem
helpText={helpText("groupHelp")}
forLabel={t("group")}
forID="kc-group"
/>
}
fieldId="kc-group"
isRequired
>
<TextInput
isRequired
type="text"
id="kc-group"
data-testid="mapper-group-fld"
name="config.group[0]"
ref={form.register({ required: true })}
validated={
form.errors.config?.group
? ValidatedOptions.error
: ValidatedOptions.default
}
<FormGroup
label={t("group")}
labelIcon={
<HelpItem
helpText={helpText("groupHelp")}
forLabel={t("group")}
forID="kc-group"
/>
</FormGroup>
</>
}
fieldId="kc-group"
isRequired
>
<TextInput
isRequired
type="text"
id="kc-group"
data-testid="mapper-group-fld"
name="config.group[0]"
ref={form.register({ required: true })}
validated={
form.errors.config?.group
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
);
};

4
src/user-federation/ldap/mappers/LdapMapperList.tsx
View file

@ -76,9 +76,7 @@ export const LdapMapperList = () => {
};
const MapperLink = (mapper: ComponentRepresentation) => (
<>
<Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
</>
<Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
);
return (

56
src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx
View file

@ -15,35 +15,33 @@ export const LdapMapperMsadUserAccount = ({
const helpText = useTranslation("user-federation-help").t;
return (
<>
<FormGroup
label={t("passwordPolicyHintsEnabled")}
labelIcon={
<HelpItem
helpText={helpText("passwordPolicyHintsEnabledHelp")}
forLabel={t("passwordPolicyHintsEnabled")}
forID="kc-pw-policy-hints-enabled"
<FormGroup
label={t("passwordPolicyHintsEnabled")}
labelIcon={
<HelpItem
helpText={helpText("passwordPolicyHintsEnabledHelp")}
forLabel={t("passwordPolicyHintsEnabled")}
forID="kc-pw-policy-hints-enabled"
/>
}
fieldId="kc-der-formatted"
hasNoPaddingTop
>
<Controller
name="config.ldap-password-policy-hints-enabled"
defaultValue={["false"]}
control={form.control}
render={({ onChange, value }) => (
<Switch
id={"kc-pw-policy-hints-enabled"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
}
fieldId="kc-der-formatted"
hasNoPaddingTop
>
<Controller
name="config.ldap-password-policy-hints-enabled"
defaultValue={["false"]}
control={form.control}
render={({ onChange, value }) => (
<Switch
id={"kc-pw-policy-hints-enabled"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
</FormGroup>
</>
)}
></Controller>
</FormGroup>
);
};

60
src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx
View file

@ -173,39 +173,35 @@ export const LdapMapperUserAttribute = ({
></Controller>
</FormGroup>
{mapperType === "certificate-ldap-mapper" ? (
<>
<FormGroup
label={t("derFormatted")}
labelIcon={
<HelpItem
helpText={helpText("derFormattedHelp")}
forLabel={t("derFormatted")}
forID="kc-der-formatted"
<FormGroup
label={t("derFormatted")}
labelIcon={
<HelpItem
helpText={helpText("derFormattedHelp")}
forLabel={t("derFormatted")}
forID="kc-der-formatted"
/>
}
fieldId="kc-der-formatted"
hasNoPaddingTop
>
<Controller
name="config.is-der-formatted"
defaultValue={["false"]}
control={form.control}
render={({ onChange, value }) => (
<Switch
id={"kc-der-formatted"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
}
fieldId="kc-der-formatted"
hasNoPaddingTop
>
<Controller
name="config.is-der-formatted"
defaultValue={["false"]}
control={form.control}
render={({ onChange, value }) => (
<Switch
id={"kc-der-formatted"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
</FormGroup>
</>
) : (
<></>
)}
)}
></Controller>
</FormGroup>
) : null}
</>
);
};

12
src/user-federation/shared/SettingsCache.tsx
View file

@ -190,9 +190,7 @@ export const SettingsCache = ({
)}
></Controller>
</FormGroup>
) : (
<></>
)}
) : null}
{_.isEqual(cachePolicyType, ["EVICT_DAILY"]) ||
_.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
<>
@ -269,9 +267,7 @@ export const SettingsCache = ({
></Controller>
</FormGroup>
</>
) : (
<></>
)}
) : null}
{_.isEqual(cachePolicyType, ["MAX_LIFESPAN"]) ? (
<FormGroup
label={t("maxLifespan")}
@ -292,9 +288,7 @@ export const SettingsCache = ({
data-testid="kerberos-cache-lifespan"
/>
</FormGroup>
) : (
<></>
)}
) : null}
</FormAccess>
</>
);

42
src/user/UserForm.tsx
View file

@ -353,28 +353,26 @@ export const UserForm = ({
typeAheadAriaLabel="Select an action"
control={control}
render={() => (
<>
<InputGroup>
<ChipGroup categoryName={" "}>
{selectedGroups.map((currentChip) => (
<Chip
key={currentChip.id}
onClick={() => deleteItem(currentChip.name!)}
>
{currentChip.path}
</Chip>
))}
</ChipGroup>
<Button
id="kc-join-groups-button"
onClick={toggleModal}
variant="secondary"
data-testid="join-groups-button"
>
{t("users:joinGroups")}
</Button>
</InputGroup>
</>
<InputGroup>
<ChipGroup categoryName={" "}>
{selectedGroups.map((currentChip) => (
<Chip
key={currentChip.id}
onClick={() => deleteItem(currentChip.name!)}
>
{currentChip.path}
</Chip>
))}
</ChipGroup>
<Button
id="kc-join-groups-button"
onClick={toggleModal}
variant="secondary"
data-testid="join-groups-button"
>
{t("users:joinGroups")}
</Button>
</InputGroup>
)}
/>
</FormGroup>

24
src/user/UserGroups.tsx
View file

@ -189,9 +189,7 @@ export const UserGroups = () => {
refresh();
}, [isDirectMembership]);
const AliasRenderer = (group: GroupRepresentation) => {
return <>{group.name}</>;
};
const AliasRenderer = (group: GroupRepresentation) => group.name;
const toggleModal = () => {
setOpen(!open);
@ -232,17 +230,15 @@ export const UserGroups = () => {
directMembershipList.length === 0 ||
isDirectMembership;
return (
<>
{canLeaveGroup && (
<Button
data-testid={`leave-${group.name}`}
onClick={() => leave(group)}
variant="link"
>
{t("leave")}
</Button>
)}
</>
canLeaveGroup && (
<Button
data-testid={`leave-${group.name}`}
onClick={() => leave(group)}
variant="link"
>
{t("leave")}
</Button>
)
);
};

14
src/user/UsersSection.tsx
View file

@ -63,14 +63,12 @@ export const UsersSection = () => {
);
const UserDetailLink = (user: UserRepresentation) => (
<>
<Link
key={user.username}
to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
>
{user.username}
</Link>
</>
<Link
key={user.username}
to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
>
{user.username}
</Link>
);
const loader = async (first?: number, max?: number, search?: string) => {