Better UI for Piwik 3, more responsive, faster, lots of other fixes (#10397)

* improved ui and responsiveness

* improve rss widget

* commit changes for ui again, got lost after the last commit

* fix more tests

* restoring files

* fix fonts

* fix more tests

* more test fixes

* fix some system tests

* fix tests

* fix system and ui tests

* fix updater tests

* make a page as loaded once the callback is called

* enable verbose

* more verbose output

* enable phantomjs debug flag

* debug should be a phantomjs option

* trying to fix installation tests

* fixes #10173 to not compile css files as less

* trying to minimize js/css requests to hopefully prevent random ui test fails

* disable verbose mode

* fix updater and installation

* lots of bugfixes and ui tweaks

* fix reset dashboard

* various bugfixes

* fix integration tests

* fix text color

* hoping to fix installation tests this way

* cache css/js resources for an hour, should speed up tests and prevent some random issues

* we need to avoid installing plugins multiple times at the same time when requesting resources

* finally getting the colors right again

* fix most tests, more tests for theme

* use an h2 element for titles for better accessibility

* fix headline color

* use actual theme text color (piwik-black)

* fix small font size was applied on all p elements

* fix tests

* now improving all the datatables

* trying to ignore images for visitor log

* Revert "trying to ignore images for visitor log"

This reverts commit ad1ff7267aae14ad905bef130e956c8593c4fb22.

* fix tests

* fix we had always ignored a max label width

* trying to fix file permissions

* fix more file permissions

* Improved plugins update API (#10028)

* refs #7983 let plugins add or remove fields to websites and better settings api

* * Hide CorePluginsAdmin API methods
* More documentation
* Added some more tests

* improved updates API for plugins

* better error code as duplicate column cannot really happen when not actually renaming a colum

Conflicts:
	core/Updates/3.0.0-b1.php
	plugins/CoreUpdater/Commands/Update/CliUpdateObserver.php

* fix DB field piwik_log_visit.location_provider too small (#10003)

* fixes #9564 fix DB field piwik_log_visit.location_provider too small

* use new plugins updater API

* DB field piwik_log_visit.visit_total_actions too small (#10002)

* fixes #9565 DB field piwik_log_visit.visit_total_actions too small

* change type of some db columns that are too small

* fix tests (#10040)
Conflicts:
	plugins/CoreAdminHome/Menu.php
	plugins/Goals/Menu.php
	plugins/MobileMessaging/Menu.php
	plugins/SitesManager/Menu.php
	plugins/UsersManager/Menu.php
	tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml

* fix more file permissions

* repair more file permissions

* repair more file permissions

* trying to make ui tests work again, the table was missing

* fix some encoding issues

* cross browser fixes and usability improvement

* move back the config icon, need to find a better solution later

* more cross browser fixes

* bugfixes

* fix ui tests

* fix encoding issue

* fix various issues with the ui tests when a test gets aborted

* also skip this visitor log test when aborted

* there were 3 css files that were loaded separately, merge them instead into one css

* forgot to add the actual manifest

* do not add manifest if custom logo is specified

* load font css files first as it was before merging them into big css

* fix link icon was not aligned anymore

* minor fixes

* setting it back to 4px

* in popovers the font variable was always ignored and a different font loaded

* forgot to update screenshots

* fix remaining tests

* this should fix an update error

* added 3 new widgets system check, system summary and plugin updates

* tweak new widgets content

* no page reload when changing date or segment

* in admin home show only enabled widgets

* refs #10295 use getMockBuilder instead of deprecated getMock

* fix some ui tests

* fix various bugs

* fix more tests

* fix ui tests

* add a space between loading image and loading message

* fix docs so they appear on developer.piwik.org

* improved documentation

* introduce new Widget::renderTemplate method for consistency with controllers

* remove no longer needed files

* testing system fonts

* fix strong was not really bold

* more useful system summary

* remove ubuntu font

* fix most tests and removed most em elements

* fix tests

* fix headline was very thin

* update submodule

* update submodules

* update submodule

* fix failing ui tests

* update submodules

1 files changed, 155 insertions, 108 deletions

diff --git a/plugins/UsersManager/templates/index.twig b/plugins/UsersManager/templates/index.twig
index d6f6edfdbd..b4f75df6cc 100644
--- a/plugins/UsersManager/templates/index.twig
+++ b/plugins/UsersManager/templates/index.twig
@@ -4,43 +4,51 @@
 
 {% block content %}
 
-<h2 piwik-enriched-headline
-    help-url="http://piwik.org/docs/manage-users/">{{ title }}</h2>
-<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"
-             siteid="{{ idSiteSelected }}"
-             sitename="{{ defaultReportSiteName }}"
-             all-sites-text="{{ applyAllSitesText|raw }}"
-             all-sites-location="top"
-             id="usersManagerSiteSelect"
-             switch-site-on-select="false"></div>
-    </section>
-</div>
+<div piwik-content-block
+     content-title="{{ title|e('html_attr') }}"
+     feature="true"
+     style="width:800px;"
+     help-url="https://piwik.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 %}
+    {% block websiteAccessTable %}
 
-{% import 'ajaxMacros.twig' as ajax %}
-{{ ajax.errorDiv }}
-{{ ajax.loadingDiv }}
+    {% import 'ajaxMacros.twig' as ajax %}
+
+    <div piwik-activity-indicator class="loadingManageUserAccess" loading="manageUserAccess.isLoading"></div>
+    <div id="accessUpdated" style="vertical-align:top;"></div>
 
-<div class="entityContainer" style="width:600px;margin-top:16px;">
     {% if anonymousHasViewAccess %}
         <br/>
         <div class="alert alert-warning">
             {{ ['UsersManager_AnonymousUserHasViewAccess'|translate("'anonymous'","'view'"), 'UsersManager_AnonymousUserHasViewAccess2'|translate]|join(' ') }}
         </div>
     {% endif %}
-    <table class="entityTable dataTable" id="access" style="display:inline-table;width:550px;">
+
+    <table piwik-content-table id="manageUserAccess">
         <thead>
         <tr>
             <th class='first'>{{ 'UsersManager_User'|translate }}</th>
@@ -53,11 +61,11 @@
 
         <tbody>
         {% set accesValid %}<img src='plugins/UsersManager/images/ok.png' class='accessGranted' />{% endset %}
-        {% set accesInvalid %}<img src='plugins/UsersManager/images/no-access.png' class='updateAccess' />{% endset %}
         {% set superUserAccess %}<span title="{{ 'UsersManager_ExceptionSuperUserAccess'|translate }}">N/A</span>{% endset %}
+
         {% for login,access in usersAccessByWebsite %}
             {% if userIsSuperUser or (hasOnlyAdminAccess and (access!='noaccess' or idSiteSelected == 'all'))  %}
-            <tr>
+            <tr data-login="{{ login|e('html_attr') }}">
                 <td id='login'>{{ login }}</td>
                 <td>{{ usersAliasByLogin[login]|raw }}</td>
                 <td id='noaccess'>
@@ -66,7 +74,9 @@
                     {% elseif access=='noaccess' and idSiteSelected != 'all' %}
                         {{ accesValid }}
                     {% else %}
-                        {{ accesInvalid }}
+                        <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
+                             ng-click='manageUserAccess.setAccess({{ login|json_encode}}, "noaccess")'
+                        />
                     {% endif %}&nbsp;</td>
                 <td id='view'>
                     {% if login in superUserLogins %}
@@ -74,7 +84,9 @@
                     {% elseif access == 'view' and idSiteSelected != 'all' %}
                         {{ accesValid }}
                     {% else %}
-                        {{ accesInvalid }}
+                        <img src='plugins/UsersManager/images/no-access.png' class='updateAccess'
+                             ng-click='manageUserAccess.setAccess({{ login|json_encode}}, "view")'
+                        />
                     {% endif %}&nbsp;</td>
                 <td id='admin'>
                     {% if login in superUserLogins %}
@@ -82,7 +94,13 @@
                     {% elseif login == 'anonymous' %}
                         N/A
                     {% else %}
-                        {% if access == 'admin' and idSiteSelected != 'all' %}{{ accesValid }}{% else %}{{ accesInvalid }}{% endif %}&nbsp;
+                        {% 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")'
+                            />
+                        {% endif %}&nbsp;
                     {% endif %}
                 </td>
             </tr>
@@ -90,37 +108,47 @@
         {% endfor %}
         </tbody>
     </table>
-    <div id="accessUpdated" style="vertical-align:top;"></div>
-</div>
 
-{% if hasOnlyAdminAccess %}
-    <p>
-        <button id="showGiveViewAccessForm" class="add-user btn btn-lg btn-flat">
-            <span class="icon-add"></span>
-            {{ 'UsersManager_GiveViewAccessTitle'|translate('"' ~ defaultReportSiteName ~ '"')|raw }}
-        </button>
-    </p>
-    <form id="giveViewAccessForm">
-        <div class="form-group">
-            <input type="text" name="user_invite"
-                   id="user_invite"
-                   placeholder="{{ 'UsersManager_EnterUsernameOrEmail'|translate|e('html_attr') }}"
-                   title="{{ 'UsersManager_GiveViewAccessInstructions'|translate("'" ~ defaultReportSiteName ~ "'")|e('html_attr') }}">
+    {% 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">
 
-         <input class="btn" type="button" id="giveUserAccessToViewReports" value="{{ 'UsersManager_GiveViewAccess'|translate|e('html_attr') }}">
-    </form>
-    {{ ajax.errorDiv('ajaxErrorGiveViewAccess') }}
-    {{ ajax.loadingDiv('ajaxLoadingGiveViewAccess') }}
-{% endif %}
+        </div>
+    {% endif %}
+</div>
+</div>
 
 <div class="ui-confirm" id="confirm">
-    <h2>{{ 'UsersManager_ChangeAllConfirm'|translate("<span id='login'></span>")|raw }}</h2>
+    <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>
 
 {% 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 }}"/>
@@ -132,14 +160,14 @@
         <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
     </div>
     <br/>
-    <h2>{{ 'UsersManager_UsersManagement'|translate }}</h2>
     <p>{{ 'UsersManager_UsersManagementMainDescription'|translate }}
         {{ 'UsersManager_ThereAreCurrentlyNRegisteredUsers'|translate("<b>"~usersCount~"</b>")|raw }}</p>
     {% import 'ajaxMacros.twig' as ajax %}
-    {{ ajax.errorDiv('ajaxErrorUsersManagement') }}
-    {{ ajax.loadingDiv('ajaxLoadingUsersManagement') }}
-    <div class="user entityContainer" style="margin-bottom:50px;">
-        <table class="entityTable dataTable" id="users">
+
+    <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>
@@ -159,21 +187,24 @@
             {% for i,user in users %}
                 {% if user.login != 'anonymous' %}
                     <tr class="editable" id="row{{ i }}">
-                        <td id="userLogin" class="editable">{{ user.login }}</td>
-                        <td id="password" class="editable">-</td>
-                        <td id="email" class="editable">{{ user.email }}</td>
-                        <td id="alias" class="editable">{{ user.alias|raw }}</td>
-                        <td id="token_auth" class="token_auth" data-token="{{ user.token_auth }}">{{ user.token_auth|slice(0, 8) }}…</td>
+                        <td id="userLogin" class="editable" 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>
+                        <td id="token_auth_user" class="token_auth" data-token="{{ user.token_auth }}">{{ user.token_auth|slice(0, 8) }}…</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="text-center">
-                            <button class="edituser btn btn-flat" id="row{{ i }}" title="{{ 'General_Edit'|translate }}">
+                        <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="text-center">
-                            <button class="deleteuser btn btn-flat" id="row{{ i }}" title="{{ 'General_Delete'|translate }}">
+                        <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>
@@ -182,60 +213,76 @@
             {% endfor %}
             </tbody>
         </table>
-        <p>
-            <button class="add-user btn btn-lg btn-flat">
+
+        <div class="tableActionBar">
+            <button class="add-user" ng-click="manageUsers.createUser()" ng-show="manageUsers.showCreateUser">
                 <span class="icon-add"></span>
                 {{ 'UsersManager_AddUser'|translate }}
             </button>
-        </p>
+        </div>
     </div>
+</div>
 
-    <h2 id="super_user_access">{{ 'UsersManager_SuperUserAccessManagement'|translate }}</h2>
-    <p>{{ 'UsersManager_SuperUserAccessManagementMainDescription'|translate }} <br/>
-    {{ 'UsersManager_SuperUserAccessManagementGrantMore'|translate }}</p>
+<div piwik-content-block
+     id="super_user_access"
+     style="width:800px;"
+     content-title="{{ 'UsersManager_SuperUserAccessManagement'|translate|e('html_attr') }}">
 
-    {{ ajax.errorDiv('ajaxErrorSuperUsersManagement') }}
-    {{ ajax.loadingDiv('ajaxLoadingSuperUsersManagement') }}
+    <div ng-controller="ManageSuperUserController as manageSuperUser">
 
-    <table class="entityTable dataTable" id="superUserAccess" style="display:inline-table;width:400px;">
-        <thead>
-        <tr>
-            <th class='first'>{{ 'UsersManager_User'|translate }}</th>
-            <th>{{ 'UsersManager_Alias'|translate }}</th>
-            <th>{{ 'Installation_SuperUser'|translate }}</th>
-        </tr>
-        </thead>
+        <p>{{ 'UsersManager_SuperUserAccessManagementMainDescription'|translate }} <br/>
+        {{ 'UsersManager_SuperUserAccessManagementGrantMore'|translate }}</p>
 
-        <tbody>
-        {% if users|length > 1 %}
-            {% for login,alias in usersAliasByLogin if login != 'anonymous' %}
+        <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 }}</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 id='login'>{{ login }}</td>
-                    <td>{{ alias|raw }}</td>
-                    <td id='superuser' data-login="{{ login|e('html_attr') }}">
-                        <img src='plugins/UsersManager/images/ok.png' class='accessGranted' data-hasaccess="1" {% if not (login in superUserLogins) %}style="display:none"{% endif %} />
-                        <img src='plugins/UsersManager/images/no-access.png' class='updateAccess' data-hasaccess="0" {% if login in superUserLogins %}style="display:none"{% endif %} />
-                        &nbsp;
+                    <td colspan="3">
+                        {{ 'UsersManager_NoUsersExist'|translate }}
                     </td>
                 </tr>
-            {% endfor %}
-        {% else %}
-            <tr>
-                <td colspan="3">
-                    {{ 'UsersManager_NoUsersExist'|translate }}
-                </td>
-            </tr>
-        {% endif %}
-        </tbody>
-    </table>
+            {% endif %}
+            </tbody>
+        </table>
 
-    <div id="superUserAccessUpdated" style="vertical-align:top;"></div>
+        <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 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>
 
 {% endif %}
 {% endblock %}