diff --git a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js index a04e872c8941..b6f2b211bda4 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/GridButtonBase.js +++ b/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" + }); + }); } }, diff --git a/services/static-webserver/client/source/class/osparc/ui/basic/Thumbnail.js b/services/static-webserver/client/source/class/osparc/ui/basic/Thumbnail.js index 9ea14dff313e..ff7c6f5d98d2 100644 --- a/services/static-webserver/client/source/class/osparc/ui/basic/Thumbnail.js +++ b/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); + } } }, diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js index 910c4ec3173f..885a09d4f0c2 100644 --- a/services/static-webserver/client/source/class/osparc/utils/Utils.js +++ b/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 }, diff --git a/services/static-webserver/client/source/resource/osparc/ui_config.json b/services/static-webserver/client/source/resource/osparc/ui_config.json index 54be5e1da8c7..826f64cf9a90 100644 --- a/services/static-webserver/client/source/resource/osparc/ui_config.json +++ b/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
Classic TI", "newStudyLabel": "Personalized Classic TI", "category": "personalized", - "idToWidget": "personalizationNewTIPlanButton" + "idToWidget": "newPTIPlanButton" }, { "resourceType": "template", "expectedTemplateLabel": "personalized mcTI Planning Tool", "title": "Personalized
Multichannel TI", "newStudyLabel": "Personalized Multichannel TI", - "category": "personalized", - "idToWidget": "personalizationNewMTIPlanButton" + "category": "personalized" }, { "resourceType": "template", "expectedTemplateLabel": "personalized pmTI Planning Tool", "title": "Personalized
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
Classic TI", "category": "personalized", - "idToWidget": "personalizationNewTIPlanButton" + "idToWidget": "newPTIPlanButton" }, { "showDisabled": true, "reason": "Not available in ${replace_me_product_name}", diff --git a/tests/e2e/tests/tags.tes.js b/tests/e2e/tests/tags.tes.js index c7026220b888..72d12f2238b8 100644 --- a/tests/e2e/tests/tags.tes.js +++ b/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); diff --git a/tests/e2e/utils/auto.js b/tests/e2e/utils/auto.js index 9af239e3ad9c..f9a723059d5b 100644 --- a/tests/e2e/utils/auto.js +++ b/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"]'); }