🎨 [Frontend] Allow users copy OEC

packages/service-library/src/servicelib/aiohttp/rest_middlewares.py

@@ -26,8 +26,7 @@
 DEFAULT_API_VERSION = "v0"
 _FMSG_INTERNAL_ERROR_USER_FRIENDLY_WITH_OEC = (
     "We apologize for the inconvenience. "
-    "Our team has recorded the issue [SupportID={error_code}]. "
-    "If the issue persists please report it."
+    "The issue has been recorded, please report it if it persists."
 )
 
 

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

@@ -86,7 +86,34 @@ qx.Class.define("osparc.FlashMessenger", {
         console.error(error);
       }
       const msg = this.extractMessage(error, defaultMessage);
-      return this.getInstance().logAs(msg, "ERROR", duration);
+      const flashMessage = this.getInstance().logAs(msg, "ERROR", duration);
+      if (error && error["supportId"]) {
+        flashMessage.addWidget(this.__createCopyEOCWidget(msg, error["supportId"]));
+      }
+      return flashMessage;
+    },
+
+    __createCopyEOCWidget: function(message, supportId) {
+      const errorLabel = new qx.ui.basic.Atom().set({
+        label: supportId,
+        icon: "@FontAwesome5Solid/copy/10",
+        iconPosition: "right",
+        gap: 8,
+        cursor: "pointer",
+        alignX: "center",
+        allowGrowX: true,
+      });
+      errorLabel.addListener("tap", () => {
+        const dataToClipboard = {
+          message,
+          supportId,
+          timestamp: new Date().toString(),
+          url: window.location.href,
+          studyId: osparc.store.Store.getInstance().getCurrentStudy() ? osparc.store.Store.getInstance().getCurrentStudy().getUuid() : "",
+        }
+        osparc.utils.Utils.copyTextToClipboard(JSON.stringify(dataToClipboard));
+      });
+      return errorLabel;
     },
   },
 
@@ -143,14 +170,9 @@ qx.Class.define("osparc.FlashMessenger", {
       }
       this.__displayedMessagesCount++;
 
-      let duration = flashMessage.getDuration();
-      if (duration === null) {
-        const message = flashMessage.getMessage();
-        const wordCount = message.split(" ").length;
-        duration = Math.max(5500, wordCount*500); // An average reader takes 300ms to read a word
-      }
+      const duration = flashMessage.getDuration();
       if (duration !== 0) {
-        qx.event.Timer.once(() => this.removeMessage(flashMessage), this, duration);
+        flashMessage.timer = setTimeout(() => this.removeMessage(flashMessage), duration);
       }
     },
 

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.VBox(15));
+    this._setLayout(new qx.ui.layout.VBox(10));
 
     this.set({
       padding: 18,
@@ -48,14 +48,13 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
       textColor: this.self().LOG_LEVEL_COLOR_MAP[level].color
     });
 
-    if (message) {
-      this.setMessage(message);
-    }
+    this.setMessage(message);
 
-    // also support duration 0: the message won't be automatically removed
-    if (duration != null) {
-      this.setDuration(duration);
+    if ([null, undefined].includes(duration)) {
+      const wordCount = message.split(" ").length;
+      duration = Math.max(5500, wordCount*500); // An average reader takes 300ms to read a word
     }
+    this.setDuration(duration);
 
     this.getChildControl("closebutton");
   },
@@ -68,13 +67,14 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
 
     message: {
       check: "String",
-      nullable: true,
-      apply: "__applyMessage"
+      nullable: false,
+      apply: "__applyMessage",
     },
 
     duration: {
       check: "Number",
-      nullable: true
+      init: null,
+      nullable: true,
     }
   },
 
@@ -142,10 +142,7 @@ qx.Class.define("osparc.ui.message.FlashMessage", {
     },
 
     __applyMessage: function(value) {
-      const label = this.getChildControl("message");
-      if (label) {
-        label.setValue(value);
-      }
+      this.getChildControl("message").setValue(value);
     },
 
     addWidget: function(widget) {