✨ [Frontend] User profile details

services/static-webserver/client/source/class/osparc/conversation/MessageUI.js

@@ -64,7 +64,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
       let control;
       switch (id) {
         case "thumbnail":
-          control = osparc.utils.Utils.createThumbnail(32).set({
+          control = new osparc.ui.basic.UserThumbnail(32).set({
             marginTop: 4,
           });
           this._add(control, {
@@ -165,13 +165,8 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
       osparc.store.Users.getInstance().getUser(message["userGroupId"])
         .then(user => {
-          if (user) {
-            thumbnail.setSource(user.getThumbnail());
-            userName.setValue(user.getLabel());
-          } else {
-            thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());
-            userName.setValue("Unknown user");
-          }
+          thumbnail.setUser(user);
+          userName.setValue(user ? user.getLabel() : "Unknown user");
         })
         .catch(() => {
             thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());

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

@@ -737,6 +737,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
           win.close();
         }
         win.addListener("cancel", () => cancelStudyOptions());
+        win.getChildControl("close-button").addListener("tap", () => cancelStudyOptions());
         studyOptions.addListener("cancel", () => cancelStudyOptions());
         studyOptions.addListener("startStudy", () => {
           const newName = studyOptions.getChildControl("title-field").getValue();

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

@@ -51,7 +51,7 @@ qx.Class.define("osparc.data.model.User", {
       }
       description += email;
     }
-    const thumbnail = osparc.utils.Avatar.emailToThumbnail(email, username);
+
     this.set({
       userId,
       groupId,
@@ -60,10 +60,14 @@ qx.Class.define("osparc.data.model.User", {
       lastName,
       email,
       phoneNumber: userData["phone"] || null,
-      thumbnail,
       label: userData["userName"] || description,
       description,
     });
+
+    // create the thumbnail after setting email and username
+    this.set({
+      thumbnail: this.createThumbnail(),
+    });
   },
 
   properties: {
@@ -137,4 +141,10 @@ qx.Class.define("osparc.data.model.User", {
       event: "changeThumbnail",
     },
   },
+
+  members: {
+    createThumbnail: function(size) {
+      return osparc.utils.Avatar.emailToThumbnail(this.getEmail(), this.getUsername(), size);
+    },
+  },
 });

services/static-webserver/client/source/class/osparc/store/Support.js

@@ -163,7 +163,7 @@ qx.Class.define("osparc.store.Support", {
     addReleaseNotesToMenu: function(menu) {
       const releaseTag = osparc.utils.Utils.getReleaseTag();
       const releaseLink = osparc.utils.Utils.getReleaseLink();
-      const releaseBtn = new qx.ui.menu.Button(qx.locale.Manager.tr("Release Notes") + " " + releaseTag, "@FontAwesome5Solid/book/14");
+      const releaseBtn = new qx.ui.menu.Button(qx.locale.Manager.tr("What's new in") + " " + releaseTag, "@FontAwesome5Solid/bullhorn/14");
       releaseBtn.addListener("execute", () => window.open(releaseLink), this);
       menu.add(releaseBtn);
     },

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

@@ -0,0 +1,58 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.ui.basic.UserThumbnail", {
+  extend: qx.ui.basic.Image,
+
+  construct: function(size) {
+    this.base(arguments);
+
+    this.set(osparc.utils.Utils.getThumbnailProps(size));
+
+    if (osparc.data.Permissions.getInstance().isProductOwner()) {
+      this.setCursor("pointer");
+      this.addListener("tap", this.__openUserDetails, this);
+    }
+  },
+
+  properties: {
+    user: {
+      check: "osparc.data.model.User",
+      init: null,
+      nullable: true,
+      apply: "__applyUser",
+    }
+  },
+
+  members: {
+    __applyUser: function(user) {
+      if (user) {
+        this.setSource(user.getThumbnail());
+      } else {
+        this.setSource(osparc.utils.Avatar.emailToThumbnail());
+      }
+    },
+
+    __openUserDetails: function() {
+      if (this.getUser()) {
+        const userDetails = new osparc.user.UserDetails(this.getUser());
+        userDetails.center();
+        userDetails.open();
+      }
+    },
+  }
+});

services/static-webserver/client/source/class/osparc/user/UserDetails.js

@@ -0,0 +1,164 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.user.UserDetails", {
+  extend: osparc.ui.window.Window,
+
+  construct: function(user) {
+    this.base(arguments);
+
+    this.set({
+      layout: new qx.ui.layout.VBox(10),
+      autoDestroy: true,
+      showMaximize: false,
+      showMinimize: false,
+      clickAwayClose: true,
+    });
+
+    this.setUser(user);
+  },
+
+  statics: {
+    WIDTH: 300,
+    HEIGHT: 200,
+
+    GRID_POS: {
+      USERNAME: 0,
+      FULLNAME: 1,
+      EMAIL: 2,
+      USER_ID: 3,
+      GROUP_ID: 4,
+    }
+  },
+
+  properties: {
+    user: {
+      check: "osparc.data.model.User",
+      init: null,
+      nullable: false,
+      event: "changeUser",
+      apply: "__applyUser",
+    }
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "top-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));
+          this.add(control);
+          break;
+        case "thumbnail":
+          control = new osparc.ui.basic.Thumbnail(null, 100, 100);
+          control.getChildControl("image").set({
+            anonymous: true,
+            decorator: "rounded",
+          });
+          this.getChildControl("top-layout").add(control);
+          break;
+        case "main-info": {
+          const grid = new qx.ui.layout.Grid(10, 6);
+          grid.setColumnFlex(1, 1);
+          grid.setColumnAlign(0, "right", "middle");
+          control = new qx.ui.container.Composite(grid);
+          this.getChildControl("top-layout").add(control, {
+            flex: 1
+          });
+          break;
+        }
+        case "username": {
+          const title = new qx.ui.basic.Label("Username");
+          this.getChildControl("main-info").add(title, {
+            row: this.self().GRID_POS.USERNAME,
+            column: 0
+          });
+          control = new qx.ui.basic.Label();
+          this.getChildControl("main-info").add(control, {
+            row: this.self().GRID_POS.USERNAME,
+            column: 1
+          });
+          break;
+        }
+        case "fullname": {
+          const title = new qx.ui.basic.Label("Full Name");
+          this.getChildControl("main-info").add(title, {
+            row: this.self().GRID_POS.FULLNAME,
+            column: 0
+          });
+          control = new qx.ui.basic.Label();
+          this.getChildControl("main-info").add(control, {
+            row: this.self().GRID_POS.FULLNAME,
+            column: 1
+          });
+          break;
+        }
+        case "email": {
+          const title = new qx.ui.basic.Label("Email");
+          this.getChildControl("main-info").add(title, {
+            row: this.self().GRID_POS.EMAIL,
+            column: 0
+          });
+          control = new qx.ui.basic.Label();
+          this.getChildControl("main-info").add(control, {
+            row: this.self().GRID_POS.EMAIL,
+            column: 1
+          });
+          break;
+        }
+        case "user-id": {
+          const title = new qx.ui.basic.Label("User ID");
+          this.getChildControl("main-info").add(title, {
+            row: this.self().GRID_POS.USER_ID,
+            column: 0
+          });
+          control = new qx.ui.basic.Label();
+          this.getChildControl("main-info").add(control, {
+            row: this.self().GRID_POS.USER_ID,
+            column: 1
+          });
+          break;
+        }
+        case "group-id": {
+          const title = new qx.ui.basic.Label("Group ID");
+          this.getChildControl("main-info").add(title, {
+            row: this.self().GRID_POS.GROUP_ID,
+            column: 0
+          });
+          control = new qx.ui.basic.Label();
+          this.getChildControl("main-info").add(control, {
+            row: this.self().GRID_POS.GROUP_ID,
+            column: 1
+          });
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __applyUser: function(user) {
+      this.setCaption(user.getUsername());
+
+      this.getChildControl("thumbnail").setSource(user.createThumbnail(96));
+      this.getChildControl("username").setValue(user.getUsername());
+      this.getChildControl("fullname").setValue([user.getFirstName(), user.getLastName()].filter(Boolean).join(" "));
+      this.getChildControl("email").setValue(user.getEmail());
+      this.getChildControl("user-id").setValue(String(user.getUserId()));
+      this.getChildControl("group-id").setValue(String(user.getGroupId()));
+    },
+  }
+});