fix initial dashboard widget loading

Author: sgiehl

core/Widget/WidgetConfig.php

@@ -126,6 +126,10 @@ public function getAction()
      * Sets (overwrites) the parameters of the widget. These parameters will be added to the URL when rendering the
      * widget. You can access these parameters via `Piwik\Common::getRequestVar(...)`.
      *
+     * This applies to widgets rendered through their controller/action request. Client-rendered widgets do not receive
+     * these parameters automatically and should instead derive request state from the browser context or load data via
+     * API requests.
+     *
      * @param array $parameters eg. ('urlparam' => 'urlvalue')
      * @return static
      */
@@ -139,6 +143,9 @@ public function setParameters($parameters)
     /**
      * Add new parameters and only overwrite parameters that have the same name. See {@link setParameters()}
      *
+     * Like {@link setParameters()}, these parameters are only used for widgets rendered through their
+     * controller/action request and are not forwarded automatically to client-rendered widgets.
+     *
      * @param  array $parameters eg. ('urlparam' => 'urlvalue')
      * @return static
      */
@@ -357,9 +364,13 @@ public function getMiddlewareParameters()
     /**
      * Marks this widget as client-rendered by a Vue component exported by the given plugin bundle.
      *
+     * Client-rendered widgets do not execute the widget controller/action in a separate request before rendering.
+     * They should derive dynamic state from the current browser request or load data through API requests instead.
+     *
      * @param string $plugin eg 'Transitions'
      * @param string $component eg 'TransitionsPage'
      * @return static
+     * @since 5.10.0
      */
     public function setClientSideComponent(string $plugin, string $component)
     {
@@ -373,17 +384,23 @@ public function setClientSideComponent(string $plugin, string $component)
 
     /**
      * Returns the configured client-rendered component definition.
+     * @return array{}|array{plugin: string, name: string}
+     * @since 5.10.0
      */
     public function getClientSideComponent(): array
     {
         return $this->clientSideComponent;
     }
 
     /**
-     * Sets props that should be passed to the client-rendered Vue widget.
+     * Sets static props that should be passed to the client-rendered Vue widget.
+     *
+     * Use this for configuration known when the widget is registered. Request-specific widget parameters are not
+     * forwarded to client-rendered widgets through this mechanism.
      *
      * @param array $props
      * @return static
+     * @since 5.10.0
      */
     public function setClientSideProps(array $props)
     {
@@ -394,6 +411,8 @@ public function setClientSideProps(array $props)
 
     /**
      * Returns props configured for the client-rendered Vue widget.
+     * @return array
+     * @since 5.10.0
      */
     public function getClientSideProps(): array
     {

plugins/CoreHome/vue/src/Widget/ClientWidgetRenderer.vue

@@ -107,6 +107,7 @@ export default defineComponent({
 
         this.componentToRender = markRaw(component as Component);
       } catch (e) {
+        console.error(e);
         this.loadingFailed = true;
       } finally {
         this.loading = false;

plugins/Dashboard/javascripts/widgetMenu.js

@@ -20,6 +20,16 @@ widgetsHelper.firstGetAvailableWidgetsCall = null;
  */
 widgetsHelper.getAvailableWidgets = function (callback) {
 
+    if (!widgetsHelper.availableWidgets && widgetsHelper.firstGetAvailableWidgetsCall) {
+        widgetsHelper.firstGetAvailableWidgetsCall.then(function () {
+            if (callback) {
+                callback(widgetsHelper.availableWidgets);
+            }
+        });
+
+        return widgetsHelper.firstGetAvailableWidgetsCall;
+    }
+
     function mergeCategoriesAndSubCategories(availableWidgets)
     {
         var categorized = {};
@@ -113,6 +123,8 @@ widgetsHelper.getAvailableWidgets = function (callback) {
         callback(widgetsHelper.availableWidgets);
       }
     });
+
+    return promise;
 };
 
 /**
@@ -121,6 +133,7 @@ widgetsHelper.getAvailableWidgets = function (callback) {
  */
 widgetsHelper.clearAvailableWidgets = function () {
     delete widgetsHelper.availableWidgets;
+    widgetsHelper.firstGetAvailableWidgetsCall = null;
 };
 
 /**
@@ -131,17 +144,25 @@ widgetsHelper.clearAvailableWidgets = function () {
  */
 widgetsHelper.getWidgetObjectFromUniqueId = function (uniqueId, callback) {
     widgetsHelper.getAvailableWidgets(function(widgets){
-        for (var widgetCategory in widgets) {
-            var widgetInCategory = widgets[widgetCategory];
-            for (var i in widgetInCategory) {
-                if (widgetInCategory[i]["uniqueId"] == uniqueId) {
-                    callback(widgetInCategory[i]);
-                    return;
-                }
+        callback(widgetsHelper.findWidgetObjectFromUniqueId(uniqueId, widgets));
+    });
+};
+
+widgetsHelper.findWidgetObjectFromUniqueId = function (uniqueId, widgets) {
+    if (!widgets) {
+        return false;
+    }
+
+    for (var widgetCategory in widgets) {
+        var widgetInCategory = widgets[widgetCategory];
+        for (var i in widgetInCategory) {
+            if (widgetInCategory[i]["uniqueId"] == uniqueId) {
+                return widgetInCategory[i];
             }
         }
-        callback(false);
-    });
+    }
+
+    return false;
 };
 
 /**
@@ -174,51 +195,76 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
 
     widgetParameters['widget'] = 1;
 
-    var clientWidgetRequest = {
-        abort: function () {}
+    var widgetRequest = {
+        aborted: false,
+        ajaxRequest: null,
+        abort: function () {
+            this.aborted = true;
+            if (this.ajaxRequest) {
+                this.ajaxRequest.abort();
+            }
+        }
     };
 
-    var clientWidget = null;
-    if (widgetsHelper.availableWidgets) {
-        for (var widgetCategory in widgetsHelper.availableWidgets) {
-            if (!widgetsHelper.availableWidgets.hasOwnProperty(widgetCategory)) {
-                continue;
+    function loadLegacyWidget() {
+        if (widgetRequest.aborted) {
+            return;
+        }
+
+        var ajaxRequest = new ajaxHelper();
+        ajaxRequest.addParams(widgetParameters, 'get');
+        ajaxRequest.setCallback(function () {
+            if (widgetRequest.aborted) {
+                return;
             }
 
-            var widgets = widgetsHelper.availableWidgets[widgetCategory];
-            for (var index in widgets) {
-                if (widgets.hasOwnProperty(index) && widgets[index]["uniqueId"] == widgetUniqueId) {
-                    clientWidget = widgets[index];
-                    break;
+            onWidgetLoadedCallback.apply(this, arguments);
+        });
+        if (onWidgetErrorCallback) {
+            ajaxRequest.setErrorCallback(function () {
+                if (widgetRequest.aborted) {
+                    return;
                 }
-            }
 
-            if (clientWidget) {
-                break;
-            }
+                onWidgetErrorCallback.apply(this, arguments);
+            });
         }
+        ajaxRequest.setFormat('html');
+        ajaxRequest.send();
+        widgetRequest.ajaxRequest = ajaxRequest;
     }
 
-    if (clientWidget && clientWidget.clientComponent) {
-        clientWidget = $.extend(true, {}, clientWidget);
-        clientWidget.parameters = $.extend({}, clientWidget.parameters, widgetParameters);
+    var metadataReady = widgetsHelper.availableWidgets
+        ? Promise.resolve()
+        : widgetsHelper.getAvailableWidgets();
 
-        var html = '<div vue-entry="CoreHome.Widget"'
-            + ' widget="' + piwikHelper.htmlEntities(JSON.stringify(clientWidget)) + '"'
-            + ' widgetized="true"></div>';
-        onWidgetLoadedCallback(html);
-        return clientWidgetRequest;
-    }
+    metadataReady.then(function () {
+        if (widgetRequest.aborted) {
+            return;
+        }
 
-    var ajaxRequest = new ajaxHelper();
-    ajaxRequest.addParams(widgetParameters, 'get');
-    ajaxRequest.setCallback(onWidgetLoadedCallback);
-    if (onWidgetErrorCallback) {
-        ajaxRequest.setErrorCallback(onWidgetErrorCallback);
-    }
-    ajaxRequest.setFormat('html');
-    ajaxRequest.send();
-    return ajaxRequest;
+        var clientWidget = widgetsHelper.findWidgetObjectFromUniqueId(
+            widgetUniqueId,
+            widgetsHelper.availableWidgets
+        );
+
+        if (clientWidget && clientWidget.clientComponent) {
+            clientWidget = $.extend(true, {}, clientWidget);
+            clientWidget.parameters = $.extend({}, clientWidget.parameters, widgetParameters);
+
+            var html = '<div vue-entry="CoreHome.Widget"'
+                + ' widget="' + piwikHelper.htmlEntities(JSON.stringify(clientWidget)) + '"'
+                + ' widgetized="true"></div>';
+            onWidgetLoadedCallback(html);
+            return;
+        }
+
+        loadLegacyWidget();
+    }).catch(function () {
+        loadLegacyWidget();
+    });
+
+    return widgetRequest;
 };
 
 (function ($, require) {