🎨 [Frontend] Show default product thumbnail if resource's thumbnail is invalid (ITISFoundation#7341)

Author: odeimaiz

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

@@ -285,8 +285,7 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
     _applyThumbnail: function(value, old) {
       if (value.includes("@FontAwesome5Solid/")) {
         value += this.self().THUMBNAIL_SIZE;
-        const image = this.getChildControl("thumbnail").getChildControl("image");
-        image.set({
+        const image = this.getChildControl("thumbnail").set({
           source: value,
         });
 
@@ -297,13 +296,22 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           image.addListener(eventName, () => this.__fitThumbnailHeight(), this);
         });
       } else {
-        this.getContentElement().setStyles({
-          "background-image": `url(${value})`,
-          "background-repeat": "no-repeat",
-          "background-size": "cover", // auto width, 85% height
-          "background-position": "center center",
-          "background-origin": "border-box"
-        });
+        let source = osparc.product.Utils.getThumbnailUrl();
+        fetch(value, { method: "HEAD" })
+          .then(response => {
+            if (response.ok) {
+              source = value;
+            }
+          })
+          .finally(() => {
+            this.getContentElement().setStyles({
+              "background-image": `url(${source})`,
+              "background-repeat": "no-repeat",
+              "background-size": "cover", // auto width, 85% height
+              "background-position": "center center",
+              "background-origin": "border-box"
+            });
+          });
       }
     },
 

services/static-webserver/client/source/class/osparc/ui/basic/Thumbnail.js

@@ -83,7 +83,11 @@ qx.Class.define("osparc.ui.basic.Thumbnail", {
     __applySource: function(val) {
       const image = this.getChildControl("image");
       if (val) {
-        image.setSource(val);
+        if (osparc.utils.Utils.isValidHttpUrl(val)) {
+          osparc.utils.Utils.setUrlSourceToImage(image, val);
+        } else {
+          image.setSource(val);
+        }
       }
     },
 

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

@@ -91,6 +91,17 @@ qx.Class.define("osparc.utils.Utils", {
 
     FLOATING_Z_INDEX: 1000001 + 1,
 
+    setUrlSourceToImage: function(image, imgSrc) {
+      let source = osparc.product.Utils.getThumbnailUrl();
+      fetch(imgSrc, { method: "HEAD" })
+        .then(response => {
+          if (response.ok) {
+            source = imgSrc;
+          }
+        })
+        .finally(() => image.setSource(source));
+    },
+
     addWhiteSpaces: function(integer) {
       return new Intl.NumberFormat("fr-FR").format(integer); // french will add white spaces every 3 digits
     },

services/static-webserver/client/source/resource/osparc/ui_config.json

@@ -21,36 +21,32 @@
         "expectedTemplateLabel": "mcTI Planning Tool",
         "title": "Multichannel TI",
         "newStudyLabel": "Multichannel TI",
-        "category": "precomputed",
-        "idToWidget": "newMTIPlanButton"
+        "category": "precomputed"
       }, {
         "resourceType": "template",
         "expectedTemplateLabel": "pmTI Planning Tool",
         "title": "Phase-modulation TI",
         "newStudyLabel": "Phase-modulation TI",
-        "category": "precomputed",
-        "idToWidget": "newPMTIPlanButton"
+        "category": "precomputed"
       }, {
         "resourceType": "template",
         "expectedTemplateLabel": "personalized TI Planning Tool",
         "title": "Personalized<br>Classic TI",
         "newStudyLabel": "Personalized Classic TI",
         "category": "personalized",
-        "idToWidget": "personalizationNewTIPlanButton"
+        "idToWidget": "newPTIPlanButton"
       }, {
         "resourceType": "template",
         "expectedTemplateLabel": "personalized mcTI Planning Tool",
         "title": "Personalized<br>Multichannel TI",
         "newStudyLabel": "Personalized Multichannel TI",
-        "category": "personalized",
-        "idToWidget": "personalizationNewMTIPlanButton"
+        "category": "personalized"
       }, {
         "resourceType": "template",
         "expectedTemplateLabel": "personalized pmTI Planning Tool",
         "title": "Personalized<br>Phase-modulation TI",
         "newStudyLabel": "Personalized Phase-modulation TI",
-        "category": "personalized",
-        "idToWidget": "personalizationNewPMTIPlanButton"
+        "category": "personalized"
       }]
     }
   },
@@ -86,7 +82,7 @@
         "reason": "Not available in ${replace_me_product_name}",
         "title": "Personalized<br>Classic TI",
         "category": "personalized",
-        "idToWidget": "personalizationNewTIPlanButton"
+        "idToWidget": "newPTIPlanButton"
       }, {
         "showDisabled": true,
         "reason": "Not available in ${replace_me_product_name}",

tests/e2e/tests/tags.tes.js

@@ -48,7 +48,10 @@ describe('tags testing', () => {
     await page.goto(url);
     await auto.register(page, user, pass);
     // Create new study
-    await waitAndClick(page, '[osparc-test-id="newPlusBtn"]');
+    const uiConfig = await page.evaluate(async () => await osparc.store.Products.getInstance().fetchUiConfig());
+    if ("plusButton" in uiConfig) {
+      await waitAndClick(page, '[osparc-test-id="newPlusBtn"]');
+    }
     await waitAndClick(page, '[osparc-test-id="emptyStudyBtn"]');
     // Wait until project is created and Dashboard button is enabled
     await utils.sleep(4000);

tests/e2e/utils/auto.js

@@ -107,14 +107,24 @@ async function __dashboardServicesBrowser(page) {
 async function dashboardNewTIPlan(page) {
   console.log("Creating New Plan");
 
-  await utils.waitAndClick(page, '[osparc-test-id="newPlansBtn"]');
+  const uiConfig = await page.evaluate(async () => await osparc.store.Products.getInstance().fetchUiConfig());
+  if ("newStudies" in uiConfig) {
+    await utils.waitAndClick(page, '[osparc-test-id="newPlansBtn"]');
+  } else if ("plusButton" in uiConfig) {
+    await utils.waitAndClick(page, '[osparc-test-id="newPlusBtn"]');
+  }
+
   await utils.waitAndClick(page, '[osparc-test-id="newTIPlanButton"]');
 }
 
 async function dashboardStartSim4LifeLite(page) {
-  console.log("Start Sim4Lite from + button");
+  console.log("Start Sim4Life-Lite from + button");
+
+  const uiConfig = await page.evaluate(async () => await osparc.store.Products.getInstance().fetchUiConfig());
+  if ("plusButton" in uiConfig) {
+    await utils.waitAndClick(page, '[osparc-test-id="newPlusBtn"]');
+  }
 
-  await utils.waitAndClick(page, '[osparc-test-id="newPlansBtn"]');
   await utils.waitAndClick(page, '[osparc-test-id="startS4LButton"]');
 }