🎨 [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, but please report it if it persists."
 )
 
 

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

@@ -86,7 +86,66 @@ 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(flashMessage, error["supportId"]));
+      }
+      return flashMessage;
+    },
+
+    __createCopyEOCWidget: function(flashMessage, supportId) {
+      const widget = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
+        paddingLeft: 8,
+        paddingRight: 8,
+      });
+      const showErrorLabel = new qx.ui.basic.Atom().set({
+        label: qx.locale.Manager.tr("Show Support ID"),
+        icon: "@FontAwesome5Solid/chevron-right/10",
+        cursor: "pointer",
+        visibility: "visible",
+      });
+      widget.add(showErrorLabel);
+      const hideErrorLabel = new qx.ui.basic.Atom().set({
+        label: qx.locale.Manager.tr("Hide Support ID"),
+        icon: "@FontAwesome5Solid/chevron-down/10",
+        cursor: "pointer",
+        visibility: "excluded",
+      });
+      widget.add(hideErrorLabel);
+      const minorDoc = new qx.ui.basic.Label().set({
+        value: qx.locale.Manager.tr("If you contact support, please include this Support ID so we can quickly locate the issue."),
+        rich: true,
+        wrap: true,
+        visibility: "excluded",
+      });
+      widget.add(minorDoc);
+      const errorLabel = new qx.ui.basic.Atom().set({
+        label: supportId,
+        icon: "@FontAwesome5Solid/copy/10",
+        cursor: "pointer",
+        visibility: "excluded",
+      });
+      widget.add(errorLabel);
+      showErrorLabel.addListener("tap", () => {
+        showErrorLabel.exclude();
+        hideErrorLabel.show();
+        minorDoc.show();
+        errorLabel.show();
+
+        if (flashMessage.timer) {
+          // let the user close it
+          clearTimeout(flashMessage.timer);
+          delete flashMessage.timer;
+        }
+      });
+      hideErrorLabel.addListener("tap", () => {
+        showErrorLabel.show();
+        hideErrorLabel.exclude();
+        minorDoc.exclude();
+        errorLabel.exclude();
+      });
+      errorLabel.addListener("tap", () => osparc.utils.Utils.copyTextToClipboard(supportId));
+      return widget;
     },
   },
 
@@ -143,14 +202,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) {