From bb21001d745da86e9c80384ee859c9eeca13d720 Mon Sep 17 00:00:00 2001
From: mfrances <mfrances@redhat.com>
Date: Tue, 16 Mar 2021 10:24:32 -0400
Subject: [PATCH] add mappers tab

---
 src/client-scopes/form/ClientScopeForm.tsx    |  2 +-
 src/client-scopes/messages.json               |  1 -
 src/common-messages.json                      |  1 +
 src/route-config.ts                           |  2 +-
 .../UserFederationLdapSettings.tsx            | 95 +++++++++++--------
 5 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/src/client-scopes/form/ClientScopeForm.tsx b/src/client-scopes/form/ClientScopeForm.tsx
index d1a8a723e1..6a5db0f93f 100644
--- a/src/client-scopes/form/ClientScopeForm.tsx
+++ b/src/client-scopes/form/ClientScopeForm.tsx
@@ -322,7 +322,7 @@ export const ClientScopeForm = () => {
           <Tab
             isHidden={!id}
             eventKey="mappers"
-            title={<TabTitleText>{t("mappers")}</TabTitleText>}
+            title={<TabTitleText>{t("common:mappers")}</TabTitleText>}
           >
             {clientScope && (
               <MapperList clientScope={clientScope} refresh={refresh} />
diff --git a/src/client-scopes/messages.json b/src/client-scopes/messages.json
index 2d143b887e..b8b95403e5 100644
--- a/src/client-scopes/messages.json
+++ b/src/client-scopes/messages.json
@@ -28,7 +28,6 @@
     "createError": "Could not create client scope: '{{error}}'",
     "updateSuccess": "Client scope updated",
     "updateError": "Could not update client scope: '{{error}}'",
-    "mappers": "Mappers",
     "mappersSearchFor": "Search for mapper",
     "addMapper": "Add mapper",
     "addMapperExplain": "If you want more fine-grain control, you can create protocol mapper on this client",
diff --git a/src/common-messages.json b/src/common-messages.json
index 9b28ff89a2..85134402bb 100644
--- a/src/common-messages.json
+++ b/src/common-messages.json
@@ -64,6 +64,7 @@
     "groups": "Groups",
     "sessions": "Sessions",
     "events": "Events",
+    "mappers": "Mappers",
 
     "configure": "Configure",
     "realmSettings": "Realm settings",
diff --git a/src/route-config.ts b/src/route-config.ts
index 056a3603fb..39075781cb 100644
--- a/src/route-config.ts
+++ b/src/route-config.ts
@@ -219,7 +219,7 @@ export const routes: RoutesFn = (t: TFunction) => [
     access: "view-realm",
   },
   {
-    path: "/:realm/user-federation/ldap/:id",
+    path: "/:realm/user-federation/ldap/:id/:tab?",
     component: UserFederationLdapSettings,
     breadcrumb: t("common:settings"),
     access: "view-realm",
diff --git a/src/user-federation/UserFederationLdapSettings.tsx b/src/user-federation/UserFederationLdapSettings.tsx
index b15ba8ffb5..d6b78b7c7a 100644
--- a/src/user-federation/UserFederationLdapSettings.tsx
+++ b/src/user-federation/UserFederationLdapSettings.tsx
@@ -8,6 +8,9 @@ import {
   DropdownSeparator,
   Form,
   PageSection,
+  Tab,
+  TabTitleText,
+  Text,
 } from "@patternfly/react-core";
 
 import { LdapSettingsAdvanced } from "./ldap/LdapSettingsAdvanced";
@@ -31,6 +34,8 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useHistory, useParams } from "react-router-dom";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 
+import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
+
 type LdapSettingsHeaderProps = {
   onChange: (value: string) => void;
   value: string;
@@ -276,44 +281,60 @@ export const UserFederationLdapSettings = () => {
         )}
       />
       <PageSection variant="light" isFilled>
-        <ScrollForm
-          sections={[
-            t("generalOptions"),
-            t("connectionAndAuthenticationSettings"),
-            t("ldapSearchingAndUpdatingSettings"),
-            t("synchronizationSettings"),
-            t("kerberosIntegration"),
-            t("cacheSettings"),
-            t("advancedSettings"),
-          ]}
-        >
-          <LdapSettingsGeneral form={form} />
-          <LdapSettingsConnection form={form} />
-          <LdapSettingsSearching form={form} />
-          <LdapSettingsSynchronization form={form} />
-          <LdapSettingsKerberosIntegration form={form} />
-          <SettingsCache form={form} />
-          <LdapSettingsAdvanced form={form} />
-        </ScrollForm>
-        <Form onSubmit={form.handleSubmit(save)}>
-          <ActionGroup className="keycloak__form_actions">
-            <Button
-              isDisabled={!form.formState.isDirty}
-              variant="primary"
-              type="submit"
-              data-testid="ldap-save"
+        <KeycloakTabs isBox>
+          <Tab
+            id="settings"
+            eventKey="settings"
+            title={<TabTitleText>{t("common:settings")}</TabTitleText>}
+          >
+            <ScrollForm
+              sections={[
+                t("generalOptions"),
+                t("connectionAndAuthenticationSettings"),
+                t("ldapSearchingAndUpdatingSettings"),
+                t("synchronizationSettings"),
+                t("kerberosIntegration"),
+                t("cacheSettings"),
+                t("advancedSettings"),
+              ]}
             >
-              {t("common:save")}
-            </Button>
-            <Button
-              variant="link"
-              onClick={() => history.push(`/${realm}/user-federation`)}
-              data-testid="ldap-cancel"
-            >
-              {t("common:cancel")}
-            </Button>
-          </ActionGroup>
-        </Form>
+              <LdapSettingsGeneral form={form} />
+              <LdapSettingsConnection form={form} />
+              <LdapSettingsSearching form={form} />
+              <LdapSettingsSynchronization form={form} />
+              <LdapSettingsKerberosIntegration form={form} />
+              <SettingsCache form={form} />
+              <LdapSettingsAdvanced form={form} />
+            </ScrollForm>
+            <Form onSubmit={form.handleSubmit(save)}>
+              <ActionGroup className="keycloak__form_actions">
+                <Button
+                  isDisabled={!form.formState.isDirty}
+                  variant="primary"
+                  type="submit"
+                  data-testid="ldap-save"
+                >
+                  {t("common:save")}
+                </Button>
+                <Button
+                  variant="link"
+                  onClick={() => history.push(`/${realm}/user-federation`)}
+                  data-testid="ldap-cancel"
+                >
+                  {t("common:cancel")}
+                </Button>
+              </ActionGroup>
+            </Form>
+          </Tab>
+          <Tab
+            id="mappers"
+            eventKey="mappers"
+            title={<TabTitleText>{t("common:mappers")}</TabTitleText>}
+          >
+            {/* <MapperList clientScope={clientScope} refresh={refresh} /> */}
+            <Text>Coming soon!</Text>
+          </Tab>
+        </KeycloakTabs>
       </PageSection>
     </>
   );