hardcoded version working

src/components/role-mapping/AddRoleMappingModal.tsx

@@ -80,6 +80,19 @@ export const AddRoleMappingModal = ({
                 }
               );
             } 
+            // MF 052021 TODOs: 
+            // change if/elses to switches
+            // add a type for user-federation that pulls in all roles
+            // make id optional
+            
+            // adminClient.roles.find
+
+            // roles = await adminClient.clients.listRoles(
+            //   {
+            //     
+            //     id: client.id!
+            //   }
+
             return {
               roles,
               client,

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

@@ -1,66 +1,42 @@
-import { AlertVariant, Button, FormGroup, TextInput } from "@patternfly/react-core";
+import { Button, FormGroup, TextInput } from "@patternfly/react-core";
 import React, { useState } from "react";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import type { UseFormMethods } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { useAdminClient } from "../../../context/auth/AdminClient";
-import { useAlerts } from "../../../components/alert/Alerts";
-import { RoleMappingPayload } from "keycloak-admin/lib/defs/roleRepresentation";
-
-
-import { AddRoleMappingModal, MappingType } from "../../../components/role-mapping/AddRoleMappingModal";
+import type ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation";
+import type RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
+import { AddRoleMappingModal } from "../../../components/role-mapping/AddRoleMappingModal";
+import "../../user-federation.css";
 
 export type LdapMapperHardcodedLdapRoleProps = {
   form: UseFormMethods;
 };
 
+export type CompositeRole = RoleRepresentation & {
+  parent: RoleRepresentation;
+};
+
+export type Row = {
+  client?: ClientRepresentation;
+  role: CompositeRole | RoleRepresentation;
+};
+
 export const LdapMapperHardcodedLdapRole = ({
   form,
 }: LdapMapperHardcodedLdapRoleProps) => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
-
-  const adminClient = useAdminClient();
-
   const [showAssign, setShowAssign] = useState(false);
 
-  const { addAlert } = useAlerts();
-
-
-  const assignRoles = async (rows: Row[]) => {
-    try {
-      const realmRoles = rows
-        .filter((row) => row.client === undefined)
-        .map((row) => row.role as RoleMappingPayload)
-        .flat();
-      await adminClient.clientScopes.addRealmScopeMappings(
-        {
-          id,
-        },
-        realmRoles
-      );
-      await Promise.all(
-        rows
-          .filter((row) => row.client !== undefined)
-          .map((row) =>
-            adminClient.clientScopes.addClientScopeMappings(
-              {
-                id,
-                client: row.client!.id!,
-              },
-              [row.role as RoleMappingPayload]
-            )
-          )
-      );
-      addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
-    } catch (error) {
-      addAlert(
-        t("roleMappingUpdatedError", {
-          error: error.response?.data?.errorMessage || error,
-        }),
-        AlertVariant.danger
+  const selectRoles = async (rows: Row[]) => {
+    if (rows[0].client) {
+      form.setValue(
+        "config.role[0]",
+        `${rows[0].client.clientId}.${rows[0].role.name}`
       );
+    } else {
+      form.setValue("config.role[0]", `${rows[0].role.name}`);
     }
   };
 
@@ -69,15 +45,16 @@ export const LdapMapperHardcodedLdapRole = ({
       {showAssign && (
         // MF 042921 hardcoded for now, to see modal displayed
         <AddRoleMappingModal
-        id="e2d7fe7c-f7bc-4903-9562-3d079ae8667c"
+          id="1a85c63a-99bd-4d16-9924-b38b8f7cceaf"  // this is the ID for client-scopes > marks-client-scope
           type="client-scope"
           name="name"
           // id={id}
           // type={type}
           // name={name}
-        onAssign={assignRoles}
+          onAssign={selectRoles}
           onClose={() => setShowAssign(false)}
-        />)}
+        />
+      )}
 
       <FormGroup
         label={t("common:role")}
@@ -91,6 +68,7 @@ export const LdapMapperHardcodedLdapRole = ({
         fieldId="kc-role"
         isRequired
       >
+        <div className="keycloak__user-federation__assign-role">
           <TextInput
             isRequired
             type="text"
@@ -100,11 +78,13 @@ export const LdapMapperHardcodedLdapRole = ({
             ref={form.register}
           />
           <Button
-                data-testid="assignRole"
+            className="keycloak__user-federation__assign-role-btn"
+            data-testid="selectRole"
             onClick={() => setShowAssign(true)}
           >
-                {t("assignRole")}
+            {t("selectRole")}
           </Button>
+        </div>
       </FormGroup>
     </>
   );

src/user-federation/user-federation.css

@@ -9,3 +9,13 @@
 .error {
   color: red;
 }
+
+.keycloak__user-federation__assign-role {
+  display: flex;
+  flex-direction: row;
+  align-items: right;
+}
+
+.keycloak__user-federation__assign-role-btn {
+  margin-left: 10px;
+}