Study Browser cleanup (#1393)

Dashboard Cleanup
- Move main section selectors (buttons) (Dashboard, Services, Data) to top.
- Remove detail view shown when clicking on a study sheet.
- Activate study on single click
- Move section for templates to top, add new study (use “Empty Study” as label) as normal sheet to front. Use “Create New Study” as title. Move section for existing studies to bottom, use “Recent Studies” as title.
- Center studies in window. Show no more than 5 sheets in one row.

Cleanup of Study Sheets
- Move all text to either top or bottom, but not both. Make use of default fonts.
- Remove "Created by" field for user study sheets.
- Remove “Last change” field for template study sheets.
- Remove “Last change” and "Created by" in front of the actual last change time.
- Add description field for template studies with small text below title.
- Add poop-up-button on right side of title which offers basic commands such as Open, Remove, Rename, Clone, …

Routes to statics are always set (thanks to @pcrespov)

.eslintrc.json

@@ -27,7 +27,10 @@
     ],
     "indent": [
       "warn",
-      2
+      2,
+      {
+        "SwitchCase": 1
+      }
     ],
     "object-property-newline": "warn",
     "object-curly-newline": [

.gitignore

@@ -149,4 +149,4 @@ prof/
 
 # outputs from make
 .stack-*.yml
-services/catalog/log.txt
+services/web/server/tests/data/static/resource/statics.json

services/web/client/source/class/osparc/auth/core/BaseAuthPage.js

@@ -52,6 +52,9 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
       el.insertInto(form);
     });
     this._buildPage();
+
+    this.addListener("appear", this._onAppear, this);
+    this.addListener("disappear", this._onDisappear, this);
   },
 
   /*
@@ -108,6 +111,14 @@ qx.Class.define("osparc.auth.core.BaseAuthPage", {
       this.add(lbl, {
         flex:1
       });
+    },
+
+    _onAppear: function() {
+      return;
+    },
+
+    _onDisappear: function() {
+      return;
     }
   }
 });

services/web/client/source/class/osparc/auth/ui/LoginView.js

@@ -50,6 +50,8 @@ qx.Class.define("osparc.auth.ui.LoginView", {
   members: {
     // overrides base
     __form: null,
+    __loginBtn: null,
+
     _buildPage: function() {
       this.__form = new qx.ui.form.Form();
 
@@ -85,17 +87,11 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       this.add(pass);
       this.__form.add(pass, "", null, "password", null);
 
-      const loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in"));
+      const loginBtn = this.__loginBtn = new osparc.ui.form.FetchButton(this.tr("Sign in"));
       loginBtn.addListener("execute", () => {
         loginBtn.setFetching(true);
         this.__login(loginBtn);
       }, this);
-      // Listen to "Enter" key
-      this.addListener("keypress", keyEvent => {
-        if (keyEvent.getKeyIdentifier() === "Enter") {
-          this.__login();
-        }
-      }, this);
       osparc.utils.Utils.setIdToWidget(loginBtn, "loginSubmitBtn");
       this.add(loginBtn);
 
@@ -201,6 +197,16 @@ qx.Class.define("osparc.auth.ui.LoginView", {
       for (const key in fieldItems) {
         fieldItems[key].resetValue();
       }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const command = new qx.ui.command.Command("Enter");
+      this.__loginBtn.setCommand(command);
+    },
+
+    _onDisappear: function() {
+      this.__loginBtn.setCommand(null);
     }
   }
 });

services/web/client/source/class/osparc/auth/ui/RegistrationView.js

@@ -32,6 +32,8 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
 
   members: {
     __email: null,
+    __submitBtn: null,
+    __cancelBtn: null,
 
     // overrides base
     _buildPage: function() {
@@ -47,6 +49,10 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       this.add(email);
       osparc.utils.Utils.setIdToWidget(email, "registrationEmailFld");
       this.__email = email;
+      this.addListener("appear", () => {
+        email.focus();
+        email.activate();
+      });
 
       // const uname = new qx.ui.form.TextField().set({
       //   required: true,
@@ -86,13 +92,13 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       // submit & cancel buttons
       const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
-      const submitBtn = new qx.ui.form.Button(this.tr("Submit"));
+      const submitBtn = this.__submitBtn = new qx.ui.form.Button(this.tr("Submit"));
       osparc.utils.Utils.setIdToWidget(submitBtn, "registrationSubmitBtn");
       grp.add(submitBtn, {
         flex:1
       });
 
-      const cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
+      const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
       osparc.utils.Utils.setIdToWidget(cancelBtn, "registrationCancelBtn");
       grp.add(cancelBtn, {
         flex:1
@@ -132,7 +138,21 @@ qx.Class.define("osparc.auth.ui.RegistrationView", {
       };
 
       manager.register(userData, successFun, failFun, this);
-    }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const commandEnter = new qx.ui.command.Command("Enter");
+      this.__submitBtn.setCommand(commandEnter);
 
+      // Listen to "Esc" key
+      const commandEsc = new qx.ui.command.Command("Esc");
+      this.__cancelBtn.setCommand(commandEsc);
+    },
+
+    _onDisappear: function() {
+      this.__submitBtn.setCommand(null);
+      this.__cancelBtn.setCommand(null);
+    }
   }
 });

services/web/client/source/class/osparc/auth/ui/ResetPassRequestView.js

@@ -29,30 +29,36 @@ qx.Class.define("osparc.auth.ui.ResetPassRequestView", {
   */
 
   members: {
+    __submitBtn: null,
+    __cancelBtn: null,
 
     // overrides base
     _buildPage: function() {
-      let manager = new qx.ui.form.validation.Manager();
+      const manager = new qx.ui.form.validation.Manager();
 
       this._addTitleHeader(this.tr("Reset Password"));
 
       // email
-      let email = new qx.ui.form.TextField();
+      const email = new qx.ui.form.TextField();
       email.setRequired(true);
       email.setPlaceholder(this.tr("Introduce your registration email"));
       this.add(email);
+      this.addListener("appear", () => {
+        email.focus();
+        email.activate();
+      });
 
       manager.add(email, qx.util.Validate.email());
 
       // submit and cancel buttons
-      let grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+      const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
 
-      let submitBtn = new qx.ui.form.Button(this.tr("Submit"));
+      const submitBtn = this.__submitBtn = new qx.ui.form.Button(this.tr("Submit"));
       grp.add(submitBtn, {
         flex:1
       });
 
-      let cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
+      const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr("Cancel"));
       grp.add(cancelBtn, {
         flex:1
       });
@@ -73,20 +79,34 @@ qx.Class.define("osparc.auth.ui.ResetPassRequestView", {
     __submit: function(email) {
       console.debug("sends email to reset password to ", email);
 
-      let manager = osparc.auth.Manager.getInstance();
+      const manager = osparc.auth.Manager.getInstance();
 
-      let successFun = function(log) {
+      const successFun = function(log) {
         this.fireDataEvent("done", log.message);
         osparc.component.message.FlashMessenger.getInstance().log(log);
       };
 
-      let failFun = function(msg) {
+      const failFun = function(msg) {
         msg = msg || this.tr("Could not request password reset");
         osparc.component.message.FlashMessenger.getInstance().logAs(msg, "ERROR");
       };
 
       manager.resetPasswordRequest(email.getValue(), successFun, failFun, this);
-    }
+    },
+
+    _onAppear: function() {
+      // Listen to "Enter" key
+      const commandEnter = new qx.ui.command.Command("Enter");
+      this.__submitBtn.setCommand(commandEnter);
 
+      // Listen to "Esc" key
+      const commandEsc = new qx.ui.command.Command("Esc");
+      this.__cancelBtn.setCommand(commandEsc);
+    },
+
+    _onDisappear: function() {
+      this.__submitBtn.setCommand(null);
+      this.__cancelBtn.setCommand(null);
+    }
   }
 });

services/web/client/source/class/osparc/component/form/ToggleButtonContainer.js

@@ -6,7 +6,7 @@
  */
 
 /**
- * Container for StudyBrowserListItems or any other ToggleButtons, with some convenient methods.
+ * Container for StudyBrowserButtonItems or any other ToggleButtons, with some convenient methods.
  */
 qx.Class.define("osparc.component.form.ToggleButtonContainer", {
   extend: qx.ui.container.Composite,
@@ -16,7 +16,8 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
   },
 
   events: {
-    changeSelection: "qx.event.type.Data"
+    changeSelection: "qx.event.type.Data",
+    changeVisibility: "qx.event.type.Data"
   },
 
   members: {
@@ -27,6 +28,9 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
         child.addListener("changeValue", e => {
           this.fireDataEvent("changeSelection", this.getSelection());
         }, this);
+        child.addListener("changeVisibility", e => {
+          this.fireDataEvent("changeVisibility", this.getVisibles());
+        }, this);
       } else {
         console.error("ToggleButtonContainer only allows ToggleButton as its children.");
       }
@@ -46,6 +50,13 @@ qx.Class.define("osparc.component.form.ToggleButtonContainer", {
       return this.getChildren().filter(button => button.getValue());
     },
 
+    /**
+     * Returns an array that contains all visible buttons.
+     */
+    getVisibles: function() {
+      return this.getChildren().filter(button => button.isVisible());
+    },
+
     /**
      * Sets the given button's value to true (checks it) and unchecks all other buttons. If the given button is not present,
      * every button in the container will get a false value (unchecked).

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

@@ -261,9 +261,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
           btn.resetIcon();
           btn.getChildControl("icon").getContentElement()
             .removeClass("rotate");
-          this.fireDataEvent(this.__isTemplate ? "updatedTemplate" : "updatedStudy", data);
           this.__model.set(data);
           this.setMode("display");
+          this.fireDataEvent(this.__isTemplate ? "updatedTemplate" : "updatedStudy", data);
         })
         .catch(err => {
           btn.resetIcon();

services/web/client/source/class/osparc/desktop/Dashboard.js → services/web/client/source/class/osparc/dashboard/Dashboard.js

@@ -26,18 +26,18 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let dashboard = new osparc.desktop.Dashboard();
+ *   let dashboard = new osparc.dashboard.Dashboard();
  *   this.getRoot().add(dashboard);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.Dashboard", {
+qx.Class.define("osparc.dashboard.Dashboard", {
   extend: qx.ui.tabview.TabView,
 
   construct: function() {
     this.base(arguments);
 
-    this.setBarPosition("left");
+    this.setBarPosition("top");
 
     osparc.wrapper.JsonDiffPatch.getInstance().init();
     osparc.wrapper.JsonTreeViewer.getInstance().init();
@@ -71,9 +71,9 @@ qx.Class.define("osparc.desktop.Dashboard", {
 
     __createMainViewLayout: function() {
       [
-        [this.tr("Studies"), this.__createStudiesView],
-        [this.tr("Services"), this.__createServicesLayout],
-        [this.tr("Data"), this.__createDataManagerLayout]
+        [this.tr("Studies"), this.__createStudyBrowser],
+        [this.tr("Services"), this.__createServiceBrowser],
+        [this.tr("Data"), this.__createDataBrowser]
       ].forEach(tuple => {
         const tabPage = new qx.ui.tabview.Page(tuple[0]).set({
           appearance: "dashboard-page"
@@ -97,18 +97,18 @@ qx.Class.define("osparc.desktop.Dashboard", {
       }, this);
     },
 
-    __createStudiesView: function() {
-      const studiesView = this.__prjBrowser = new osparc.desktop.StudyBrowser();
+    __createStudyBrowser: function() {
+      const studiesView = this.__prjBrowser = new osparc.dashboard.StudyBrowser();
       return studiesView;
     },
 
-    __createServicesLayout: function() {
-      const servicesView = this.__serviceBrowser = new osparc.desktop.ServiceBrowser();
+    __createServiceBrowser: function() {
+      const servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
       return servicesView;
     },
 
-    __createDataManagerLayout: function() {
-      const dataManagerView = this.__dataManager = new osparc.desktop.DataBrowser();
+    __createDataBrowser: function() {
+      const dataManagerView = this.__dataManager = new osparc.dashboard.DataBrowser();
       return dataManagerView;
     }
   }

services/web/client/source/class/osparc/desktop/DataBrowser.js → services/web/client/source/class/osparc/dashboard/DataBrowser.js

@@ -25,12 +25,12 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let dataManager = new osparc.desktop.DataBrowser();
+ *   let dataManager = new osparc.dashboard.DataBrowser();
  *   this.getRoot().add(dataManager);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.DataBrowser", {
+qx.Class.define("osparc.dashboard.DataBrowser", {
   extend: qx.ui.core.Widget,
 
   construct: function() {

services/web/client/source/class/osparc/desktop/ServiceBrowser.js → services/web/client/source/class/osparc/dashboard/ServiceBrowser.js

@@ -31,12 +31,12 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let servicesView = this.__serviceBrowser = new osparc.desktop.ServiceBrowser();
+ *   let servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
  *   this.getRoot().add(servicesView);
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.ServiceBrowser", {
+qx.Class.define("osparc.dashboard.ServiceBrowser", {
   extend: qx.ui.core.Widget,
 
   construct: function() {
@@ -150,7 +150,7 @@ qx.Class.define("osparc.desktop.ServiceBrowser", {
       const servCtrl = new qx.data.controller.List(latestServicesModel, servicesUIList, "name");
       servCtrl.setDelegate({
         createItem: () => {
-          const item = new osparc.desktop.ServiceBrowserListItem();
+          const item = new osparc.dashboard.ServiceBrowserListItem();
           item.subscribeToFilterGroup("serviceBrowser");
           item.addListener("tap", e => {
             servicesUIList.setSelection([item]);

services/web/client/source/class/osparc/desktop/ServiceBrowserListItem.js → services/web/client/source/class/osparc/dashboard/ServiceBrowserListItem.js

@@ -28,7 +28,7 @@
  *
  * <pre class='javascript'>
  *   tree.setDelegate({
- *     createItem: () => new osparc.desktop.ServiceBrowserListItem(),
+ *     createItem: () => new osparc.dashboard.ServiceBrowserListItem(),
  *     bindItem: (c, item, id) => {
  *       c.bindProperty("key", "model", null, item, id);
  *       c.bindProperty("name", "title", null, item, id);
@@ -41,7 +41,7 @@
  * </pre>
  */
 
-qx.Class.define("osparc.desktop.ServiceBrowserListItem", {
+qx.Class.define("osparc.dashboard.ServiceBrowserListItem", {
   extend: qx.ui.core.Widget,
   implement : [qx.ui.form.IModel, osparc.component.filter.IFilterable],
   include : [qx.ui.form.MModelProperty, osparc.component.filter.MFilterable],