🐛 [Frontend] Bugfix: App Mode was showing the settings (#7180)

Author: odeimaiz

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

@@ -549,7 +549,9 @@ qx.Class.define("osparc.data.model.Node", {
       return this.getIframeHandler() ? this.getIframeHandler().getLoadingPage() : null;
     },
 
-    __applyPropsForm: function() {
+    __applyPropsForm: function(propsForm) {
+      osparc.utils.Utils.setIdToWidget(propsForm, "settingsForm_" + this.getNodeId());
+
       const checkIsPipelineRunning = () => {
         const isPipelineRunning = this.getStudy().isPipelineRunning();
         this.getPropsForm().setEnabled(!isPipelineRunning);

services/static-webserver/client/source/class/osparc/node/slideshow/NodeView.js

@@ -38,13 +38,6 @@ qx.Class.define("osparc.node.slideshow.NodeView", {
 
   statics: {
     LOGGER_HEIGHT: 28,
-
-    isPropsFormShowable: function(node) {
-      if (node && ("getPropsForm" in node) && node.getPropsForm()) {
-        return node.getPropsForm().hasVisibleInputs();
-      }
-      return false;
-    }
   },
 
   members: {
@@ -135,8 +128,8 @@ qx.Class.define("osparc.node.slideshow.NodeView", {
     },
 
     isSettingsGroupShowable: function() {
-      const node = this.getNode();
-      return this.self().isPropsFormShowable(node);
+      // do not show Settings in App Mode
+      return false;
     },
 
     __iFrameChanged: function() {

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

@@ -401,7 +401,6 @@ qx.Class.define("osparc.study.Utils", {
       // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline
       const tiPostpro = Object.values(studyData["workbench"]).find(srv => srv.key.includes("ti-postpro"));
       if (tiPostpro && tiPostpro["bootOptions"]) {
-        console.log(tiPostpro);
         switch (tiPostpro["bootOptions"]["boot_mode"]) {
           case "0":
             // classic TI

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

@@ -96,9 +96,12 @@ qx.Class.define("osparc.ui.basic.DateAndBy", {
         const atom = this.getChildControl("last-touching");
         const myGroupId = osparc.auth.Data.getInstance().getGroupId();
         if (groupId === myGroupId) {
-          atom.setLabel("by me");
+          atom.set({
+            label: "by me",
+            icon: null,
+          })
         } else {
-          atom.setLabel("by");
+          atom.setLabel("by ");
           osparc.dashboard.CardBase.addHintFromGids(atom, [groupId]);
         }
       }

services/static-webserver/client/source/class/osparc/vipMarket/AnatomicalModelDetails.js

@@ -73,29 +73,39 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
       }
     },
 
-    __createModelInfo: function(anatomicalModelsData) {
-      const cardGrid = new qx.ui.layout.Grid(16, 16);
-      const cardLayout = new qx.ui.container.Composite(cardGrid);
+    __createModelInfo: function(anatomicalModelsDataSource) {
+      const cardLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(16));
 
-      const description = anatomicalModelsData["description"] || "";
-      description.split(" - ").forEach((desc, idx) => {
+      const description = anatomicalModelsDataSource["description"] || "";
+      const delimiter = " - ";
+      let titleAndSubtitle = description.split(delimiter);
+      if (titleAndSubtitle.length > 0) {
         const titleLabel = new qx.ui.basic.Label().set({
-          value: desc,
+          value: titleAndSubtitle[0],
           font: "text-16",
-          alignX: "center",
           alignY: "middle",
           allowGrowX: true,
           allowGrowY: true,
         });
-        cardLayout.add(titleLabel, {
-          column: 0,
-          row: idx,
-          colSpan: 2,
+        cardLayout.add(titleLabel);
+        titleAndSubtitle.shift();
+      }
+      if (titleAndSubtitle.length > 0) {
+        titleAndSubtitle = titleAndSubtitle.join(delimiter);
+        const subtitleLabel = new qx.ui.basic.Label().set({
+          value: titleAndSubtitle,
+          font: "text-16",
+          alignY: "middle",
+          allowGrowX: true,
+          allowGrowY: true,
         });
-      });
+        cardLayout.add(subtitleLabel);
+      }
+
 
+      const middleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(16));
       const thumbnail = new qx.ui.basic.Image().set({
-        source: anatomicalModelsData["thumbnail"],
+        source: anatomicalModelsDataSource["thumbnail"],
         alignY: "middle",
         scale: true,
         allowGrowX: true,
@@ -105,12 +115,9 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         maxWidth: 256,
         maxHeight: 256,
       });
-      cardLayout.add(thumbnail, {
-        column: 0,
-        row: 2,
-      });
+      middleLayout.add(thumbnail);
 
-      const features = anatomicalModelsData["features"];
+      const features = anatomicalModelsDataSource["features"];
       const featuresGrid = new qx.ui.layout.Grid(8, 8);
       const featuresLayout = new qx.ui.container.Composite(featuresGrid);
       let idx = 0;
@@ -176,15 +183,14 @@ qx.Class.define("osparc.vipMarket.AnatomicalModelDetails", {
         }
         return doiLabel;
       };
-      featuresLayout.add(doiToLink(anatomicalModelsData["doi"]), {
+      featuresLayout.add(doiToLink(anatomicalModelsDataSource["doi"]), {
         column: 1,
         row: idx,
       });
 
-      cardLayout.add(featuresLayout, {
-        column: 1,
-        row: 2,
-      });
+      middleLayout.add(featuresLayout);
+
+      cardLayout.add(middleLayout);
 
       return cardLayout;
     },

services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js

@@ -182,17 +182,15 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
           this.__anatomicalModels = [];
           licensedItems.forEach(licensedItem => {
             const anatomicalModel = osparc.utils.Utils.deepCloneObject(licensedItem);
-            anatomicalModel["modelId"] = anatomicalModel["licensedResourceData"]["source"]["id"];
+            const anatomicalModelDataSource = anatomicalModel["licensedResourceData"]["source"];
+            anatomicalModel["modelId"] = anatomicalModelDataSource["id"];
             anatomicalModel["thumbnail"] = "";
             anatomicalModel["date"] = null;
-            if (anatomicalModel["licensedResourceData"] && anatomicalModel["licensedResourceData"]["source"]) {
-              const anatomicalModelSource = anatomicalModel["licensedResourceData"]["source"];
-              if (anatomicalModelSource["thumbnail"]) {
-                anatomicalModel["thumbnail"] = anatomicalModelSource["thumbnail"];
-              }
-              if (anatomicalModelSource["features"] && anatomicalModelSource["features"]["date"]) {
-                anatomicalModel["date"] = new Date(anatomicalModelSource["features"]["date"]);
-              }
+            if (anatomicalModelDataSource["thumbnail"]) {
+              anatomicalModel["thumbnail"] = anatomicalModelDataSource["thumbnail"];
+            }
+            if (anatomicalModelDataSource["features"] && anatomicalModelDataSource["features"]["date"]) {
+              anatomicalModel["date"] = new Date(anatomicalModelDataSource["features"]["date"]);
             }
             // attach license data
             anatomicalModel["licensedItemId"] = licensedItem["licensedItemId"];

tests/e2e-playwright/tests/tip/test_ti_plan.py

@@ -152,6 +152,10 @@ def test_classic_ti_plan(  # noqa: PLR0915
         page.wait_for_timeout(_ELECTRODE_SELECTOR_FLICKERING_WAIT_TIME)
 
         with log_context(logging.INFO, "Configure selector"):
+            assert (
+                page.get_by_test_id("settingsForm_" + node_ids[0]).count() == 0
+            ), "service settings should not be visible"
+
             electrode_selector_iframe.get_by_test_id("TargetStructure_Selector").click()
             electrode_selector_iframe.get_by_test_id(
                 "TargetStructure_Target_(Targets_combined) Hypothalamus"