From cc2dd3e5122b4823760547b5fe2a403e554e7fe9 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Wed, 18 Nov 2020 11:18:32 -0500
Subject: [PATCH 1/6] adds user federation kerberos wizard

---
 src/stories/UserFedWizard.stories.tsx         | 17 +++++++++++++
 .../UserFederationKerberosWizard.tsx          | 25 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/stories/UserFedWizard.stories.tsx
 create mode 100644 src/user-federation/UserFederationKerberosWizard.tsx

diff --git a/src/stories/UserFedWizard.stories.tsx b/src/stories/UserFedWizard.stories.tsx
new file mode 100644
index 0000000000..f09c92648f
--- /dev/null
+++ b/src/stories/UserFedWizard.stories.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Page } from "@patternfly/react-core";
+import { UserFederationKerberosWizard } from "../user-federation/UserFederationKerberosWizard";
+
+export default {
+  title: "User Federation Wizard",
+  component: UserFederationKerberosWizard,
+} as Meta;
+
+export const view = () => {
+  return (
+    <Page>
+      <UserFederationKerberosWizard />
+    </Page>
+  );
+};
diff --git a/src/user-federation/UserFederationKerberosWizard.tsx b/src/user-federation/UserFederationKerberosWizard.tsx
new file mode 100644
index 0000000000..6b052935de
--- /dev/null
+++ b/src/user-federation/UserFederationKerberosWizard.tsx
@@ -0,0 +1,25 @@
+import { Button, Wizard } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import { KerberosSettingsRequired } from "./KerberosSettingsRequired";
+import { KerberosSettingsCache } from "./KerberosSettingsCache";
+
+export const UserFederationKerberosWizard = () => {
+  const { t } = useTranslation("user-federation");
+
+  const steps = [
+    { name: "Required settings", component: <KerberosSettingsRequired /> },
+    { name: "Cache settings", component: <KerberosSettingsCache /> },
+  ];
+  const title = "Add Kerberos user federation provider";
+
+  return (
+    <Wizard
+      title={title}
+      description="Text needed here"
+      steps={steps}
+      // onClose={handleModalToggle}
+      // isOpen={isOpen}
+    />
+  );
+};

From 006356d9e3fd8c73f7eabce80fef154b76f04e61 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 15 Dec 2020 17:50:09 -0500
Subject: [PATCH 2/6] adds wizard buttons

---
 ....tsx => UserFedKerberosWizard.stories.tsx} |   2 +-
 src/stories/UserFedLdapWizard.stories.tsx     |  17 ++
 .../UserFederationKerberosWizard.tsx          |   6 +-
 .../UserFederationLdapWizard.tsx              | 156 ++++++++++++++++++
 4 files changed, 179 insertions(+), 2 deletions(-)
 rename src/stories/{UserFedWizard.stories.tsx => UserFedKerberosWizard.stories.tsx} (89%)
 create mode 100644 src/stories/UserFedLdapWizard.stories.tsx
 create mode 100644 src/user-federation/UserFederationLdapWizard.tsx

diff --git a/src/stories/UserFedWizard.stories.tsx b/src/stories/UserFedKerberosWizard.stories.tsx
similarity index 89%
rename from src/stories/UserFedWizard.stories.tsx
rename to src/stories/UserFedKerberosWizard.stories.tsx
index f09c92648f..b503ea5aef 100644
--- a/src/stories/UserFedWizard.stories.tsx
+++ b/src/stories/UserFedKerberosWizard.stories.tsx
@@ -4,7 +4,7 @@ import { Page } from "@patternfly/react-core";
 import { UserFederationKerberosWizard } from "../user-federation/UserFederationKerberosWizard";
 
 export default {
-  title: "User Federation Wizard",
+  title: "User Federation Kerberos Wizard",
   component: UserFederationKerberosWizard,
 } as Meta;
 
diff --git a/src/stories/UserFedLdapWizard.stories.tsx b/src/stories/UserFedLdapWizard.stories.tsx
new file mode 100644
index 0000000000..9dcd3e3141
--- /dev/null
+++ b/src/stories/UserFedLdapWizard.stories.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Page } from "@patternfly/react-core";
+import { UserFederationLdapWizard } from "../user-federation/UserFederationLdapWizard";
+
+export default {
+  title: "User Federation LDAP Wizard",
+  component: UserFederationLdapWizard,
+} as Meta;
+
+export const view = () => {
+  return (
+    <Page>
+      <UserFederationLdapWizard />
+    </Page>
+  );
+};
diff --git a/src/user-federation/UserFederationKerberosWizard.tsx b/src/user-federation/UserFederationKerberosWizard.tsx
index 6b052935de..1275c895c6 100644
--- a/src/user-federation/UserFederationKerberosWizard.tsx
+++ b/src/user-federation/UserFederationKerberosWizard.tsx
@@ -9,7 +9,11 @@ export const UserFederationKerberosWizard = () => {
 
   const steps = [
     { name: "Required settings", component: <KerberosSettingsRequired /> },
-    { name: "Cache settings", component: <KerberosSettingsCache /> },
+    {
+      name: "Cache settings",
+      component: <KerberosSettingsCache />,
+      nextButtonText: "Finish", // TODO: needs to disable until cache policy is valid
+    },
   ];
   const title = "Add Kerberos user federation provider";
 
diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx
new file mode 100644
index 0000000000..1ee28eafa9
--- /dev/null
+++ b/src/user-federation/UserFederationLdapWizard.tsx
@@ -0,0 +1,156 @@
+import {
+  Button,
+  Wizard,
+  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";
+
+export const UserFederationLdapWizard = () => {
+  const { t } = useTranslation("user-federation");
+
+  const steps = [
+    {
+      name: "Required settings",
+      id: "ldapRequiredSettingsStep",
+      component: <LdapSettingsGeneral />,
+    },
+    {
+      name: "Connection settings",
+      id: "ldapConnectionSettingsStep",
+      component: <LdapSettingsConnection />,
+    },
+    {
+      name: "Searching settings",
+      id: "ldapSearchingSettingsStep",
+      component: <LdapSettingsSearching />,
+    },
+    {
+      name: "Synchronization settings",
+      id: "ldapSynchronizationSettingsStep",
+      component: <LdapSettingsSynchronization />,
+    },
+    {
+      name: "KerberosIntegration settings",
+      id: "ldapKerberosIntegrationSettingsStep",
+      component: <LdapSettingsKerberosIntegration />,
+    },
+    {
+      name: "Cache settings",
+      id: "ldapCacheSettingsStep",
+      component: <LdapSettingsCache />,
+    },
+    {
+      name: "Advanced settings",
+      id: "ldapAdvancedSettingsStep",
+      component: <LdapSettingsAdvanced />,
+    },
+  ];
+
+  const title = "Add LDAP user federation provider";
+
+  const footer = (
+    <WizardFooter>
+      <WizardContextConsumer>
+        {({
+          activeStep,
+          goToStepByName,
+          goToStepById,
+          onNext,
+          onBack,
+          onClose,
+        }) => {
+          // First step buttons
+          if (activeStep.id == "ldapRequiredSettingsStep") {
+            return (
+              <>
+                <Button variant="primary" type="submit" onClick={onNext}>
+                  Next
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={onBack}
+                  className="pf-m-disabled"
+                >
+                  Back
+                </Button>
+                <Button variant="link" onClick={onClose}>
+                  Cancel
+                </Button>
+              </>
+            );
+          }
+          // Other required step buttons
+          else if (
+            activeStep.id == "ldapConnectionSettingsStep" ||
+            activeStep.id == "ldapSearchingSettingsStep"
+          ) {
+            return (
+              <>
+                <Button variant="primary" type="submit" onClick={onNext}>
+                  Next
+                </Button>
+                <Button variant="secondary" onClick={onBack}>
+                  Back
+                </Button>
+                <Button variant="link" onClick={onClose}>
+                  Cancel
+                </Button>
+              </>
+            );
+          }
+          // Last step buttons
+          else if (activeStep.id == "ldapAdvancedSettingsStep") {
+            return (
+              <>
+                <Button onClick={() => this.closeWizard}>Finish</Button>
+                <Button variant="secondary" onClick={onBack}>
+                  Back
+                </Button>
+                <Button variant="link" onClick={onClose}>
+                  Cancel
+                </Button>
+              </>
+            );
+          }
+          // All the other steps buttons
+          return (
+            <>
+              <Button onClick={onNext}>Next</Button>
+              <Button variant="secondary" onClick={onBack}>
+                Back
+              </Button>
+              <Button
+                variant="link"
+                onClick={() => this.validateLastStep(onNext)}
+              >
+                Skip customization and finish
+              </Button>
+              <Button variant="link" onClick={onClose}>
+                Cancel
+              </Button>
+            </>
+          );
+        }}
+      </WizardContextConsumer>
+    </WizardFooter>
+  );
+
+  return (
+    <Wizard
+      title={title}
+      description="Text needed here"
+      height="100%"
+      steps={steps}
+      footer={footer}
+    />
+  );
+};

From 7cea09ef8adb4b2ded22b2310c3a59e534cd2dce Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Mon, 4 Jan 2021 16:33:18 -0500
Subject: [PATCH 3/6] 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
+        size={"xl"}
+        headingLevel={"h2"}
+        className={showDescription ? "pf-u-mb-sm" : "pf-u-mb-lg"}
+      >
+        {title}
+      </Title>
+      {showDescription && (
+        <TextContent className="pf-u-mb-lg">
+          <Text>{description}</Text>
+        </TextContent>
+      )}
+    </>
+  );
+};
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 (
-    <Page>
-      <UserFederationKerberosWizard />
+    <Page style={{ height: "80vh" }}>
+      <PageSection isFilled>
+        <MockAdminClient>
+          <UserFederationKerberosWizard />
+        </MockAdminClient>
+      </PageSection>
     </Page>
   );
 };
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 (
-    <Page>
-      <UserFederationLdapWizard />
+    <Page style={{ height: "80vh" }}>
+      <MockAdminClient>
+        <UserFederationLdapWizard />
+      </MockAdminClient>{" "}
     </Page>
   );
 };
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<WizardSectionHeaderProps> = (args) => (
+  <WizardSectionHeader {...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 (
     <>
       <PageSection variant="light">
-        {/* Required settings */}
-        <Title size={"xl"} headingLevel={"h2"} className="pf-u-mb-lg">
-          {t("requiredSettings")}
-        </Title>
-        <KerberosSettingsRequired />
+        <KerberosSettingsRequired showSectionHeading />
       </PageSection>
       <PageSection variant="light" isFilled>
-        {/* Cache settings */}
-        <Title size={"xl"} headingLevel={"h2"} className="pf-u-mb-lg">
-          {t("cacheSettings")}
-        </Title>
-        <KerberosSettingsCache />
+        <KerberosSettingsCache showSectionHeading />
       </PageSection>
     </>
   );
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: <KerberosSettingsRequired /> },
     {
-      name: "Cache settings",
-      component: <KerberosSettingsCache />,
-      nextButtonText: "Finish", // TODO: needs to disable until cache policy is valid
+      name: t("requiredSettings"),
+      component: (
+        <KerberosSettingsRequired showSectionHeading showSectionDescription />
+      ),
+    },
+    {
+      name: t("cacheSettings"),
+      component: (
+        <KerberosSettingsCache showSectionHeading showSectionDescription />
+      ),
+      nextButtonText: t("common:finish"), // TODO: needs to disable until cache policy is valid
     },
   ];
-  const title = "Add Kerberos user federation provider";
 
   return (
     <Wizard
-      title={title}
-      description="Text needed here"
+      title={t("addKerberosWizardTitle")}
+      description={helpText("addKerberosWizardDescription")}
       steps={steps}
-      // onClose={handleModalToggle}
-      // isOpen={isOpen}
     />
   );
 };
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: <LdapSettingsGeneral />,
+      component: (
+        <LdapSettingsGeneral showSectionHeading showSectionDescription />
+      ),
     },
     {
-      name: "Connection settings",
+      name: t("connectionAndAuthenticationSettings"),
       id: "ldapConnectionSettingsStep",
-      component: <LdapSettingsConnection />,
+      component: (
+        <LdapSettingsConnection showSectionHeading showSectionDescription />
+      ),
     },
     {
-      name: "Searching settings",
+      name: t("ldapSearchingAndUpdatingSettings"),
       id: "ldapSearchingSettingsStep",
-      component: <LdapSettingsSearching />,
+      component: (
+        <LdapSettingsSearching showSectionHeading showSectionDescription />
+      ),
     },
     {
-      name: "Synchronization settings",
+      name: t("synchronizationSettings"),
       id: "ldapSynchronizationSettingsStep",
-      component: <LdapSettingsSynchronization />,
+      component: (
+        <LdapSettingsSynchronization
+          showSectionHeading
+          showSectionDescription
+        />
+      ),
     },
     {
-      name: "KerberosIntegration settings",
+      name: t("kerberosIntegration"),
       id: "ldapKerberosIntegrationSettingsStep",
-      component: <LdapSettingsKerberosIntegration />,
+      component: (
+        <LdapSettingsKerberosIntegration
+          showSectionHeading
+          showSectionDescription
+        />
+      ),
     },
     {
-      name: "Cache settings",
+      name: t("cacheSettings"),
       id: "ldapCacheSettingsStep",
-      component: <LdapSettingsCache />,
+      component: (
+        <LdapSettingsCache showSectionHeading showSectionDescription />
+      ),
     },
     {
-      name: "Advanced settings",
+      name: t("advancedSettings"),
       id: "ldapAdvancedSettingsStep",
-      component: <LdapSettingsAdvanced />,
+      component: (
+        <LdapSettingsAdvanced showSectionHeading showSectionDescription />
+      ),
     },
   ];
 
-  const title = "Add LDAP user federation provider";
+  const title = t("addLdapWizardTitle");
+  const description = helpText("addLdapWizardDescription");
 
   const footer = (
     <WizardFooter>
       <WizardContextConsumer>
-        {({
-          activeStep,
-          goToStepByName,
-          goToStepById,
-          onNext,
-          onBack,
-          onClose,
-        }) => {
+        {({ activeStep, onNext, onBack, onClose }) => {
           // First step buttons
           if (activeStep.id == "ldapRequiredSettingsStep") {
             return (
               <>
                 <Button variant="primary" type="submit" onClick={onNext}>
-                  Next
+                  {t("common:next")}
                 </Button>
                 <Button
                   variant="secondary"
                   onClick={onBack}
                   className="pf-m-disabled"
                 >
-                  Back
+                  {t("common:back")}
                 </Button>
                 <Button variant="link" onClick={onClose}>
-                  Cancel
+                  {t("common:cancel")}
                 </Button>
               </>
             );
@@ -96,13 +111,13 @@ export const UserFederationLdapWizard = () => {
             return (
               <>
                 <Button variant="primary" type="submit" onClick={onNext}>
-                  Next
+                  {t("common:next")}
                 </Button>
                 <Button variant="secondary" onClick={onBack}>
-                  Back
+                  {t("common:back")}
                 </Button>
                 <Button variant="link" onClick={onClose}>
-                  Cancel
+                  {t("common:cancel")}
                 </Button>
               </>
             );
@@ -111,12 +126,16 @@ export const UserFederationLdapWizard = () => {
           else if (activeStep.id == "ldapAdvancedSettingsStep") {
             return (
               <>
-                <Button onClick={() => this.closeWizard}>Finish</Button>
+                <Button onClick={() => {}}>
+                  {" "}
+                  //TODO: close the wizard and finish
+                  {t("common:finish")}
+                </Button>
                 <Button variant="secondary" onClick={onBack}>
-                  Back
+                  {t("common:back")}
                 </Button>
                 <Button variant="link" onClick={onClose}>
-                  Cancel
+                  {t("common:cancel")}
                 </Button>
               </>
             );
@@ -130,12 +149,12 @@ export const UserFederationLdapWizard = () => {
               </Button>
               <Button
                 variant="link"
-                onClick={() => this.validateLastStep(onNext)}
+                onClick={() => {}} //TODO: validate last step and finish
               >
-                Skip customization and finish
+                {t("common:skipCustomizationAndFinish")}
               </Button>
               <Button variant="link" onClick={onClose}>
-                Cancel
+                {t("common:cancel")}
               </Button>
             </>
           );
@@ -147,7 +166,7 @@ export const UserFederationLdapWizard = () => {
   return (
     <Wizard
       title={title}
-      description="Text needed here"
+      description={description}
       height="100%"
       steps={steps}
       footer={footer}
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 && (
+        <WizardSectionHeader
+          title={t("cacheSettings")}
+          description={helpText("kerberosCacheSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       {/* Cache settings */}
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
diff --git a/src/user-federation/kerberos/KerberosSettingsRequired.tsx b/src/user-federation/kerberos/KerberosSettingsRequired.tsx
index eacc036703..027c673eb0 100644
--- a/src/user-federation/kerberos/KerberosSettingsRequired.tsx
+++ b/src/user-federation/kerberos/KerberosSettingsRequired.tsx
@@ -6,6 +6,7 @@ import {
   SelectVariant,
   Switch,
   TextInput,
+  Title,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
@@ -16,8 +17,17 @@ import { useAdminClient } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 import { convertToFormValues } from "../../util";
 import _ from "lodash";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const KerberosSettingsRequired = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("requiredSettings")}
+          description={helpText("kerberosRequiredSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       {/* Required settings */}
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
diff --git a/src/user-federation/ldap/LdapSettingsAdvanced.tsx b/src/user-federation/ldap/LdapSettingsAdvanced.tsx
index c0f8dcd3ea..f18d0e7cfb 100644
--- a/src/user-federation/ldap/LdapSettingsAdvanced.tsx
+++ b/src/user-federation/ldap/LdapSettingsAdvanced.tsx
@@ -11,8 +11,17 @@ import {
   asyncStateFetch,
 } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsAdvanced = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("advancedSettings")}
+          description={helpText("ldapAdvancedSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("enableLdapv3Password")}
diff --git a/src/user-federation/ldap/LdapSettingsCache.tsx b/src/user-federation/ldap/LdapSettingsCache.tsx
index 4d5f0e980e..e85cf52538 100644
--- a/src/user-federation/ldap/LdapSettingsCache.tsx
+++ b/src/user-federation/ldap/LdapSettingsCache.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";
@@ -14,8 +17,17 @@ import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresenta
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsCache = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("cacheSettings")}
+          description={helpText("ldapCacheSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       {/* Cache settings */}
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
diff --git a/src/user-federation/ldap/LdapSettingsConnection.tsx b/src/user-federation/ldap/LdapSettingsConnection.tsx
index 33c2ba32d9..36b368621d 100644
--- a/src/user-federation/ldap/LdapSettingsConnection.tsx
+++ b/src/user-federation/ldap/LdapSettingsConnection.tsx
@@ -21,8 +21,17 @@ import {
   asyncStateFetch,
 } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsConnection = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("connectionAndAuthenticationSettings")}
+          description={helpText(
+            "ldapConnectionAndAuthorizationSettingsDescription"
+          )}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("connectionURL")}
@@ -293,7 +312,7 @@ export const LdapSettingsConnection = () => {
           {" "}
           {/* TODO: whatever this button is supposed to do */}
           <Button variant="secondary" id="kc-test-button">
-            Test
+            {t("common:test")}
           </Button>
         </FormGroup>
       </FormAccess>
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 && (
+        <WizardSectionHeader
+          title={t("generalOptions")}
+          description={helpText("ldapGeneralOptionsSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("consoleDisplayName")}
diff --git a/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx b/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
index 58548d6297..d4bc5116a5 100644
--- a/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
+++ b/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
@@ -11,8 +11,17 @@ import {
   asyncStateFetch,
 } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsKerberosIntegration = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("kerberosIntegration")}
+          description={helpText("ldapKerberosSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("allowKerberosAuthentication")}
diff --git a/src/user-federation/ldap/LdapSettingsSearching.tsx b/src/user-federation/ldap/LdapSettingsSearching.tsx
index 3a89f04186..28c3c7a33c 100644
--- a/src/user-federation/ldap/LdapSettingsSearching.tsx
+++ b/src/user-federation/ldap/LdapSettingsSearching.tsx
@@ -18,8 +18,17 @@ import {
 } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 import { convertToFormValues } from "../../util";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsSearching = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("ldapSearchingAndUpdatingSettings")}
+          description={helpText("ldapSearchingAndUpdatingSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           label={t("editMode")}
diff --git a/src/user-federation/ldap/LdapSettingsSynchronization.tsx b/src/user-federation/ldap/LdapSettingsSynchronization.tsx
index 6d04a3fb5d..7797a1e4cf 100644
--- a/src/user-federation/ldap/LdapSettingsSynchronization.tsx
+++ b/src/user-federation/ldap/LdapSettingsSynchronization.tsx
@@ -11,8 +11,17 @@ import {
   asyncStateFetch,
 } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
+import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
-export const LdapSettingsSynchronization = () => {
+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 && (
+        <WizardSectionHeader
+          title={t("synchronizationSettings")}
+          description={helpText("ldapSynchronizationSettingsDescription")}
+          showDescription={showSectionDescription}
+        />
+      )}
+
       <FormAccess role="manage-realm" isHorizontal>
         <FormGroup
           hasNoPaddingTop
diff --git a/src/user-federation/messages.json b/src/user-federation/messages.json
index bcf58de57f..630b4408e1 100644
--- a/src/user-federation/messages.json
+++ b/src/user-federation/messages.json
@@ -7,6 +7,8 @@
     "providers": "Add providers",
     "addKerberos": "Add Kerberos providers",
     "addLdap": "Add LDAP providers",
+    "addKerberosWizardTitle": "Add Kerberos user federation provider",
+    "addLdapWizardTitle": "Add LDAP user federation provider",
 
     "syncChangedUsers": "Sync changed users",
     "syncAllUsers": "Sync all users",

From ac65df58b85ab9b6aba11014c99e0f68e8f9216b Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 5 Jan 2021 09:43:01 -0500
Subject: [PATCH 4/6] fix spacing of wizard section header

---
 .../wizard-section-header/WizardSectionHeader.tsx      |  9 +++++++--
 .../wizard-section-header/wizard-section-header.css    | 10 ++++++++++
 src/user-federation/UserFederationLdapWizard.tsx       |  6 +++---
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/components/wizard-section-header/wizard-section-header.css

diff --git a/src/components/wizard-section-header/WizardSectionHeader.tsx b/src/components/wizard-section-header/WizardSectionHeader.tsx
index ffe2f5105d..f3e22c1112 100644
--- a/src/components/wizard-section-header/WizardSectionHeader.tsx
+++ b/src/components/wizard-section-header/WizardSectionHeader.tsx
@@ -17,6 +17,7 @@ import {
   DropdownPosition,
   Title,
 } from "@patternfly/react-core";
+import "./wizard-section-header.css";
 
 export type WizardSectionHeaderProps = {
   title: string;
@@ -34,12 +35,16 @@ export const WizardSectionHeader = ({
       <Title
         size={"xl"}
         headingLevel={"h2"}
-        className={showDescription ? "pf-u-mb-sm" : "pf-u-mb-lg"}
+        className={
+          showDescription
+            ? "kc-wizard-section-header__title--has-description"
+            : "kc-wizard-section-header__title"
+        }
       >
         {title}
       </Title>
       {showDescription && (
-        <TextContent className="pf-u-mb-lg">
+        <TextContent className="kc-wizard-section-header__description">
           <Text>{description}</Text>
         </TextContent>
       )}
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/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx
index 8037c987c2..7d345452a1 100644
--- a/src/user-federation/UserFederationLdapWizard.tsx
+++ b/src/user-federation/UserFederationLdapWizard.tsx
@@ -126,9 +126,9 @@ export const UserFederationLdapWizard = () => {
           else if (activeStep.id == "ldapAdvancedSettingsStep") {
             return (
               <>
-                <Button onClick={() => {}}>
-                  {" "}
-                  //TODO: close the wizard and finish
+                <Button
+                  onClick={() => {}} //TODO: close the wizard and finish
+                >
                   {t("common:finish")}
                 </Button>
                 <Button variant="secondary" onClick={onBack}>

From c3a11434c495ddba0dd4bc7b35ac76d3f9d1d351 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 5 Jan 2021 11:08:43 -0500
Subject: [PATCH 5/6] remove modal header on wizard

---
 src/user-federation/UserFederationKerberosWizard.tsx | 5 +++--
 src/user-federation/UserFederationLdapWizard.tsx     | 8 +++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/user-federation/UserFederationKerberosWizard.tsx b/src/user-federation/UserFederationKerberosWizard.tsx
index 27ec36d125..fd7febca87 100644
--- a/src/user-federation/UserFederationKerberosWizard.tsx
+++ b/src/user-federation/UserFederationKerberosWizard.tsx
@@ -26,8 +26,9 @@ export const UserFederationKerberosWizard = () => {
 
   return (
     <Wizard
-      title={t("addKerberosWizardTitle")}
-      description={helpText("addKerberosWizardDescription")}
+      // Because this is an inline wizard, this title and description should be put into the page. Specifying them here causes the wizard component to make a header that would be used on a modal.
+      // title={t("addKerberosWizardTitle")}
+      // description={helpText("addKerberosWizardDescription")}
       steps={steps}
     />
   );
diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx
index 7d345452a1..92ebd31c98 100644
--- a/src/user-federation/UserFederationLdapWizard.tsx
+++ b/src/user-federation/UserFederationLdapWizard.tsx
@@ -76,9 +76,6 @@ export const UserFederationLdapWizard = () => {
     },
   ];
 
-  const title = t("addLdapWizardTitle");
-  const description = helpText("addLdapWizardDescription");
-
   const footer = (
     <WizardFooter>
       <WizardContextConsumer>
@@ -165,8 +162,9 @@ export const UserFederationLdapWizard = () => {
 
   return (
     <Wizard
-      title={title}
-      description={description}
+      // Because this is an inline wizard, this title and description should be put into the page. Specifying them here causes the wizard component to make a header that would be used on a modal.
+      // title={t("addLdapWizardTitle")}
+      // description={helpText("addLdapWizardDescription")}
       height="100%"
       steps={steps}
       footer={footer}

From dc08e138333718e89807c40d960b10ca546576b0 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 5 Jan 2021 11:30:18 -0500
Subject: [PATCH 6/6] remove unused helpText

---
 src/user-federation/UserFederationKerberosWizard.tsx | 1 -
 src/user-federation/UserFederationLdapWizard.tsx     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/user-federation/UserFederationKerberosWizard.tsx b/src/user-federation/UserFederationKerberosWizard.tsx
index fd7febca87..63b7b7389e 100644
--- a/src/user-federation/UserFederationKerberosWizard.tsx
+++ b/src/user-federation/UserFederationKerberosWizard.tsx
@@ -6,7 +6,6 @@ import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache";
 
 export const UserFederationKerberosWizard = () => {
   const { t } = useTranslation("user-federation");
-  const helpText = useTranslation("user-federation-help").t;
 
   const steps = [
     {
diff --git a/src/user-federation/UserFederationLdapWizard.tsx b/src/user-federation/UserFederationLdapWizard.tsx
index 92ebd31c98..ad0976ca73 100644
--- a/src/user-federation/UserFederationLdapWizard.tsx
+++ b/src/user-federation/UserFederationLdapWizard.tsx
@@ -16,7 +16,6 @@ import { useTranslation } from "react-i18next";
 
 export const UserFederationLdapWizard = () => {
   const { t } = useTranslation("user-federation");
-  const helpText = useTranslation("user-federation-help").t;
 
   const steps = [
     {