Fixes + some UI/UX

services/web/client/Manifest.json

@@ -41,7 +41,7 @@
     "@qooxdoo/compiler": "^1.0.0-beta",
     "@qooxdoo/framework": "^6.0.0-beta",
     "ITISFoundation/qx-iconfont-fontawesome5": "^0.2.0",
-    "ITISFoundation/qx-osparc-theme": "^0.5.3",
+    "ITISFoundation/qx-osparc-theme": "^0.5.4",
     "qooxdoo/qxl.testtapper": "^0.4.3",
     "qooxdoo/qxl.apiviewer": "^1.0.0-beta",
     "ITISFoundation/qx-iconfont-material": "^0.1.5"

services/web/client/qx-lock.json

@@ -10,11 +10,11 @@
     },
     {
       "library_name": "qx-osparc-theme",
-      "library_version": "0.5.3",
-      "path": "qx_packages/ITISFoundation_qx-osparc-theme_v0_5_3",
+      "library_version": "0.5.4",
+      "path": "qx_packages/ITISFoundation_qx-osparc-theme_v0_5_4",
       "uri": "ITISFoundation/qx-osparc-theme",
       "repo_name": "ITISFoundation/qx-osparc-theme",
-      "repo_tag": "v0.5.3"
+      "repo_tag": "v0.5.4"
     },
     {
       "library_name": "qx-iconfont-material",

services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js

@@ -324,14 +324,10 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
     },
 
     __isUserOwner: function() {
-      // return true until fine grain operation right are implemented. For now: I get it, I can write it
-      return true;
-      /*
       if (this.__model) {
         return this.__model.getPrjOwner() === osparc.auth.Data.getInstance().getEmail();
       }
       return false;
-      */
     }
   }
 });

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -80,6 +80,8 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
     __filesButton: null,
 
     populateLayout: function() {
+      this.__cleanLayout();
+
       this.getNode().bind("label", this.__title, "value");
       this.__addInputPortsUIs();
       this.__addOutputPortsUIs();
@@ -90,17 +92,29 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
 
     __buildLayout: function() {
       const inputs = this.__buildSideView(true);
+
+      const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
+      const toolbar = this.__buildToolbar();
       const mainView = this.__buildMainView();
+      vBox.add(toolbar);
+      vBox.add(mainView, {
+        flex: 1
+      });
+
       const outputs = this.__buildSideView(false);
 
       const pane2 = this.__pane2 = new qx.ui.splitpane.Pane();
       this.add(inputs, 0); // flex 0
       this.add(pane2, 1); // flex 1
 
-      pane2.add(mainView, 1); // flex 1
+      pane2.add(vBox, 1); // flex 1
       pane2.add(outputs, 0); // flex 0
     },
 
+    __cleanLayout: function() {
+      this.__mainView.removeAll();
+    },
+
     __buildSideView: function(isInput) {
       const collapsedWidth = 35;
       const sidePanel = new osparc.desktop.SidePanel().set({
@@ -198,8 +212,6 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       this._mapperLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
       this._iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
 
-      mainView.add(this.__buildToolbar());
-
       return mainView;
     },
 

services/web/client/source/class/osparc/component/node/NodeView.js

@@ -83,10 +83,10 @@ qx.Class.define("osparc.component.node.NodeView", {
     },
 
     __iFrameChanged: function() {
+      this._iFrameLayout.removeAll();
+
       const loadingPage = this.getNode().getLoadingPage();
       const iFrame = this.getNode().getIFrame();
-
-      this._iFrameLayout.removeAll();
       const src = iFrame.getSource();
       if (src === null || src === "about:blank") {
         this._iFrameLayout.add(loadingPage, {

services/web/client/source/class/osparc/component/widget/NodesTree.js

@@ -187,7 +187,7 @@ qx.Class.define("osparc.component.widget.NodesTree", {
             }, this);
             item.addListener("tap", e => {
               this.fireDataEvent("changeSelectedNode", item.getModel().getNodeId());
-              this.__exportButton.setEnabled(item.getLevel() && item.getModel().getIsContainer());
+              this.__exportButton.setEnabled((Boolean(item.getLevel()) && item.getModel().getIsContainer()));
             }, this);
           }
         });

services/web/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -425,7 +425,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __createStudyListLayout: function() {
-      return new osparc.component.form.ToggleButtonContainer(new qx.ui.layout.Flow(15, 15));
+      const spacing = osparc.dashboard.StudyBrowserButtonBase.SPACING;
+      return new osparc.component.form.ToggleButtonContainer(new qx.ui.layout.Flow(spacing, spacing));
     },
 
     __createStudyItem: function(study, isTemplate) {
@@ -714,17 +715,13 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __isUserOwner: function(studyData) {
-      // return true until fine grain operation rights are implemented. For now: I get it, I can write it
-      return true;
-      /*
       const myEmail = osparc.auth.Data.getInstance().getEmail();
       if ("prjOwner" in studyData) {
         return studyData.prjOwner === myEmail;
       } else if ("getCreator" in studyData) {
         return studyData.getCreator() === myEmail;
       }
       return false;
-      */
     }
   }
 });

services/web/client/source/class/osparc/dashboard/StudyBrowserButtonBase.js

@@ -31,8 +31,8 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
   construct: function() {
     this.base(arguments);
     this.set({
-      width: this.self().WIDTH,
-      height: this.self().HEIGHT,
+      width: this.self().ITEM_WIDTH,
+      height: this.self().ITEM_HEIGHT,
       padding: this.self().PADDING,
       allowGrowX: false
     });
@@ -52,9 +52,10 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
   },
 
   statics: {
-    WIDTH: 200,
-    HEIGHT: 230,
-    PADDING: 8
+    ITEM_WIDTH: 200,
+    ITEM_HEIGHT: 200,
+    PADDING: 8,
+    SPACING: 12
   },
 
   events: {
@@ -86,8 +87,8 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonBase", {
           control = new qx.ui.basic.Label().set({
             margin: [5, 0],
             font: "title-14",
-            rich : true,
-            anonymous: true
+            maxWidth: this.self().ITEM_WIDTH - 2*this.self().PADDING - 30,
+            breakWithinWords: true
           });
           this._mainLayout.addAt(control, 0);
           break;

services/web/client/source/class/osparc/dashboard/StudyBrowserButtonItem.js

@@ -179,8 +179,16 @@ qx.Class.define("osparc.dashboard.StudyBrowserButtonItem", {
     },
 
     _applyStudyTitle: function(value, old) {
-      let label = this.getChildControl("title");
+      const label = this.getChildControl("title");
       label.setValue(value);
+      label.addListener("appear", () => {
+        qx.event.Timer.once(() => {
+          const labelDom = label.getContentElement().getDomElement();
+          if (label.getMaxWidth() === parseInt(labelDom.style.width)) {
+            label.setToolTipText(value);
+          }
+        }, this, 50);
+      });
     },
 
     _applyStudyDescription: function(value, old) {

services/web/client/source/class/osparc/data/Permissions.js

@@ -134,9 +134,6 @@ qx.Class.define("osparc.data.Permissions", {
         "user": [
           "studies.user.read",
           "studies.user.create",
-          "studies.template.create",
-          "studies.template.update",
-          "studies.template.delete",
           "storage.datcore.read",
           "preferences.user.update",
           "preferences.apikey.create",
@@ -158,6 +155,9 @@ qx.Class.define("osparc.data.Permissions", {
           "study.tag"
         ],
         "tester": [
+          "studies.template.create",
+          "studies.template.update",
+          "studies.template.delete",
           "services.all.read",
           "preferences.role.update",
           "study.nodestree.uuid.read",

services/web/client/source/class/osparc/desktop/MainPage.js

@@ -86,8 +86,10 @@ qx.Class.define("osparc.desktop.MainPage", {
     __createMainView: function() {
       const prjStack = new qx.ui.container.Stack();
 
+      const nStudyItemsPerRow = 5;
+      const studyButtons = osparc.dashboard.StudyBrowserButtonBase;
       const dashboard = this.__dashboard = new osparc.dashboard.Dashboard().set({
-        width: 1200
+        width: nStudyItemsPerRow * (studyButtons.ITEM_WIDTH + studyButtons.SPACING) + 25 // padding + scrollbar
       });
       dashboard.getStudyBrowser().addListener("startStudy", e => {
         const studyEditor = e.getData();

services/web/client/source/class/osparc/desktop/StudyEditor.js

@@ -26,7 +26,6 @@ qx.Class.define("osparc.desktop.StudyEditor", {
     const mainPanel = this.__mainPanel = new osparc.desktop.MainPanel();
     const sidePanel = this.__sidePanel = new osparc.desktop.SidePanel().set({
       minWidth: 0,
-      maxWidth: 700,
       width: 400
     });
     sidePanel.getContentElement().setStyle("border-left", "1px solid " + qx.theme.manager.Color.getInstance().resolve("material-button-background"));
@@ -180,35 +179,8 @@ qx.Class.define("osparc.desktop.StudyEditor", {
         }
       });
       nodesTree.addListener("exportNode", e => {
-        if (!osparc.data.Permissions.getInstance().canDo("study.node.export", true)) {
-          return;
-        }
         const nodeId = e.getData();
-        const node = this.getStudy().getWorkbench().getNode(nodeId);
-        if (node && node.isContainer()) {
-          const exportGroupView = new osparc.component.export.ExportDAG(node);
-          const window = new qx.ui.window.Window(this.tr("Export: ") + node.getLabel()).set({
-            appearance: "service-window",
-            layout: new qx.ui.layout.Grow(),
-            autoDestroy: true,
-            contentPadding: 0,
-            width: 700,
-            maxHeight: 700,
-            showMinimize: false,
-            modal: true
-          });
-          window.add(exportGroupView);
-          window.center();
-          window.open();
-
-          window.addListener("close", () => {
-            exportGroupView.tearDown();
-          }, this);
-
-          exportGroupView.addListener("finished", () => {
-            window.close();
-          }, this);
-        }
+        this.__exportMacro(nodeId);
       });
 
       workbenchUI.addListener("changeSelectedNode", e => {
@@ -217,6 +189,37 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       });
     },
 
+    __exportMacro: function(nodeId) {
+      if (!osparc.data.Permissions.getInstance().canDo("study.node.export", true)) {
+        return;
+      }
+      const node = this.getStudy().getWorkbench().getNode(nodeId);
+      if (node && node.isContainer()) {
+        const exportGroupView = new osparc.component.export.ExportGroup(node);
+        const window = new qx.ui.window.Window(this.tr("Export: ") + node.getLabel()).set({
+          appearance: "service-window",
+          layout: new qx.ui.layout.Grow(),
+          autoDestroy: true,
+          contentPadding: 0,
+          width: 700,
+          height: 700,
+          showMinimize: false,
+          modal: true
+        });
+        window.add(exportGroupView);
+        window.center();
+        window.open();
+
+        window.addListener("close", () => {
+          exportGroupView.tearDown();
+        }, this);
+
+        exportGroupView.addListener("finished", () => {
+          window.close();
+        }, this);
+      }
+    },
+
     nodeSelected: function(nodeId) {
       if (!nodeId) {
         this.__loggerView.setCurrentNodeId();

tests/e2e/tutorials/tutorialBase.js

@@ -47,14 +47,13 @@ class TutorialBase {
     await utils.takeScreenshot(this.__page, this.__templateName + "_landingPage_" + domain);
   }
 
-  async openStudyLink() {
+  async openStudyLink(openStudyTimeout = 20000) {
     this.__responsesQueue.addResponseListener("open");
 
     await this.goTo();
 
     let resp = null;
     try {
-      const openStudyTimeout = 20000;
       resp = await this.__responsesQueue.waitUntilResponse("open", openStudyTimeout);
     }
     catch(err) {