KEYCLOAK-2256 - Guarantee deterministic ordering for custom user attributes in admin console.

We now iterate over custom-user attributes in a deterministic way such that new attributes don't lead
to a complete reordering of the properties in the custom user attributes listings.
Previously the order of custom attributes in the user attributes listings was not deterministic which lead
to cases where keys that shared a common prefix where not placed at arbitrary positions.
Introduced a custom angularjs flter "toOrderedMapSortedByKey" that helps to deterministically iterate
over object properites.

forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js

@@ -2372,6 +2372,34 @@ module.filter('capitalize', function() {
     };
 });
 
+/*
+ * Guarantees a deterministic property iteration order.
+ * See: http://www.2ality.com/2015/10/property-traversal-order-es6.html
+ */
+module.filter('toOrderedMapSortedByKey', function(){
+   return function(input){
+
+       if(!input){
+           return input;
+       }
+
+       var keys = Object.keys(input);
+
+       if(keys.length <= 1){
+           return input;
+       }
+
+       keys.sort();
+
+       var result = {};
+       for (var i = 0; i < keys.length; i++) {
+           result[keys[i]] = input[keys[i]];
+       }
+
+       return result;
+   };
+});
+
 module.directive('kcSidebarResize', function ($window) {
     return function (scope, element) {
         function resize() {

forms/common-themes/src/main/resources/theme/base/admin/resources/partials/user-attributes.html

@@ -16,7 +16,7 @@
             </tr>
             </thead>
             <tbody>
-            <tr ng-repeat="(key, value) in user.attributes">
+            <tr ng-repeat="(key, value) in user.attributes | toOrderedMapSortedByKey">
                 <td>{{key}}</td>
                 <td><input ng-model="user.attributes[key]" class="form-control" type="text" name="{{key}}" id="attribute-{{key}}" /></td>
                 <td class="kc-action-cell">