🎨 [Frontend] All users know about the Support group

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

@@ -52,6 +52,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
   statics: {
     SHARE_ICON: "@FontAwesome5Solid/share-alt/13",
     SHARED_USER: "@FontAwesome5Solid/user/13",
+    SHARED_SUPPORT: "@FontAwesome5Solid/question/13",
     SHARED_ORGS: "@FontAwesome5Solid/users/13",
     SHARED_ALL: "@FontAwesome5Solid/globe/13",
     PERM_READ: "@FontAwesome5Solid/eye/13",
@@ -188,17 +189,25 @@ qx.Class.define("osparc.dashboard.CardBase", {
       // Icon
       const groupsStore = osparc.store.Groups.getInstance();
       const everyoneGroupIds = groupsStore.getEveryoneGroupIds();
+      const supportGroup = groupsStore.getSupportGroup();
       const organizations = groupsStore.getOrganizations();
       const myGroupId = groupsStore.getMyGroupId();
 
       const organizationIds = Object.keys(organizations).map(key => parseInt(key));
       if (gids.some(gid => everyoneGroupIds.includes(gid))) {
+        // shared with "1" or product everyone
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ALL);
+      } else if (supportGroup && gids.includes(supportGroup.getGroupId())) {
+        // shared with support group, show as if it was a group
+        shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ORGS);
       } else if (organizationIds.filter(value => gids.includes(value)).length) { // find intersection
+        // shared with at least one organization
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ORGS);
       } else if (gids.length === 1 && gids[0] === myGroupId) {
+        // not shared
         shareIcon.setSource(osparc.dashboard.CardBase.SHARE_ICON);
       } else {
+        // shared with some users
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_USER);
       }
 
@@ -227,10 +236,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
     addHintFromGids: function(icon, gids) {
       const groupsStore = osparc.store.Groups.getInstance();
       const everyoneGroups = groupsStore.getEveryoneGroups();
+      const supportGroup = groupsStore.getSupportGroup();
       const organizations = groupsStore.getOrganizations();
       const myGroupId = groupsStore.getMyGroupId();
 
       const groups = everyoneGroups.slice();
+      if (supportGroup) {
+        groups.push(supportGroup);
+      }
       groups.push(...Object.values(organizations));
       const sharedGrps = [];
       groups.forEach(group => {
@@ -267,10 +280,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
               sharedGrpLabels.push("...");
               break;
             }
-            let sharedGrpLabel = sharedGrps[i].getLabel();
-            if (everyoneGroups.includes(sharedGrps[i])) {
+            const sharedGroup = sharedGrps[i];
+            let sharedGrpLabel = sharedGroup.getLabel();
+            if (everyoneGroups.includes(sharedGroup)) {
               sharedGrpLabel = "Public";
             }
+            if (supportGroup && supportGroup.getGroupId() === sharedGroup.getGroupId()) {
+              sharedGrpLabel = supportGroup.getLabel();
+            }
             if (!sharedGrpLabels.includes(sharedGrpLabel)) {
               sharedGrpLabels.push(sharedGrpLabel);
             }

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

@@ -580,11 +580,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
               let icon = "";
               if (group.getThumbnail()) {
                 icon = group.getThumbnail();
-              } else if (group["collabType"] === 0) {
+              } else if (group["collabType"] === osparc.store.Groups.COLLAB_TYPE.EVERYONE) {
                 icon = "@FontAwesome5Solid/globe/24";
-              } else if (group["collabType"] === 1) {
+              } else if (group["collabType"] === osparc.store.Groups.COLLAB_TYPE.ORGANIZATION) {
                 icon = "@FontAwesome5Solid/users/24";
-              } else if (group["collabType"] === 2) {
+              } else if (group["collabType"] === osparc.store.Groups.COLLAB_TYPE.USER) {
                 icon = "@FontAwesome5Solid/user/24";
               }
               groupContainer.set({

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

@@ -82,7 +82,7 @@ qx.Class.define("osparc.data.model.Group", {
     },
 
     groupType: {
-      check: ["me", "organization", "productEveryone", "everyone"],
+      check: ["me", "organization", "support", "productEveryone", "everyone"],
       nullable: false,
       init: null,
     },

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

@@ -44,13 +44,7 @@ qx.Class.define("osparc.data.model.User", {
     } else if (userData["lastName"]) {
       lastName = userData["lastName"];
     }
-    let description = [firstName, lastName].join(" ").trim(); // the null values will be replaced by empty strings
-    if (email) {
-      if (description) {
-        description += " - "
-      }
-      description += email;
-    }
+    const description = osparc.data.model.User.userDataToDescription(firstName, lastName, email);
 
     this.set({
       userId,
@@ -142,6 +136,19 @@ qx.Class.define("osparc.data.model.User", {
     },
   },
 
+  statics: {
+    userDataToDescription: function(firstName, lastName, email) {
+      let description = [(firstName || ""), (lastName || "")].join(" ").trim(); // the null values will be replaced by empty strings
+      if (email) {
+        if (description) {
+          description += " - "
+        }
+        description += email;
+      }
+      return description;
+    }
+  },
+
   members: {
     createThumbnail: function(size) {
       return osparc.utils.Avatar.emailToThumbnail(this.getEmail(), this.getUsername(), size);

services/static-webserver/client/source/class/osparc/filter/CollaboratorToggleButton.js

@@ -28,18 +28,23 @@ qx.Class.define("osparc.filter.CollaboratorToggleButton", {
     let label = null;
     let toolTipText = "";
     switch (collaborator["collabType"]) {
-      case 0:
-        iconPath = "@FontAwesome5Solid/globe/14";
+      case osparc.store.Groups.COLLAB_TYPE.EVERYONE:
+        iconPath = osparc.dashboard.CardBase.SHARED_ALL;
         label = this.tr("Public");
         toolTipText = this.tr("Public to all users");
         break;
-      case 1:
-        iconPath = "@FontAwesome5Solid/users/14";
+      case osparc.store.Groups.COLLAB_TYPE.SUPPORT:
+        iconPath = osparc.dashboard.CardBase.SHARED_SUPPORT;
         label = collaborator.getLabel();
         toolTipText = collaborator.getDescription();
         break;
-      case 2: {
-        iconPath = "@FontAwesome5Solid/user/14";
+      case osparc.store.Groups.COLLAB_TYPE.ORGANIZATION:
+        iconPath = osparc.dashboard.CardBase.SHARED_ORGS;
+        label = collaborator.getLabel();
+        toolTipText = collaborator.getDescription();
+        break;
+      case osparc.store.Groups.COLLAB_TYPE.USER: {
+        iconPath = osparc.dashboard.CardBase.SHARED_USER;
         label = collaborator.getLabel();
         if (collaborator.getEmail()) {
           toolTipText += collaborator.getEmail() + "<br>";

services/static-webserver/client/source/class/osparc/filter/OrganizationsAndMembers.js

@@ -64,18 +64,21 @@ qx.Class.define("osparc.filter.OrganizationsAndMembers", {
 
       const visibleCollaborators = Object.values(this.__visibleCollaborators);
 
+      // define the priority order
+      const collabTypeOrder = [
+        osparc.store.Groups.COLLAB_TYPE.EVERYONE,
+        osparc.store.Groups.COLLAB_TYPE.SUPPORT,
+        osparc.store.Groups.COLLAB_TYPE.ORGANIZATION,
+        osparc.store.Groups.COLLAB_TYPE.USER
+      ];
       // sort them first
       visibleCollaborators.sort((a, b) => {
-        if (a["collabType"] > b["collabType"]) {
-          return 1;
-        }
-        if (a["collabType"] < b["collabType"]) {
-          return -1;
-        }
-        if (a.getLabel() > b.getLabel()) {
-          return 1;
-        }
-        return -1;
+        const typeDiff = collabTypeOrder.indexOf(a["collabType"]) - collabTypeOrder.indexOf(b["collabType"]);
+          if (typeDiff !== 0) {
+            return typeDiff;
+          }
+          // fallback: sort alphabetically by label
+          return a.getLabel().localeCompare(b.getLabel());
       });
 
       visibleCollaborators.forEach(visibleCollaborator => {
@@ -85,14 +88,14 @@ qx.Class.define("osparc.filter.OrganizationsAndMembers", {
         const btn = this.addOption(visibleCollaborator);
         let iconPath = null;
         switch (visibleCollaborator["collabType"]) {
-          case 0:
-            iconPath = "@FontAwesome5Solid/globe/14";
+          case osparc.store.Groups.COLLAB_TYPE.EVERYONE:
+            iconPath = osparc.dashboard.CardBase.SHARED_ALL;
             break;
-          case 1:
-            iconPath = "@FontAwesome5Solid/users/14";
+          case osparc.store.Groups.COLLAB_TYPE.ORGANIZATION:
+            iconPath = osparc.dashboard.CardBase.SHARED_ORGS;
             break;
-          case 2:
-            iconPath = "@FontAwesome5Solid/user/14";
+          case osparc.store.Groups.COLLAB_TYPE.USER:
+            iconPath = osparc.dashboard.CardBase.SHARED_USER;
             break;
         }
         btn.setIcon(iconPath);

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

@@ -417,9 +417,5 @@ qx.Class.define("osparc.product.Utils", {
     groupServices: function() {
       return Boolean(osparc.store.Products.getInstance().getGroupedServicesUiConfig());
     },
-
-    isSupportEnabled: function() {
-      return Boolean(osparc.store.Products.getInstance().getSupportGroupId());
-    },
   }
 });

services/static-webserver/client/source/class/osparc/share/Collaborators.js

@@ -437,6 +437,7 @@ qx.Class.define("osparc.share.Collaborators", {
       const usersStore = osparc.store.Users.getInstance();
       const groupsStore = osparc.store.Groups.getInstance();
       const everyoneGroupIds = groupsStore.getEveryoneGroupIds();
+      const supportGroup = groupsStore.getSupportGroup();
       const allGroups = groupsStore.getAllGroups();
       const showOptions = this.__canIChangePermissions();
       const accessRights = this._serializedDataCopy["accessRights"];
@@ -461,6 +462,8 @@ qx.Class.define("osparc.share.Collaborators", {
             // organization
             if (everyoneGroupIds.includes(parseInt(gid))) {
               collaborator["thumbnail"] = "@FontAwesome5Solid/globe/32";
+            } else if (supportGroup && supportGroup.getGroupId() === parseInt(gid)) {
+              collaborator["thumbnail"] = supportGroup.getThumbnail();
             } else if (!collaborator["thumbnail"]) {
               collaborator["thumbnail"] = "@FontAwesome5Solid/users/26";
             }

services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js

@@ -17,11 +17,12 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       allowMaximize: false,
       showMinimize: false,
       showMaximize: false,
+      resizable: true,
       autoDestroy: true,
       modal: true,
       width: 430,
-      maxHeight: 500,
-      clickAwayClose: true
+      height: 500,
+      clickAwayClose: true,
     });
 
     this.__resourceData = resourceData;
@@ -120,9 +121,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
           break;
         }
         case "potential-collaborators-list": {
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
-            minHeight: 160,
-          });
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox());
           const scrollContainer = new qx.ui.container.Scroll();
           scrollContainer.add(control);
           this.add(scrollContainer, {
@@ -242,7 +241,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       const text = this.getChildControl("text-filter").getChildControl("textfield").getValue();
       osparc.store.Users.getInstance().searchUsers(text)
         .then(users => {
-          users.forEach(user => user["collabType"] = 2);
+          users.forEach(user => user["collabType"] = osparc.store.Groups.COLLAB_TYPE.USER);
           this.__addPotentialCollaborators(users);
         })
         .catch(err => osparc.FlashMessenger.logError(err))
@@ -338,18 +337,21 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       const potentialCollaborators = Object.values(this.__potentialCollaborators).concat(foundCollaborators);
       const potentialCollaboratorList = this.getChildControl("potential-collaborators-list");
 
+      // define the priority order
+      const collabTypeOrder = [
+        osparc.store.Groups.COLLAB_TYPE.EVERYONE,
+        osparc.store.Groups.COLLAB_TYPE.SUPPORT,
+        osparc.store.Groups.COLLAB_TYPE.ORGANIZATION,
+        osparc.store.Groups.COLLAB_TYPE.USER
+      ];
       // sort them first
       potentialCollaborators.sort((a, b) => {
-        if (a["collabType"] > b["collabType"]) {
-          return 1;
-        }
-        if (a["collabType"] < b["collabType"]) {
-          return -1;
-        }
-        if (a.getLabel() > b.getLabel()) {
-          return 1;
+        const typeDiff = collabTypeOrder.indexOf(a["collabType"]) - collabTypeOrder.indexOf(b["collabType"]);
+        if (typeDiff !== 0) {
+          return typeDiff;
         }
-        return -1;
+        // fallback: sort alphabetically by label
+        return a.getLabel().localeCompare(b.getLabel());
       });
 
       let existingCollabs = [];
@@ -383,7 +385,7 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
           return;
         }
         // maybe, do not list the organizations
-        if (this.__showOrganizations === false && potentialCollaborator["collabType"] !== 2) {
+        if (this.__showOrganizations === false && potentialCollaborator["collabType"] !== osparc.store.Groups.COLLAB_TYPE.USER) {
           return;
         }
         potentialCollaboratorList.add(this.__collaboratorButton(potentialCollaborator));