add reload button to Flash message

Author: odeimaiz

services/static-webserver/client/source/class/osparc/NewUITracker.js

@@ -33,9 +33,11 @@ qx.Class.define("osparc.NewUITracker", {
           let msg = "";
           msg += qx.locale.Manager.tr("A new version of the application is now available.");
           msg += "<br>";
-          msg += qx.locale.Manager.tr("Reload to get the latest features.");
+          msg += qx.locale.Manager.tr("Click the Reload button to get the latest features.");
           // permanent message
-          osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0);
+          const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, "INFO", 0);
+          const reloadButton = osparc.utils.Utils.reloadNoCacheButton();
+          flashMessage.addWidget(reloadButton);
           this.stopTracker();
         }
       };

services/static-webserver/client/source/class/osparc/ui/message/FlashMessage.js

@@ -31,7 +31,7 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
    */
   construct: function(message, level, duration) {
     this.base(arguments);
-    this._setLayout(new qx.ui.layout.HBox(15));
+    this._setLayout(new qx.ui.layout.VBox(15));
 
     this.set({
       padding: 18,
@@ -112,31 +112,34 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
   },
 
   members: {
-    __closeCb: null,
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
+        case "message-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(15));
+          this._add(control);
+          break;
         case "badge":
           control = new qx.ui.basic.Image().set({
             alignY: "middle"
           });
-          this._add(control);
+          this.getChildControl("message-layout").add(control);
           break;
         case "message":
           control = new qx.ui.basic.Label().set({
             font: "text-16",
             selectable: true,
             rich: true
           });
-          this._add(control, {
+          this.getChildControl("message-layout").add(control, {
             flex: 1
           });
           break;
         case "closebutton":
           control = new osparc.ui.basic.IconButton("@MaterialIcons/close/16", () => this.fireEvent("closeMessage")).set({
             alignY: "middle"
           });
-          this._add(control);
+          this.getChildControl("message-layout").add(control);
           break;
       }
       return control || this.base(arguments, id);
@@ -147,6 +150,10 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
       if (label) {
         label.setValue(value);
       }
-    }
+    },
+
+    addWidget: function(widget) {
+      this._add(widget);
+    },
   }
 });