Reload the page after a feature or permission change affecting the current user

The MVC toolbars and menus are rendered on the server and cannot reflect the change otherwise

modules/feature-management/src/Volo.Abp.FeatureManagement.Web/Pages/FeatureManagement/feature-management-modal.js

@@ -3,6 +3,16 @@ var abp = abp || {};
     abp.modals = abp.modals || {};
 
     let l = abp.localization.getResource("AbpFeatureManagement");
+
+    // The toolbars, menus and bundles are rendered on the server, so a full page
+    // load is the only way to reflect the new features on the current page. An empty
+    // provider key means the features of the current host or tenant were changed.
+    function reloadPageIfCurrentFeaturesChanged(providerKey) {
+        if (!providerKey) {
+            window.location.reload();
+        }
+    }
+
     abp.modals.FeatureManagement = function () {
 
         abp.ResourceLoader.loadScript('/client-proxies/featureManagement-proxy.js');
@@ -16,6 +26,7 @@ var abp = abp || {};
                             $("#FeatureManagementForm").get(0).reset();
                             abp.notify.success(l('SavedSuccessfully'));
                             $('#featureManagmentModal').modal('hide');
+                            reloadPageIfCurrentFeaturesChanged(prodiverKey);
                         });
                     }
                 });
@@ -59,6 +70,14 @@ var abp = abp || {};
         }
 
         this.initDom = function ($el) {
+            let initialValues = $el.serialize();
+
+            $el.on('abp-ajax-success', function () {
+                if ($el.serialize() !== initialValues) {
+                    reloadPageIfCurrentFeaturesChanged($el.find('#ProviderKey').val());
+                }
+            });
+
             $el.find('.tab-pane').each(function () {
                 let $tab = $(this);
                 $tab.find('input[type="checkbox"]')

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js

@@ -2,6 +2,26 @@ var abp = abp || {};
 (function ($) {
     abp.modals = abp.modals || {};
 
+    // The toolbars, menus and bundles are rendered on the server, so a full page load
+    // is the only way to reflect the new permissions on the current page. Changing the
+    // permissions of another user or role does not affect what this page renders.
+    function affectsCurrentUser(providerName, providerKey) {
+        var currentUser = abp.currentUser;
+        if (!currentUser || !currentUser.isAuthenticated) {
+            return false;
+        }
+
+        if (providerName === 'U') {
+            return currentUser.id === providerKey;
+        }
+
+        if (providerName === 'R') {
+            return (currentUser.roles || []).indexOf(providerKey) > -1;
+        }
+
+        return false;
+    }
+
     abp.modals.PermissionManagement = function () {
         var l = abp.localization.getResource("AbpPermissionManagement");
 
@@ -190,7 +210,27 @@ var abp = abp || {};
             }
         }
 
+        // "Select all" checkboxes are UI helpers, so only the granted states are compared.
+        function getGrantedStates($el) {
+            return $el.find('input[type="checkbox"]')
+                .not('[name="SelectAllInThisTab"], [name="SelectAllInAllTabs"]')
+                .map(function () {
+                    return this.name + '=' + this.checked;
+                })
+                .get()
+                .join('&');
+        }
+
         this.initDom = function ($el) {
+            var initialGrantedStates = getGrantedStates($el);
+
+            $el.on('abp-ajax-success', function () {
+                if (getGrantedStates($el) !== initialGrantedStates &&
+                    affectsCurrentUser($el.find('#ProviderName').val(), $el.find('#ProviderKey').val())) {
+                    window.location.reload();
+                }
+            });
+
             $el.find('.tab-pane').each(function () {
                 var $tab = $(this);
                 handleTabCheckedCheckboxCount($tab);