🎨 [Frontend] e2e: Add test ids to version selector in Service Browser

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

@@ -214,6 +214,7 @@ qx.Class.define("osparc.ErrorPage", {
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
       const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Support", null, qx.locale.Manager.tr("Please send us an email to:"));
       const mailto = osparc.store.Support.getMailToLabel(supportEmail, "Access error");
+      mailto.setTextAlign("center");
       giveEmailFeedbackWindow.addWidget(mailto);
       giveEmailFeedbackWindow.open();
     },

services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

@@ -239,6 +239,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       });
       hBox.add(versionLabel);
       const versionsBox = new osparc.ui.toolbar.SelectBox();
+      osparc.utils.Utils.setIdToWidget(versionsBox, "serviceSelectBox");
       hBox.add(versionsBox);
 
 

services/static-webserver/client/source/class/osparc/info/ServiceUtils.js

@@ -86,12 +86,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
       * @param serviceData {Object} Serialized Service Object
       */
     createContact: function(serviceData) {
-      const contact = new qx.ui.basic.Label();
-      contact.set({
-        value: osparc.store.Support.mailToText(serviceData["contact"], (serviceData["name"] + ":" + serviceData["version"])),
-        selectable: true,
-        rich: true
-      });
+      const contact = osparc.store.Support.getMailToLabel(serviceData["contact"], serviceData["name"] + ":" + serviceData["version"]);
       return contact;
     },
 

services/static-webserver/client/source/class/osparc/product/AboutProduct.js

@@ -162,7 +162,7 @@ qx.Class.define("osparc.product.AboutProduct", {
     __getMailTo: function() {
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
       const productName = osparc.store.StaticInfo.getInstance().getDisplayName();
-      return osparc.store.Support.mailToText(supportEmail, "Support " + productName, false);
+      return osparc.store.Support.mailToLink(supportEmail, "Support " + productName, false);
     },
 
     __addCopyright: function() {

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

@@ -66,6 +66,7 @@ qx.Class.define("osparc.product.quickStart.Utils", {
       const label = new qx.ui.basic.Label().set({
         rich: true,
         wrap: true,
+        selectable: true,
         font: "text-14"
       });
       if (text) {

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

@@ -207,6 +207,7 @@ qx.Class.define("osparc.service.Utils", {
     versionToListItem: function(key, version) {
       const versionDisplay = this.getVersionDisplay(key, version);
       const listItem = new qx.ui.form.ListItem(versionDisplay);
+      osparc.utils.Utils.setIdToWidget(listItem, "serviceVersionItem_" + versionDisplay);
       listItem.version = version;
       return listItem;
     },

services/static-webserver/client/source/class/osparc/store/Support.js

@@ -132,21 +132,21 @@ qx.Class.define("osparc.store.Support", {
       });
     },
 
-    mailToText: function(email, subject, centered = true) {
+    mailToLink: function(email, subject, centered = true) {
       const color = qx.theme.manager.Color.getInstance().resolve("text");
-      let textLink = `<a href="mailto:${email}?subject=${subject}" style='color: ${color}' target='_blank'>${email}</a>&nbsp&nbsp`;
+      let textLink = `<a href="mailto:${email}?subject=${subject}" style='color: ${color}' target='_blank'>${email}</a>`;
       if (centered) {
         textLink = `<center>${textLink}</center>`
       }
       return textLink;
     },
 
     getMailToLabel: function(email, subject) {
-      const mailto = new qx.ui.basic.Label(this.mailToText(email, subject)).set({
-        alignX: "center",
+      const mailto = new qx.ui.basic.Label(this.mailToLink(email, subject, false)).set({
         font: "text-14",
+        allowGrowX: true, // let it grow to make it easier to select
         selectable: true,
-        rich: true
+        rich: true,
       });
       return mailto;
     },
@@ -155,6 +155,7 @@ qx.Class.define("osparc.store.Support", {
       const productName = osparc.product.Utils.getProductName();
       const giveEmailFeedbackWindow = new osparc.ui.window.Dialog("Feedback", null, qx.locale.Manager.tr("Please send us an email to:"));
       const mailto = this.getMailToLabel(email, productName + " feedback");
+      mailto.setTextAlign("center");
       giveEmailFeedbackWindow.addWidget(mailto);
       giveEmailFeedbackWindow.open();
     },

services/static-webserver/client/source/class/osparc/ui/window/Dialog.js

@@ -81,7 +81,7 @@ qx.Class.define("osparc.ui.window.Dialog", {
       });
 
       this.__extraWidgetsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({
-        paddingTop: 15
+        paddingTop: 10
       });
       this.__extraWidgetsLayout.exclude();
       this.add(this.__extraWidgetsLayout, {

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

@@ -591,7 +591,7 @@ qx.Class.define("osparc.utils.Utils", {
       const manuals = osparc.store.Support.getManuals();
       const manualLink = (manuals && manuals.length) ? manuals[0].url : "";
       const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();
-      const mailto = osparc.store.Support.mailToText(supportEmail, "Request Account " + productName);
+      const mailto = osparc.store.Support.mailToLink(supportEmail, "Request Account " + productName);
       let msg = "";
       msg += qx.locale.Manager.tr("To use all ");
       msg += this.createHTMLLink(productName + " features", manualLink);