KEYCLOAK-18043 Client Policy UI Improvements: Navigation

tsaarni · May 20, 2021 · d0f0174 · d0f0174
1 parent 0913a22
commit d0f0174
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 64 deletions.
diff --git a/themes/src/main/resources/theme/base/admin/messages/admin-messages_en.properties b/themes/src/main/resources/theme/base/admin/messages/admin-messages_en.properties
@@ -868,9 +868,12 @@ no-conditions-available=No Conditions Available
 condition-type=Condition Type
 create-condition=Create Condition
 client-profiles=Client Profiles
+client-policies=Client Policies
 client-profiles.tooltip=Client Profiles applied on this policy
 add-profile.placeholder=Add client profile ...
 no-client-profiles-configured=No client profiles configured
+create-client-profile=Create Client Profile
+create-client-policy=Create Client Policy
 
 client-scopes-condition.label=Expected Scopes
 client-scopes-condition.tooltip=The list of expected client scopes. Condition evaluates to true if specified client request matches some of the client scopes. It depends also whether it should be default or optional client scope based on the 'Scope Type' configured.

diff --git a/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js b/themes/src/main/resources/theme/base/admin/resources/js/controllers/realm.js
@@ -2989,7 +2989,9 @@ module.controller('ClientPoliciesProfilesListCtrl', function($scope, realm, clie
                 $route.reload();
                 Notifications.success("The client profile was deleted.");
             }, function (errorResponse) {
-                Notifications.error('Failed to delete client profile. Check server log for the details');
+                $route.reload();
+                var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+                Notifications.error('Failed to delete client profile: ' + errDetails);
             });
         });
     };
@@ -3018,7 +3020,7 @@ module.controller('ClientPoliciesProfilesJsonCtrl', function($scope, realm, clie
             $route.reload();
             Notifications.success("The client profiles configuration was updated.");
         }, function(errorResponse) {
-            var errDetails = (!errorResponse.data || !errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
             Notifications.error("Failed to update client profiles: " + errDetails);
             console.log("Error response when updating client profiles JSON: Status: " + errorResponse.status +
                     ", statusText: " + errorResponse.statusText + ", data: " + JSON.stringify(errorResponse.data));
@@ -3089,7 +3091,9 @@ module.controller('ClientPoliciesProfilesEditCtrl', function($scope, realm, clie
             }, clientProfiles, function () {
                 Notifications.success("The executor was deleted.");
             }, function (errorResponse) {
-                Notifications.error('Failed to delete executor. Check server log for the details');
+                $route.reload();
+                var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+                Notifications.error('Failed to delete executor: ' + errDetails);
             });
         });
     }
@@ -3115,10 +3119,11 @@ module.controller('ClientPoliciesProfilesEditCtrl', function($scope, realm, clie
                 $location.url('/realms/' + realm.realm + '/client-policies/profiles');
             }
         }, function(errorResponse) {
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
             if ($scope.createNew) {
-                Notifications.error('Failed to create client profile. Check server log for the details');
+                Notifications.error('Failed to create client profile: ' + errDetails);
             } else {
-                Notifications.error('Failed to update client profile. Check server log for the details');
+                Notifications.error('Failed to update client profile: ' + errDetails);
             }
         });
 
@@ -3152,12 +3157,12 @@ module.controller('ClientPoliciesProfilesEditExecutorCtrl', function($scope, rea
     }
 
     var globalProfile = false;
-    var editedProfile = getProfileByName(clientProfiles.profiles);
-    if (!editedProfile) {
-        editedProfile = getProfileByName(clientProfiles.globalProfiles);
+    $scope.editedProfile = getProfileByName(clientProfiles.profiles);
+    if (!$scope.editedProfile) {
+        $scope.editedProfile = getProfileByName(clientProfiles.globalProfiles);
         globalProfile = true;
     }
-    if (editedProfile == null) {
+    if ($scope.editedProfile == null) {
         throw 'Client profile of specified name not found';
     }
 
@@ -3199,7 +3204,7 @@ module.controller('ClientPoliciesProfilesEditExecutorCtrl', function($scope, rea
             }
         }, true);
     } else {
-        var exec = getExecutorByIndex(editedProfile, updatedExecutorIndex);
+        var exec = getExecutorByIndex($scope.editedProfile, updatedExecutorIndex);
         if (exec) {
             $scope.executor = {
                 config: exec.configuration
@@ -3249,8 +3254,8 @@ module.controller('ClientPoliciesProfilesEditExecutorCtrl', function($scope, rea
         console.log("save: " + $scope.executorType.id);
 
         var executorName = $scope.executorType.id;
-        if (!editedProfile.executors) {
-            editedProfile.executors = [];
+        if (!$scope.editedProfile.executors) {
+            $scope.editedProfile.executors = [];
         }
 
         ComponentUtils.removeLastEmptyValue($scope.executor.config);
@@ -3260,9 +3265,9 @@ module.controller('ClientPoliciesProfilesEditExecutorCtrl', function($scope, rea
                 executor: $scope.executorType.id,
                 configuration: $scope.executor.config
             };
-            editedProfile.executors.push(selectedExecutor);
+            $scope.editedProfile.executors.push(selectedExecutor);
         } else {
-            var currentExecutor = getExecutorByIndex(editedProfile, updatedExecutorIndex);
+            var currentExecutor = getExecutorByIndex($scope.editedProfile, updatedExecutorIndex);
             if (currentExecutor) {
                 currentExecutor.configuration = $scope.executor.config;
             }
@@ -3276,13 +3281,20 @@ module.controller('ClientPoliciesProfilesEditExecutorCtrl', function($scope, rea
             } else {
                 Notifications.success("Executor updated successfully");
             }
-            $location.url('/realms/' + realm.realm + '/client-policies/profiles-update/' + editedProfile.name);
+            $location.url('/realms/' + realm.realm + '/client-policies/profiles-update/' + $scope.editedProfile.name);
+        }, function(errorResponse) {
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+            if ($scope.createNew) {
+                Notifications.error('Failed to create executor: ' + errDetails);
+            } else {
+                Notifications.error('Failed to update executor: ' + errDetails);
+            }
         });
 
     };
 
     $scope.cancel = function() {
-        $location.url('/realms/' + realm.realm + '/client-policies/profiles-update/' + editedProfile.name);
+        $location.url('/realms/' + realm.realm + '/client-policies/profiles-update/' + $scope.editedProfile.name);
     };
 
 });
@@ -3310,7 +3322,9 @@ module.controller('ClientPoliciesListCtrl', function($scope, realm, clientPolici
                 $route.reload();
                 Notifications.success("The client policy was deleted.");
             }, function (errorResponse) {
-                Notifications.error('Failed to delete client policy. Check server log for the details');
+                $route.reload();
+                var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+                Notifications.error('Failed to delete client policy: ' + errDetails);
             });
         });
     };
@@ -3339,7 +3353,7 @@ module.controller('ClientPoliciesJsonCtrl', function($scope, realm, clientPolici
             $route.reload();
             Notifications.success("The client policies configuration was updated.");
         }, function(errorResponse) {
-            var errDetails = (!errorResponse.data || !errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
             Notifications.error("Failed to update client policies: " + errDetails);
             console.log("Error response when updating client policies JSON: Status: " + errorResponse.status +
                     ", statusText: " + errorResponse.statusText + ", data: " + JSON.stringify(errorResponse.data));
@@ -3416,7 +3430,9 @@ module.controller('ClientPoliciesEditCtrl', function($scope, realm, clientProfil
             }, $scope.clientPolicies, function () {
                 Notifications.success("The condition was deleted.");
             }, function (errorResponse) {
-                Notifications.error('Failed to delete condition. Check server log for the details');
+                $route.reload();
+                var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+                Notifications.error('Failed to delete condition: ' + errDetails);
             });
         });
     }
@@ -3442,10 +3458,11 @@ module.controller('ClientPoliciesEditCtrl', function($scope, realm, clientProfil
                 $location.url('/realms/' + realm.realm + '/client-policies/policies');
             }
         }, function(errorResponse) {
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
             if ($scope.createNew) {
-                Notifications.error('Failed to create client policy. Check server log for the details');
+                Notifications.error('Failed to create client policy: ' + errDetails);
             } else {
-                Notifications.error('Failed to update client policy. Check server log for the details');
+                Notifications.error('Failed to update client policy: ' + errDetails);
             }
         });
 
@@ -3470,7 +3487,9 @@ module.controller('ClientPoliciesEditCtrl', function($scope, realm, clientProfil
         }, $scope.clientPolicies,  function () {
             Notifications.success(notificationsMessage);
         }, function(errorResponse) {
-            Notifications.error('Failed to update profiles of the policy. Check server log for the details');
+            $route.reload();
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+            Notifications.error('Failed to update profiles of the policy: ' + errDetails);
         });
     }
 
@@ -3497,15 +3516,15 @@ module.controller('ClientPoliciesEditConditionCtrl', function($scope, realm, ser
     }
     $scope.realm = realm;
 
-    var editedPolicy = null;
+    $scope.editedPolicy = null;
     for (var i=0 ; i < clientPolicies.policies.length ; i++) {
         var currentPolicy = clientPolicies.policies[i];
         if (targetPolicyName === currentPolicy.name) {
-            editedPolicy = currentPolicy;
+            $scope.editedPolicy = currentPolicy;
             break;
         }
     }
-    if (editedPolicy == null) {
+    if ($scope.editedPolicy == null) {
         throw 'Client policy of specified name not found';
     }
 
@@ -3547,7 +3566,7 @@ module.controller('ClientPoliciesEditConditionCtrl', function($scope, realm, ser
             }
         }, true);
     } else {
-        var cond = getConditionByIndex(editedPolicy, updatedConditionIndex);
+        var cond = getConditionByIndex($scope.editedPolicy, updatedConditionIndex);
         if (cond) {
             $scope.condition = {
                 config: cond.configuration
@@ -3598,8 +3617,8 @@ module.controller('ClientPoliciesEditConditionCtrl', function($scope, realm, ser
         console.log("save: " + $scope.conditionType.id);
 
         var conditionName = $scope.conditionType.id;
-        if (!editedPolicy.conditions) {
-            editedPolicy.conditions = [];
+        if (!$scope.editedPolicy.conditions) {
+            $scope.editedPolicy.conditions = [];
         }
 
         ComponentUtils.removeLastEmptyValue($scope.condition.config);
@@ -3610,9 +3629,9 @@ module.controller('ClientPoliciesEditConditionCtrl', function($scope, realm, ser
                 condition: $scope.conditionType.id,
                 configuration: $scope.condition.config
             };
-            editedPolicy.conditions.push(selectedCondition);
+            $scope.editedPolicy.conditions.push(selectedCondition);
         } else {
-            var currentCondition = getConditionByIndex(editedPolicy, updatedConditionIndex);
+            var currentCondition = getConditionByIndex($scope.editedPolicy, updatedConditionIndex);
             if (currentCondition) {
                 currentCondition.configuration = $scope.condition.config;
             }
@@ -3626,13 +3645,20 @@ module.controller('ClientPoliciesEditConditionCtrl', function($scope, realm, ser
             } else {
                 Notifications.success("Condition updated successfully");
             }
-            $location.url('/realms/' + realm.realm + '/client-policies/policies-update/' + editedPolicy.name);
+            $location.url('/realms/' + realm.realm + '/client-policies/policies-update/' + $scope.editedPolicy.name);
+        }, function(errorResponse) {
+            var errDetails = (!errorResponse.data.errorMessage) ? "unknown error, please see the server log" : errorResponse.data.errorMessage
+            if ($scope.createNew) {
+                Notifications.error('Failed to create condition: ' + errDetails);
+            } else {
+                Notifications.error('Failed to update condition: ' + errDetails);
+            }
         });
 
     };
 
     $scope.cancel = function() {
-        $location.url('/realms/' + realm.realm + '/client-policies/policies-update/' + editedPolicy.name);
+        $location.url('/realms/' + realm.realm + '/client-policies/policies-update/' + $scope.editedPolicy.name);
     };
 
 });

diff --git a/.../resources/theme/base/admin/resources/partials/client-policies-policy-edit-condition.html b/.../resources/theme/base/admin/resources/partials/client-policies-policy-edit-condition.html
@@ -18,6 +18,13 @@
 
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
 
+    <ol class="breadcrumb">
+        <li><a href="#/realms/{{realm.realm}}/client-policies/policies">{{:: 'client-policies' | translate}}</a></li>
+        <li><a href="#/realms/{{realm.realm}}/client-policies/policies-update/{{editedPolicy.name}}">{{editedPolicy.name}}</a></li>
+        <li data-ng-show="createNew">{{:: 'create-condition' | translate}}</li>
+        <li data-ng-hide="createNew">{{conditionType.id}}</li>
+    </ol>
+
     <h1 data-ng-hide="createNew">{{conditionType.id|capitalize}}</h1>
     <h1 data-ng-show="createNew">{{:: 'create-condition' | translate}}</h1>
 

diff --git a/...s/src/main/resources/theme/base/admin/resources/partials/client-policies-policy-edit.html b/...s/src/main/resources/theme/base/admin/resources/partials/client-policies-policy-edit.html
@@ -17,23 +17,15 @@
   -->
 
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
-    <kc-tabs-realm></kc-tabs-realm>
-
-    <ul class="nav nav-tabs nav-tabs-pf">
-        <li>
-            <a href="#/realms/{{realm.realm}}/client-policies/profiles">{{:: 'client-policies-profiles' | translate}}</a>
-            <kc-tooltip>{{:: 'client-policies-profiles.tooltip' | translate}}</kc-tooltip>
-        </li>
-        <li class="active">
-            <a href="#/realms/{{realm.realm}}/client-policies/policies">{{:: 'client-policies-policies' | translate}}</a>
-            <kc-tooltip>{{:: 'client-policies-policies.tooltip' | translate}}</kc-tooltip>
-        </li>
-    </ul>
-
-    <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active"><a href="#/realms/{{realm.realm}}/client-policies/policies">{{:: 'client-profiles-form-view' | translate}}</a></li>
-        <li><a href="#/realms/{{realm.realm}}/client-policies/policies-json">{{:: 'client-profiles-json-editor' | translate}}</a></li>
-    </ul>
+
+    <ol class="breadcrumb">
+        <li><a href="#/realms/{{realm.realm}}/client-policies/policies">{{:: 'client-policies' | translate}}</a></li>
+        <li data-ng-show="createNew">{{:: 'create-client-policy' | translate}}</li>
+        <li data-ng-hide="createNew">{{editedPolicy.name}}</li>
+    </ol>
+
+    <h1 data-ng-show="createNew">{{:: 'create-client-policy' | translate}}</h1>
+    <h1 data-ng-hide="createNew">{{editedPolicy.name|capitalize}}</h1>
 
     <form class="form-horizontal" name="realmForm" novalidate>
 

diff --git a/...resources/theme/base/admin/resources/partials/client-policies-profiles-edit-executor.html b/...resources/theme/base/admin/resources/partials/client-policies-profiles-edit-executor.html
@@ -18,6 +18,13 @@
 
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
 
+    <ol class="breadcrumb">
+        <li><a href="#/realms/{{realm.realm}}/client-policies/profiles">{{:: 'client-profiles' | translate}}</a></li>
+        <li><a href="#/realms/{{realm.realm}}/client-policies/profiles-update/{{editedProfile.name}}">{{editedProfile.name}}</a></li>
+        <li data-ng-show="createNew">{{:: 'create-executor' | translate}}</li>
+        <li data-ng-hide="createNew">{{executorType.id}}</li>
+    </ol>
+
     <h1 data-ng-hide="createNew">{{executorType.id|capitalize}}</h1>
     <h1 data-ng-show="createNew">{{:: 'create-executor' | translate}}</h1>
 

diff --git a/...src/main/resources/theme/base/admin/resources/partials/client-policies-profiles-edit.html b/...src/main/resources/theme/base/admin/resources/partials/client-policies-profiles-edit.html
@@ -17,23 +17,15 @@
   -->
 
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
-    <kc-tabs-realm></kc-tabs-realm>
 
-    <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active">
-            <a href="#/realms/{{realm.realm}}/client-policies/profiles">{{:: 'client-policies-profiles' | translate}}</a>
-            <kc-tooltip>{{:: 'client-policies-profiles.tooltip' | translate}}</kc-tooltip>
-        </li>
-        <li>
-            <a href="#/realms/{{realm.realm}}/client-policies/policies">{{:: 'client-policies-policies' | translate}}</a>
-            <kc-tooltip>{{:: 'client-policies-policies.tooltip' | translate}}</kc-tooltip>
-        </li>
-    </ul>
+    <ol class="breadcrumb">
+        <li><a href="#/realms/{{realm.realm}}/client-policies/profiles">{{:: 'client-profiles' | translate}}</a></li>
+        <li data-ng-show="createNew">{{:: 'create-client-profile' | translate}}</li>
+        <li data-ng-hide="createNew">{{editedProfile.name}}</li>
+    </ol>
 
-    <ul class="nav nav-tabs nav-tabs-pf">
-        <li class="active"><a href="#/realms/{{realm.realm}}/client-policies/profiles">{{:: 'client-profiles-form-view' | translate}}</a></li>
-        <li><a href="#/realms/{{realm.realm}}/client-policies/profiles-json">{{:: 'client-profiles-json-editor' | translate}}</a></li>
-    </ul>
+    <h1 data-ng-show="createNew">{{:: 'create-client-policies-profile' | translate}}</h1>
+    <h1 data-ng-hide="createNew">{{editedProfile.name|capitalize}}</h1>
 
     <form class="form-horizontal" name="realmForm" novalidate kc-read-only="isReadOnly()">