fix many ui tests

10 files changed, 111 insertions, 56 deletions

diff --git a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js
index 79e1da49bf..ea248e1360 100644
--- a/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js
+++ b/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.js
@@ -20,9 +20,13 @@
  * <h2 piwik-enriched-headline edit-url="index.php?module=Foo&action=bar&id=4">All Websites Dashboard</h2>
  * -> makes the headline clickable linking to the specified url
  *
+ * <h2 piwik-enriched-headline inline-help="inlineHelp">Pages report</h2>
+ * -> inlineHelp specified via a attribute shows help icon on headline hover
+ *
  * <h2 piwik-enriched-headline>All Websites Dashboard
  *     <div class="inlineHelp">My <strong>inline help</strong></div>
  * </h2>
+ * -> alternative definition for inline help
  * -> shows help icon to display inline help on click. Note: You can combine inlinehelp and help-url
  */
 (function () {
@@ -33,7 +37,8 @@
     function piwikEnrichedHeadline($document, piwik, $filter){
         var defaults = {
             helpUrl: '',
-            editUrl: ''
+            editUrl: '',
+            inlineHelp: ''
         };
 
         return {
@@ -42,7 +47,8 @@
             scope: {
                 helpUrl: '@',
                 editUrl: '@',
-                featureName: '@'
+                featureName: '@',
+                inlineHelp: '@'
             },
             templateUrl: 'plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html?cb=' + piwik.cacheBuster,
             compile: function (element, attrs) {
@@ -52,19 +58,16 @@
                 }
 
                 return function (scope, element, attrs) {
+                    if (!scope.inlineHelp) {
 
-                    var helpNode = $('[ng-transclude] .inlineHelp', element);
-
-                    if ((!helpNode || !helpNode.length) && element.next()) {
-                        // hack for reports :(
-                        helpNode = element.next().find('.reportDocumentation');
-                    }
+                        var helpNode = $('[ng-transclude] .inlineHelp', element);
 
-                    if (helpNode && helpNode.length) {
-                        if ($.trim(helpNode.text())) {
-                            scope.inlineHelp = $.trim(helpNode.html());
+                        if (helpNode && helpNode.length) {
+                            if ($.trim(helpNode.text())) {
+                                scope.inlineHelp = $.trim(helpNode.html());
+                            }
+                            helpNode.remove();
                         }
-                        helpNode.remove();
                     }
 
                     if (!attrs.featureName) {
diff --git a/plugins/CoreHome/angularjs/reporting-page/reportingpage.controller.js b/plugins/CoreHome/angularjs/reporting-page/reportingpage.controller.js
index cf0d424b55..3fe5955dc7 100644
--- a/plugins/CoreHome/angularjs/reporting-page/reportingpage.controller.js
+++ b/plugins/CoreHome/angularjs/reporting-page/reportingpage.controller.js
@@ -26,6 +26,18 @@
             currentCategory = category;
             currentSubcategory = subcategory;
 
+            if (category === 'Dashboard_Dashboard' && $.isNumeric(subcategory) && $('[piwik-dashboard]').length) {
+                // hack to make loading of dashboards faster since all the information is already there in the
+                // piwik-dashboard widget, we can let the piwik-dashboard widget render the page. We need to find
+                // a proper solution for this. A workaround for now could be an event or something to let other
+                // components render a specific page.
+                $scope.loading = false;
+                var element = $('[piwik-dashboard]');
+                var scope = angular.element(element).scope();
+                scope.fetchDashboard(parseInt(subcategory, 10));
+                return;
+            }
+
             pageModel.fetchPage(category, subcategory).then(function () {
                 $scope.hasNoPage = !pageModel.page;
                 $scope.loading = false;
diff --git a/plugins/CoreHome/angularjs/widget/widget.directive.html b/plugins/CoreHome/angularjs/widget/widget.directive.html
index 86cdc91291..d75b273d9d 100644
--- a/plugins/CoreHome/angularjs/widget/widget.directive.html
+++ b/plugins/CoreHome/angularjs/widget/widget.directive.html
@@ -7,6 +7,7 @@
     <h2 ng-if="!widget.parameters.widget && widget.name && !widgetized"
         piwik-enriched-headline
         ng-class="{'noTopMargin': widget.isFirstInPage}"
+        inline-help="{{widget.documentation}}"
         feature-name="{{widget.name}}">{{widget.name}}</h2>
     <h2 ng-if="widget.parameters.widget && widget.name && !widgetized">{{widget.name}}</h2>
 
diff --git a/plugins/CoreHome/angularjs/widget/widget.directive.js b/plugins/CoreHome/angularjs/widget/widget.directive.js
index 86574870f2..8f2bd2e25d 100644
--- a/plugins/CoreHome/angularjs/widget/widget.directive.js
+++ b/plugins/CoreHome/angularjs/widget/widget.directive.js
@@ -29,16 +29,15 @@
 (function () {
     angular.module('piwikApp').directive('piwikWidget', piwikWidget);
 
-    piwikWidget.$inject = ['piwik', 'piwikApi'];
+    piwikWidget.$inject = ['piwik', 'piwikApi', 'reportMetadataModel'];
 
-    function piwikWidget(piwik, piwikApi){
+    function piwikWidget(piwik, piwikApi, reportMetadataModel){
 
         function findContainerWidget(containerId, scope) {
             widgetsHelper.getAvailableWidgets(function (categorizedWidgets) {
 
                 angular.forEach(categorizedWidgets, function (widgets) {
                     angular.forEach(widgets, function (widget) {
-
                         if (widget && widget.isContainer && widget.parameters.containerId === containerId) {
                             widget = angular.copy(widget);
                             if (scope.widgetized) {
@@ -57,6 +56,16 @@
             });
         }
 
+        function addReportDocumentationIfPossible(widget)
+        {
+            if (widget && widget.isReport && !widget.documentation) {
+                var report = reportMetadataModel.findReport(widget.module, widget.action);
+                if (report && report.documentation) {
+                    widget.documentation = report.documentation;
+                }
+            }
+        }
+
         function applyMiddleware(scope)
         {
             if (!scope.widget.middlewareParameters) {
@@ -82,6 +91,7 @@
 
                 return function (scope, element, attrs, ngModel) {
                     if (scope.widget) {
+                        addReportDocumentationIfPossible(scope.widget);
                         applyMiddleware(scope);
                     } else if (attrs.containerid) {
                         findContainerWidget(attrs.containerid, scope);
diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
index 359c0f9768..38a0b9d97e 100644
--- a/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
+++ b/plugins/CoreVisualizations/templates/_dataTableViz_sparklines.twig
@@ -12,6 +12,7 @@
         {% endfor %}
 
 {% if not isWidget %}
+        <br style="clear:left"/>
     </div>
     <div class="col-md-6">
 {% endif %}
@@ -22,6 +23,8 @@
             {% endif %}
         {% endfor %}
 
+        <br style="clear:left"/>
+
 {% if not isWidget %}
     </div>
 </div>
diff --git a/plugins/Dashboard/angularjs/dashboard/dashboard.directive.js b/plugins/Dashboard/angularjs/dashboard/dashboard.directive.js
index 9af79047f7..60031e80d3 100644
--- a/plugins/Dashboard/angularjs/dashboard/dashboard.directive.js
+++ b/plugins/Dashboard/angularjs/dashboard/dashboard.directive.js
@@ -52,7 +52,10 @@
         }
 
         function fetchDashboard(dashboardId) {
-            $('#dashboardWidgetsArea').innerHTML ='';
+            var dashboardElement = $('#dashboardWidgetsArea');
+            dashboardElement.dashboard('destroyWidgets');
+            dashboardElement.empty();
+            globalAjaxQueue.abort();
 
             var getDashboard = dashboardsModel.getDashboard(dashboardId);
             var getLayout = dashboardsModel.getDashboardLayout(dashboardId);
@@ -87,9 +90,10 @@
 
                 fetchDashboard(scope.dashboardid);
 
-                function onLocationChange(event, url1, url2)
+                function onLocationChange(event, newUrl, oldUrl)
                 {
-                   if (url1 !== url2) {
+                   if (newUrl !== oldUrl && newUrl.indexOf('category=Dashboard_Dashboard') === -1) {
+                       // we remove the dashboard only if we no longer show a dashboard.
                        clearDashboard();
                    }
                 }
diff --git a/plugins/Dashboard/javascripts/dashboard.js b/plugins/Dashboard/javascripts/dashboard.js
index 196196ea5b..582ad1b79a 100644
--- a/plugins/Dashboard/javascripts/dashboard.js
+++ b/plugins/Dashboard/javascripts/dashboard.js
@@ -27,6 +27,7 @@ function createDashboard() {
             function (id) {
                 angular.element(document).injector().invoke(function ($location, reportingMenuModel, dashboardsModel) {
                     dashboardsModel.reloadAllDashboards().then(function () {
+
                         $('#dashboardWidgetsArea').dashboard('loadDashboard', id);
                         $('#dashboardWidgetsArea').dashboard('rebuildMenu');
                     });
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index b1da76c099..3bdd50662c 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -70,26 +70,32 @@
         destroy: function () {
             $(dashboardElement).remove();
             dashboardElement = null;
-            var widgets = $('[widgetId]');
-            for (var i = 0; i < widgets.length; i++) {
-                $(widgets[i]).dashboardWidget('destroy');
-            }
+            destroyWidgets();
         },
 
+        destroyWidgets: destroyWidgets,
+
         /**
          * Load dashboard with the given id
          *
          * @param {int} dashboardIdToLoad
          */
         loadDashboard: function (dashboardIdToLoad) {
+
             $(dashboardElement).empty();
             dashboardName = '';
             dashboardLayout = null;
             dashboardId = dashboardIdToLoad;
 
-            var element = $('[piwik-dashboard]');
-            var scope = angular.element(element).scope();
-            scope.fetchDashboard(dashboardIdToLoad);
+            if (piwikHelper.isAngularRenderingThePage()) {
+                angular.element(document).injector().invoke(function ($location) {
+                    $location.search('subcategory', '' + dashboardIdToLoad);
+                });
+            } else {
+                var element = $('[piwik-dashboard]');
+                var scope = angular.element(element).scope();
+                scope.fetchDashboard(dashboardIdToLoad);
+            }
 
             return this;
         },
@@ -178,12 +184,30 @@
         },
 
         rebuildMenu: rebuildMenu,
-
         /**
          * Removes the current dashboard
          */
         removeDashboard: function () {
-            removeDashboard();
+            if (dashboardId == 1) {
+                return; // dashboard with id 1 should never be deleted, as it is the default
+            }
+
+            var ajaxRequest = new ajaxHelper();
+            ajaxRequest.setLoadingElement();
+            ajaxRequest.addParams({
+                module: 'Dashboard',
+                action: 'removeDashboard',
+                idDashboard: dashboardId
+            }, 'get');
+            ajaxRequest.setCallback(
+                function () {
+                    methods.loadDashboard.apply(this, [1]);
+                    rebuildMenu();
+                }
+            );
+            ajaxRequest.withTokenInUrl();
+            ajaxRequest.setFormat('html');
+            ajaxRequest.send(true);
         },
 
         /**
@@ -201,6 +225,14 @@
         }
     };
 
+    function destroyWidgets()
+    {
+        var widgets = $('[widgetId]');
+        for (var i = 0; i < widgets.length; i++) {
+            $(widgets[i]).dashboardWidget('destroy');
+        }
+    }
+
     function removeNonExistingWidgets(availableWidgets, layout)
     {
         var existingModuleAction = {};
@@ -490,7 +522,7 @@
      */
     function rebuildMenu() {
 
-        if ($('[piwik-reporting-menu]').length) {
+        if (piwikHelper.isAngularRenderingThePage()) {
             // dashboard in reporting page (regular Piwik UI)
             angular.element(document).injector().invoke(function (reportingMenuModel) {
                 reportingMenuModel.reloadMenuItems();
@@ -541,7 +573,6 @@
                 methods.loadDashboard.apply(_self, [idDashboard]);
 
                 $(this).closest('li').addClass('active');
-
             });
         };
 
@@ -611,32 +642,6 @@
     }
 
     /**
-     * Removes the current dashboard
-     */
-    function removeDashboard() {
-        if (dashboardId == 1) {
-            return; // dashboard with id 1 should never be deleted, as it is the default
-        }
-
-        var ajaxRequest = new ajaxHelper();
-        ajaxRequest.setLoadingElement();
-        ajaxRequest.addParams({
-            module: 'Dashboard',
-            action: 'removeDashboard',
-            idDashboard: dashboardId
-        }, 'get');
-        ajaxRequest.setCallback(
-            function () {
-                rebuildMenu();
-                methods.loadDashboard.apply(this, [1]);
-            }
-        );
-        ajaxRequest.withTokenInUrl();
-        ajaxRequest.setFormat('html');
-        ajaxRequest.send(true);
-    }
-
-    /**
      * Make plugin methods available
      */
     $.fn.dashboard = function (method) {
diff --git a/plugins/Dashboard/javascripts/dashboardWidget.js b/plugins/Dashboard/javascripts/dashboardWidget.js
index 29f0a3a794..b3e78dcea3 100755
--- a/plugins/Dashboard/javascripts/dashboardWidget.js
+++ b/plugins/Dashboard/javascripts/dashboardWidget.js
@@ -121,7 +121,12 @@
                 var $widgetContent = $('.widgetContent', currentWidget);
 
                 $widgetContent.html(loadedContent);
-                piwikHelper.compileAngularComponents($widgetContent);
+
+                if (currentWidget.parents('body').size()) {
+                    // there might be race conditions, eg widget might be just refreshed while whole dashboard is also
+                    // removed from DOM
+                    piwikHelper.compileAngularComponents($widgetContent);
+                }
                 $widgetContent.removeClass('loading');
                 $widgetContent.trigger('widget:create', [self]);
             }
diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index ca88cee2d5..48c1bb8eba 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -132,6 +132,17 @@ var piwikHelper = {
     },
 
     /**
+     * Detects whether angular is rendering the page. If so, the page will be reloaded automatically
+     * via angular as soon as it detects a $locationChange
+     *
+     * @returns {number|jQuery}
+     */
+    isAngularRenderingThePage: function ()
+    {
+        return $('[piwik-reporting-page]').length;
+    },
+
+    /**
      * Displays a Modal dialog. Text will be taken from the DOM node domSelector.
      * Given callback handles will be mapped to the buttons having a role attriute
      *