KEYCLOAK-9574 Fix broken Role Selection for LDAP Mapper in Admin-Cons…

…ole (keycloak#5883)

We now wrap the result of a role-selection in an JS array and
use the config value as is for rendering, instead of extracting
the first component (which was the first char, since the value
is a string).

Previously any mapper that used role selection could not be
used due to `LDAPMapperCreateCtrl` generating invalid config structures.

Since the component configuration is represented via
org.keycloak.representations.idm.ComponentRepresentation whose
`config` property is a `MultivaluedHashMap`
config values needs to be passed as an Array. However the
LDAPMapperCreateCtrl in (users.js) only passed the role as a String.

Signed-off-by: Thomas Darimont <[email protected]>

themes/src/main/resources/theme/base/admin/resources/js/controllers/users.js

@@ -1690,6 +1690,10 @@ module.controller('LDAPMapperCreateCtrl', function($scope, realm, provider, mapp
         $scope.mapper.providerType = 'org.keycloak.storage.ldap.mappers.LDAPStorageMapper';
         $scope.mapper.parentId = provider.id;
 
+        if ($scope.mapper.config && $scope.mapper.config["role"] && !Array.isArray($scope.mapper.config["role"])) {
+            $scope.mapper.config["role"] = [$scope.mapper.config["role"]];
+        }
+
         Components.save({realm: realm.realm}, $scope.mapper,  function (data, headers) {
             var l = headers().location;
             var id = l.substring(l.lastIndexOf("/") + 1);

themes/src/main/resources/theme/base/admin/resources/templates/kc-component-config.html

@@ -22,7 +22,7 @@
         <div class="col-md-6" data-ng-if="option.type == 'Role'">
             <div class="row">
                 <div class="col-md-8">
-                    <input class="form-control" type="text" data-ng-model="config[ option.name ][0]" >
+                    <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
                 </div>
                 <div class="col-md-2">
                     <button type="button" data-ng-click="openRoleSelector(option.name, config)" class="btn btn-default" tooltip-placement="top" tooltip-trigger="mouseover mouseout" tooltip="{{:: 'selectRole.tooltip' | translate}}">{{:: 'selectRole.label' | translate}}</button>