Scalable UX for user management (#13158)

* Create empty components.

* Mock up users list pagination.

* Finish initial version of mockup.

* Tweak to UI

* More UI changes to new users manager screen.

* More UI changes

* Mock up user permission edits.

* More tweaks to user permission editing (on both edit form & in users table).

* add options

* Another iteration on the UsersManager UI.

* Update UsersManager UI again.

* Implementing parts of the UI, fixing issue w/ overlapping material selects, creating dropdown directives for dropdown w/ submenu using materializecss, change bulk actions to be dropdown button.

* Merge menu/submenu directives.

* More superuser UI only functionality.

* Fill out more logic of users manager UI + merging extra unneeded components/directives.

* More users manager UI only changes.

* Incomplete API method for new users list page.

* Fill in server side pagination logic w/ tests & generally get to work in UI.

* Make sure selects w/ placeholders can be unset.

* Add loading state to users list + fix pagination issues + resize pagination in case the numbers are large.

* Add last seen time to getUsersPlusAccessLevel() so it displays in UI.

* Add permission edit pagination AJAX query + server side code.

* Add "add access" button to user permission component.

* Change permissions column to role + remove superuser checkbox & merge w/ Role column.

* Delete user + bulk delete functionality.

* Get delete users to work when entire search is selected.

* Ask for confirmation before setting access in users list & implement access change logic.

* Get bulk access functionality on users list to work (w/ tests).

* Fix a bug in user table filtering + get permissions edit search to work.

* Complete logic for permissions edit.

* Change add user workflow so we do not have to save each permission edit in memory before saving whole user.

* Add/edit user functionality.

* Toggle superuser access functionality + some modal fixes.

* in users list display ajax loading notification so counter is not changed visibly before rows are loaded.

* initial review changes, disable functionality when viewing user is not superuser and some UI tweaks.

* Redo top controls for user permission edit and add slide up toast notification for when a site is added.

* Display warning in user permission edit if user has no access at all.

* Do not reload users after going back from user edit form.

* Force giving a new user access to a site when creating a user and make sure user list reloads if a user is modified, but does not realod if no user is modified.

* Add form help to the non-straightforward fields.

* Remove old usersmanager code & fix pagination bug.

* Add help icon explaining roles to users list + permission edit.

* Allow admin users to create other users + fix some regressions when making page-users-list not reload every time.

* Apply self review changes.

* Do not allow editing user details when an admin user edits a user.

* Starting on UI tests.

* Limit users displayed in page list to those that already have access to sites the current user is an admin of.

* Refactor bulk/single AJAX calls & redraw component boundaries (users manager component owns user search state, paged users list owns table/control state).

* Get add existing user modal to work.

* write most UI tests + modify fixture

* Fill out rest of UI test suite & get the rest to pass.

* fix couple regressions

* Get UI tests to pass and start on translation.

* adding translations

* try to fix some tests

* Fixing API tests.

* Fixing UsersManager tests.

* Fix UI tests.

* Add capabilities to new API output.

* remove non-existant file references.

* Add Write role to dropdowns.

* Select from proper join.

* tweak test

* Updating UI tests.

* Change styling of user permissions edit.

* Update screenshots

* Apply some PR feedback.

* apply some review feedback

* more review changes

* update file headers

* remove some TODOs

* fix some tests

* some more review fixes

* update test files

* Fix failing tests.

4 files changed, 43 insertions, 10 deletions

diff --git a/plugins/CorePluginsAdmin/angularjs/field/field.directive.js b/plugins/CorePluginsAdmin/angularjs/field/field.directive.js
index 4c2a3564f8..e64179fc43 100644
--- a/plugins/CorePluginsAdmin/angularjs/field/field.directive.js
+++ b/plugins/CorePluginsAdmin/angularjs/field/field.directive.js
@@ -9,7 +9,7 @@
  * Usage:
  * <div piwik-field>
  *
- *     eg <div piwik-field ui-control="select"
+ *     eg <div piwik-field uicontrol="select"
  * title="{{ 'SitesManager_Timezone'|translate }}"
  * value="site.timezone"
  * options="timezones"
diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html b/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html
index a9018bbf98..36bedbdc25 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html
@@ -1,8 +1,10 @@
 <div>
     <select name="{{ formField.name }}"
             ng-model="formField.value"
-            ng-options="t.key as t.value group by t.group for t in formField.availableOptions"
-            piwik-attributes="{{formField.uiControlAttributes}}">
+            ng-options="t.key as t.value group by t.group disable when t.disabled for t in formField.availableOptions"
+            piwik-attributes="{{formField.uiControlAttributes}}"
+            ng-click="onShowSelect()"
+    >
     </select>
     <label for="{{ formField.name }}" ng-bind-html="formField.title"></label>
 </div>
diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html b/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html
index 5fa647685e..7a1e6729a3 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html
@@ -4,8 +4,11 @@
          class="sites_autocomplete"
          ng-model="formField.value"
          id="{{ formField.name }}"
-         show-all-sites-item="false"
+         show-all-sites-item="formField.uiControlAttributes.showAllSitesItem || false"
          switch-site-on-select="false"
          show-selected-site="true"
-         piwik-attributes="{{formField.uiControlAttributes}}"></div>
+         only-sites-with-admin-access="formField.uiControlAttributes.onlySitesWithAdminAccess || false"
+         placeholder="{{ formField.uiControlAttributes.placeholder }}"
+         piwik-attributes="{{formField.uiControlAttributes}}"
+    ></div>
 </div>
diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
index 6774fda081..5637c88902 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
@@ -16,6 +16,30 @@
 
     function piwikFormField(piwik, $timeout){
 
+        function initMaterialSelect($select, placeholder) {
+            $select.material_select();
+
+            // to prevent overlapping selects, when a select is opened, we set the z-index to a high value on focus & remove z-index for all others
+            // NOTE: we can't remove it directly blur since the blur causes the select to overlap, aborting the select click. (a timeout is used
+            // to make sure the z-index is removed however, in case a non-select dropdown is displayed over it)
+            $select.closest('.select-wrapper').find('input.select-dropdown')
+                .focus(function () {
+                    $('.select-wrapper').css('z-index', '');
+                    $(this).closest('.select-wrapper').css('z-index', 999);
+                }).blur(function () {
+                    var self = this;
+                    setTimeout(function () {
+                        $(self).closest('.select-wrapper').css('z-index', '');
+                    }, 250);
+                });
+
+            // add placeholder to input
+            if (placeholder) {
+                var $materialInput = $select.closest('.select-wrapper').find('input');
+                $materialInput.attr('placeholder', placeholder);
+            }
+        }
+
         function syncMultiCheckboxKeysWithFieldValue(field)
         {
             angular.forEach(field.availableOptions, function (option, index) {
@@ -73,12 +97,12 @@
 
                 if (isSelectControl(field)) {
                     var $select = element.find('select');
-                    $select.material_select();
+                    initMaterialSelect($select, field.uiControlAttributes.placeholder);
 
                     scope.$watch('formField.value', function (val, oldVal) {
                         if (val !== oldVal) {
                             $timeout(function () {
-                                $select.material_select();
+                                initMaterialSelect($select, field.uiControlAttributes.placeholder);
                             });
                         }
                     });
@@ -86,7 +110,7 @@
                     scope.$watch('formField.uiControlAttributes.disabled', function (val, oldVal) {
                         if (val !== oldVal) {
                             $timeout(function () {
-                                $select.material_select();
+                                initMaterialSelect($select, field.uiControlAttributes.placeholder);
                             });
                         }
                     });
@@ -342,6 +366,11 @@
                     // availableValues and in the watch change availableValues could trigger lots of more watch events
                     field.availableOptions = formatAvailableValues(field);
 
+                    // for selects w/ a placeholder, add an option to unset the select
+                    if (field.uiControl === 'select' && field.uiControlAttributes.placeholder) {
+                        field.availableOptions.splice(0, 0, { key: '', value: '' });
+                    }
+
                     field.defaultValuePretty = formatPrettyDefaultValue(defaultValue, field.availableOptions);
 
                     field.showField = true;
@@ -395,7 +424,7 @@
 
                             if (isSelectControl(scope.formField)) {
                                 $timeout(function () {
-                                    element.find('select').material_select();
+                                    initMaterialSelect(element.find('select'), field.uiControlAttributes.placeholder);
                                 });
                             }
                         }
@@ -403,7 +432,6 @@
                     scope.templateLoaded = function () {
                         $timeout(whenRendered(scope, element, inlineHelpNode));
                     };
-
                 };
             }
         };