adds wizard buttons

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;
 

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>
+  );
+};

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";
 

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}
+    />
+  );
+};