multiple issues with this mapper (#1155)

src/client-scopes/add/RoleMappingForm.tsx

@@ -31,16 +31,21 @@ export const RoleMappingForm = () => {
   const { realm } = useRealm();
   const adminClient = useAdminClient();
   const history = useHistory();
-  const { addAlert } = useAlerts();
+  const { addAlert, addError } = useAlerts();
 
   const { t } = useTranslation("client-scopes");
-  const { register, handleSubmit, control, errors } = useForm();
+  const { register, handleSubmit, control, errors } =
+    useForm<ProtocolMapperRepresentation>({
+      defaultValues: {
+        protocolMapper: "oidc-role-name-mapper",
+      },
+    });
   const { id } = useParams<{ id: string }>();
 
   const [roleOpen, setRoleOpen] = useState(false);
 
   const [clientsOpen, setClientsOpen] = useState(false);
-  const [clients, setClients] = useState<ClientRepresentation[]>([]);
+  const [clients, setClients] = useState<ClientRepresentation[]>();
   const [selectedClient, setSelectedClient] = useState<ClientRepresentation>();
   const [clientRoles, setClientRoles] = useState<RoleRepresentation[]>([]);
 
@@ -74,10 +79,9 @@ export const RoleMappingForm = () => {
 
   useFetch(
     async () => {
-      const client = selectedClient as ClientRepresentation;
-      if (client && client.name !== "realmRoles") {
+      if (selectedClient && selectedClient.name !== "realmRoles") {
         const clientRoles = await adminClient.clients.listRoles({
-          id: client.id!,
+          id: selectedClient.id!,
         });
         return clientRoles;
       } else {
@@ -90,10 +94,20 @@ export const RoleMappingForm = () => {
 
   const save = async (mapping: ProtocolMapperRepresentation) => {
     try {
-      await adminClient.clientScopes.addProtocolMapper({ id }, mapping);
+      await adminClient.clientScopes.addProtocolMapper(
+        { id },
+        {
+          ...mapping,
+          protocol: "openid-connect",
+          config: {
+            ...mapping.config,
+            role: `${selectedClient?.clientId}.${mapping.config?.role.name}`,
+          },
+        }
+      );
       addAlert(t("mapperCreateSuccess"));
     } catch (error: any) {
-      addAlert(t("mapperCreateError", error));
+      addError("client-scopes:mapperCreateError", error);
     }
   };
 
@@ -189,6 +203,7 @@ export const RoleMappingForm = () => {
               }
             />
           </FormGroup>
+          {clients && (
             <FormGroup
               label={t("common:role")}
               labelIcon={
@@ -198,7 +213,7 @@ export const RoleMappingForm = () => {
                   forID="role"
                 />
               }
-            validated={errors["config.role"] ? "error" : "default"}
+              validated={errors.config?.role ? "error" : "default"}
               helperTextInvalid={t("common:required")}
               fieldId="role"
             >
@@ -261,6 +276,7 @@ export const RoleMappingForm = () => {
                           onChange(value);
                           setRoleOpen(false);
                         }}
+                        maxHeight={200}
                         onClear={() => onChange("")}
                       >
                         {roleSelectOptions()}
@@ -270,6 +286,7 @@ export const RoleMappingForm = () => {
                 </SplitItem>
               </Split>
             </FormGroup>
+          )}
           <FormGroup
             label={t("newRoleName")}
             labelIcon={