Refactored scroll form so to easier hide section (#2697)

This commit is contained in:
Erik Jan de Wit 2022-05-30 13:07:33 +02:00 committed by GitHub
parent 0d0e086913
commit 48f68358f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 1249 additions and 1108 deletions

View file

@ -1,86 +1,30 @@
import { import React from "react";
ActionGroup, import { useTranslation } from "react-i18next";
AlertVariant, import { useFormContext } from "react-hook-form";
Button, import { AlertVariant, PageSection, Text } from "@patternfly/react-core";
ButtonVariant,
ExpandableSection,
FormGroup,
InputGroup,
PageSection,
Split,
SplitItem,
Text,
ToolbarItem,
Tooltip,
} from "@patternfly/react-core";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import type GlobalRequestResult from "@keycloak/keycloak-admin-client/lib/defs/globalRequestResult"; import type GlobalRequestResult from "@keycloak/keycloak-admin-client/lib/defs/globalRequestResult";
import moment from "moment";
import React, { useEffect, useRef, useState } from "react"; import type { AddAlertFunction } from "../components/alert/Alerts";
import { Controller, useFormContext } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAlerts } from "../components/alert/Alerts";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../components/form-access/FormAccess";
import { HelpItem } from "../components/help-enabler/HelpItem";
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
import { ScrollForm } from "../components/scroll-form/ScrollForm"; import { ScrollForm } from "../components/scroll-form/ScrollForm";
import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
import { TimeSelector } from "../components/time-selector/TimeSelector";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { useAdminClient } from "../context/auth/AdminClient";
import { useRealm } from "../context/realm-context/RealmContext";
import { convertToFormValues, toUpperCase } from "../util"; import { convertToFormValues, toUpperCase } from "../util";
import { AddHostDialog } from "./advanced/AddHostDialog";
import { AdvancedSettings } from "./advanced/AdvancedSettings"; import { AdvancedSettings } from "./advanced/AdvancedSettings";
import { AuthenticationOverrides } from "./advanced/AuthenticationOverrides"; import { AuthenticationOverrides } from "./advanced/AuthenticationOverrides";
import { FineGrainOpenIdConnect } from "./advanced/FineGrainOpenIdConnect"; import { FineGrainOpenIdConnect } from "./advanced/FineGrainOpenIdConnect";
import { FineGrainSamlEndpointConfig } from "./advanced/FineGrainSamlEndpointConfig"; import { FineGrainSamlEndpointConfig } from "./advanced/FineGrainSamlEndpointConfig";
import { OpenIdConnectCompatibilityModes } from "./advanced/OpenIdConnectCompatibilityModes"; import { OpenIdConnectCompatibilityModes } from "./advanced/OpenIdConnectCompatibilityModes";
import type { SaveOptions } from "./ClientDetails"; import type { SaveOptions } from "./ClientDetails";
import { toClient } from "./routes/Client"; import type { TFunction } from "i18next";
import { RevocationPanel } from "./advanced/RevocationPanel";
import { ClusteringPanel } from "./advanced/ClusteringPanel";
type AdvancedProps = { export const parseResult = (
save: (options?: SaveOptions) => void; result: GlobalRequestResult,
client: ClientRepresentation; prefixKey: string,
}; addAlert: AddAlertFunction,
t: TFunction
export const AdvancedTab = ({ ) => {
save,
client: {
id,
publicClient,
registeredNodes,
attributes,
protocol,
authenticationFlowBindingOverrides,
adminUrl,
access,
},
}: AdvancedProps) => {
const { t } = useTranslation("clients");
const adminClient = useAdminClient();
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const revocationFieldName = "notBefore";
const openIdConnect = "openid-connect";
const { getValues, setValue, register, control, reset } = useFormContext();
const [expanded, setExpanded] = useState(false);
const [selectedNode, setSelectedNode] = useState("");
const [addNodeOpen, setAddNodeOpen] = useState(false);
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const [nodes, setNodes] = useState(registeredNodes || {});
const pushRevocationButtonRef = useRef<HTMLElement>();
const setNotBefore = (time: number, messageKey: string) => {
setValue(revocationFieldName, time);
save({ messageKey });
};
const parseResult = (result: GlobalRequestResult, prefixKey: string) => {
const successCount = result.successRequests?.length || 0; const successCount = result.successRequests?.length || 0;
const failedCount = result.failedRequests?.length || 0; const failedCount = result.failedRequests?.length || 0;
@ -101,7 +45,24 @@ export const AdvancedTab = ({
AlertVariant.success AlertVariant.success
); );
} }
}; };
export type AdvancedProps = {
save: (options?: SaveOptions) => void;
client: ClientRepresentation;
};
export const AdvancedTab = ({ save, client }: AdvancedProps) => {
const { t } = useTranslation("clients");
const openIdConnect = "openid-connect";
const { setValue, control, reset } = useFormContext();
const {
publicClient,
attributes,
protocol,
authenticationFlowBindingOverrides,
} = client;
const resetFields = (names: string[]) => { const resetFields = (names: string[]) => {
const values: { [name: string]: string } = {}; const values: { [name: string]: string } = {};
@ -111,302 +72,61 @@ export const AdvancedTab = ({
reset(values); reset(values);
}; };
const push = async () => {
const result = await adminClient.clients.pushRevocation({
id: id!,
});
parseResult(result, "notBeforePush");
};
const testCluster = async () => {
const result = await adminClient.clients.testNodesAvailable({ id: id! });
parseResult(result, "testCluster");
};
const [toggleDeleteNodeConfirm, DeleteNodeConfirm] = useConfirmDialog({
titleKey: "clients:deleteNode",
messageKey: t("deleteNodeBody", {
node: selectedNode,
}),
continueButtonLabel: "common:delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.clients.deleteClusterNode({
id: id!,
node: selectedNode,
});
setNodes({
...Object.keys(nodes).reduce((object: any, key) => {
if (key !== selectedNode) {
object[key] = nodes[key];
}
return object;
}, {}),
});
refresh();
addAlert(t("deleteNodeSuccess"), AlertVariant.success);
} catch (error) {
addError("clients:deleteNodeFail", error);
}
},
});
useEffect(() => {
register(revocationFieldName);
}, [register]);
const formatDate = () => {
const date = getValues(revocationFieldName);
if (date > 0) {
return moment(date * 1000).format("LLL");
} else {
return t("common:none");
}
};
const sections = [
t("revocation"),
t("clustering"),
protocol === openIdConnect
? t("fineGrainOpenIdConnectConfiguration")
: t("fineGrainSamlEndpointConfig"),
t("advancedSettings"),
t("authenticationOverrides"),
];
if (protocol === openIdConnect) {
sections.splice(3, 0, t("openIdConnectCompatibilityModes"));
}
if (!publicClient) {
sections.splice(1, 1);
}
if (protocol !== openIdConnect) {
sections.splice(0, 1);
}
return ( return (
<PageSection variant="light" className="pf-u-py-0"> <PageSection variant="light" className="pf-u-py-0">
<ScrollForm sections={sections} borders> <ScrollForm
{protocol === openIdConnect && ( sections={[
<>
<Text className="pf-u-pb-lg">
<Trans i18nKey="clients-help:notBeforeIntro">
In order to successfully push setup url on
<Link to={toClient({ realm, clientId: id!, tab: "settings" })}>
{t("settings")}
</Link>
tab
</Trans>
</Text>
<FormAccess
role="manage-clients"
fineGrainedAccess={access?.configure}
isHorizontal
>
<FormGroup
label={t("notBefore")}
fieldId="kc-not-before"
labelIcon={
<HelpItem
helpText="clients-help:notBefore"
fieldLabelId="clients:notBefore"
/>
}
>
<InputGroup>
<KeycloakTextInput
type="text"
id="kc-not-before"
name="notBefore"
isReadOnly
value={formatDate()}
/>
<Button
id="setToNow"
variant="control"
onClick={() => {
setNotBefore(moment.now() / 1000, "notBeforeSetToNow");
}}
>
{t("setToNow")}
</Button>
<Button
id="clear"
variant="control"
onClick={() => {
setNotBefore(0, "notBeforeNowClear");
}}
>
{t("clear")}
</Button>
</InputGroup>
</FormGroup>
<ActionGroup>
{!adminUrl && (
<Tooltip
reference={pushRevocationButtonRef}
content={t("clients-help:notBeforeTooltip")}
/>
)}
<Button
id="push"
variant="secondary"
onClick={push}
isAriaDisabled={!adminUrl}
ref={pushRevocationButtonRef}
>
{t("push")}
</Button>
</ActionGroup>
</FormAccess>
</>
)}
{publicClient && (
<>
<FormAccess
role="manage-clients"
fineGrainedAccess={access?.configure}
isHorizontal
>
<FormGroup
label={t("nodeReRegistrationTimeout")}
fieldId="kc-node-reregistration-timeout"
labelIcon={
<HelpItem
helpText="clients-help:nodeReRegistrationTimeout"
fieldLabelId="clients:nodeReRegistrationTimeout"
/>
}
>
<Split hasGutter>
<SplitItem>
<Controller
name="nodeReRegistrationTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector value={value} onChange={onChange} />
)}
/>
</SplitItem>
<SplitItem>
<Button
variant={ButtonVariant.secondary}
onClick={() => save()}
>
{t("common:save")}
</Button>
</SplitItem>
</Split>
</FormGroup>
</FormAccess>
<>
<DeleteNodeConfirm />
<AddHostDialog
clientId={id!}
isOpen={addNodeOpen}
onAdded={(node) => {
nodes[node] = moment.now() / 1000;
refresh();
}}
onClose={() => setAddNodeOpen(false)}
/>
<ExpandableSection
toggleText={t("registeredClusterNodes")}
onToggle={setExpanded}
isExpanded={expanded}
>
<KeycloakDataTable
key={key}
ariaLabelKey="registeredClusterNodes"
loader={() =>
Promise.resolve(
Object.entries(nodes || {}).map((entry) => {
return { host: entry[0], registration: entry[1] };
})
)
}
toolbarItem={
<>
<ToolbarItem>
<Button
id="testClusterAvailability"
onClick={testCluster}
variant={ButtonVariant.secondary}
isDisabled={Object.keys(nodes).length === 0}
>
{t("testClusterAvailability")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
id="registerNodeManually"
onClick={() => setAddNodeOpen(true)}
variant={ButtonVariant.tertiary}
>
{t("registerNodeManually")}
</Button>
</ToolbarItem>
</>
}
actions={[
{ {
title: t("common:delete"), title: t("revocation"),
onRowClick: (node) => { isHidden: protocol !== openIdConnect,
setSelectedNode(node.host); panel: <RevocationPanel client={client} save={save} />,
toggleDeleteNodeConfirm();
},
},
]}
columns={[
{
name: "host",
displayKey: "clients:nodeHost",
}, },
{ {
name: "registration", title: t("clustering"),
displayKey: "clients:lastRegistration", isHidden: !publicClient,
cellFormatters: [ panel: <ClusteringPanel client={client} save={save} />,
(value) =>
value
? moment(parseInt(value.toString()) * 1000).format(
"LLL"
)
: "",
],
}, },
]} {
emptyState={ title: t("fineGrainOpenIdConnectConfiguration"),
<ListEmptyState isHidden: protocol !== openIdConnect,
message={t("noNodes")} panel: (
instructions={t("noNodesInstructions")}
primaryActionText={t("registerNodeManually")}
onPrimaryAction={() => setAddNodeOpen(true)}
/>
}
/>
</ExpandableSection>
</>
</>
)}
<>
{protocol === openIdConnect && (
<> <>
<Text className="pf-u-pb-lg"> <Text className="pf-u-pb-lg">
{t("clients-help:fineGrainOpenIdConnectConfiguration")} {t("clients-help:fineGrainOpenIdConnectConfiguration")}
</Text> </Text>
<FineGrainOpenIdConnect <FineGrainOpenIdConnect
save={() => save()} save={save}
reset={() => reset={() =>
convertToFormValues(attributes, (key, value) => convertToFormValues(attributes, (key, value) =>
setValue(`attributes.${key}`, value) setValue(`attributes.${key}`, value)
) )
} }
hasConfigureAccess={access?.configure}
/> />
</> </>
)} ),
{protocol !== openIdConnect && ( },
{
title: t("openIdConnectCompatibilityModes"),
isHidden: protocol !== openIdConnect,
panel: (
<>
<Text className="pf-u-pb-lg">
{t("clients-help:openIdConnectCompatibilityModes")}
</Text>
<OpenIdConnectCompatibilityModes
control={control}
save={() => save()}
reset={() =>
resetFields(["exclude.session.state.from.auth.response"])
}
/>
</>
),
},
{
title: t("fineGrainSamlEndpointConfig"),
isHidden: protocol === openIdConnect,
panel: (
<> <>
<Text className="pf-u-pb-lg"> <Text className="pf-u-pb-lg">
{t("clients-help:fineGrainSamlEndpointConfig")} {t("clients-help:fineGrainSamlEndpointConfig")}
@ -421,31 +141,21 @@ export const AdvancedTab = ({
} }
/> />
</> </>
)} ),
</> },
{protocol === openIdConnect && ( {
title: t("advancedSettings"),
panel: (
<> <>
<Text className="pf-u-pb-lg"> <Text className="pf-u-pb-lg">
{t("clients-help:openIdConnectCompatibilityModes")} {t(
</Text> "clients-help:advancedSettings" +
<OpenIdConnectCompatibilityModes toUpperCase(protocol || "")
control={control}
save={() => save()}
reset={() =>
resetFields(["exclude.session.state.from.auth.response"])
}
hasConfigureAccess={access?.configure}
/>
</>
)} )}
<>
<Text className="pf-u-pb-lg">
{t("clients-help:advancedSettings" + toUpperCase(protocol || ""))}
</Text> </Text>
<AdvancedSettings <AdvancedSettings
protocol={protocol} protocol={protocol}
control={control} control={control}
hasConfigureAccess={access?.configure}
save={() => save()} save={() => save()}
reset={() => { reset={() => {
resetFields([ resetFields([
@ -457,6 +167,11 @@ export const AdvancedTab = ({
}} }}
/> />
</> </>
),
},
{
title: t("authenticationOverrides"),
panel: (
<> <>
<Text className="pf-u-pb-lg"> <Text className="pf-u-pb-lg">
{t("clients-help:authenticationOverrides")} {t("clients-help:authenticationOverrides")}
@ -475,10 +190,13 @@ export const AdvancedTab = ({
authenticationFlowBindingOverrides?.direct_grant authenticationFlowBindingOverrides?.direct_grant
); );
}} }}
hasConfigureAccess={access?.configure}
/> />
</> </>
</ScrollForm> ),
},
]}
borders
/>
</PageSection> </PageSection>
); );
}; };

View file

@ -1,569 +1,77 @@
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation"; import React from "react";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import { useFormContext } from "react-hook-form";
FormGroup, import { Form } from "@patternfly/react-core";
Form,
Switch,
Select,
SelectVariant,
SelectOption,
ValidatedOptions,
} from "@patternfly/react-core";
import { Controller, useFormContext } from "react-hook-form";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import { ScrollForm } from "../components/scroll-form/ScrollForm"; import { ScrollForm } from "../components/scroll-form/ScrollForm";
import { ClientDescription } from "./ClientDescription"; import { ClientDescription } from "./ClientDescription";
import { CapabilityConfig } from "./add/CapabilityConfig"; import { CapabilityConfig } from "./add/CapabilityConfig";
import { MultiLineInput } from "../components/multi-line-input/MultiLineInput";
import { FormAccess } from "../components/form-access/FormAccess";
import { HelpItem } from "../components/help-enabler/HelpItem";
import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { SaveReset } from "./advanced/SaveReset";
import { SamlConfig } from "./add/SamlConfig"; import { SamlConfig } from "./add/SamlConfig";
import { SamlSignature } from "./add/SamlSignature"; import { SamlSignature } from "./add/SamlSignature";
import environment from "../environment"; import { AccessSettings } from "./add/AccessSettings";
import { useRealm } from "../context/realm-context/RealmContext"; import { LoginSettingsPanel } from "./add/LoginSettingsPanel";
import { useAccess } from "../context/access/Access"; import { LogoutPanel } from "./add/LogoutPanel";
type ClientSettingsProps = { export type ClientSettingsProps = {
client: ClientRepresentation; client: ClientRepresentation;
save: () => void; save: () => void;
reset: () => void; reset: () => void;
}; };
export const ClientSettings = ({ export const ClientSettings = (props: ClientSettingsProps) => {
client,
save,
reset,
}: ClientSettingsProps) => {
const {
register,
control,
watch,
formState: { errors },
} = useFormContext<ClientRepresentation>();
const { t } = useTranslation("clients"); const { t } = useTranslation("clients");
const { realm } = useRealm();
const { hasAccess } = useAccess(); const { watch } = useFormContext<ClientRepresentation>();
const isManager = hasAccess("manage-clients") || client.access?.configure;
const [loginThemeOpen, setLoginThemeOpen] = useState(false);
const loginThemes = useServerInfo().themes!["login"];
const consentRequired = watch("consentRequired");
const displayOnConsentScreen: string = watch(
"attributes.display.on.consent.screen"
);
const protocol = watch("protocol"); const protocol = watch("protocol");
const frontchannelLogout = watch("frontchannelLogout");
const idpInitiatedSsoUrlName: string = watch(
"attributes.saml_idp_initiated_sso_url_name"
);
const sections = useMemo(() => { const { client } = props;
let result = ["generalSettings", "accessSettings"];
if (protocol === "saml") {
return [
...result,
"samlCapabilityConfig",
"signatureAndEncryption",
"loginSettings",
];
} else if (!client.bearerOnly) {
result = [...result, "capabilityConfig"];
} else {
return result;
}
return [...result, "loginSettings", "logoutSettings"];
}, [protocol, client]);
return ( return (
<ScrollForm <ScrollForm
className="pf-u-px-lg" className="pf-u-px-lg"
sections={sections.map((section) => t(section))} sections={[
> {
title: t("generalSettings"),
panel: (
<Form isHorizontal> <Form isHorizontal>
<ClientDescription <ClientDescription
protocol={client.protocol} protocol={client.protocol}
hasConfigureAccess={client.access?.configure} hasConfigureAccess={client.access?.configure}
/> />
</Form> </Form>
{protocol === "saml" ? ( ),
<SamlConfig /> },
) : ( {
!client.bearerOnly && <CapabilityConfig /> title: t("accessSettings"),
)} panel: <AccessSettings {...props} />,
{protocol === "saml" && <SamlSignature />} },
<FormAccess {
isHorizontal title: t("samlCapabilityConfig"),
role="manage-clients" isHidden: protocol !== "saml" || client.bearerOnly,
fineGrainedAccess={client.access?.configure} panel: <SamlConfig />,
> },
{!client.bearerOnly && ( {
<> title: t("signatureAndEncryption"),
<FormGroup isHidden: protocol !== "saml" || client.bearerOnly,
label={t("rootUrl")} panel: <SamlSignature />,
fieldId="kc-root-url" },
labelIcon={ {
<HelpItem title: t("capabilityConfig"),
helpText="clients-help:rootUrl" isHidden: protocol !== "openid-connect" || client.bearerOnly,
fieldLabelId="clients:rootUrl" panel: <CapabilityConfig />,
/> },
} {
> title: t("loginSettings"),
<KeycloakTextInput isHidden: protocol !== "openid-connect" || client.bearerOnly,
type="text" panel: <LoginSettingsPanel access={client.access?.configure} />,
id="kc-root-url" },
name="rootUrl" {
ref={register} title: t("logoutSettings"),
/> isHidden: client.bearerOnly,
</FormGroup> panel: <LogoutPanel {...props} />,
<FormGroup },
label={t("homeURL")}
fieldId="kc-home-url"
labelIcon={
<HelpItem
helpText="clients-help:homeURL"
fieldLabelId="clients:homeURL"
/>
}
>
<KeycloakTextInput
type="text"
id="kc-home-url"
name="baseUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("validRedirectUri")}
fieldId="kc-redirect"
labelIcon={
<HelpItem
helpText="clients-help:validRedirectURIs"
fieldLabelId="clients:validRedirectUri"
/>
}
>
<MultiLineInput
name="redirectUris"
aria-label={t("validRedirectUri")}
addButtonLabel="clients:addRedirectUri"
/>
</FormGroup>
{protocol === "saml" && (
<>
<FormGroup
label={t("idpInitiatedSsoUrlName")}
fieldId="idpInitiatedSsoUrlName"
labelIcon={
<HelpItem
helpText="clients-help:idpInitiatedSsoUrlName"
fieldLabelId="clients:idpInitiatedSsoUrlName"
/>
}
helperText={
idpInitiatedSsoUrlName !== "" &&
t("idpInitiatedSsoUrlNameHelp", {
url: `${environment.authServerUrl}/realms/${realm}/protocol/saml/clients/${idpInitiatedSsoUrlName}`,
})
}
>
<KeycloakTextInput
type="text"
id="idpInitiatedSsoUrlName"
name="attributes.saml_idp_initiated_sso_url_name"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("idpInitiatedSsoRelayState")}
fieldId="idpInitiatedSsoRelayState"
labelIcon={
<HelpItem
helpText="clients-help:idpInitiatedSsoRelayState"
fieldLabelId="clients:idpInitiatedSsoRelayState"
/>
}
>
<KeycloakTextInput
type="text"
id="idpInitiatedSsoRelayState"
name="attributes.saml_idp_initiated_sso_relay_state"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("masterSamlProcessingUrl")}
fieldId="masterSamlProcessingUrl"
labelIcon={
<HelpItem
helpText="clients-help:masterSamlProcessingUrl"
fieldLabelId="clients:masterSamlProcessingUrl"
/>
}
>
<KeycloakTextInput
type="text"
id="masterSamlProcessingUrl"
name="adminUrl"
ref={register}
/>
</FormGroup>
</>
)}
{protocol !== "saml" && (
<FormGroup
label={t("webOrigins")}
fieldId="kc-web-origins"
labelIcon={
<HelpItem
helpText="clients-help:webOrigins"
fieldLabelId="clients:webOrigins"
/>
}
>
<MultiLineInput
name="webOrigins"
aria-label={t("webOrigins")}
addButtonLabel="clients:addWebOrigins"
/>
</FormGroup>
)}
</>
)}
{protocol !== "saml" && (
<FormGroup
label={t("adminURL")}
fieldId="kc-admin-url"
labelIcon={
<HelpItem
helpText="clients-help:adminURL"
fieldLabelId="clients:adminURL"
/>
}
>
<KeycloakTextInput
type="text"
id="kc-admin-url"
name="adminUrl"
ref={register}
/>
</FormGroup>
)}
{client.bearerOnly && (
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
isActive={!isManager}
/>
)}
</FormAccess>
<FormAccess
isHorizontal
role="manage-clients"
fineGrainedAccess={client.access?.configure}
>
<FormGroup
label={t("loginTheme")}
labelIcon={
<HelpItem
helpText="clients-help:loginTheme"
fieldLabelId="clients:loginTheme"
/>
}
fieldId="loginTheme"
>
<Controller
name="attributes.login_theme"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
toggleId="loginTheme"
onToggle={setLoginThemeOpen}
onSelect={(_, value) => {
onChange(value.toString());
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")}
labelIcon={
<HelpItem
helpText="clients-help:consentRequired"
fieldLabelId="clients: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")}
labelIcon={
<HelpItem
helpText="clients-help:displayOnClient"
fieldLabelId="clients: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")}
labelIcon={
<HelpItem
helpText="clients-help:consentScreenText"
fieldLabelId="clients:consentScreenText"
/>
}
fieldId="kc-consent-screen-text"
>
<KeycloakTextArea
id="kc-consent-screen-text"
name="attributes.consent.screen.text"
ref={register}
isDisabled={!(consentRequired && displayOnConsentScreen === "true")}
/>
</FormGroup>
{protocol === "saml" && (
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
isActive={isManager}
/>
)}
</FormAccess>
<FormAccess
isHorizontal
role="manage-clients"
fineGrainedAccess={client.access?.configure}
>
{protocol === "openid-connect" && (
<>
<FormGroup
label={t("frontchannelLogout")}
labelIcon={
<HelpItem
helpText="clients-help:frontchannelLogout"
fieldLabelId="clients:frontchannelLogout"
/>
}
fieldId="frontchannelLogout"
hasNoPaddingTop
>
<Controller
name="frontchannelLogout"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<Switch
id="frontchannelLogout"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value.toString() === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
{frontchannelLogout?.toString() === "true" && (
<FormGroup
label={t("frontchannelLogoutUrl")}
fieldId="frontchannelLogoutUrl"
labelIcon={
<HelpItem
helpText="clients-help:frontchannelLogoutUrl"
fieldLabelId="clients:frontchannelLogoutUrl"
/>
}
helperTextInvalid={
errors.attributes?.frontchannel?.logout?.url?.message
}
validated={
errors.attributes?.frontchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
>
<KeycloakTextInput
type="text"
id="frontchannelLogoutUrl"
name="attributes.frontchannel.logout.url"
ref={register({
validate: (uri) =>
((uri.startsWith("https://") ||
uri.startsWith("http://")) &&
!uri.includes("*")) ||
uri === "" ||
t("frontchannelUrlInvalid").toString(),
})}
validated={
errors.attributes?.frontchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
)}
</>
)}
<FormGroup
label={t("backchannelLogoutUrl")}
fieldId="backchannelLogoutUrl"
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutUrl"
fieldLabelId="clients:backchannelLogoutUrl"
/>
}
helperTextInvalid={
errors.attributes?.backchannel?.logout?.url?.message
}
validated={
errors.attributes?.backchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
>
<KeycloakTextInput
type="text"
id="backchannelLogoutUrl"
name="attributes.backchannel.logout.url"
ref={register({
validate: (uri) =>
((uri.startsWith("https://") || uri.startsWith("http://")) &&
!uri.includes("*")) ||
uri === "" ||
t("backchannelUrlInvalid").toString(),
})}
validated={
errors.attributes?.backchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
<FormGroup
label={t("backchannelLogoutSessionRequired")}
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutSessionRequired"
fieldLabelId="clients:backchannelLogoutSessionRequired"
/>
}
fieldId="backchannelLogoutSessionRequired"
hasNoPaddingTop
>
<Controller
name="attributes.backchannel.logout.session.required"
defaultValue="true"
control={control}
render={({ onChange, value }) => (
<Switch
id="backchannelLogoutSessionRequired"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("backchannelLogoutRevokeOfflineSessions")}
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutRevokeOfflineSessions"
fieldLabelId="clients:backchannelLogoutRevokeOfflineSessions"
/>
}
fieldId="backchannelLogoutRevokeOfflineSessions"
hasNoPaddingTop
>
<Controller
name="attributes.backchannel.logout.revoke.offline.tokens"
defaultValue="false"
control={control}
render={({ onChange, value }) => (
<Switch
id="backchannelLogoutRevokeOfflineSessions"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
isActive={isManager}
/>
</FormAccess>
</ScrollForm>
); );
}; };

View file

@ -0,0 +1,203 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { useFormContext } from "react-hook-form";
import { FormGroup } from "@patternfly/react-core";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import type { ClientSettingsProps } from "../ClientSettings";
import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { SaveReset } from "../advanced/SaveReset";
import environment from "../../environment";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useAccess } from "../../context/access/Access";
export const AccessSettings = ({
client,
save,
reset,
}: ClientSettingsProps) => {
const { t } = useTranslation("clients");
const { register, watch } = useFormContext<ClientRepresentation>();
const { realm } = useRealm();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients") || client.access?.configure;
const protocol = watch("protocol");
const idpInitiatedSsoUrlName: string = watch(
"attributes.saml_idp_initiated_sso_url_name"
);
return (
<FormAccess
isHorizontal
fineGrainedAccess={client.access?.configure}
role="manage-clients"
>
{!client.bearerOnly && (
<>
<FormGroup
label={t("rootUrl")}
fieldId="kc-root-url"
labelIcon={
<HelpItem
helpText="clients-help:rootUrl"
fieldLabelId="clients:rootUrl"
/>
}
>
<KeycloakTextInput
type="text"
id="kc-root-url"
name="rootUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("homeURL")}
fieldId="kc-home-url"
labelIcon={
<HelpItem
helpText="clients-help:homeURL"
fieldLabelId="clients:homeURL"
/>
}
>
<KeycloakTextInput
type="text"
id="kc-home-url"
name="baseUrl"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("validRedirectUri")}
fieldId="kc-redirect"
labelIcon={
<HelpItem
helpText="clients-help:validRedirectURIs"
fieldLabelId="clients:validRedirectUri"
/>
}
>
<MultiLineInput
name="redirectUris"
aria-label={t("validRedirectUri")}
addButtonLabel="clients:addRedirectUri"
/>
</FormGroup>
{protocol === "saml" && (
<>
<FormGroup
label={t("idpInitiatedSsoUrlName")}
fieldId="idpInitiatedSsoUrlName"
labelIcon={
<HelpItem
helpText="clients-help:idpInitiatedSsoUrlName"
fieldLabelId="clients:idpInitiatedSsoUrlName"
/>
}
helperText={
idpInitiatedSsoUrlName !== "" &&
t("idpInitiatedSsoUrlNameHelp", {
url: `${environment.authServerUrl}/realms/${realm}/protocol/saml/clients/${idpInitiatedSsoUrlName}`,
})
}
>
<KeycloakTextInput
type="text"
id="idpInitiatedSsoUrlName"
name="attributes.saml_idp_initiated_sso_url_name"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("idpInitiatedSsoRelayState")}
fieldId="idpInitiatedSsoRelayState"
labelIcon={
<HelpItem
helpText="clients-help:idpInitiatedSsoRelayState"
fieldLabelId="clients:idpInitiatedSsoRelayState"
/>
}
>
<KeycloakTextInput
type="text"
id="idpInitiatedSsoRelayState"
name="attributes.saml_idp_initiated_sso_relay_state"
ref={register}
/>
</FormGroup>
<FormGroup
label={t("masterSamlProcessingUrl")}
fieldId="masterSamlProcessingUrl"
labelIcon={
<HelpItem
helpText="clients-help:masterSamlProcessingUrl"
fieldLabelId="clients:masterSamlProcessingUrl"
/>
}
>
<KeycloakTextInput
type="text"
id="masterSamlProcessingUrl"
name="adminUrl"
ref={register}
/>
</FormGroup>
</>
)}
{protocol !== "saml" && (
<FormGroup
label={t("webOrigins")}
fieldId="kc-web-origins"
labelIcon={
<HelpItem
helpText="clients-help:webOrigins"
fieldLabelId="clients:webOrigins"
/>
}
>
<MultiLineInput
name="webOrigins"
aria-label={t("webOrigins")}
addButtonLabel="clients:addWebOrigins"
/>
</FormGroup>
)}
</>
)}
{protocol !== "saml" && (
<FormGroup
label={t("adminURL")}
fieldId="kc-admin-url"
labelIcon={
<HelpItem
helpText="clients-help:adminURL"
fieldLabelId="clients:adminURL"
/>
}
>
<KeycloakTextInput
type="text"
id="kc-admin-url"
name="adminUrl"
ref={register}
/>
</FormGroup>
)}
{client.bearerOnly && (
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
isActive={!isManager}
/>
)}
</FormAccess>
);
};

View file

@ -0,0 +1,146 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form";
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
Switch,
} from "@patternfly/react-core";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
export const LoginSettingsPanel = ({ access }: { access?: boolean }) => {
const { t } = useTranslation("clients");
const { register, control, watch } = useFormContext<ClientRepresentation>();
const [loginThemeOpen, setLoginThemeOpen] = useState(false);
const loginThemes = useServerInfo().themes!["login"];
const consentRequired = watch("consentRequired");
const displayOnConsentScreen: string = watch(
"attributes.display.on.consent.screen"
);
return (
<FormAccess isHorizontal fineGrainedAccess={access} role="manage-clients">
<FormGroup
label={t("loginTheme")}
labelIcon={
<HelpItem
helpText="clients-help:loginTheme"
fieldLabelId="clients:loginTheme"
/>
}
fieldId="loginTheme"
>
<Controller
name="attributes.login_theme"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<Select
toggleId="loginTheme"
onToggle={setLoginThemeOpen}
onSelect={(_, value) => {
onChange(value.toString());
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")}
labelIcon={
<HelpItem
helpText="clients-help:consentRequired"
fieldLabelId="clients: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")}
labelIcon={
<HelpItem
helpText="clients-help:displayOnClient"
fieldLabelId="clients: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")}
labelIcon={
<HelpItem
helpText="clients-help:consentScreenText"
fieldLabelId="clients:consentScreenText"
/>
}
fieldId="kc-consent-screen-text"
>
<KeycloakTextArea
id="kc-consent-screen-text"
name="attributes.consent.screen.text"
ref={register}
isDisabled={!(consentRequired && displayOnConsentScreen === "true")}
/>
</FormGroup>
</FormAccess>
);
};

View file

@ -0,0 +1,203 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form";
import { FormGroup, Switch, ValidatedOptions } from "@patternfly/react-core";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import type { ClientSettingsProps } from "../ClientSettings";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { useAccess } from "../../context/access/Access";
import { SaveReset } from "../advanced/SaveReset";
export const LogoutPanel = ({
save,
reset,
client: { access },
}: ClientSettingsProps) => {
const { t } = useTranslation("clients");
const {
register,
control,
watch,
formState: { errors },
} = useFormContext<ClientRepresentation>();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients") || access?.configure;
const protocol = watch("protocol");
const frontchannelLogout = watch("frontchannelLogout");
return (
<FormAccess
isHorizontal
fineGrainedAccess={access?.configure}
role="manage-clients"
>
{protocol === "openid-connect" && (
<>
<FormGroup
label={t("frontchannelLogout")}
labelIcon={
<HelpItem
helpText="clients-help:frontchannelLogout"
fieldLabelId="clients:frontchannelLogout"
/>
}
fieldId="frontchannelLogout"
hasNoPaddingTop
>
<Controller
name="frontchannelLogout"
defaultValue={true}
control={control}
render={({ onChange, value }) => (
<Switch
id="frontchannelLogout"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value.toString() === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
{frontchannelLogout?.toString() === "true" && (
<FormGroup
label={t("frontchannelLogoutUrl")}
fieldId="frontchannelLogoutUrl"
labelIcon={
<HelpItem
helpText="clients-help:frontchannelLogoutUrl"
fieldLabelId="clients:frontchannelLogoutUrl"
/>
}
helperTextInvalid={
errors.attributes?.frontchannel?.logout?.url?.message
}
validated={
errors.attributes?.frontchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
>
<KeycloakTextInput
type="text"
id="frontchannelLogoutUrl"
name="attributes.frontchannel.logout.url"
ref={register({
validate: (uri) =>
((uri.startsWith("https://") ||
uri.startsWith("http://")) &&
!uri.includes("*")) ||
uri === "" ||
t("frontchannelUrlInvalid").toString(),
})}
validated={
errors.attributes?.frontchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
)}
</>
)}
<FormGroup
label={t("backchannelLogoutUrl")}
fieldId="backchannelLogoutUrl"
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutUrl"
fieldLabelId="clients:backchannelLogoutUrl"
/>
}
helperTextInvalid={errors.attributes?.backchannel?.logout?.url?.message}
validated={
errors.attributes?.backchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
>
<KeycloakTextInput
type="text"
id="backchannelLogoutUrl"
name="attributes.backchannel.logout.url"
ref={register({
validate: (uri) =>
((uri.startsWith("https://") || uri.startsWith("http://")) &&
!uri.includes("*")) ||
uri === "" ||
t("backchannelUrlInvalid").toString(),
})}
validated={
errors.attributes?.backchannel?.logout?.url?.message
? ValidatedOptions.error
: ValidatedOptions.default
}
/>
</FormGroup>
<FormGroup
label={t("backchannelLogoutSessionRequired")}
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutSessionRequired"
fieldLabelId="clients:backchannelLogoutSessionRequired"
/>
}
fieldId="backchannelLogoutSessionRequired"
hasNoPaddingTop
>
<Controller
name="attributes.backchannel.logout.session.required"
defaultValue="true"
control={control}
render={({ onChange, value }) => (
<Switch
id="backchannelLogoutSessionRequired"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
<FormGroup
label={t("backchannelLogoutRevokeOfflineSessions")}
labelIcon={
<HelpItem
helpText="clients-help:backchannelLogoutRevokeOfflineSessions"
fieldLabelId="clients:backchannelLogoutRevokeOfflineSessions"
/>
}
fieldId="backchannelLogoutRevokeOfflineSessions"
hasNoPaddingTop
>
<Controller
name="attributes.backchannel.logout.revoke.offline.tokens"
defaultValue="false"
control={control}
render={({ onChange, value }) => (
<Switch
id="backchannelLogoutRevokeOfflineSessions"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}
onChange={(value) => onChange(value.toString())}
/>
)}
/>
</FormGroup>
<SaveReset
className="keycloak__form_actions"
name="settings"
save={save}
reset={reset}
isActive={isManager}
/>
</FormAccess>
);
};

View file

@ -0,0 +1,200 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form";
import {
AlertVariant,
Button,
ButtonVariant,
ExpandableSection,
FormGroup,
Split,
SplitItem,
ToolbarItem,
} from "@patternfly/react-core";
import moment from "moment";
import { AdvancedProps, parseResult } from "../AdvancedTab";
import { useAlerts } from "../../components/alert/Alerts";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
import { TimeSelector } from "../../components/time-selector/TimeSelector";
import { useAdminClient } from "../../context/auth/AdminClient";
import { AddHostDialog } from ".././advanced/AddHostDialog";
export const ClusteringPanel = ({
save,
client: { id, registeredNodes, access },
}: AdvancedProps) => {
const { t } = useTranslation("clients");
const { control } = useFormContext();
const adminClient = useAdminClient();
const { addAlert, addError } = useAlerts();
const [nodes, setNodes] = useState(registeredNodes || {});
const [expanded, setExpanded] = useState(false);
const [selectedNode, setSelectedNode] = useState("");
const [addNodeOpen, setAddNodeOpen] = useState(false);
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const testCluster = async () => {
const result = await adminClient.clients.testNodesAvailable({ id: id! });
parseResult(result, "testCluster", addAlert, t);
};
const [toggleDeleteNodeConfirm, DeleteNodeConfirm] = useConfirmDialog({
titleKey: "clients:deleteNode",
messageKey: t("deleteNodeBody", {
node: selectedNode,
}),
continueButtonLabel: "common:delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.clients.deleteClusterNode({
id: id!,
node: selectedNode,
});
setNodes({
...Object.keys(nodes).reduce((object: any, key) => {
if (key !== selectedNode) {
object[key] = nodes[key];
}
return object;
}, {}),
});
refresh();
addAlert(t("deleteNodeSuccess"), AlertVariant.success);
} catch (error) {
addError("clients:deleteNodeFail", error);
}
},
});
return (
<>
<FormAccess
role="manage-clients"
fineGrainedAccess={access?.configure}
isHorizontal
>
<FormGroup
label={t("nodeReRegistrationTimeout")}
fieldId="kc-node-reregistration-timeout"
labelIcon={
<HelpItem
helpText="clients-help:nodeReRegistrationTimeout"
fieldLabelId="clients:nodeReRegistrationTimeout"
/>
}
>
<Split hasGutter>
<SplitItem>
<Controller
name="nodeReRegistrationTimeout"
defaultValue=""
control={control}
render={({ onChange, value }) => (
<TimeSelector value={value} onChange={onChange} />
)}
/>
</SplitItem>
<SplitItem>
<Button variant={ButtonVariant.secondary} onClick={() => save()}>
{t("common:save")}
</Button>
</SplitItem>
</Split>
</FormGroup>
</FormAccess>
<>
<DeleteNodeConfirm />
<AddHostDialog
clientId={id!}
isOpen={addNodeOpen}
onAdded={(node) => {
nodes[node] = moment.now() / 1000;
refresh();
}}
onClose={() => setAddNodeOpen(false)}
/>
<ExpandableSection
toggleText={t("registeredClusterNodes")}
onToggle={setExpanded}
isExpanded={expanded}
>
<KeycloakDataTable
key={key}
ariaLabelKey="registeredClusterNodes"
loader={() =>
Promise.resolve(
Object.entries(nodes || {}).map((entry) => {
return { host: entry[0], registration: entry[1] };
})
)
}
toolbarItem={
<>
<ToolbarItem>
<Button
id="testClusterAvailability"
onClick={testCluster}
variant={ButtonVariant.secondary}
isDisabled={Object.keys(nodes).length === 0}
>
{t("testClusterAvailability")}
</Button>
</ToolbarItem>
<ToolbarItem>
<Button
id="registerNodeManually"
onClick={() => setAddNodeOpen(true)}
variant={ButtonVariant.tertiary}
>
{t("registerNodeManually")}
</Button>
</ToolbarItem>
</>
}
actions={[
{
title: t("common:delete"),
onRowClick: (node) => {
setSelectedNode(node.host);
toggleDeleteNodeConfirm();
},
},
]}
columns={[
{
name: "host",
displayKey: "clients:nodeHost",
},
{
name: "registration",
displayKey: "clients:lastRegistration",
cellFormatters: [
(value) =>
value
? moment(parseInt(value.toString()) * 1000).format("LLL")
: "",
],
},
]}
emptyState={
<ListEmptyState
message={t("noNodes")}
instructions={t("noNodesInstructions")}
primaryActionText={t("registerNodeManually")}
onPrimaryAction={() => setAddNodeOpen(true)}
/>
}
/>
</ExpandableSection>
</>
</>
);
};

View file

@ -0,0 +1,137 @@
import React, { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import { useFormContext } from "react-hook-form";
import {
FormGroup,
InputGroup,
Button,
ActionGroup,
Tooltip,
Text,
} from "@patternfly/react-core";
import moment from "moment";
import { AdvancedProps, parseResult } from "../AdvancedTab";
import { useAlerts } from "../../components/alert/Alerts";
import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { useAdminClient } from "../../context/auth/AdminClient";
import { useRealm } from "../../context/realm-context/RealmContext";
import { toClient } from "../routes/Client";
export const RevocationPanel = ({
save,
client: { id, adminUrl, access },
}: AdvancedProps) => {
const revocationFieldName = "notBefore";
const pushRevocationButtonRef = useRef<HTMLElement>();
const { t } = useTranslation("clients");
const adminClient = useAdminClient();
const { realm } = useRealm();
const { addAlert } = useAlerts();
const { getValues, setValue, register } = useFormContext();
const setNotBefore = (time: number, messageKey: string) => {
setValue(revocationFieldName, time);
save({ messageKey });
};
useEffect(() => {
register(revocationFieldName);
}, [register]);
const formatDate = () => {
const date = getValues(revocationFieldName);
if (date > 0) {
return moment(date * 1000).format("LLL");
} else {
return t("common:none");
}
};
const push = async () => {
const result = await adminClient.clients.pushRevocation({
id: id!,
});
parseResult(result, "notBeforePush", addAlert, t);
};
return (
<>
<Text className="pf-u-pb-lg">
<Trans i18nKey="clients-help:notBeforeIntro">
In order to successfully push setup url on
<Link to={toClient({ realm, clientId: id!, tab: "settings" })}>
{t("settings")}
</Link>
tab
</Trans>
</Text>
<FormAccess
role="manage-clients"
fineGrainedAccess={access?.configure}
isHorizontal
>
<FormGroup
label={t("notBefore")}
fieldId="kc-not-before"
labelIcon={
<HelpItem
helpText="clients-help:notBefore"
fieldLabelId="clients:notBefore"
/>
}
>
<InputGroup>
<KeycloakTextInput
type="text"
id="kc-not-before"
name="notBefore"
isReadOnly
value={formatDate()}
/>
<Button
id="setToNow"
variant="control"
onClick={() => {
setNotBefore(moment.now() / 1000, "notBeforeSetToNow");
}}
>
{t("setToNow")}
</Button>
<Button
id="clear"
variant="control"
onClick={() => {
setNotBefore(0, "notBeforeNowClear");
}}
>
{t("clear")}
</Button>
</InputGroup>
</FormGroup>
<ActionGroup>
{!adminUrl && (
<Tooltip
reference={pushRevocationButtonRef}
content={t("clients-help:notBeforeTooltip")}
/>
)}
<Button
id="push"
variant="secondary"
onClick={push}
isAriaDisabled={!adminUrl}
ref={pushRevocationButtonRef}
>
{t("push")}
</Button>
</ActionGroup>
</FormAccess>
</>
);
};

View file

@ -8,14 +8,17 @@ import useRequiredContext from "../../utils/useRequiredContext";
import useSetTimeout from "../../utils/useSetTimeout"; import useSetTimeout from "../../utils/useSetTimeout";
import { AlertPanel, AlertType } from "./AlertPanel"; import { AlertPanel, AlertType } from "./AlertPanel";
type AlertProps = { export type AddAlertFunction = (
addAlert: (
message: string, message: string,
variant?: AlertVariant, variant?: AlertVariant,
description?: string description?: string
) => void; ) => void;
addError: (message: string, error: any) => void; export type AddErrorFunction = (message: string, error: any) => void;
type AlertProps = {
addAlert: AddAlertFunction;
addError: AddErrorFunction;
}; };
export const AlertContext = createContext<AlertProps | undefined>(undefined); export const AlertContext = createContext<AlertProps | undefined>(undefined);

View file

@ -1,4 +1,4 @@
import React, { Children, Fragment, FunctionComponent } from "react"; import React, { Fragment, FunctionComponent, ReactNode, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
Grid, Grid,
@ -15,8 +15,14 @@ import { FormPanel } from "./FormPanel";
import "./scroll-form.css"; import "./scroll-form.css";
type ScrollSection = {
title: string;
panel: ReactNode;
isHidden?: boolean;
};
type ScrollFormProps = GridProps & { type ScrollFormProps = GridProps & {
sections: string[]; sections: ScrollSection[];
borders?: boolean; borders?: boolean;
}; };
@ -27,33 +33,34 @@ const spacesToHyphens = (string: string): string => {
export const ScrollForm: FunctionComponent<ScrollFormProps> = ({ export const ScrollForm: FunctionComponent<ScrollFormProps> = ({
sections, sections,
borders = false, borders = false,
children,
...rest ...rest
}) => { }) => {
const { t } = useTranslation("common"); const { t } = useTranslation("common");
const nodes = Children.toArray(children); const shownSections = useMemo(
() => sections.filter(({ isHidden }) => !isHidden),
[sections]
);
return ( return (
<Grid hasGutter {...rest}> <Grid hasGutter {...rest}>
<GridItem span={8}> <GridItem span={8}>
{sections.map((cat, index) => { {shownSections.map(({ title, panel }) => {
const scrollId = spacesToHyphens(cat.toLowerCase()); const scrollId = spacesToHyphens(title.toLowerCase());
return ( return (
<Fragment key={cat}> <Fragment key={title}>
{!borders && ( {borders ? (
<ScrollPanel scrollId={scrollId} title={cat}>
{nodes[index]}
</ScrollPanel>
)}
{borders && (
<FormPanel <FormPanel
scrollId={scrollId} scrollId={scrollId}
title={cat} title={title}
className="kc-form-panel__panel" className="kc-form-panel__panel"
> >
{nodes[index]} {panel}
</FormPanel> </FormPanel>
) : (
<ScrollPanel scrollId={scrollId} title={title}>
{panel}
</ScrollPanel>
)} )}
</Fragment> </Fragment>
); );
@ -69,17 +76,17 @@ export const ScrollForm: FunctionComponent<ScrollFormProps> = ({
label={t("jumpToSection")} label={t("jumpToSection")}
offset={100} offset={100}
> >
{sections.map((cat) => { {shownSections.map(({ title }) => {
const scrollId = spacesToHyphens(cat.toLowerCase()); const scrollId = spacesToHyphens(title.toLowerCase());
return ( return (
// note that JumpLinks currently does not work with spaces in the href // note that JumpLinks currently does not work with spaces in the href
<JumpLinksItem <JumpLinksItem
key={cat} key={title}
href={`#${scrollId}`} href={`#${scrollId}`}
data-testid={`jump-link-${scrollId}`} data-testid={`jump-link-${scrollId}`}
> >
{cat} {title}
</JumpLinksItem> </JumpLinksItem>
); );
})} })}

View file

@ -238,8 +238,6 @@ export default function DetailSettings() {
return <KeycloakSpinner />; return <KeycloakSpinner />;
} }
const sections = [t("generalSettings"), t("advancedSettings")];
const isOIDC = provider.providerId!.includes("oidc"); const isOIDC = provider.providerId!.includes("oidc");
const isSAML = provider.providerId!.includes("saml"); const isSAML = provider.providerId!.includes("saml");
@ -268,14 +266,81 @@ export default function DetailSettings() {
return components; return components;
}; };
if (isOIDC) { const sections = [
sections.splice(1, 0, t("oidcSettings")); {
} title: t("generalSettings"),
panel: (
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
{!isOIDC && !isSAML && <GeneralSettings create={false} id={alias} />}
{isOIDC && <OIDCGeneralSettings id={alias} />}
{isSAML && <SamlGeneralSettings id={alias} />}
</FormAccess>
),
},
{
title: t("oidcSettings"),
isHidden: !isOIDC,
panel: (
<>
<DiscoverySettings readOnly={false} />
<Form isHorizontal className="pf-u-py-lg">
<Divider />
<OIDCAuthentication create={false} />
</Form>
<ExtendedNonDiscoverySettings />
</>
),
},
{
title: t("samlSettings"),
isHidden: !isSAML,
panel: <DescriptorSettings readOnly={false} />,
},
{
title: t("reqAuthnConstraints"),
isHidden: !isSAML,
panel: (
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<ReqAuthnConstraints />
</FormAccess>
),
},
{
title: t("advancedSettings"),
panel: (
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<AdvancedSettings isOIDC={isOIDC!} isSAML={isSAML!} />
if (isSAML) { <ActionGroup className="keycloak__form_actions">
sections.splice(1, 0, t("samlSettings")); <Button data-testid={"save"} type="submit">
sections.splice(2, 0, t("reqAuthnConstraints")); {t("common:save")}
} </Button>
<Button
data-testid={"revert"}
variant="link"
onClick={() => {
reset();
}}
>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
),
},
];
return ( return (
<FormProvider {...form}> <FormProvider {...form}>
@ -302,61 +367,7 @@ export default function DetailSettings() {
eventKey="settings" eventKey="settings"
title={<TabTitleText>{t("common:settings")}</TabTitleText>} title={<TabTitleText>{t("common:settings")}</TabTitleText>}
> >
<ScrollForm className="pf-u-px-lg" sections={sections}> <ScrollForm className="pf-u-px-lg" sections={sections} />
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
{!isOIDC && !isSAML && (
<GeneralSettings create={false} id={alias} />
)}
{isOIDC && <OIDCGeneralSettings id={alias} />}
{isSAML && <SamlGeneralSettings id={alias} />}
</FormAccess>
{isOIDC && (
<>
<DiscoverySettings readOnly={false} />
<Form isHorizontal className="pf-u-py-lg">
<Divider />
<OIDCAuthentication create={false} />
</Form>
<ExtendedNonDiscoverySettings />
</>
)}
{isSAML && <DescriptorSettings readOnly={false} />}
{isSAML && (
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<ReqAuthnConstraints />
</FormAccess>
)}
<FormAccess
role="manage-identity-providers"
isHorizontal
onSubmit={handleSubmit(save)}
>
<AdvancedSettings isOIDC={isOIDC!} isSAML={isSAML!} />
<ActionGroup className="keycloak__form_actions">
<Button data-testid={"save"} type="submit">
{t("common:save")}
</Button>
<Button
data-testid={"revert"}
variant="link"
onClick={() => {
reset();
}}
>
{t("common:revert")}
</Button>
</ActionGroup>
</FormAccess>
</ScrollForm>
</Tab> </Tab>
<Tab <Tab
id="mappers" id="mappers"

View file

@ -69,17 +69,12 @@ const CreateAttributeFormContent = ({
<UserProfileProvider> <UserProfileProvider>
<ScrollForm <ScrollForm
sections={[ sections={[
t("generalSettings"), { title: t("generalSettings"), panel: <AttributeGeneralSettings /> },
t("permission"), { title: t("permission"), panel: <AttributePermission /> },
t("validations"), { title: t("validations"), panel: <AttributeValidations /> },
t("annotations"), { title: t("annotations"), panel: <AttributeAnnotations /> },
]} ]}
> />
<AttributeGeneralSettings />
<AttributePermission />
<AttributeValidations />
<AttributeAnnotations />
</ScrollForm>
<Form onSubmit={form.handleSubmit(save)}> <Form onSubmit={form.handleSubmit(save)}>
<ActionGroup className="keycloak__form_actions"> <ActionGroup className="keycloak__form_actions">
<Button <Button

View file

@ -55,23 +55,33 @@ const AddLdapFormContent = ({
<> <>
<ScrollForm <ScrollForm
sections={[ sections={[
t("generalOptions"), {
t("connectionAndAuthenticationSettings"), title: t("generalOptions"),
t("ldapSearchingAndUpdatingSettings"), panel: <LdapSettingsGeneral form={form} vendorEdit={!!id} />,
t("synchronizationSettings"), },
t("kerberosIntegration"), {
t("cacheSettings"), title: t("connectionAndAuthenticationSettings"),
t("advancedSettings"), panel: <LdapSettingsConnection form={form} id={id} />,
},
{
title: t("ldapSearchingAndUpdatingSettings"),
panel: <LdapSettingsSearching form={form} />,
},
{
title: t("synchronizationSettings"),
panel: <LdapSettingsSynchronization form={form} />,
},
{
title: t("kerberosIntegration"),
panel: <LdapSettingsKerberosIntegration form={form} />,
},
{ title: t("cacheSettings"), panel: <SettingsCache form={form} /> },
{
title: t("advancedSettings"),
panel: <LdapSettingsAdvanced form={form} id={id} />,
},
]} ]}
> />
<LdapSettingsGeneral form={form} vendorEdit={!!id} />
<LdapSettingsConnection form={form} id={id} />
<LdapSettingsSearching form={form} />
<LdapSettingsSynchronization form={form} />
<LdapSettingsKerberosIntegration form={form} />
<SettingsCache form={form} />
<LdapSettingsAdvanced form={form} id={id} />
</ScrollForm>
<Form onSubmit={form.handleSubmit(save)}> <Form onSubmit={form.handleSubmit(save)}>
<ActionGroup className="keycloak__form_actions"> <ActionGroup className="keycloak__form_actions">
<Button <Button