Add capability editing to users manager (#13842)

* Update submodule.

* Add capability editing to permissions edit table.

* Apply review suggestions, including adding capabilities to other dropdowns & using chips = expandable select.

* use category instead of Capability text

* update screenshots

27 files changed, 473 insertions, 33 deletions

diff --git a/plugins/UsersManager/API.php b/plugins/UsersManager/API.php
index e70946a1d2..a3680c4d05 100644
--- a/plugins/UsersManager/API.php
+++ b/plugins/UsersManager/API.php
@@ -143,7 +143,7 @@ class API extends \Piwik\Plugin\API
                 'id' => $role->getId(),
                 'name' => $role->getName(),
                 'description' => $role->getDescription(),
-                'helpUrl' => $role->getHelpUrl()
+                'helpUrl' => $role->getHelpUrl(),
             );
         }
 
@@ -166,7 +166,8 @@ class API extends \Piwik\Plugin\API
                 'name' => $capability->getName(),
                 'description' => $capability->getDescription(),
                 'helpUrl' => $capability->getHelpUrl(),
-                'includedInRoles' => $capability->getIncludedInRoles()
+                'includedInRoles' => $capability->getIncludedInRoles(),
+                'category' => $capability->getCategory(),
             );
         }
 
diff --git a/plugins/UsersManager/Controller.php b/plugins/UsersManager/Controller.php
index 636f3bef71..183d9f4a78 100644
--- a/plugins/UsersManager/Controller.php
+++ b/plugins/UsersManager/Controller.php
@@ -90,6 +90,15 @@ class Controller extends ControllerAdmin
             ['key' => 'superuser', 'value' => Piwik::translate('Installation_SuperUser')],
         ];
 
+        $capabilities = Request::processRequest('UsersManager.getAvailableCapabilities', [], []);
+        foreach ($capabilities as $capability) {
+            $capabilityEntry = [
+                'key' => $capability['id'], 'value' => $capability['category'] . ': ' . $capability['name'],
+            ];
+            $view->accessLevels[] = $capabilityEntry;
+            $view->filterAccessLevels[] = $capabilityEntry;
+        }
+
         $this->setBasicVariablesView($view);
 
         return $view->render();
diff --git a/plugins/UsersManager/UsersManager.php b/plugins/UsersManager/UsersManager.php
index 6cba1cf960..2d2d938251 100644
--- a/plugins/UsersManager/UsersManager.php
+++ b/plugins/UsersManager/UsersManager.php
@@ -130,6 +130,8 @@ class UsersManager extends \Piwik\Plugin
         $jsFiles[] = "plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.js";
         $jsFiles[] = "plugins/UsersManager/angularjs/personal-settings/personal-settings.controller.js";
         $jsFiles[] = "plugins/UsersManager/angularjs/personal-settings/anonymous-settings.controller.js";
+        $jsFiles[] = "plugins/UsersManager/angularjs/permissions-metadata/permissions-metadata.service.js";
+        $jsFiles[] = "plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.js";
     }
 
     /**
@@ -143,6 +145,7 @@ class UsersManager extends \Piwik\Plugin
         $stylesheets[] = "plugins/UsersManager/angularjs/paged-users-list/paged-users-list.component.less";
         $stylesheets[] = "plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.less";
         $stylesheets[] = "plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.less";
+        $stylesheets[] = "plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.less";
     }
 
     /**
@@ -299,5 +302,10 @@ class UsersManager extends \Piwik\Plugin
         $translationKeys[] = 'UsersManager_OrManageIndividually';
         $translationKeys[] = 'UsersManager_ChangePermToAllSitesConfirm';
         $translationKeys[] = 'UsersManager_ChangePermToAllSitesConfirm2';
+        $translationKeys[] = 'UsersManager_CapabilitiesHelp';
+        $translationKeys[] = 'UsersManager_Capabilities';
+        $translationKeys[] = 'UsersManager_AreYouSureAddCapability';
+        $translationKeys[] = 'UsersManager_AreYouSureRemoveCapability';
+        $translationKeys[] = 'UsersManager_IncludedInUsersRole';
     }
 }
diff --git a/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.html b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.html
new file mode 100644
index 0000000000..0e47dcc8b5
--- /dev/null
+++ b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.html
@@ -0,0 +1,48 @@
+<div class="capabilitiesEdit" ng-class="{ busy: $ctrl.isBusy }">
+    <div
+        class="chip"
+        ng-repeat="capability in $ctrl.availableCapabilities"
+        ng-if="$ctrl.capabilitiesSet[capability.id]"
+    >
+        <span
+            class="capability-name"
+            title="{{ capability.description }} {{ ($ctrl.isIncludedInRole(capability) ? ('<br/><br/>' + ('UsersManager_IncludedInUsersRole'|translate)): '') }}"
+        >
+            {{ capability.category }}: {{ capability.name }}
+        </span>
+        <span
+            class="icon-close"
+            ng-if="!$ctrl.isIncludedInRole(capability)"
+            ng-click="$ctrl.capabilityToAddOrRemove = capability; $ctrl.onToggleCapability(fakse)"
+        ></span>
+    </div>
+
+    <div piwik-field uicontrol="expandable-select"
+         name="add_capability"
+         full-width="true"
+         ng-change="$ctrl.onToggleCapability(true)"
+         ng-model="$ctrl.capabilityToAddOrRemoveId"
+         options="$ctrl.availableCapabilitiesGrouped"
+         disabled="$ctrl.isBusy"
+         ng-if="$ctrl.availableCapabilitiesGrouped.length"
+         class="addCapability"
+    >
+    </div>
+
+    <div class="ui-confirm confirmCapabilityToggle modal">
+        <div class="modal-content">
+            <h2 ng-if="$ctrl.isAddingCapability" piwik-translate="UsersManager_AreYouSureAddCapability">
+                <strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.capabilityToAddOrRemove.name }}</strong>::<strong>{{ $ctrl.siteName }}</strong>
+            </h2>
+            <h2 ng-if="!$ctrl.isAddingCapability" piwik-translate="UsersManager_AreYouSureRemoveCapability">
+                <strong>{{ $ctrl.capabilityToAddOrRemove.name }}</strong>::<strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.siteName }}</strong>
+            </h2>
+        </div>
+        <div class="modal-footer">
+            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.toggleCapability()">{{:: 'General_Yes'|translate }}</a>
+            <a href="" class="modal-action modal-close modal-no" ng-click="$ctrl.capabilityToAddOrRemove = null; $ctrl.capabilityToAddOrRemoveId = null">
+                {{:: 'General_No'|translate }}
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.js b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.js
new file mode 100644
index 0000000000..3b59ae516b
--- /dev/null
+++ b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.js
@@ -0,0 +1,213 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <piwik-capabilities-edit>
+ */
+(function () {
+    angular.module('piwikApp').component('piwikCapabilitiesEdit', {
+        templateUrl: 'plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.html?cb=' + piwik.cacheBuster,
+        bindings: {
+            idsite: '<',
+            siteName: '<',
+            userLogin: '<',
+            userRole: '<',
+            capabilities: '<',
+            onCapabilitiesChange: '&',
+        },
+        controller: CapabilitiesEditController
+    });
+
+    CapabilitiesEditController.$inject = ['piwikApi', 'permissionsMetadataService', 'piwik', '$element'];
+
+    function CapabilitiesEditController(piwikApi, permissionsMetadataService, piwik, $element) {
+        var vm = this;
+
+        vm.isBusy = false;
+        vm.availableCapabilities = [];
+        vm.availableCapabilitiesGrouped = [];
+        vm.capabilitiesSet = {};
+
+        // intermediate state
+        vm.isAddingCapability = false;
+        vm.capabilityToAddOrRemoveId = null;
+        vm.capabilityToAddOrRemove = null;
+
+        vm.$onInit = $onInit;
+        vm.$onChanges = $onChanges;
+        vm.onToggleCapability = onToggleCapability;
+        vm.toggleCapability = toggleCapability;
+        vm.isIncludedInRole = isIncludedInRole;
+
+        function $onInit() {
+            fetchAvailableCapabilities();
+
+            if (typeof vm.capabilities === 'undefined') {
+                fetchCapabilities();
+            }
+        }
+
+        function $onChanges() {
+            setCapabilitiesSet();
+        }
+
+        function isIncludedInRole(capability) {
+            return capability.includedInRoles.indexOf(vm.userRole) !== -1;
+        }
+
+        function fetchAvailableCapabilities() {
+            permissionsMetadataService.getAllCapabilities()
+                .then(function (capabilities) {
+                    vm.availableCapabilities = capabilities;
+                    setCapabilitiesSet();
+                    setAvailableCapabilitiesDropdown();
+                });
+        }
+
+        function fetchCapabilities() {
+            vm.isBusy = true;
+            piwikApi.fetch({
+                method: 'UsersManager.getUsersPlusRole',
+                limit: '1',
+                filter_search: vm.userLogin,
+            }).then(function (user) {
+                if (!user || !user.capabilities) {
+                    return [];
+                }
+
+                return user.capabilities;
+            }).then(function (capabilities) {
+                vm.capabilities = capabilities;
+                setCapabilitiesSet();
+                setAvailableCapabilitiesDropdown();
+            })['finally'](function () {
+                vm.isBusy = false;
+            });
+        }
+
+        function setCapabilitiesSet() {
+            vm.capabilitiesSet = {};
+            (vm.capabilities || []).forEach(function (capability) {
+                vm.capabilitiesSet[capability] = true;
+            });
+            (vm.availableCapabilities || []).forEach(function (capability) {
+                if (vm.isIncludedInRole(capability)) {
+                    vm.capabilitiesSet[capability.id] = true;
+                }
+            });
+        }
+
+        function setAvailableCapabilitiesDropdown() {
+            var availableCapabilitiesGrouped = [];
+            vm.availableCapabilities.forEach(function (capability) {
+                if (vm.capabilitiesSet[capability.id]) {
+                    return;
+                }
+
+                availableCapabilitiesGrouped.push({
+                    group: capability.category,
+                    key: capability.id,
+                    value: capability.name,
+                    tooltip: capability.description,
+                });
+            });
+            vm.availableCapabilitiesGrouped = availableCapabilitiesGrouped;
+            vm.availableCapabilitiesGrouped.sort(function (lhs, rhs) {
+                if (lhs.group === rhs.group) {
+                    if (lhs.value === rhs.value) {
+                        return 0;
+                    }
+                    return lhs.value < rhs.value ? -1 : 1;
+                }
+                return lhs.group < rhs.group ? -1 : 1;
+            });
+        }
+
+        function onToggleCapability(isAdd) {
+            vm.isAddingCapability = isAdd;
+
+            vm.availableCapabilities.forEach(function (capability) {
+                if (capability.id === vm.capabilityToAddOrRemoveId) {
+                    vm.capabilityToAddOrRemove = capability;
+                }
+            });
+
+            $element.find('.confirmCapabilityToggle').openModal({
+                dismissible: false,
+                yes: function () {
+                },
+            });
+        }
+
+        function toggleCapability() {
+            if (vm.isAddingCapability) {
+                addCapability(vm.capabilityToAddOrRemove);
+            } else {
+                removeCapability(vm.capabilityToAddOrRemove);
+            }
+        }
+
+        function addCapability(capability) {
+            vm.isBusy = true;
+            piwikApi.post({
+                method: 'UsersManager.addCapabilities',
+            }, {
+                userLogin: vm.userLogin,
+                capabilities: capability.id,
+                idSites: vm.idsite
+            }).then(function () {
+                vm.onCapabilitiesChange.call({
+                    capabilities: getCapabilitiesList(),
+                });
+
+                setCapabilitiesSet();
+                setAvailableCapabilitiesDropdown();
+            })['finally'](function () {
+                vm.isBusy = false;
+                vm.capabilityToAddOrRemove = null;
+                vm.capabilityToAddOrRemoveId = null;
+            });
+        }
+
+        function removeCapability(capability) {
+            vm.isBusy = true;
+            piwikApi.post({
+                method: 'UsersManager.removeCapabilities',
+            }, {
+                userLogin: vm.userLogin,
+                capabilities: capability.id,
+                idSites: vm.idsite
+            }).then(function () {
+                vm.onCapabilitiesChange.call({
+                    capabilities: getCapabilitiesList(),
+                });
+
+                setCapabilitiesSet();
+                setAvailableCapabilitiesDropdown();
+            })['finally'](function () {
+                vm.isBusy = false;
+                vm.capabilityToAddOrRemove = null;
+                vm.capabilityToAddOrRemoveId = null;
+            });
+        }
+
+        function getCapabilitiesList() {
+            var result = [];
+            vm.availableCapabilities.forEach(function (capability) {
+                if (vm.isIncludedInRole(capability)) {
+                    return;
+                }
+
+                if (vm.capabilitiesSet[capability.id]) {
+                    result.push(capability.id);
+                }
+            });
+            return result;
+        }
+    }
+})();
diff --git a/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.less b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.less
new file mode 100644
index 0000000000..a77d388a99
--- /dev/null
+++ b/plugins/UsersManager/angularjs/capabilities-edit/capabilities-edit.component.less
@@ -0,0 +1,76 @@
+.capabilitiesEdit {
+  display: inline-block;
+  margin-bottom: -8px;
+
+  > div.chip {
+    margin-right: 8px;
+    display: inline-block;
+    margin-bottom: 8px;
+
+    span.capability-name {
+      padding-right: .4rem;
+    }
+
+    > span.icon-close {
+      font-size: .6rem;
+      float: right;
+      margin-top: 1.4em;
+      cursor: pointer;
+    }
+  }
+
+  .addCapability {
+    display: inline-block;
+    margin-bottom: 8px;
+    vertical-align: bottom;
+
+    .input-field {
+      margin-top: 0;
+      .caret {
+        right: -25px;
+        top: 16px;
+        z-index: 9;
+        cursor: pointer;
+      }
+      .select-dropdown {
+        margin-top: 8px;
+        margin-bottom: 0;
+        border: 0;
+        background: #e4e4e4;
+        display: inline-block;
+        height: 32px;
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(0,0,0,0.6);
+        line-height: 32px;
+        border-radius: 3em;
+        padding-left: 12px;
+        padding-right: 30px;
+      }
+    }
+
+    .select-wrapper {
+      transform: scale(.89) translate(-.6rem);
+      margin-top: -0.55rem;
+      max-width: 160px;
+
+      input {
+        margin-bottom: 0;
+        height: 2rem;
+        line-height: 2rem;
+      }
+    }
+  }
+
+  &.busy {
+    opacity: 0.5;
+  }
+
+  .confirmCapabilityToggle {
+    .modal-no {
+      float: right;
+      margin-right: 1em;
+      margin-top: 1em;
+    }
+  }
+}
\ No newline at end of file
diff --git a/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.html b/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.html
new file mode 100644
index 0000000000..e20609a83b
--- /dev/null
+++ b/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.html
@@ -0,0 +1,3 @@
+<div class="capabilityEdit">
+    {{ capabilityEdit.myProperty }}
+</div>
\ No newline at end of file
diff --git a/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.less b/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.less
new file mode 100644
index 0000000000..a59690b170
--- /dev/null
+++ b/plugins/UsersManager/angularjs/capability-edit/capability-edit.component.less
@@ -0,0 +1,3 @@
+.capabilityEdit {
+  // ...
+}
\ No newline at end of file
diff --git a/plugins/UsersManager/angularjs/permissions-metadata/permissions-metadata.service.js b/plugins/UsersManager/angularjs/permissions-metadata/permissions-metadata.service.js
new file mode 100644
index 0000000000..01ea7d6593
--- /dev/null
+++ b/plugins/UsersManager/angularjs/permissions-metadata/permissions-metadata.service.js
@@ -0,0 +1,35 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <piwik-capabilities-edit>
+ */
+(function () {
+    angular.module('piwikApp').factory('permissionsMetadataService', PermissionsMetadataService);
+
+    PermissionsMetadataService.$inject = ['piwikApi', '$q'];
+
+    function PermissionsMetadataService(piwikApi, $q) {
+        var allCapabilities;
+
+        return {
+            getAllCapabilities: function () {
+                if (allCapabilities) {
+                    return $q.when(allCapabilities);
+                }
+
+                return piwikApi.fetch({
+                    method: 'UsersManager.getAvailableCapabilities',
+                }).then(function (capabilities) {
+                    allCapabilities = capabilities;
+                    return allCapabilities;
+                });
+            },
+        };
+    }
+})();
diff --git a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.html b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.html
index 498f37679d..5295e4e18f 100644
--- a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.html
+++ b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.html
@@ -98,7 +98,15 @@
     </div>
 
     <div piwik-notification context="info" type="persistent" noclear="true" ng-if="$ctrl.isRoleHelpToggled" class="roles-help-notification">
-        {{:: 'UsersManager_RolesHelp'|translate:"<a href='https://matomo.org/faq/general/faq_70/' target='_blank' rel='noreferrer noopener'>":"</a>":"<a href='https://matomo.org/faq/general/faq_69/' target='_blank' rel='noreferrer noopener'>":"</a>" }}
+        <span piwik-translate="UsersManager_RolesHelp">
+            <a href='https://matomo.org/faq/general/faq_70/' target='_blank' rel='noreferrer noopener'>::</a>::<a href='https://matomo.org/faq/general/faq_69/' target='_blank' rel='noreferrer noopener'>::</a>
+        </span>
+    </div>
+
+    <div piwik-notification context="info" type="persistent" noclear="true" ng-if="$ctrl.isCapabilitiesHelpToggled" class="capabilities-help-notification">
+        <span piwik-translate="UsersManager_CapabilitiesHelp">
+            TODO
+        </span>
     </div>
 
     <table piwik-content-table id="sitesForPermission">
@@ -117,6 +125,12 @@
                     <span class="icon-help"></span>
                 </a>
             </th>
+            <th class="capabilities_header">
+                <span>{{:: 'UsersManager_Capabilities'|translate }}</span>
+                <a href="" class="helpIcon" ng-click="$ctrl.isCapabilitiesHelpToggled = !$ctrl.isCapabilitiesHelpToggled" ng-class="{ sticky: $ctrl.isCapabilitiesHelpToggled }">
+                    <span class="icon-help"></span>
+                </a>
+            </th>
         </tr>
         </thead>
         <tbody>
@@ -150,8 +164,21 @@
                     ng-model="entry.role"
                     options="$ctrl.accessLevels"
                     ng-change="$ctrl.previousRole = '{{ entry.role }}'; $ctrl.roleToChangeTo = entry.role; $ctrl.siteAccessToChange = entry; $ctrl.showChangeAccessConfirm();"
+                    full-width="true"
+                    class="role-select"
                 ></div>
             </td>
+            <td>
+                <piwik-capabilities-edit
+                    idsite="entry.idsite"
+                    site-name="entry.site_name"
+                    user-login="$ctrl.userLogin"
+                    user-role="entry.role"
+                    capabilities="entry.capabilities"
+                    on-capabilities-change="$ctrl.fetchAccess()"
+                >
+                </piwik-capabilities-edit>
+            </td>
         </tr>
         </tbody>
     </table>
diff --git a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.js b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.js
index b8d407b447..7ece76bc5f 100644
--- a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.js
+++ b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.js
@@ -47,6 +47,7 @@
         // other state
         vm.hasAccessToAtLeastOneSite = true;
         vm.isRoleHelpToggled = false;
+        vm.isCapabilitiesHelpToggled = false;
         vm.isGivingAccessToAllSites = false;
 
         // intermediate state
diff --git a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.less b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.less
index aadd55fe21..03dba97201 100644
--- a/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.less
+++ b/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.less
@@ -117,7 +117,7 @@
       margin-top: -4px;
     }
 
-    .select-wrapper {
+    .role-select .select-wrapper {
       transform: scale(.8) translate(-1.3rem);
       margin-top: -0.5rem;
       max-width: 160px;
@@ -191,7 +191,7 @@
     }
   }
 
-  th.role_header {
+  th.role_header, th.capabilities_header {
     .helpIcon {
       color: #9e9e9e;
       font-size: .8rem;
diff --git a/plugins/UsersManager/lang/en.json b/plugins/UsersManager/lang/en.json
index c8246305c2..a878d74971 100644
--- a/plugins/UsersManager/lang/en.json
+++ b/plugins/UsersManager/lang/en.json
@@ -150,6 +150,12 @@
         "GiveAccessToAll": "Give this user access to All Websites",
         "OrManageIndividually": "Or manage this user's access to each website individually",
         "ChangePermToAllSitesConfirm": "Are you sure you want to give the %1$s user %2$s access to every website you currently have admin access to?",
-        "ChangePermToAllSitesConfirm2": "Note: this will only affect the currently existing websites. New websites you may create will not be automatically accessible to this user."
+        "ChangePermToAllSitesConfirm2": "Note: this will only affect the currently existing websites. New websites you may create will not be automatically accessible to this user.",
+        "CapabilitiesHelp": "Capabilities are individual abilities that users can be granted. Roles may, by default, grant certain capabilities. For example, the Admin role will automatically allow users to edit tags in the Tag Manager. For less powerful users, however, you can explicitly give users capabilities.",
+        "Capabilities": "Capabilities",
+        "AreYouSureAddCapability": "Are you sure you want to give %1$s the %2$s capability for %3$s?",
+        "AreYouSureRemoveCapability": "Are you sure you want to remove the %1$s capability from %2$s for %3$s?",
+        "IncludedInUsersRole": "Included in this user's role.",
+        "Capability": "Capability"
     }
 }
diff --git a/plugins/UsersManager/tests/UI/UsersManager_spec.js b/plugins/UsersManager/tests/UI/UsersManager_spec.js
index fce6e321a3..670b62e13a 100644
--- a/plugins/UsersManager/tests/UI/UsersManager_spec.js
+++ b/plugins/UsersManager/tests/UI/UsersManager_spec.js
@@ -294,13 +294,23 @@ describe("UsersManager", function () {
             page.setViewportSize(1250);
 
             page.evaluate(function () {
-                $('.userPermissionsEdit tr select:eq(0)').val('string:admin').change();
+                $('.capability-checkbox tr select:eq(0)').val('string:admin').change();
             });
 
             page.click('.change-access-confirm-modal .modal-close:not(.modal-no)');
         }, done);
     });
 
+    it('should set a capability to single site when capability checkbox is clicked', function (done) {
+        expect.screenshot("permissions_capability_single_site").to.be.captureSelector('.admin#content', function (page) {
+            page.evaluate(function () {
+                $('.capability-checkbox:not(:checked):not(:disabled):eq(0)').click();
+            });
+
+            page.click('.confirmCapabilityToggle .modal-close:not(.modal-no)');
+        }, done);
+    });
+
     it('should remove access to displayed rows when remove bulk access is clicked', function (done) {
         expect.screenshot("permissions_remove_access").to.be.captureSelector('.admin#content', function (page) {
             page.setViewportSize(1250);
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_admin_view_admin_edit_permissions.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_admin_view_admin_edit_permissions.png
index fe715e43c7..96cdf739bc 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_admin_view_admin_edit_permissions.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_admin_view_admin_edit_permissions.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6713729f17fd0759512f63887162482dfa7c8e9f2e10219bb88bd001883c846d
-size 30475
+oid sha256:3b71e7f7e2618a3a6ba32b4065860511d741bbfae4d8ad559e060893cdd90c26
+size 33137
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_rows_in_search.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_rows_in_search.png
index 7bb4972d12..30b933ad74 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_rows_in_search.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_rows_in_search.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c747950e8d7574ecbf43f387209e76ba2771565b1100f37dfb353f41cb7a5711
-size 89916
+oid sha256:22b3a53cd7fec71d57faa1b335efbdc4a56c80bc0b01ff3897c2e83afd0a42b9
+size 99635
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_sites_access.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_sites_access.png
index 632e48bfae..f844af5c8f 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_sites_access.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_all_sites_access.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:267019894869ba44f78e6cb6aac306006ae4e2b45bcba615ab04406fe5d1cc95
-size 70146
+oid sha256:74b8da48bf60b49101242bf8f0568847a63cafc1327b162348c6569962815a79
+size 110156
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set.png
index f9490ff4f1..c372f70560 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9b7754d21f78f6669e76a95dd8441c47a99814340d52595954c5f0022f4d78a6
-size 57691
+oid sha256:873ab7849c3ad5cf11702b7f09204e3e2a1a4e9350c0546e4c5ef8375ce7c47a
+size 106499
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set_all.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set_all.png
index a817c9af4b..bafbfb00a9 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set_all.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_bulk_access_set_all.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a0c57f2616d3d3ac3fab68275ad9aa8d0706a7f625644704c424c480403f0a90
-size 54324
+oid sha256:c365229c89b5d0f76418390be8f00fb31f7b27413d4daa30c24d21a3bcae14b6
+size 79943
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_edit.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_edit.png
index adc047eee4..aa24fb40df 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_edit.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_edit.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:19af110d3f0f8099c3571658eee30035a1760742b0a212f8598fd7d496e404cd
-size 33184
+oid sha256:8b14b47e627ea294c8b4615269b827c00e4358941d604a05eb6de79c6c8bf3bc
+size 36282
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_filters.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_filters.png
index 283aebc771..500306ed87 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_filters.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_filters.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c3c54b9f70bf5375bab136c49285be92a7b1f8d28527db3ebcd6297b78d4dc17
-size 35036
+oid sha256:4b10666deba5302b0f6fff6473e7e5918931f61ee5d94d9bc68f2c02d08c105b
+size 62883
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_next.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_next.png
index 83eeb9a3c3..2f1deb0437 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_next.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_next.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:062d2ee470fea1889a225aa863a1a63fe44f6ba4d44e5798ae7e42c5c7da26bf
-size 58589
+oid sha256:d47601f5098fd7c909af44a5ae0e118afc4402e1d916b85ffbacbd58ffc0cdbb
+size 90338
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_access.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_access.png
index 89846393c0..ae50dd4d78 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_access.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_access.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f4ec2c5324228d608bf2a71460336a2418d78fc0b378294fa120be43ebd191c9
-size 94072
+oid sha256:46e7da989ac5e931445d4b5a305c123e2f820af08a7db0352e84724c4fb545d9
+size 104403
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_single.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_single.png
index 84bfef28a0..cc38a01a3c 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_single.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_remove_single.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:94e7a9c38ca62c5706e4be0c96698603ec80475bf76056908dd7a958db883bb6
-size 57752
+oid sha256:e20620c5f62d652fd392d797c73ca24aa885cd65e1852443b1f0b533bdb3a328
+size 89862
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_all.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_all.png
index f0f17e8cd0..ebf75d1cbc 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_all.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_all.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:46ff6c3a397682428e73f09151b18e5a13555906e124767cce9e7abb5a9279a9
-size 37308
+oid sha256:0a53ad17655b89a1f89c290244668318f539b27df79a3fe701d1456c78fc77cc
+size 65065
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_multiple.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_multiple.png
index 93b426143f..c08db9fab7 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_multiple.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_select_multiple.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3c97c5f1951c3c7c0239b48f43497d078d0305c85c9c72ff32fb43a1b73e5965
-size 59915
+oid sha256:bd6fcc234e579981a293655cd9dd32af5a4959725268dd2e24da89ad3f07ae20
+size 91907
diff --git a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_single_site_access.png b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_single_site_access.png
index 7901f62611..bafbfb00a9 100644
--- a/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_single_site_access.png
+++ b/plugins/UsersManager/tests/UI/expected-screenshots/UsersManager_permissions_single_site_access.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6521f9410b6da146b217620ca421ce8d49784a1789bec0d15783a8d4b3285694
-size 54315
+oid sha256:c365229c89b5d0f76418390be8f00fb31f7b27413d4daa30c24d21a3bcae14b6
+size 79943