✨ [Frontend] Force reload no-cache (ITISFoundation#6397)

Author: odeimaiz

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

@@ -33,9 +33,13 @@ 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).set({
+            maxWidth: 500
+          });
+          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);
+    },
   }
 });

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -249,6 +249,27 @@ qx.Class.define("osparc.utils.Utils", {
       // window.location.href = window.location.href.replace(/#.*$/, "");
     },
 
+    reloadNoCacheButton: function() {
+      const reloadButton = new qx.ui.form.Button().set({
+        label: qx.locale.Manager.tr("Reload"),
+        icon: "@FontAwesome5Solid/redo/16",
+        font: "text-16",
+        gap: 10,
+        appearance: "strong-button",
+        allowGrowX: false,
+        center: true,
+        alignX: "center",
+      });
+      reloadButton.addListener("execute", () => {
+        // this argument, which is passed and consumed by the boot.js init file,
+        // adds a `nocache=rand()` query argument to the js resource calls.
+        // This forces a hard reload
+        const noCacheUrl = window.location.href + "?qooxdoo:add-no-cache=true";
+        window.location.href = noCacheUrl;
+      });
+      return reloadButton;
+    },
+
     getUniqueStudyName: function(preferredName, list) {
       let title = preferredName;
       const existingTitles = list.map(study => study.name);