From 7cea09ef8adb4b2ded22b2310c3a59e534cd2dce Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Mon, 4 Jan 2021 16:33:18 -0500 Subject: [PATCH] rebase on user federation wizard screens (storybook) --- src/common-messages.json | 3 + src/components/scroll-form/ScrollForm.tsx | 2 +- .../WizardSectionHeader.tsx | 48 ++++++++ src/stories/UserFedKerberosWizard.stories.tsx | 11 +- src/stories/UserFedLdapWizard.stories.tsx | 7 +- src/stories/WizardSectionHeader.stories.tsx | 22 ++++ .../UserFederationKerberosSettings.tsx | 17 +-- .../UserFederationKerberosWizard.tsx | 29 +++-- .../UserFederationLdapWizard.tsx | 107 +++++++++++------- src/user-federation/help.json | 19 +++- .../kerberos/KerberosSettingsCache.tsx | 19 +++- .../kerberos/KerberosSettingsRequired.tsx | 20 +++- .../ldap/LdapSettingsAdvanced.tsx | 19 +++- .../ldap/LdapSettingsCache.tsx | 22 +++- .../ldap/LdapSettingsConnection.tsx | 23 +++- .../ldap/LdapSettingsGeneral.tsx | 22 +++- .../ldap/LdapSettingsKerberosIntegration.tsx | 19 +++- .../ldap/LdapSettingsSearching.tsx | 19 +++- .../ldap/LdapSettingsSynchronization.tsx | 19 +++- src/user-federation/messages.json | 2 + 20 files changed, 360 insertions(+), 89 deletions(-) create mode 100644 src/components/wizard-section-header/WizardSectionHeader.tsx create mode 100644 src/stories/WizardSectionHeader.stories.tsx 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..ffe2f5105d --- /dev/null +++ b/src/components/wizard-section-header/WizardSectionHeader.tsx @@ -0,0 +1,48 @@ +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"; + +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/stories/UserFedKerberosWizard.stories.tsx b/src/stories/UserFedKerberosWizard.stories.tsx index b503ea5aef..6bcbf56aa2 100644 --- a/src/stories/UserFedKerberosWizard.stories.tsx +++ b/src/stories/UserFedKerberosWizard.stories.tsx @@ -1,7 +1,8 @@ import React from "react"; import { Meta } from "@storybook/react"; -import { Page } from "@patternfly/react-core"; +import { Page, PageSection } from "@patternfly/react-core"; import { UserFederationKerberosWizard } from "../user-federation/UserFederationKerberosWizard"; +import { MockAdminClient } from "./MockAdminClient"; export default { title: "User Federation Kerberos Wizard", @@ -10,8 +11,12 @@ export default { export const view = () => { return ( - - + + + + + + ); }; diff --git a/src/stories/UserFedLdapWizard.stories.tsx b/src/stories/UserFedLdapWizard.stories.tsx index 9dcd3e3141..16474c05c7 100644 --- a/src/stories/UserFedLdapWizard.stories.tsx +++ b/src/stories/UserFedLdapWizard.stories.tsx @@ -2,6 +2,7 @@ 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", @@ -10,8 +11,10 @@ export default { 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 index 1275c895c6..27ec36d125 100644 --- a/src/user-federation/UserFederationKerberosWizard.tsx +++ b/src/user-federation/UserFederationKerberosWizard.tsx @@ -1,29 +1,34 @@ -import { Button, Wizard } from "@patternfly/react-core"; +import { Wizard } from "@patternfly/react-core"; import { useTranslation } from "react-i18next"; import React from "react"; -import { KerberosSettingsRequired } from "./KerberosSettingsRequired"; -import { KerberosSettingsCache } from "./KerberosSettingsCache"; +import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired"; +import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache"; export const UserFederationKerberosWizard = () => { const { t } = useTranslation("user-federation"); + const helpText = useTranslation("user-federation-help").t; const steps = [ - { name: "Required settings", component: }, { - name: "Cache settings", - component: , - nextButtonText: "Finish", // TODO: needs to disable until cache policy is valid + name: t("requiredSettings"), + component: ( + + ), + }, + { + name: t("cacheSettings"), + component: ( + + ), + nextButtonText: t("common:finish"), // TODO: needs to disable until cache policy is valid }, ]; - const title = "Add Kerberos user federation provider"; return ( ); }; diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx index 1ee28eafa9..8037c987c2 100644 --- a/src/user-federation/UserFederationLdapWizard.tsx +++ b/src/user-federation/UserFederationLdapWizard.tsx @@ -4,86 +4,101 @@ import { WizardContextConsumer, WizardFooter, } from "@patternfly/react-core"; -import { useTranslation } from "react-i18next"; import React from "react"; -import { LdapSettingsGeneral } from "./LdapSettingsGeneral"; -import { LdapSettingsConnection } from "./LdapSettingsConnection"; -import { LdapSettingsSearching } from "./LdapSettingsSearching"; -import { LdapSettingsSynchronization } from "./LdapSettingsSynchronization"; -import { LdapSettingsKerberosIntegration } from "./LdapSettingsKerberosIntegration"; -import { LdapSettingsCache } from "./LdapSettingsCache"; -import { LdapSettingsAdvanced } from "./LdapSettingsAdvanced"; +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 helpText = useTranslation("user-federation-help").t; const steps = [ { - name: "Required settings", + name: t("requiredSettings"), id: "ldapRequiredSettingsStep", - component: , + component: ( + + ), }, { - name: "Connection settings", + name: t("connectionAndAuthenticationSettings"), id: "ldapConnectionSettingsStep", - component: , + component: ( + + ), }, { - name: "Searching settings", + name: t("ldapSearchingAndUpdatingSettings"), id: "ldapSearchingSettingsStep", - component: , + component: ( + + ), }, { - name: "Synchronization settings", + name: t("synchronizationSettings"), id: "ldapSynchronizationSettingsStep", - component: , + component: ( + + ), }, { - name: "KerberosIntegration settings", + name: t("kerberosIntegration"), id: "ldapKerberosIntegrationSettingsStep", - component: , + component: ( + + ), }, { - name: "Cache settings", + name: t("cacheSettings"), id: "ldapCacheSettingsStep", - component: , + component: ( + + ), }, { - name: "Advanced settings", + name: t("advancedSettings"), id: "ldapAdvancedSettingsStep", - component: , + component: ( + + ), }, ]; - const title = "Add LDAP user federation provider"; + const title = t("addLdapWizardTitle"); + const description = helpText("addLdapWizardDescription"); const footer = ( - {({ - activeStep, - goToStepByName, - goToStepById, - onNext, - onBack, - onClose, - }) => { + {({ activeStep, onNext, onBack, onClose }) => { // First step buttons if (activeStep.id == "ldapRequiredSettingsStep") { return ( <> ); @@ -96,13 +111,13 @@ export const UserFederationLdapWizard = () => { return ( <> ); @@ -111,12 +126,16 @@ export const UserFederationLdapWizard = () => { else if (activeStep.id == "ldapAdvancedSettingsStep") { return ( <> - + ); @@ -130,12 +149,12 @@ export const UserFederationLdapWizard = () => { ); @@ -147,7 +166,7 @@ export const UserFederationLdapWizard = () => { return ( { +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 && ( + + )} +