✨ [Frontend] Plus buttons escalates to latest compatible (#6106)

Author: odeimaiz

packages/service-library/src/servicelib/rabbitmq/rpc_interfaces/catalog/services.py

@@ -53,7 +53,7 @@ async def _call(
             user_id=user_id,
             limit=limit,
             offset=offset,
-            timeout_s=2 * RPC_REQUEST_DEFAULT_TIMEOUT_S,
+            timeout_s=4 * RPC_REQUEST_DEFAULT_TIMEOUT_S,
         )
 
     result = await _call(

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

@@ -525,22 +525,27 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         });
     },
 
-    __addNewStudyFromServiceButtons: function(serviceKey, newButtonInfo) {
-      const mode = this._resourcesContainer.getMode();
-      // Make sure we have access to that service
-      const versions = osparc.service.Utils.getVersions(serviceKey);
+    __addNewStudyFromServiceButtons: function(key, newButtonInfo) {
+      const versions = osparc.service.Utils.getVersions(key);
       if (versions.length && newButtonInfo) {
-        const title = newButtonInfo.title;
-        const desc = newButtonInfo.description;
-        const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
-        newStudyFromServiceButton.setCardKey("new-"+serviceKey);
-        osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newButtonInfo.idToWidget);
-        newStudyFromServiceButton.addListener("execute", () => this.__newStudyFromServiceBtnClicked(newStudyFromServiceButton, serviceKey, versions[0], newButtonInfo.newStudyLabel));
-        if (this._resourcesContainer.getMode() === "list") {
-          const width = this._resourcesContainer.getBounds().width - 15;
-          newStudyFromServiceButton.setWidth(width);
-        }
-        this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);
+        // scale to latest compatible
+        const latestVersion = versions[0];
+        const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);
+        osparc.service.Store.getService(latestCompatible["key"], latestCompatible["version"])
+          .then(latestMetadata => {
+            const title = newButtonInfo.title + " " + osparc.service.Utils.extractVersionDisplay(latestMetadata);
+            const desc = newButtonInfo.description;
+            const mode = this._resourcesContainer.getMode();
+            const newStudyFromServiceButton = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
+            newStudyFromServiceButton.setCardKey("new-"+key);
+            osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newButtonInfo.idToWidget);
+            newStudyFromServiceButton.addListener("execute", () => this.__newStudyFromServiceBtnClicked(newStudyFromServiceButton, latestMetadata["key"], latestMetadata["version"], newButtonInfo.newStudyLabel));
+            if (this._resourcesContainer.getMode() === "list") {
+              const width = this._resourcesContainer.getBounds().width - 15;
+              newStudyFromServiceButton.setWidth(width);
+            }
+            this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);
+          })
       }
     },
 

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -1274,7 +1274,7 @@ qx.Class.define("osparc.data.Resources", {
           params["url"] = {};
         }
         params["url"]["offset"] = offset;
-        params["url"]["limit"] = 40;
+        params["url"]["limit"] = 20;
         const endpoint = "getPage";
         const options = {
           resolveWResponse: true

services/static-webserver/client/source/class/osparc/data/model/IframeHandler.js

@@ -151,7 +151,9 @@ qx.Class.define("osparc.data.model.IframeHandler", {
       if (status) {
         statusText = status.charAt(0).toUpperCase() + status.slice(1);
       }
-      return statusText + " " + node.getLabel() + " <span style='font-size: 16px;font-weight: normal;'><sub>v" + node.getVersion() + "</sub></span>";
+      const metadata = node.getMetaData();
+      const versionDisplay = osparc.service.Utils.extractVersionDisplay(metadata);
+      return statusText + " " + node.getLabel() + " <span style='font-size: 16px;font-weight: normal;'><sub>v" + versionDisplay + "</sub></span>";
     },
 
     __nodeState: function(starting=true) {

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

@@ -399,7 +399,7 @@ qx.Class.define("osparc.info.ServiceLarge", {
 
     __openVersionDisplayEditor: function() {
       const title = this.tr("Edit Version Display");
-      const oldVersionDisplay = this.getService()["versionDisplay"] ? this.getService()["versionDisplay"] : "";
+      const oldVersionDisplay = osparc.service.Utils.extractVersionDisplay(this.getService());
       const versionDisplayEditor = new osparc.widget.Renamer(oldVersionDisplay, null, title);
       versionDisplayEditor.addListener("labelChanged", e => {
         versionDisplayEditor.close();

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

@@ -65,7 +65,7 @@ qx.Class.define("osparc.info.ServiceUtils", {
 
     createVersionDisplay: function(key, version) {
       const versionDisplay = osparc.service.Utils.getVersionDisplay(key, version);
-      const label = new qx.ui.basic.Label(versionDisplay ? versionDisplay : version);
+      const label = new qx.ui.basic.Label(versionDisplay);
       osparc.utils.Utils.setIdToWidget(label, "serviceVersion");
       return label;
     },

services/static-webserver/client/source/class/osparc/metadata/ServicesInStudy.js

@@ -46,7 +46,7 @@ qx.Class.define("osparc.metadata.ServicesInStudy", {
     if (servicesInStudy.length) {
       const promises = [];
       servicesInStudy.forEach(srv => promises.push(osparc.service.Store.getService(srv.key, srv.version)));
-      Promise.all(servicesInStudy)
+      Promise.all(promises)
         .then(() => this._populateLayout());
     } else {
       this.__populateEmptyLayout();

services/static-webserver/client/source/class/osparc/metadata/ServicesInStudyUpdate.js

@@ -185,11 +185,11 @@ qx.Class.define("osparc.metadata.ServicesInStudyUpdate", {
         if (isUpdatable) {
           updatableServices.push(nodeId);
         }
-        const currentVersionLabel = new qx.ui.basic.Label(node["version"]).set({
+        const metadata = osparc.service.Store.getMetadata(node["key"], node["version"]);
+        const currentVersionLabel = new qx.ui.basic.Label(osparc.service.Utils.extractVersionDisplay(metadata)).set({
           font: "text-14"
         });
-        const nodeMetadata = osparc.service.Store.getMetadata(node["key"], node["version"]);
-        this.self().colorVersionLabel(currentVersionLabel, nodeMetadata);
+        this.self().colorVersionLabel(currentVersionLabel, metadata);
         this._servicesGrid.add(currentVersionLabel, {
           row: i,
           column: this.self().GRID_POS.CURRENT_VERSION
@@ -202,14 +202,15 @@ qx.Class.define("osparc.metadata.ServicesInStudyUpdate", {
         if (latestCompatible) {
           // updatable
           osparc.service.Store.getService(latestCompatible["key"], latestCompatible["version"])
-            .then(metadata => {
-              const label = node["key"] === metadata["key"] ? metadata["version"] : metadata["name"] + ":" + metadata["version"];
+            .then(latestMetadata => {
+              let label = node["key"] === latestMetadata["key"] ? "" : latestMetadata["name"];
+              label += ":" + osparc.service.Utils.extractVersionDisplay(latestMetadata);
               compatibleVersionLabel.setValue(label);
             })
             .catch(err => console.error(err));
-        } else if (nodeMetadata) {
+        } else if (metadata) {
           // up to date
-          compatibleVersionLabel.setValue(nodeMetadata["version"]);
+          compatibleVersionLabel.setValue(metadata["version"]);
         } else {
           compatibleVersionLabel.setValue(this.tr("Unknown"));
         }

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

@@ -177,16 +177,16 @@ qx.Class.define("osparc.service.Utils", {
 
     getVersionDisplay: function(key, version) {
       const services = osparc.service.Store.servicesCached;
-      if (
-        key in services &&
-        version in services[key] &&
-        "versionDisplay" in services[key][version]
-      ) {
-        return services[key][version]["versionDisplay"];
+      if (key in services && version in services[key]) {
+        return this.extractVersionDisplay(services[key][version]);
       }
       return null;
     },
 
+    extractVersionDisplay: function(metadata) {
+      return metadata["versionDisplay"] ? metadata["versionDisplay"] : metadata["version"];
+    },
+
     getReleasedDate: function(key, version) {
       const services = osparc.service.Store.servicesCached;
       if (
@@ -201,8 +201,7 @@ qx.Class.define("osparc.service.Utils", {
 
     versionToListItem: function(key, version) {
       const versionDisplay = this.getVersionDisplay(key, version);
-      const label = versionDisplay ? versionDisplay : version;
-      const listItem = new qx.ui.form.ListItem(label);
+      const listItem = new qx.ui.form.ListItem(versionDisplay);
       listItem.version = version;
       return listItem;
     },

services/static-webserver/client/source/class/osparc/share/PublishTemplate.js

@@ -46,6 +46,8 @@ qx.Class.define("osparc.share.PublishTemplate", {
     __selectedCollabs: null,
 
     __buildLayout: function() {
+      // mark it us template, so that testers can share it with product everyone
+      this.__potentialTemplateData["resourceType"] = "template";
       const addCollaborators = new osparc.share.AddCollaborators(this.__potentialTemplateData);
       addCollaborators.getChildControl("intro-text").set({
         value: this.tr("Make the ") + osparc.product.Utils.getTemplateAlias() + this.tr(" also accessible to:"),