add mappers tab

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} />

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

src/common-messages.json

@@ -64,6 +64,7 @@
     "groups": "Groups",
     "sessions": "Sessions",
     "events": "Events",
+    "mappers": "Mappers",
 
     "configure": "Configure",
     "realmSettings": "Realm settings",

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

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