diff --git a/src/common-messages.json b/src/common-messages.json index b3a120aa6b..14bada44a8 100644 --- a/src/common-messages.json +++ b/src/common-messages.json @@ -16,6 +16,8 @@ "search": "Search", "next": "Next", "back": "Back", + "finish": "Finish", + "skipCustomizationAndFinish": "Skip customization and finish", "export": "Export", "action": "Action", "download": "Download", @@ -36,6 +38,7 @@ "documentation": "Documentation", "enableHelpMode": "Enable help mode", "learnMore": "Learn more", + "test": "Test", "home": "Home", "manage": "Manage", diff --git a/src/components/scroll-form/ScrollForm.tsx b/src/components/scroll-form/ScrollForm.tsx index e9fd74528b..9ba377c565 100644 --- a/src/components/scroll-form/ScrollForm.tsx +++ b/src/components/scroll-form/ScrollForm.tsx @@ -44,7 +44,7 @@ export const ScrollForm = ({ sections, children }: ScrollFormProps) => { // to scroll the entire main section, it has to be the pf-c-page__main scrollableSelector={mainPageContentId} label={t("jumpToSection")} - offset={76} + offset={100} > {sections.map((cat) => ( // note that JumpLinks currently does not work with spaces in the href diff --git a/src/components/wizard-section-header/WizardSectionHeader.tsx b/src/components/wizard-section-header/WizardSectionHeader.tsx new file mode 100644 index 0000000000..f3e22c1112 --- /dev/null +++ b/src/components/wizard-section-header/WizardSectionHeader.tsx @@ -0,0 +1,53 @@ +import React, { ReactElement, useContext, useState } from "react"; +import { + Text, + PageSection, + TextContent, + Divider, + Level, + LevelItem, + Switch, + Toolbar, + ToolbarContent, + ToolbarItem, + Badge, + ButtonProps, + Dropdown, + DropdownToggle, + DropdownPosition, + Title, +} from "@patternfly/react-core"; +import "./wizard-section-header.css"; + +export type WizardSectionHeaderProps = { + title: string; + description?: string; + showDescription?: boolean; +}; + +export const WizardSectionHeader = ({ + title, + description, + showDescription = false, +}: WizardSectionHeaderProps) => { + return ( + <> + + {title} + + {showDescription && ( + + {description} + + )} + + ); +}; diff --git a/src/components/wizard-section-header/wizard-section-header.css b/src/components/wizard-section-header/wizard-section-header.css new file mode 100644 index 0000000000..e3a69adb4b --- /dev/null +++ b/src/components/wizard-section-header/wizard-section-header.css @@ -0,0 +1,10 @@ +.kc-wizard-section-header__title { + margin-bottom: var(--pf-global--spacer--lg); +} +.kc-wizard-section-header__title--has-description { + margin-bottom: var(--pf-global--spacer--sm); +} + +.kc-wizard-section-header__description { + margin-bottom: var(--pf-global--spacer--lg); +} diff --git a/src/stories/UserFedKerberosWizard.stories.tsx b/src/stories/UserFedKerberosWizard.stories.tsx new file mode 100644 index 0000000000..6bcbf56aa2 --- /dev/null +++ b/src/stories/UserFedKerberosWizard.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Meta } from "@storybook/react"; +import { Page, PageSection } from "@patternfly/react-core"; +import { UserFederationKerberosWizard } from "../user-federation/UserFederationKerberosWizard"; +import { MockAdminClient } from "./MockAdminClient"; + +export default { + title: "User Federation Kerberos Wizard", + component: UserFederationKerberosWizard, +} as Meta; + +export const view = () => { + return ( + + + + + + + + ); +}; diff --git a/src/stories/UserFedLdapWizard.stories.tsx b/src/stories/UserFedLdapWizard.stories.tsx new file mode 100644 index 0000000000..16474c05c7 --- /dev/null +++ b/src/stories/UserFedLdapWizard.stories.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Meta } from "@storybook/react"; +import { Page } from "@patternfly/react-core"; +import { UserFederationLdapWizard } from "../user-federation/UserFederationLdapWizard"; +import { MockAdminClient } from "./MockAdminClient"; + +export default { + title: "User Federation LDAP Wizard", + component: UserFederationLdapWizard, +} as Meta; + +export const view = () => { + return ( + + + + {" "} + + ); +}; diff --git a/src/stories/WizardSectionHeader.stories.tsx b/src/stories/WizardSectionHeader.stories.tsx new file mode 100644 index 0000000000..83e7aef406 --- /dev/null +++ b/src/stories/WizardSectionHeader.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { Meta, Story } from "@storybook/react"; +import { + WizardSectionHeader, + WizardSectionHeaderProps, +} from "../components/wizard-section-header/WizardSectionHeader"; + +export default { + title: "Wizard Section Header", + component: WizardSectionHeader, +} as Meta; + +const Template: Story = (args) => ( + +); + +export const TitleAndDescription = Template.bind({}); +TitleAndDescription.args = { + title: "Section title", + description: "This is a description of the section", + showDescription: true, +}; diff --git a/src/user-federation/UserFederationKerberosSettings.tsx b/src/user-federation/UserFederationKerberosSettings.tsx index b46b8f72fd..d5aa593603 100644 --- a/src/user-federation/UserFederationKerberosSettings.tsx +++ b/src/user-federation/UserFederationKerberosSettings.tsx @@ -1,27 +1,16 @@ -import { PageSection, Title } from "@patternfly/react-core"; -import { useTranslation } from "react-i18next"; +import { PageSection } from "@patternfly/react-core"; import React from "react"; import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired"; import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache"; export const UserFederationKerberosSettings = () => { - const { t } = useTranslation("user-federation"); - return ( <> - {/* Required settings */} - - {t("requiredSettings")} - - + - {/* Cache settings */} - - {t("cacheSettings")} - - + ); diff --git a/src/user-federation/UserFederationKerberosWizard.tsx b/src/user-federation/UserFederationKerberosWizard.tsx new file mode 100644 index 0000000000..63b7b7389e --- /dev/null +++ b/src/user-federation/UserFederationKerberosWizard.tsx @@ -0,0 +1,34 @@ +import { Wizard } from "@patternfly/react-core"; +import { useTranslation } from "react-i18next"; +import React from "react"; +import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired"; +import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache"; + +export const UserFederationKerberosWizard = () => { + const { t } = useTranslation("user-federation"); + + const steps = [ + { + name: t("requiredSettings"), + component: ( + + ), + }, + { + name: t("cacheSettings"), + component: ( + + ), + nextButtonText: t("common:finish"), // TODO: needs to disable until cache policy is valid + }, + ]; + + return ( + + ); +}; diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx new file mode 100644 index 0000000000..ad0976ca73 --- /dev/null +++ b/src/user-federation/UserFederationLdapWizard.tsx @@ -0,0 +1,172 @@ +import { + Button, + Wizard, + WizardContextConsumer, + WizardFooter, +} from "@patternfly/react-core"; +import React from "react"; +import { LdapSettingsGeneral } from "./ldap/LdapSettingsGeneral"; +import { LdapSettingsConnection } from "./ldap/LdapSettingsConnection"; +import { LdapSettingsSearching } from "./ldap/LdapSettingsSearching"; +import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization"; +import { LdapSettingsKerberosIntegration } from "./ldap/LdapSettingsKerberosIntegration"; +import { LdapSettingsCache } from "./ldap/LdapSettingsCache"; +import { LdapSettingsAdvanced } from "./ldap/LdapSettingsAdvanced"; +import { useTranslation } from "react-i18next"; + +export const UserFederationLdapWizard = () => { + const { t } = useTranslation("user-federation"); + + const steps = [ + { + name: t("requiredSettings"), + id: "ldapRequiredSettingsStep", + component: ( + + ), + }, + { + name: t("connectionAndAuthenticationSettings"), + id: "ldapConnectionSettingsStep", + component: ( + + ), + }, + { + name: t("ldapSearchingAndUpdatingSettings"), + id: "ldapSearchingSettingsStep", + component: ( + + ), + }, + { + name: t("synchronizationSettings"), + id: "ldapSynchronizationSettingsStep", + component: ( + + ), + }, + { + name: t("kerberosIntegration"), + id: "ldapKerberosIntegrationSettingsStep", + component: ( + + ), + }, + { + name: t("cacheSettings"), + id: "ldapCacheSettingsStep", + component: ( + + ), + }, + { + name: t("advancedSettings"), + id: "ldapAdvancedSettingsStep", + component: ( + + ), + }, + ]; + + const footer = ( + + + {({ activeStep, onNext, onBack, onClose }) => { + // First step buttons + if (activeStep.id == "ldapRequiredSettingsStep") { + return ( + <> + + + + + ); + } + // Other required step buttons + else if ( + activeStep.id == "ldapConnectionSettingsStep" || + activeStep.id == "ldapSearchingSettingsStep" + ) { + return ( + <> + + + + + ); + } + // Last step buttons + else if (activeStep.id == "ldapAdvancedSettingsStep") { + return ( + <> + + + + + ); + } + // All the other steps buttons + return ( + <> + + + + + + ); + }} + + + ); + + return ( + + ); +}; diff --git a/src/user-federation/help.json b/src/user-federation/help.json index db410c9a67..d375c7226e 100644 --- a/src/user-federation/help.json +++ b/src/user-federation/help.json @@ -1,9 +1,13 @@ { "user-federation-help": { - "generalOptions": "General options", + "addKerberosWizardDescription": "Text needed here", + "addLdapWizardDescription": "Text needed here", + + "ldapGeneralOptionsSettingsDescription": "This section contains a few basic options common to all user storage providers.", "consoleDisplayNameHelp": "Display name of provider when linked in admin console", "vendorHelp": "LDAP vendor (provider)", + "ldapConnectionAndAuthorizationSettingsDescription": "This section contains options related to the configuration of the connection to the LDAP server. It also contains options related to authentication of the LDAP connection to the LDAP server.", "consoleDisplayConnectionUrlHelp": "Connection URL to your LDAP server", "enableStarttlsHelp": "Encrypts the connection to LDAP using STARTTLS, which will disable connection pooling", "useTruststoreSpiHelp": "Specifies whether LDAP connection will use the Truststore SPI with the truststore configured in standalone.xml/domain.sml. 'Always' means that it will always use it. 'Never' means that it will not use it. 'Only for ldaps' means that it will use it if your connection URL use ldaps. Note even if standalone.xml/domain.xml is not configured, the default java cacerts or certificate specified by 'javax.net.ssl.trustStore' property will be used.", @@ -13,6 +17,7 @@ "bindDnHelp": "DN of the LDAP admin, which will be used by Keycloak to access LDAP server", "bindCredentialsHelp": "Password of LDAP admin. This field is able to obtain its value from vault, use ${vault.ID} format.", + "ldapSearchingAndUpdatingSettingsDescription": "This section contains options related to searching the LDAP server for the available users.", "editModeLdapHelp": "READ_ONLY is a read-only LDAP store. WRITABLE means data will be synced back to LDAP on demand. UNSYNCED means user data will be imported, but not synced back to LDAP.", "usersDNHelp": "Full DN of LDAP tree where your users are. This DN is the parent of LDAP users. It could be for example 'ou=users,dc=example,dc=com' assuming that your typical user will have DN like 'uid='john',ou=users,dc=example,dc=com'", "usernameLdapAttributeHelp": "Name of LDAP attribute, which is mapped as Keycloak username. For many LDAP server vendors it can be 'uid'. For Active directory it can be 'sAMAccountName' or 'cn'. The attribute should be filled for all LDAP user records you want to import from LDAP to Keycloak.", @@ -24,33 +29,41 @@ "readTimeoutHelp": "LDAP read timeout in milliseconds. This timeout applies for LDAP read operations.", "paginationHelp": "Does the LDAP server support pagination", + "ldapSynchronizationSettingsDescription": "This section contains options related to synchronization of users from LDAP to the Keycloak database.", "importUsersHelp": "Import users", "batchSizeHelp": "Count of LDAP users to be imported from LDAP to Keycloak within a single transaction", "periodicFullSyncHelp": "Whether periodic full synchronization of LDAP users to Keycloak should be enabled or not", "periodicChangedUsersSyncHelp": "Whether periodic synchronization of changed or newly created LDAP users to Keycloak should be enabled or not", + "ldapKerberosSettingsDescription": "This section contains options useful for the Kerberos integraion. This is used just when the LDAP server is used together with Kerberos/SPNEGO for user authentication.", "allowKerberosAuthenticationHelp": "Enable/disable HTTP authentication of users with SPNEGO/Kerberos tokens. The data about authenticated users will be provisioned from this LDAP server", "useKerberosForPasswordAuthenticationHelp": "User Kerberos login module for authenticate username/password against Kerberos server instead of authenticating against LDAP server with Directory Service API", + "ldapCacheSettingsDescription": "This section contains options useful for caching users, which were loaded from this user storage provider", "cachePolicyHelp": "Cache Policy for this storage provider. 'DEFAULT' is whatever the default settings are for the global cache. 'EVICT_DAILY' is a time of day every day that the cache will be invalidated. 'EVICT_WEEKLY' is a day of the week and time the cache will be invalidated. 'MAX_LIFESPAN' is the time in milliseconds that will be the lifespan of a cache entry.", "evictionDayHelp": "Day of the week the entry will become invalid", "evictionHourHelp": "Hour of the day the entry will become invalid", "evictionMinuteHelp": "Minute of the hour the entry will become invalid", "maxLifespanHelp": "Max lifespan of cache entry in milliseconds", + "ldapAdvancedSettingsDescription": "This section contains all the other options for more fine-grained configuration of the LDAP storage provider.", "enableLdapv3PasswordHelp": "Use the LDAPv3 Password Modify Extended Operation (RFC-3062). The password modify extended operation usually requires that LDAP user already has password in the LDAP server. So when this is used with 'Sync Registrations', it can be good to add also 'Hardcoded LDAP attribute mapper' with randomly generated initial password.", "validatePasswordPolicyHelp": "Determines if Keycloak should validate the password with the realm password policy before updating it", "trustEmailHelp": "If enabled, email provided by this provider is not verified even if verification is enabled for the realm.", "IDK-periodicChangedUsersSyncHelp": "Should newly created users be created within LDAP store? Priority affects which provider is chosen to sync the new user.", - "requiredSettingsHelp": "Required Settings", + "kerberosWizardDescription": "Text needed here", + + "kerberosRequiredSettingsDescription": "This section contains a few basic options common to all user storage providers.", "kerberosRealmHelp": "Name of kerberos realm. For example, FOO.ORG", "serverPrincipalHelp": "Full name of server principal for HTTP service including server and domain name. For example, HTTP/host.foo.org@FOO.ORG", "keyTabHelp": "Location of Kerberos KeyTab file containing the credentials of server principal. For example, /etc/krb5.keytab", "debugHelp": "Enable/disable debug logging to standard output for Krb5LoginModule", "allowPasswordAuthenticationHelp": "Enable/disable possibility of username/password authentication against Kerberos database", "editModeKerberosHelp": "READ_ONLY means that password updates are not allowed and user always authenticates with Kerberos password. UNSYNCED means that the user can change the password in the Keycloak database and this one will be used instead of the Kerberos password", - "updateFirstLoginHelp": "Update profile on first login" + "updateFirstLoginHelp": "Update profile on first login", + + "kerberosCacheSettingsDescription": "This section contains a few basic options common to all user storage providers" } } diff --git a/src/user-federation/kerberos/KerberosSettingsCache.tsx b/src/user-federation/kerberos/KerberosSettingsCache.tsx index 758fe79f94..3e7693bd67 100644 --- a/src/user-federation/kerberos/KerberosSettingsCache.tsx +++ b/src/user-federation/kerberos/KerberosSettingsCache.tsx @@ -18,8 +18,17 @@ import { } from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; import _ from "lodash"; +import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader"; -export const KerberosSettingsCache = () => { +export type KerberosSettingsCacheProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const KerberosSettingsCache = ({ + showSectionHeading = false, + showSectionDescription = false, +}: KerberosSettingsCacheProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; @@ -80,6 +89,14 @@ export const KerberosSettingsCache = () => { return ( <> + {showSectionHeading && ( + + )} + {/* Cache settings */} { +export type KerberosSettingsRequiredProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const KerberosSettingsRequired = ({ + showSectionHeading = false, + showSectionDescription = false, +}: KerberosSettingsRequiredProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; const adminClient = useAdminClient(); @@ -54,6 +64,14 @@ export const KerberosSettingsRequired = () => { return ( <> + {showSectionHeading && ( + + )} + {/* Required settings */} { +export type LdapSettingsAdvancedProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsAdvanced = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsAdvancedProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; const adminClient = useAdminClient(); @@ -38,6 +47,14 @@ export const LdapSettingsAdvanced = () => { return ( <> + {showSectionHeading && ( + + )} + { +export type LdapSettingsCacheProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsCache = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsCacheProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; @@ -102,6 +114,14 @@ export const LdapSettingsCache = () => { return ( <> + {showSectionHeading && ( + + )} + {/* Cache settings */} { +export type LdapSettingsConnectionProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsConnection = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsConnectionProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; const adminClient = useAdminClient(); @@ -73,6 +82,16 @@ export const LdapSettingsConnection = () => { return ( <> + {showSectionHeading && ( + + )} + { {" "} {/* TODO: whatever this button is supposed to do */} diff --git a/src/user-federation/ldap/LdapSettingsGeneral.tsx b/src/user-federation/ldap/LdapSettingsGeneral.tsx index faec7d3dcb..f9a9bb9251 100644 --- a/src/user-federation/ldap/LdapSettingsGeneral.tsx +++ b/src/user-federation/ldap/LdapSettingsGeneral.tsx @@ -3,7 +3,10 @@ import { Select, SelectOption, SelectVariant, + Text, + TextContent, TextInput, + Title, } from "@patternfly/react-core"; import { useTranslation } from "react-i18next"; import React, { useEffect, useState } from "react"; @@ -17,8 +20,17 @@ import { asyncStateFetch, } from "../../context/auth/AdminClient"; import { useParams } from "react-router-dom"; +import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader"; -export const LdapSettingsGeneral = () => { +export type LdapSettingsGeneralProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsGeneral = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsGeneralProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; const adminClient = useAdminClient(); @@ -65,6 +77,14 @@ export const LdapSettingsGeneral = () => { return ( <> + {showSectionHeading && ( + + )} + { +export type LdapSettingsKerberosIntegrationProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsKerberosIntegration = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsKerberosIntegrationProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; @@ -39,6 +48,14 @@ export const LdapSettingsKerberosIntegration = () => { return ( <> + {showSectionHeading && ( + + )} + { +export type LdapSettingsSearchingProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsSearching = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsSearchingProps) => { const { t } = useTranslation("user-federation"); const adminClient = useAdminClient(); const helpText = useTranslation("user-federation-help").t; @@ -65,6 +74,14 @@ export const LdapSettingsSearching = () => { return ( <> + {showSectionHeading && ( + + )} + { +export type LdapSettingsSynchronizationProps = { + showSectionHeading?: boolean; + showSectionDescription?: boolean; +}; + +export const LdapSettingsSynchronization = ({ + showSectionHeading = false, + showSectionDescription = false, +}: LdapSettingsSynchronizationProps) => { const { t } = useTranslation("user-federation"); const helpText = useTranslation("user-federation-help").t; const adminClient = useAdminClient(); @@ -38,6 +47,14 @@ export const LdapSettingsSynchronization = () => { return ( <> + {showSectionHeading && ( + + )} +