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.

1 files changed, 8 insertions, 308 deletions

diff --git a/plugins/UsersManager/templates/index.twig b/plugins/UsersManager/templates/index.twig
index 5f2b9076dd..ca58a66426 100644
--- a/plugins/UsersManager/templates/index.twig
+++ b/plugins/UsersManager/templates/index.twig
@@ -4,313 +4,13 @@
 
 {% block content %}
 
-<div piwik-content-block
-     content-title="{{ title|e('html_attr') }}"
-     feature="true"
-     style="width:800px;"
-     help-url="https://matomo.org/docs/manage-users/"
-    >
-<div ng-controller="ManageUserAccessController as manageUserAccess">
-    <div id="sites" class="usersManager">
-        <section class="sites_selector_container">
-            <p>{{ 'UsersManager_MainDescription'|translate }}</p>
-
-            {% set applyAllSitesText %}
-                <strong>{{ 'UsersManager_ApplyToAllWebsites'|translate }}</strong>
-            {% endset %}
-
-            <div piwik-siteselector
-                 show-selected-site="true"
-                 only-sites-with-admin-access="true"
-                 class="sites_autocomplete"
-                 ng-model="manageUserAccess.site"
-                 ng-change="manageUserAccess.siteChanged()"
-                 siteid="{{ idSiteSelected }}"
-                 sitename="{{ defaultReportSiteName }}"
-                 all-sites-text="{{ applyAllSitesText|raw }}"
-                 all-sites-location="top"
-                 id="usersManagerSiteSelect"
-                 switch-site-on-select="false"></div>
-        </section>
-    </div>
-
-    {% block websiteAccessTable %}
-
-    {% import 'ajaxMacros.twig' as ajax %}
-
-    <div piwik-activity-indicator class="loadingManageUserAccess" loading="manageUserAccess.isLoading"></div>
-    <div id="accessUpdated" style="vertical-align:top;"></div>
-
-    {% if anonymousHasViewAccess %}
-        <br/>
-        <div class="alert alert-warning">
-            {{ ['UsersManager_AnonymousUserHasViewAccess'|translate("'anonymous'","'view'"), 'UsersManager_AnonymousUserHasViewAccess2'|translate]|join(' ') }}
-        </div>
-    {% endif %}
-
-    <table piwik-content-table id="manageUserAccess">
-        <thead>
-        <tr>
-            <th class='first'>{{ 'UsersManager_User'|translate }}</th>
-            <th>{{ 'UsersManager_Alias'|translate }}</th>
-            <th>{{ 'UsersManager_PrivNone'|translate }}</th>
-            <th>{{ 'UsersManager_PrivView'|translate }} <a href="https://matomo.org/faq/general/faq_70/" rel="noreferrer noopener" target="_blank" class="helpLink"><span class="icon-help"></span></a></th>
-            <th>{{ 'UsersManager_PrivAdmin'|translate }} <a href="https://matomo.org/faq/general/faq_69/" rel="noreferrer noopener" target="_blank" class="helpLink"><span class="icon-help"></span></a></th>
-        </tr>
-        </thead>
-
-        <tbody>
-
-        {% for login,access in usersAccessByWebsite %}
-
-            {% set accesValid %}
-              <img src='plugins/UsersManager/images/ok.png' class='accessGranted'
-                {% if access == 'noaccess' %}
-                title="{{'UsersManager_UserHasNoPermission'|translate(login,'UsersManager_PrivNone'|translate,defaultReportSiteName)}}"
-                {% elseif access == 'view' %}
-                title="{{'UsersManager_UserHasPermission'|translate(login,'UsersManager_PrivView'|translate,defaultReportSiteName)}}"
-                {% elseif access == 'admin' %}
-                title="{{'UsersManager_UserHasPermission'|translate(login,'UsersManager_PrivAdmin'|translate,defaultReportSiteName)}}"
-                {% endif %}
-              />
-            {% endset %}
-            {% set superUserAccess %}<span title="{{ 'UsersManager_ExceptionSuperUserAccess'|translate }}">N/A</span>{% endset %}
-
-            {% if userIsSuperUser or (hasOnlyAdminAccess and (access!='noaccess' or idSiteSelected == 'all'))  %}
-            <tr data-login="{{ login|e('html_attr') }}">
-                <td id='login'>{{ login }}</td>
-                <td>{{ usersAliasByLogin[login]|raw }}</td>
-                <td id='noaccess'>
-                    {% if login in superUserLogins %}
-                        {{ superUserAccess }}
-                    {% elseif access=='noaccess' and idSiteSelected != 'all' %}
-                        {{ accesValid }}
-                    {% else %}
-                        <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
-                             ng-click='manageUserAccess.setAccess({{ login|json_encode}}, "noaccess")'
-                             title="{{'UsersManager_RemoveUserAccess'|translate(login,defaultReportSiteName)|e('html_attr')}}"
-                        />
-                    {% endif %}&nbsp;</td>
-                <td id='view'>
-                    {% if login in superUserLogins %}
-                        {{ superUserAccess }}
-                    {% elseif access == 'view' and idSiteSelected != 'all' %}
-                        {{ accesValid }}
-                    {% else %}
-                        <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
-                             ng-click='manageUserAccess.setAccess({{ login|json_encode}}, "view")'
-                             title="{{'UsersManager_GiveUserAccess'|translate(login,'UsersManager_PrivView'|translate,defaultReportSiteName)|e('html_attr')}}"
-                        />
-                    {% endif %}&nbsp;</td>
-                <td id='admin'>
-                    {% if login in superUserLogins %}
-                        {{ superUserAccess }}
-                    {% elseif login == 'anonymous' %}
-                        N/A
-                    {% else %}
-                        {% if access == 'admin' and idSiteSelected != 'all' %}
-                            {{ accesValid }}
-                        {% else %}
-                            <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
-                                 ng-click='manageUserAccess.setAccess({{ login|json_encode}}, "admin")'
-                                 title="{{'UsersManager_GiveUserAccess'|translate(login,'UsersManager_PrivAdmin'|translate,defaultReportSiteName)|e('html_attr')}}"
-                            />
-                        {% endif %}&nbsp;
-                    {% endif %}
-                </td>
-            </tr>
-            {% endif %}
-        {% endfor %}
-        </tbody>
-    </table>
-
-    {% if hasOnlyAdminAccess %}
-        <div class="tableActionBar">
-            <div ng-controller="GiveUserViewAccessController as giveViewAccess" piwik-form>
-                <button id="showGiveViewAccessForm"
-                        ng-show="!giveViewAccess.showForm" ng-click="giveViewAccess.showViewAccessForm()">
-                    <span class="icon-add"></span>
-                    {{ 'UsersManager_GiveViewAccessTitle'|translate('"' ~ defaultReportSiteName ~ '"')|raw }}
-                </button>
-
-                <form id="giveViewAccessForm" ng-show="giveViewAccess.showForm">
-                    <div piwik-field uicontrol="text" name="user_invite"
-                         ng-model="giveViewAccess.usernameOrEmail"
-                         full-width="true"
-                         title="{{ 'UsersManager_EnterUsernameOrEmail'|translate|e('html_attr') }}"
-                         >
-                    </div>
-
-                    <div piwik-save-button id="giveUserAccessToViewReports"
-                         onconfirm="giveViewAccess.giveAccess()"
-                           saving="giveViewAccess.isLoading"
-                           value="{{ 'UsersManager_GiveViewAccess'|translate("'" ~ defaultReportSiteName ~ "'")|e('html_attr') }}"></div>
-
-                </form>
-            </div>
-        </div>
-        <div id="ajaxErrorGiveViewAccess">
-
-        </div>
-    {% endif %}
-</div>
-</div>
-
-<div class="ui-confirm" id="confirm">
-    <h2>{{ 'UsersManager_ChangeAllConfirm'|translate("<span class='login'></span>")|raw }}</h2>
-    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-</div>
-
-<div class="ui-confirm" id="confirmAnonymousAccess">
-    <h2>{{ 'UsersManager_AnonymousAccessConfirmation'|translate }}</h2>
-    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-</div>
-
-{% if userIsSuperUser %}
-<div piwik-content-block content-title="{{ 'UsersManager_UsersManagement'|translate|e('html_attr') }}">
-    <div class="ui-confirm" id="confirmUserRemove">
-        <h2></h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-
-    <div class="ui-confirm" id="confirmTokenRegenerate">
-        <h2>{{ 'UsersManager_TokenRegenerateConfirm'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-    <div class="ui-confirm" id="confirmTokenRegenerateSelf">
-        <h2>{{ 'UsersManager_TokenRegenerateConfirmSelf'|translate }}</h2>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-    </div>
-
-    <br/>
-    <p>{{ 'UsersManager_UsersManagementMainDescription'|translate }}
-        {{ 'UsersManager_ThereAreCurrentlyNRegisteredUsers'|translate("<b>"~usersCount~"</b>")|raw }}</p>
-    {% import 'ajaxMacros.twig' as ajax %}
-
-    <div class="user" ng-controller="ManageUsersController as manageUsers">
-        <div piwik-activity-indicator class="loadingManageUsers" loading="manageUsers.isLoading"></div>
-
-        <table piwik-content-table id="users">
-            <thead>
-            <tr>
-                <th>{{ 'General_Username'|translate }}</th>
-                <th>{{ 'General_Password'|translate }}</th>
-                <th>{{ 'UsersManager_Email'|translate }}</th>
-                <th>{{ 'UsersManager_Alias'|translate }}</th>
-                {% if showLastSeen is defined and showLastSeen %}
-                <th>{{ 'UsersManager_LastSeen'|translate }}</th>
-                {% endif %}
-                <th>{{ 'General_Edit'|translate }}</th>
-                <th>{{ 'General_Delete'|translate }}</th>
-            </tr>
-            </thead>
-
-            <tbody>
-            {% for i,user in users %}
-                {% if user.login != 'anonymous' %}
-                    <tr class="editable" id="row{{ i }}">
-                        <td id="userLogin" ng-click='manageUsers.editUser("row{{ i|e('js') }}")'>{{ user.login }}</td>
-                        <td id="password" class="editable" ng-click='manageUsers.editUser("row{{ i|e('js') }}")'>-</td>
-                        <td id="email" class="editable" ng-click='manageUsers.editUser("row{{ i|e('js') }}")'>{{ user.email }}</td>
-                        <td id="alias" class="editable" ng-click='manageUsers.editUser("row{{ i|e('js') }}")'>{{ user.alias|raw }}</td>
-                        {% if user.last_seen is defined %}
-                        <td id="last_seen">{% if user.last_seen is empty %}-{% else %}{{ 'General_TimeAgo'|translate(user.last_seen)|raw }}{% endif %}</td>
-                        {% endif %}
-                        <td class="center">
-                            <button ng-click='manageUsers.editUser("row{{ i|e('js') }}")'
-                                    class="edituser table-action" title="{{ 'General_Edit'|translate }}">
-                                <span class="icon-edit"></span>
-                            </button>
-                        </td>
-                        <td class="center">
-                            <button class="deleteuser table-action"
-                                    ng-click='manageUsers.deleteUser({{ user.login|json_encode }})'
-                                    title="{{ 'General_Delete'|translate }}">
-                                <span class="icon-delete"></span>
-                            </button>
-                        </td>
-                    </tr>
-                {% endif %}
-            {% endfor %}
-            </tbody>
-        </table>
-
-        <div class="tableActionBar">
-            <button class="add-user" ng-click="manageUsers.createUser()" ng-show="manageUsers.showCreateUser">
-                <span class="icon-add"></span>
-                {{ 'UsersManager_AddUser'|translate }}
-            </button>
-        </div>
-    </div>
-</div>
-
-<div piwik-content-block
-     id="super_user_access"
-     style="width:800px;"
-     content-title="{{ 'UsersManager_SuperUserAccessManagement'|translate|e('html_attr') }}">
-
-    <div ng-controller="ManageSuperUserController as manageSuperUser">
-
-        <p>{{ 'UsersManager_SuperUserAccessManagementMainDescription'|translate }} <br/>
-        {{ 'UsersManager_SuperUserAccessManagementGrantMore'|translate }}</p>
-
-        <div piwik-activity-indicator class="loadingManageSuperUser" loading="manageSuperUser.isLoading"></div>
-
-        <div id="superUserAccessUpdated" style="vertical-align:top;"></div>
-
-        <table piwik-content-table id="superUserAccess" >
-            <thead>
-            <tr>
-                <th class='first'>{{ 'UsersManager_User'|translate }}</th>
-                <th>{{ 'UsersManager_Alias'|translate }}</th>
-                <th>{{ 'Installation_SuperUser'|translate }} <a href="https://matomo.org/faq/general/faq_35/" rel="noreferrer noopener" target="_blank" class="helpLink"><span class="icon-help"></span></a></th>
-            </tr>
-            </thead>
-
-            <tbody>
-            {% if users|length > 1 %}
-                {% for login,alias in usersAliasByLogin if login != 'anonymous' %}
-                    <tr>
-                        <td id='login'>{{ login }}</td>
-                        <td>{{ alias|raw }}</td>
-                        <td id='superuser'>
-                            {% if login in superUserLogins %}
-                                <img src='plugins/UsersManager/images/ok.png' class='accessGranted'
-                                     ng-click='manageSuperUser.removeSuperUserAccess({{ login|json_encode}})' />
-                            {% endif %}
-                            {% if not (login in superUserLogins) %}
-                                <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
-                                     ng-click='manageSuperUser.giveSuperUserAccess({{ login|json_encode }})' />
-                            {% endif %}
-                            &nbsp;
-                        </td>
-                    </tr>
-                {% endfor %}
-            {% else %}
-                <tr>
-                    <td colspan="3">
-                        {{ 'UsersManager_NoUsersExist'|translate }}
-                    </td>
-                </tr>
-            {% endif %}
-            </tbody>
-        </table>
-
-        <div class="ui-confirm" id="superUserAccessConfirm">
-            <h2> </h2>
-            <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-            <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
-        </div>
-
-    </div>
-</div>
-
-{% endif %}
-{% endblock %}
+<piwik-users-manager
+    initial-site-id="{{ idSiteSelected }}"
+    initial-site-name="{{ defaultReportSiteName }}"
+    current-user-role="'{{ currentUserRole }}'"
+    access-levels="{{ accessLevels|json_encode|e('html_attr') }}"
+    filter-access-levels="{{ filterAccessLevels|json_encode|e('html_attr') }}"
+>
+</piwik-users-manager>
 
 {% endblock %}