🎨 [Frontend] Improve Notification texts and Bell's UX

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

@@ -115,6 +115,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           }
           // "Starting..." page
           this._hideLoadingPage();
+
+          // since all the resources (templates, users, orgs...) were already loaded, notifications can be built
+          osparc.data.Resources.get("notifications")
+            .then(notifications => {
+              osparc.notification.Notifications.getInstance().addNotifications(notifications);
+            });
         })
         .catch(err => {
           console.error(err);

services/static-webserver/client/source/class/osparc/desktop/MainPageDesktop.js

@@ -26,31 +26,29 @@ qx.Class.define("osparc.desktop.MainPageDesktop", {
     this._add(osparc.notification.RibbonNotifications.getInstance());
 
     const navBar = new osparc.navigation.NavigationBar();
-    navBar.populateLayout()
-      .then(() => {
-        // exclude some items from the navigation bar
-        navBar.getChildControl("dashboard-label").exclude();
-        navBar.getChildControl("dashboard-button").exclude();
-        navBar.getChildControl("notifications-button").exclude();
-        navBar.getChildControl("help").exclude();
-
-        // exclude all the menu entries except "log-out" from user menu
-        const userMenuButton = navBar.getChildControl("user-menu");
-        const userMenu = userMenuButton.getMenu();
-        // eslint-disable-next-line no-underscore-dangle
-        const userMenuEntries = userMenu._getCreatedChildControls();
-        Object.entries(userMenuEntries).forEach(([id, userMenuEntry]) => {
-          if (!["mini-profile-view", "po-center", "log-out"].includes(id)) {
-            userMenuEntry.exclude();
-          }
-        });
-        // exclude also the separators
-        userMenu.getChildren().forEach(child => {
-          if (child.classname === "qx.ui.menu.Separator") {
-            child.exclude();
-          }
-        });
-      });
+    navBar.populateLayout();
+    // exclude some items from the navigation bar
+    navBar.getChildControl("dashboard-label").exclude();
+    navBar.getChildControl("dashboard-button").exclude();
+    navBar.getChildControl("notifications-button").exclude();
+    navBar.getChildControl("help").exclude();
+
+    // exclude all the menu entries except "log-out" from user menu
+    const userMenuButton = navBar.getChildControl("user-menu");
+    const userMenu = userMenuButton.getMenu();
+    // eslint-disable-next-line no-underscore-dangle
+    const userMenuEntries = userMenu._getCreatedChildControls();
+    Object.entries(userMenuEntries).forEach(([id, userMenuEntry]) => {
+      if (!["mini-profile-view", "po-center", "log-out"].includes(id)) {
+        userMenuEntry.exclude();
+      }
+    });
+    // exclude also the separators
+    userMenu.getChildren().forEach(child => {
+      if (child.classname === "qx.ui.menu.Separator") {
+        child.exclude();
+      }
+    });
     this._add(navBar);
 
     osparc.MaintenanceTracker.getInstance().startTracker();

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

@@ -117,14 +117,12 @@ qx.Class.define("osparc.info.CommentUI", {
       const commentContent = this.getChildControl("comment-content");
       commentContent.setValue(this.__comment["contents"]);
 
-      osparc.store.Store.getInstance().getUser(this.__comment["user_id"])
-        .then(user => {
-          if (user) {
-            const userSource = osparc.utils.Avatar.getUrl(user["login"], 32);
-            thumbnail.setSource(userSource);
-            userName.setValue(user["label"]);
-          }
-        });
+      const user = osparc.store.Store.getInstance().getUser(this.__comment["user_id"])
+      if (user) {
+        const userSource = osparc.utils.Avatar.getUrl(user["login"], 32);
+        thumbnail.setSource(userSource);
+        userName.setValue(user["label"]);
+      }
     }
   }
 });

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -92,16 +92,8 @@ qx.Class.define("osparc.navigation.NavigationBar", {
     __tabButtons: null,
 
     populateLayout: function() {
-      return new Promise(resolve => {
-        osparc.data.Resources.get("notifications")
-          .then(notifications => {
-            osparc.notification.Notifications.getInstance().addNotifications(notifications);
-            this.__buildLayout();
-            osparc.WindowSizeTracker.getInstance().addListener("changeCompactVersion", () => this.__navBarResized(), this);
-            resolve();
-          })
-          .catch(err => console.error(err));
-      });
+      this.__buildLayout();
+      osparc.WindowSizeTracker.getInstance().addListener("changeCompactVersion", () => this.__navBarResized(), this);
     },
 
     __buildLayout: function() {

services/static-webserver/client/source/class/osparc/notification/Notification.js

@@ -23,10 +23,12 @@ qx.Class.define("osparc.notification.Notification", {
 
     this.set({
       id: notificationObj.id,
+      resourceId: notificationObj.resource_id ? notificationObj.resource_id : null,
       category: notificationObj.category,
       actionablePath: notificationObj.actionable_path,
       title: notificationObj.title,
       text: notificationObj.text,
+      userFromId: notificationObj.user_from_id ? notificationObj.user_from_id : null,
       date: new Date(notificationObj.date),
       read: ["true", "True", true].includes(notificationObj.read)
     });
@@ -40,6 +42,13 @@ qx.Class.define("osparc.notification.Notification", {
       event: "changeId"
     },
 
+    resourceId: {
+      check: "String",
+      init: null,
+      nullable: true,
+      event: "changeResourceId"
+    },
+
     category: {
       check: [
         "NEW_ORGANIZATION",
@@ -74,6 +83,13 @@ qx.Class.define("osparc.notification.Notification", {
       event: "changeText"
     },
 
+    userFromId: {
+      check: "Number",
+      init: null,
+      nullable: true,
+      event: "changeUserFromId"
+    },
+
     date: {
       check: "Date",
       init: null,

services/static-webserver/client/source/class/osparc/notification/NotificationUI.js

@@ -112,37 +112,102 @@ qx.Class.define("osparc.notification.NotificationUI", {
       return control || this.base(arguments, id);
     },
 
-    __applyNotification: function(notification) {
-      const icon = this.getChildControl("icon");
-      notification.bind("category", icon, "source", {
-        converter: value => {
-          let source = "";
-          switch (value) {
-            case "NEW_ORGANIZATION":
-              source = "@FontAwesome5Solid/users/14";
-              break;
-            case "STUDY_SHARED":
-              source = "@FontAwesome5Solid/file/14";
-              break;
-            case "TEMPLATE_SHARED":
-              source = "@FontAwesome5Solid/copy/14";
-              break;
-            case "ANNOTATION_NOTE":
-              source = "@FontAwesome5Solid/file/14";
-              break;
-            case "WALLET_SHARED":
-              source = "@MaterialIcons/account_balance_wallet/14";
-              break;
+    __applyNotification: async function(notification) {
+      console.log("notification", notification);
+      let resourceId = null;
+      if (notification.getResourceId()) {
+        resourceId = notification.getResourceId();
+      } else if (notification.getActionablePath()) {
+        // extract it from the actionable path
+        const actionablePath = notification.getActionablePath();
+        resourceId = actionablePath.split("/")[1];
+      }
+      const userFromId = notification.getUserFromId();
+
+      let source = "";
+      let title = "";
+      let description = "";
+      switch (notification.getCategory()) {
+        case "NEW_ORGANIZATION":
+          source = "@FontAwesome5Solid/users/14";
+          if (resourceId) {
+            const group = await osparc.store.Store.getInstance().getGroup(resourceId);
+            description = "You're now member of '" + group["name"] + "'";
           }
-          return source;
-        }
-      });
+          break;
+        case "STUDY_SHARED":
+          source = "@FontAwesome5Solid/file/14";
+          if (resourceId) {
+            const params = {
+              url: {
+                "studyId": resourceId
+              }
+            };
+            const study = await osparc.data.Resources.getOne("studies", params);
+            const studyAlias = osparc.product.Utils.getStudyAlias({
+              firstUpperCase: true
+            });
+            if (study) {
+              title = `${studyAlias} '${study["name"]}'`;
+            }
+          }
+          if (userFromId) {
+            const user = osparc.store.Store.getInstance().getUser(userFromId);
+            if (user) {
+              description = "was shared by " + user["label"];
+            }
+          }
+          break;
+        case "TEMPLATE_SHARED":
+          source = "@FontAwesome5Solid/copy/14";
+          if (resourceId) {
+            const template = osparc.store.Store.getInstance().getTemplate(resourceId);
+            const templateAlias = osparc.product.Utils.getTemplateAlias({
+              firstUpperCase: true
+            });
+            if (template) {
+              title = `${templateAlias} '${template["name"]}'`;
+            }
+          }
+          if (userFromId) {
+            const user = osparc.store.Store.getInstance().getUser(userFromId);
+            if (user) {
+              description = "was shared by " + user["label"];
+            }
+          }
+          break;
+        case "ANNOTATION_NOTE":
+          source = "@FontAwesome5Solid/file/14";
+          if (resourceId) {
+            const params = {
+              url: {
+                "studyId": resourceId
+              }
+            };
+            const study = await osparc.data.Resources.getOne("studies", params);
+            if (study) {
+              title = `Note added in '${study["name"]}'`;
+            }
+          }
+          if (userFromId) {
+            const user = osparc.store.Store.getInstance().getUser(userFromId);
+            if (user) {
+              description = "was added by " + user["label"];
+            }
+          }
+          break;
+        case "WALLET_SHARED":
+          source = "@MaterialIcons/account_balance_wallet/14";
+          break;
+      }
+      const icon = this.getChildControl("icon");
+      icon.setSource(source);
 
-      const title = this.getChildControl("title");
-      notification.bind("title", title, "value");
+      const titleLabel = this.getChildControl("title");
+      titleLabel.setValue(title ? title : notification.getTitle());
 
-      const text = this.getChildControl("text");
-      notification.bind("text", text, "value");
+      const descriptionLabel = this.getChildControl("text");
+      descriptionLabel.setValue(description ? description : notification.getText());
 
       const date = this.getChildControl("date");
       notification.bind("date", date, "value", {
@@ -166,23 +231,11 @@ qx.Class.define("osparc.notification.NotificationUI", {
       }
 
       this.fireEvent("notificationTapped");
+      osparc.notification.Notifications.markAsRead(notification);
+      this.__openActionablePath(notification);
+    },
 
-      if (notification.isRead() === false) {
-        // set as read
-        const params = {
-          url: {
-            notificationId: notification.getId()
-          },
-          data: {
-            "read": true
-          }
-        };
-        osparc.data.Resources.fetch("notifications", "patch", params)
-          .then(() => notification.setRead(true))
-          .catch(() => notification.setRead(false));
-      }
-
-      // open actionable path
+    __openActionablePath: function(notification) {
       const actionablePath = notification.getActionablePath();
       const items = actionablePath.split("/");
       const resourceId = items.pop();