restructure and add chooser when adding new

src/route-config.ts

@@ -226,6 +226,12 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: null,
     access: "view-realm",
   },
+  {
+    path: "/:realm/user-federation/ldap/new",
+    component: UserFederationLdapSettings,
+    breadcrumb: t("common:settings"),
+    access: "view-realm",
+  },
   {
     path: "/:realm/user-federation/ldap/:id/:tab?",
     component: UserFederationLdapSettings,
@@ -238,12 +244,6 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("common:mappingDetails"),
     access: "view-realm",
   },
-  {
-    path: "/:realm/user-federation/ldap/new",
-    component: UserFederationLdapSettings,
-    breadcrumb: t("common:settings"),
-    access: "view-realm",
-  },
   {
     path: "/:realm/",
     component: DashboardSection,

src/user-federation/ldap/mappers/LdapMapperFullNameAttribute.tsx

@@ -2,9 +2,7 @@ import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { Controller, UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperFullNameAttributeProps = {
   form: UseFormMethods;
@@ -18,9 +16,6 @@ export const LdapMapperFullNameAttribute = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
-
       <FormGroup
         label={t("ldapFullNameAttribute")}
         labelIcon={
@@ -98,7 +93,6 @@ export const LdapMapperFullNameAttribute = ({
           )}
         ></Controller>
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperHardcodedAttribute.tsx

@@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperHardcodedAttributeProps = {
   form: UseFormMethods;
@@ -18,8 +16,6 @@ export const LdapMapperHardcodedAttribute = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={t("userModelAttributeName")}
         labelIcon={
@@ -62,7 +58,6 @@ export const LdapMapperHardcodedAttribute = ({
           ref={form.register}
         />
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperHardcodedLdapAttribute.tsx

@@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperHardcodedLdapAttributeProps = {
   form: UseFormMethods;
@@ -18,9 +16,6 @@ export const LdapMapperHardcodedLdapAttribute = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
-
       <FormGroup
         label={t("ldapAttributeName")}
         labelIcon={
@@ -63,7 +58,6 @@ export const LdapMapperHardcodedLdapAttribute = ({
           ref={form.register}
         />
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx

@@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperHardcodedLdapGroupProps = {
   form: UseFormMethods;
@@ -18,8 +16,6 @@ export const LdapMapperHardcodedLdapGroup = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={t("group")}
         labelIcon={
@@ -41,7 +37,6 @@ export const LdapMapperHardcodedLdapGroup = ({
           ref={form.register}
         />
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperHardcodedLdapRole.tsx

@@ -2,9 +2,7 @@ import { FormGroup, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperHardcodedLdapRoleProps = {
   form: UseFormMethods;
@@ -18,8 +16,6 @@ export const LdapMapperHardcodedLdapRole = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={t("common:role")}
         labelIcon={
@@ -41,7 +37,6 @@ export const LdapMapperHardcodedLdapRole = ({
           ref={form.register}
         />
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperList.tsx

@@ -10,20 +10,17 @@ import {
   useAdminClient,
   asyncStateFetch,
 } from "../../../context/auth/AdminClient";
-import { Link, useParams, useRouteMatch } from "react-router-dom";
+import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
 
 export const LdapMapperList = () => {
   const [mappers, setMappers] = useState<ComponentRepresentation[]>();
-
+  const history = useHistory();
   const { t } = useTranslation("user-federation");
   const adminClient = useAdminClient();
   const { addAlert } = useAlerts();
-
   const { url } = useRouteMatch();
-
   const handleError = useErrorHandler();
   const [key, setKey] = useState(0);
-
   const { id } = useParams<{ id: string }>();
 
   useEffect(() => {
@@ -95,13 +92,7 @@ export const LdapMapperList = () => {
             <Button
               data-testid="createMapperBtn"
               variant="primary"
-              // onClick={handleModalToggle}
+              onClick={() => history.push(`${url}/new`)}
-              onClick={() =>
-                addAlert(
-                  t("Add functionality not implemented yet!"),
-                  AlertVariant.success
-                )
-              }
             >
               {t("common:addMapper")}
             </Button>

src/user-federation/ldap/mappers/LdapMapperMsadLdsUserAccount.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
-
-export type LdapMapperMsadLdsUserAccountProps = {
-  form: UseFormMethods;
-};
-
-export const LdapMapperMsadLdsUserAccount = ({
-  form,
-}: LdapMapperMsadLdsUserAccountProps) => {
-  return (
-    <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
-      </FormAccess>
-    </>
-  );
-};

src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx

@@ -2,9 +2,7 @@ import { FormGroup, Switch } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { Controller, UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperMsadUserAccountProps = {
   form: UseFormMethods;
@@ -18,8 +16,6 @@ export const LdapMapperMsadUserAccount = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={t("passwordPolicyHintsEnabled")}
         labelIcon={
@@ -48,7 +44,6 @@ export const LdapMapperMsadUserAccount = ({
           )}
         ></Controller>
       </FormGroup>
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperRoleGroup.tsx

@@ -9,9 +9,7 @@ import {
 import React, { useState } from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { Controller, UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperRoleGroupProps = {
   form: UseFormMethods;
@@ -42,8 +40,6 @@ export const LdapMapperRoleGroup = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={isRole ? t("ldapRolesDn") : t("ldapGroupsDn")}
         labelIcon={
@@ -111,9 +107,7 @@ export const LdapMapperRoleGroup = ({
                 ? helpText("roleObjectClassesHelp")
                 : helpText("groupObjectClassesHelp")
             }
-              forLabel={
+            forLabel={isRole ? t("roleObjectClasses") : t("groupObjectClasses")}
-                isRole ? t("roleObjectClasses") : t("groupObjectClasses")
-              }
             forID="kc-object-classes"
           />
         }
@@ -565,7 +559,6 @@ export const LdapMapperRoleGroup = ({
           </FormGroup>
         </>
       )}
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx

@@ -2,9 +2,7 @@ import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import React from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { Controller, UseFormMethods } from "react-hook-form";
-import { FormAccess } from "../../../components/form-access/FormAccess";
 import { useTranslation } from "react-i18next";
-import { LdapMapperGeneral } from "./shared/LdapMapperGeneral";
 
 export type LdapMapperUserAttributeProps = {
   form: UseFormMethods;
@@ -20,8 +18,6 @@ export const LdapMapperUserAttribute = ({
 
   return (
     <>
-      <FormAccess role="manage-realm" isHorizontal>
-        <LdapMapperGeneral form={form} />
       <FormGroup
         label={t("userModelAttribute")}
         labelIcon={
@@ -210,7 +206,6 @@ export const LdapMapperUserAttribute = ({
       ) : (
         <></>
       )}
-      </FormAccess>
     </>
   );
 };

src/user-federation/ldap/mappers/LdapMappingDetails.tsx

@@ -4,20 +4,26 @@ import {
   AlertVariant,
   Button,
   Form,
+  FormGroup,
   PageSection,
+  Select,
+  SelectOption,
+  SelectVariant,
+  TextInput,
 } from "@patternfly/react-core";
 import { convertToFormValues } from "../../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { useAdminClient } from "../../../context/auth/AdminClient";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useHistory, useParams } from "react-router-dom";
-import { useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { useTranslation } from "react-i18next";
+import { HelpItem } from "../../../components/help-enabler/HelpItem";
+import { FormAccess } from "../../../components/form-access/FormAccess";
 
 import { LdapMapperUserAttribute } from "./LdapMapperUserAttribute";
 import { LdapMapperMsadUserAccount } from "./LdapMapperMsadUserAccount";
-import { LdapMapperMsadLdsUserAccount } from "./LdapMapperMsadLdsUserAccount";
 import { LdapMapperFullNameAttribute } from "./LdapMapperFullNameAttribute";
 
 import { LdapMapperHardcodedLdapRole } from "./LdapMapperHardcodedLdapRole";
@@ -26,7 +32,6 @@ import { LdapMapperHardcodedLdapAttribute } from "./LdapMapperHardcodedLdapAttri
 import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
 
 import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
-
 import { useRealm } from "../../../context/realm-context/RealmContext";
 
 export const LdapMappingDetails = () => {
@@ -40,10 +45,14 @@ export const LdapMappingDetails = () => {
   const { realm } = useRealm();
   const id = mapperId;
   const { t } = useTranslation("user-federation");
+  const helpText = useTranslation("user-federation-help").t;
   const { addAlert } = useAlerts();
 
+  const [isMapperDropdownOpen, setIsMapperDropdownOpen] = useState(false);
+
   useEffect(() => {
     (async () => {
+      if (mapperId !== "new") {
         if (mapperId) {
           const fetchedMapper = await adminClient.components.findOne({ id });
           if (fetchedMapper) {
@@ -56,6 +65,7 @@ export const LdapMappingDetails = () => {
             setupForm(fetchedMapper);
           }
         }
+      }
     })();
   }, []);
 
@@ -78,13 +88,140 @@ export const LdapMappingDetails = () => {
       ),
       AlertVariant.success
     );
-    history.push(`/${realm}/user-federation`);
+    history.push(`/${realm}/user-federation/ldap/${mapper!.parentId}/mappers`);
   };
 
+  const mapperType = useWatch({
+    control: form.control,
+    name: "choose-mapper-type",
+  });
+
+  const isNew = mapperId === "new";
+
   return (
     <>
-      <ViewHeader titleKey={mapper ? mapper.name! : ""} subKey="" />
+      <ViewHeader
+        titleKey={mapper ? mapper.name! : "Create new mapper"}
+        subKey=""
+      />
       <PageSection variant="light" isFilled>
+        <FormAccess role="manage-realm" isHorizontal>
+          {!isNew && (
+            <FormGroup label={t("common:id")} fieldId="kc-ldap-mapper-id">
+              <TextInput
+                isDisabled
+                type="text"
+                id="kc-ldap-mapper-id"
+                data-testid="ldap-mapper-id"
+                name="id"
+                ref={form.register}
+              />
+            </FormGroup>
+          )}
+          <FormGroup
+            label={t("common:name")}
+            labelIcon={
+              <HelpItem
+                helpText={helpText("nameHelp")}
+                forLabel={t("common:name")}
+                forID="kc-ldap-mapper-name"
+              />
+            }
+            fieldId="kc-ldap-mapper-name"
+            isRequired
+          >
+            <TextInput
+              isDisabled={!isNew}
+              isRequired
+              type="text"
+              id="kc-ldap-mapper-name"
+              data-testid="ldap-mapper-name"
+              name="name"
+              ref={form.register}
+            />
+          </FormGroup>
+          {!isNew ? (
+            <FormGroup
+              label={t("common:mapperType")}
+              labelIcon={
+                <HelpItem
+                  helpText={helpText("mapperTypeHelp")}
+                  forLabel={t("common:mapperType")}
+                  forID="kc-ldap-mapper-type"
+                />
+              }
+              fieldId="kc-ldap-mapper-type"
+              isRequired
+            >
+              <TextInput
+                isDisabled={!isNew}
+                isRequired
+                type="text"
+                id="kc-ldap-mapper-type"
+                data-testid="ldap-mapper-type"
+                name="providerId"
+                ref={form.register}
+              />
+            </FormGroup>
+          ) : (
+            <FormGroup
+              label={t("common:mapperType")}
+              labelIcon={
+                <HelpItem
+                  helpText={helpText("mapperTypeHelp")}
+                  forLabel={t("common:mapperType")}
+                  forID="kc-choose-mapper-type"
+                />
+              }
+              fieldId="kc-choose-mapper-type"
+              isRequired
+            >
+              <Controller
+                name="choose-mapper-type"
+                defaultValue=" "
+                control={form.control}
+                render={({ onChange, value }) => (
+                  <Select
+                    toggleId="kc-choose-mapper-type"
+                    required
+                    onToggle={() =>
+                      setIsMapperDropdownOpen(!isMapperDropdownOpen)
+                    }
+                    isOpen={isMapperDropdownOpen}
+                    onSelect={(_, value) => {
+                      onChange(value as string);
+                      setIsMapperDropdownOpen(false);
+                    }}
+                    selections={value}
+                    variant={SelectVariant.single}
+                    // data-testid="choose-mapper-type"
+                  >
+                    <SelectOption
+                      key={0}
+                      value="msad-user-account-control-mapper"
+                    />
+                    <SelectOption
+                      key={1}
+                      value="msda-lds-user-account-control-mapper"
+                    />
+                    <SelectOption key={2} value="group-ldap-mapper" />
+                    <SelectOption key={3} value="user-attribute-ldap-mapper" />
+                    <SelectOption key={4} value="role-ldap-mapper" />
+                    <SelectOption key={5} value="hardcoded-attribute-mapper" />
+                    <SelectOption key={6} value="hardcoded-ldap-role-mapper" />
+                    <SelectOption key={7} value="certificate-ldap-mapper" />
+                    <SelectOption key={8} value="full-name-ldap-mapper" />
+                    <SelectOption key={9} value="hardcoded-ldap-group-mapper" />
+                    <SelectOption
+                      key={10}
+                      value="hardcoded-ldap-attribute-mapper"
+                    />
+                  </Select>
+                )}
+              ></Controller>
+            </FormGroup>
+          )}
+          {/* When loading existing mappers, load forms based on providerId aka mapper type */}
           {mapper
             ? (mapper.providerId! === "certificate-ldap-mapper" ||
                 mapper.providerId! === "user-attribute-ldap-mapper") && (
@@ -99,11 +236,8 @@ export const LdapMappingDetails = () => {
                 <LdapMapperMsadUserAccount form={form} />
               )
             : ""}
-        {mapper
+          {/* msad-lds-user-account-control-mapper does not need a component 
-          ? mapper.providerId! === "msad-lds-user-account-control-mapper" && (
+              because it is just id, name, and mapper type*/}
-              <LdapMapperMsadLdsUserAccount form={form} />
-            )
-          : ""}
           {mapper
             ? mapper.providerId! === "full-name-ldap-mapper" && (
                 <LdapMapperFullNameAttribute form={form} />
@@ -135,6 +269,59 @@ export const LdapMappingDetails = () => {
                 <LdapMapperRoleGroup form={form} type={mapper.providerId} />
               )
             : ""}
+          {/* When creating new mappers, load forms based on dropdown selection */}
+          {mapperType
+            ? mapperType === "certificate-ldap-mapper" && (
+                <LdapMapperUserAttribute form={form} mapperType={mapperType} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "user-attribute-ldap-mapper" && (
+                <LdapMapperUserAttribute form={form} mapperType={mapperType} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "msad-user-account-control-mapper" && (
+                <LdapMapperMsadUserAccount form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "full-name-ldap-mapper" && (
+                <LdapMapperFullNameAttribute form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "hardcoded-ldap-role-mapper" && (
+                <LdapMapperHardcodedLdapRole form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "hardcoded-ldap-group-mapper" && (
+                <LdapMapperHardcodedLdapGroup form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "hardcoded-ldap-attribute-mapper" && (
+                <LdapMapperHardcodedLdapAttribute form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "hardcoded-attribute-mapper" && (
+                <LdapMapperHardcodedAttribute form={form} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "role-ldap-mapper" && (
+                <LdapMapperRoleGroup form={form} type={mapperType} />
+              )
+            : ""}
+          {mapperType
+            ? mapperType === "group-ldap-mapper" && (
+                <LdapMapperRoleGroup form={form} type={mapperType} />
+              )
+            : ""}
+        </FormAccess>
+
         <Form onSubmit={form.handleSubmit(save)}>
           <ActionGroup>
             <Button

src/user-federation/ldap/mappers/shared/LdapMapperGeneral.tsx

@@ -1,71 +0,0 @@
-import { FormGroup, TextInput } from "@patternfly/react-core";
-import React from "react";
-import { HelpItem } from "../../../../components/help-enabler/HelpItem";
-import { UseFormMethods } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-
-export type LdapMapperGeneralProps = {
-  form: UseFormMethods;
-};
-
-export const LdapMapperGeneral = ({ form }: LdapMapperGeneralProps) => {
-  const { t } = useTranslation("user-federation");
-  const helpText = useTranslation("user-federation-help").t;
-
-  return (
-    <>
-      <FormGroup label={t("common:id")} fieldId="kc-ldap-mapper-id">
-        <TextInput
-          isRequired
-          type="text"
-          id="kc-ldap-mapper-id"
-          data-testid="ldap-mapper-id"
-          name="id"
-          ref={form.register}
-        />
-      </FormGroup>
-      <FormGroup
-        label={t("common:name")}
-        labelIcon={
-          <HelpItem
-            helpText={helpText("nameHelp")}
-            forLabel={t("common:name")}
-            forID="kc-ldap-mapper-name"
-          />
-        }
-        fieldId="kc-ldap-mapper-name"
-        isRequired
-      >
-        <TextInput
-          isRequired
-          type="text"
-          id="kc-ldap-mapper-name"
-          data-testid="ldap-mapper-name"
-          name="name"
-          ref={form.register}
-        />
-      </FormGroup>
-      <FormGroup
-        label={t("common:mapperType")}
-        labelIcon={
-          <HelpItem
-            helpText={helpText("mapperTypeHelp")}
-            forLabel={t("common:mapperType")}
-            forID="kc-ldap-mapper-type"
-          />
-        }
-        fieldId="kc-ldap-mapper-type"
-        isRequired
-      >
-        <TextInput
-          isRequired
-          type="text"
-          id="kc-ldap-mapper-type"
-          data-testid="ldap-mapper-type"
-          name="providerId"
-          ref={form.register}
-        />
-      </FormGroup>
-    </>
-  );
-};