🎨 [Frontend] TIP: Update Texts and Quick Start visuals (#6112)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/Application.js

@@ -79,9 +79,15 @@ qx.Class.define("osparc.Application", {
       // to provide our own message here
       window.addEventListener("beforeunload", e => {
         const downloadLinkTracker = osparc.DownloadLinkTracker.getInstance();
-        // The downloadLinkTracker uses an external link for downloading files.
-        // When it starts (click), triggers an unload event. This condition avoids the false positive
-        if (!downloadLinkTracker.isDownloading() && webSocket.isConnected()) {
+        if (
+          // The downloadLinkTracker uses an external link for downloading files.
+          // When it starts (click), triggers an unload event. This condition avoids the false positive
+          !downloadLinkTracker.isDownloading() &&
+          // allow reloading in login page
+          webSocket.isConnected() &&
+          // allow reloading in dashboard
+          osparc.store.Store.getInstance().getCurrentStudy()
+        ) {
           // Cancel the event as stated by the standard.
           e.preventDefault();
           // Chrome requires returnValue to be set.

services/static-webserver/client/source/class/osparc/auth/ui/LoginView.js

@@ -125,10 +125,13 @@ qx.Class.define("osparc.auth.ui.LoginView", {
 
       if (osparc.product.Utils.isProduct("tis")) {
         const text = `
-        1) The TIP tool is designed exclusively for research purposes and it is not intended for clinical use.
+        1) The TIP tool is designed for research purposes only and is not intended for clinical use.
         </br>
         </br>
-        2) Users are responsible for ensuring the anonymization and protection of privacy of medical data.
+        2) Users are responsible for ensuring the anonymization and privacy protection of personal data.
+        </br>
+        </br>
+        3) The development, maintenance and usage of the TIP tool is fully sponsored by the IT’IS Foundation, with the exception of the 61 complex 3D electromagnetic simulations on the AWS cluster required for the personalized plans.
         `;
         const disclaimer = osparc.announcement.AnnouncementUIFactory.createLoginAnnouncement(this.tr("Disclaimer"), text);
         this.add(disclaimer);

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

@@ -36,8 +36,6 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
       appearance: "pb-new"
     });
 
-    this._buildLayout();
-
     if (title) {
       const titleLabel = this.getChildControl("title");
       titleLabel.set({
@@ -51,22 +49,12 @@ qx.Class.define("osparc.dashboard.GridButtonNew", {
       descLabel.setValue(description.toString());
     }
 
+    this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
+
     this.getChildControl("footer").exclude();
   },
 
   members: {
-    _buildLayout: function() {
-      const title = this.getChildControl("title");
-      title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
-        firstUpperCase: true
-      }));
-
-      const desc = this.getChildControl("subtitle-text");
-      desc.setValue(this.tr("Start with an empty study").toString());
-
-      this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
-    },
-
     _onToggleChange: function(e) {
       this.setValue(false);
     },

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

@@ -97,6 +97,10 @@ qx.Class.define("osparc.dashboard.GroupedToggleButtonContainer", {
             maxWidth: 32,
             maxHeight: 32
           });
+          control.getChildControl("label").set({
+            rich: true,
+            wrap: true
+          })
           control.getContentElement().setStyles({
             "border-top-left-radius": "4px",
             "border-top-right-radius": "4px"

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

@@ -33,32 +33,23 @@ qx.Class.define("osparc.dashboard.ListButtonNew", {
       appearance: "pb-new"
     });
 
-    this._buildLayout();
-
     if (title) {
       const titleLabel = this.getChildControl("title");
-      titleLabel.setValue(title);
+      titleLabel.set({
+        value: title,
+        rich: true
+      });
     }
 
     if (description) {
       const descLabel = this.getChildControl("description");
-      descLabel.setValue(description.toString());
+      descLabel.setValue(description);
     }
+
+    this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
   },
 
   members: {
-    _buildLayout: function() {
-      const title = this.getChildControl("title");
-      title.setValue(this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
-        firstUpperCase: true
-      }));
-
-      const desc = this.getChildControl("description");
-      desc.setValue(this.tr("Start with an empty study").toString());
-
-      this.setIcon(osparc.dashboard.CardBase.NEW_ICON);
-    },
-
     _onToggleChange: function(e) {
       this.setValue(false);
     },

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

@@ -51,6 +51,10 @@ qx.Class.define("osparc.dashboard.NewStudies", {
     "newStudyClicked": "qx.event.type.Data"
   },
 
+  statics: {
+    WIDTH: 600
+  },
+
   members: {
     __newStudies: null,
     __groups: null,
@@ -126,7 +130,10 @@ qx.Class.define("osparc.dashboard.NewStudies", {
       });
       osparc.utils.Utils.setIdToWidget(groupContainer, groupId.toString() + "Group");
       const atom = groupContainer.getChildControl("header");
-      atom.setFont("text-16");
+      atom.set({
+        font: "text-16",
+        maxWidth: this.self().WIDTH
+      });
       this.__groupedContainers.push(groupContainer);
       return groupContainer;
     },

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

@@ -464,7 +464,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     __addEmptyStudyPlusButton: function() {
       const mode = this._resourcesContainer.getMode();
-      const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew() : new osparc.dashboard.ListButtonNew();
+      const title = this.tr("Empty") + " " + osparc.product.Utils.getStudyAlias({
+        firstUpperCase: true
+      })
+      const desc = this.tr("Start with an empty study");
+      const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
       newStudyBtn.setCardKey("new-study");
       newStudyBtn.subscribeToFilterGroup("searchBarFilter");
       osparc.utils.Utils.setIdToWidget(newStudyBtn, "newStudyBtn");
@@ -477,7 +481,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __addTIPPlusButtons: function() {
-      const mode = this._resourcesContainer.getMode();
       osparc.data.Resources.get("templates")
         .then(templates => {
           if (templates) {
@@ -486,6 +489,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
                 const product = osparc.product.Utils.getProductName()
                 if (product in newStudiesData) {
                   const newButtonsInfo = newStudiesData[product].resources;
+                  const mode = this._resourcesContainer.getMode();
                   const title = this.tr("New Plan");
                   const desc = this.tr("Choose Plan in pop-up");
                   const newStudyBtn = (mode === "grid") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);
@@ -505,7 +509,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
                     const newStudies = new osparc.dashboard.NewStudies(foundTemplates, groups);
                     newStudies.setGroupBy("category");
                     const winTitle = this.tr("New Plan");
-                    const win = osparc.ui.window.Window.popUpInWindow(newStudies, winTitle, 640, 600).set({
+                    const win = osparc.ui.window.Window.popUpInWindow(newStudies, winTitle, osparc.dashboard.NewStudies.WIDTH+40, 300).set({
                       clickAwayClose: false,
                       resizable: true
                     });

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

@@ -125,6 +125,13 @@ qx.Class.define("osparc.data.model.Slideshow", {
       return "";
     },
 
+    setInstructions: function(nodeId, instructions) {
+      const slideshow = this.getData();
+      if (nodeId in slideshow) {
+        slideshow[nodeId]["instructions"] = instructions;
+      }
+    },
+
     addNodeToSlideshow: function(newNode, leftNodeId, rightNodeId) {
       const nodeId = newNode.getNodeId();
       if (leftNodeId) {

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

@@ -196,6 +196,10 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
             const orgMember = e.getData();
             this.__deleteMember(orgMember);
           });
+          item.addListener("leaveResource", e => {
+            const orgMember = e.getData();
+            this.__deleteMyself(orgMember);
+          });
         }
       });
 
@@ -278,6 +282,15 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
                 ];
               }
             }
+            // Let me go?
+            const openStudy = osparc.store.Store.getInstance().getCurrentStudy();
+            if (
+              openStudy === null &&
+              canIWrite &&
+              members.length > 1 && member["gid"] === osparc.auth.Data.getInstance().getGroupId()
+            ) {
+              options.push("leave");
+            }
             member["options"] = options;
             member["showOptions"] = Boolean(options.length);
             membersList.push(member);
@@ -469,7 +482,6 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
       };
       osparc.data.Resources.fetch("organizationMembers", "patch", params)
         .then(() => {
-          // osparc.FlashMessenger.getInstance().logAs(orgMember["name"] + this.tr(" successfully demoted to Member"));
           osparc.FlashMessenger.getInstance().logAs(orgMember["name"] + this.tr(` successfully demoted to ${osparc.data.Roles.ORG[1].label}`));
           osparc.store.Store.getInstance().reset("organizationMembers");
           this.__reloadOrgMembers();
@@ -496,7 +508,6 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
       };
       osparc.data.Resources.fetch("organizationMembers", "patch", params)
         .then(() => {
-          // osparc.FlashMessenger.getInstance().logAs(orgMember["name"] + this.tr(" successfully demoted to Manager"));
           osparc.FlashMessenger.getInstance().logAs(orgMember["name"] + this.tr(` successfully demoted to ${osparc.data.Roles.ORG[3].label}`));
           osparc.store.Store.getInstance().reset("organizationMembers");
           this.__reloadOrgMembers();
@@ -507,27 +518,67 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
         });
     },
 
-    __deleteMember: function(orgMember) {
-      if (this.__currentOrg === null) {
-        return;
-      }
-
+    __doDeleteMember: function(orgMember) {
       const params = {
         url: {
           "gid": this.__currentOrg.getGid(),
           "uid": orgMember["id"]
         }
       };
-      osparc.data.Resources.fetch("organizationMembers", "delete", params)
+      return osparc.data.Resources.fetch("organizationMembers", "delete", params)
         .then(() => {
           osparc.FlashMessenger.getInstance().logAs(orgMember["name"] + this.tr(" successfully removed"));
           osparc.store.Store.getInstance().reset("organizationMembers");
-          this.__reloadOrgMembers();
         })
         .catch(err => {
           osparc.FlashMessenger.getInstance().logAs(this.tr("Something went wrong removing ") + orgMember["name"], "ERROR");
           console.error(err);
         });
+    },
+
+    __deleteMember: function(orgMember) {
+      if (this.__currentOrg === null) {
+        return;
+      }
+
+      this.__doDeleteMember(orgMember)
+        .then(() => this.__reloadOrgMembers());
+    },
+
+    __deleteMyself: function(orgMember) {
+      if (this.__currentOrg === null) {
+        return;
+      }
+
+      const params = {
+        url: {
+          "gid": this.__currentOrg.getGid()
+        }
+      };
+      osparc.data.Resources.get("organizationMembers", params)
+        .then(members => {
+          const isThereAnyAdmin = members.some(member => member["accessRights"]["delete"]);
+          const isThereAnyManager = members.some(member => member["accessRights"]["write"]);
+          let rUSure = this.tr("Are you sure you want to leave?");
+          if (isThereAnyAdmin) {
+            rUSure += `<br>There is no ${osparc.data.Roles.ORG[2].label} in this Organization.`;
+          } else if (isThereAnyManager) {
+            rUSure += `<br>There is no ${osparc.data.Roles.ORG[3].label} in this Organization.`;
+          }
+          rUSure += "<br><br>" + this.tr("If you Leave, the page will be reloaded.");
+          const confirmationWin = new osparc.ui.window.Confirmation(rUSure).set({
+            confirmText: this.tr("Leave"),
+            confirmAction: "delete"
+          });
+          confirmationWin.center();
+          confirmationWin.open();
+          confirmationWin.addListener("close", () => {
+            if (confirmationWin.getConfirmed()) {
+              this.__doDeleteMember(orgMember)
+                .then(() => window.location.reload());
+            }
+          }, this);
+        });
     }
   }
 });

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

@@ -179,7 +179,8 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
       const orgsModel = this.__orgsModel;
       orgsModel.removeAll();
 
-      osparc.data.Resources.get("organizations")
+      const useCache = false;
+      osparc.data.Resources.get("organizations", null, useCache)
         .then(async respOrgs => {
           const orgs = respOrgs["organizations"];
           const promises = await orgs.map(async org => {