✨ Frontend: S4L-Academic (#4729)

odeimaiz · web-flow · commit 23dad29fc1b9 · 2023-09-11T15:12:06.000+02:00
diff --git a/services/docker-compose.yml b/services/docker-compose.yml
@@ -254,7 +254,7 @@ services:
         - traefik.http.services.${SWARM_STACK_NAME}_static_webserver.loadbalancer.healthcheck.interval=2000ms
         - traefik.http.services.${SWARM_STACK_NAME}_static_webserver.loadbalancer.healthcheck.timeout=1000ms
         - traefik.http.middlewares.${SWARM_STACK_NAME}_static_webserver_retry.retry.attempts=2
-        - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.rule=hostregexp(`{host:.+}`) && (Path(`/osparc`,`/s4l`,`/s4llite`,`/tis`,`/transpiled`,`/resource`) || PathPrefix(`/osparc/`,`/s4l/`,`/s4llite/`,`/tis/`,`/transpiled/`,`/resource/`))
+        - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.rule=hostregexp(`{host:.+}`) && (Path(`/osparc`,`/s4l`,`/s4llite`,`/s4lacad`,`/tis`,`/transpiled`,`/resource`) || PathPrefix(`/osparc/`,`/s4l/`,`/s4llite/`,`/s4lacad/`,`/tis/`,`/transpiled/`,`/resource/`))
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.service=${SWARM_STACK_NAME}_static_webserver
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.entrypoints=http
         - traefik.http.routers.${SWARM_STACK_NAME}_static_webserver.priority=2
diff --git a/services/static-webserver/README.md b/services/static-webserver/README.md
@@ -6,5 +6,5 @@ Used for static content serving.
 
 In the future will fully serve all static content. Currently the `webserver` is still serving the following routes:
 
-- `/` resolves to one of the three index.html pages inside the 4 products (osparc, tis, s4l, s4llite)
+- `/` resolves to one of the three index.html pages inside the 4 products (osparc, tis, s4l, s4llite, s4lacad)
 - `/static-frontend-data.json` contains information required by the fronted
diff --git a/services/static-webserver/client/compile.json b/services/static-webserver/client/compile.json
@@ -68,6 +68,22 @@
       "addTimestampsToUrls": true,
       "bootPath": "source/boot"
     },
+    {
+      "class": "osparc.Application",
+      "theme": "osparc.theme.products.s4l.ThemeDark",
+      "name": "s4lacad",
+      "title": "S4L Academic",
+      "include": [
+        "iconfont.material.Load",
+        "iconfont.fontawesome5.Load",
+        "osparc.theme.products.s4l.ThemeLight"
+      ],
+      "environment": {
+        "product.name": "s4lacad"
+      },
+      "addTimestampsToUrls": true,
+      "bootPath": "source/boot"
+    },
     {
       "class": "osparc.Application",
       "theme": "osparc.theme.products.tis.ThemeDark",
diff --git a/services/static-webserver/client/source/class/osparc/Application.js b/services/static-webserver/client/source/class/osparc/Application.js
@@ -342,6 +342,7 @@ qx.Class.define("osparc.Application", {
       switch (qx.core.Environment.get("product.name")) {
         case "s4l":
         case "s4llite":
+        case "s4lacad":
           if (landingPage) {
             view = new osparc.product.landingPage.s4llite.Page();
             view.addListener("loginPressed", () => {
diff --git a/services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js b/services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js
@@ -43,8 +43,20 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
       this._setLayout(layout);
 
       this.setBackgroundColor("#025887");
+      let backgroundImage = "";
+      switch (osparc.product.Utils.getProductName()) {
+        case "s4llite":
+          backgroundImage = "url(resource/osparc/s4llite_splitimage.png)";
+          break;
+        case "s4lacad":
+          backgroundImage = "url(resource/osparc/s4lacad_splitimage.png)";
+          break;
+        default:
+          backgroundImage = "url(resource/osparc/s4l_splitimage.jpeg)";
+          break;
+      }
       this.getContentElement().setStyles({
-        "background-image": osparc.product.Utils.isProduct("s4llite") ? "url(resource/osparc/s4llite_splitimage.png)" : "url(resource/osparc/s4l_splitimage.jpeg)",
+        "background-image": backgroundImage,
         "background-repeat": "no-repeat",
         "background-size": "auto 100%"
       });
diff --git a/services/static-webserver/client/source/class/osparc/auth/LoginPageTI.js b/services/static-webserver/client/source/class/osparc/auth/LoginPageTI.js
@@ -43,7 +43,7 @@ qx.Class.define("osparc.auth.LoginPageTI", {
       this._setLayout(layout);
 
       this.getContentElement().setStyles({
-        "background-image": "url(resource/osparc/ti_splitimage.png)",
+        "background-image": "url(resource/osparc/tip_splitimage.png)",
         "background-repeat": "no-repeat",
         "background-size": "contain"
       });
diff --git a/services/static-webserver/client/source/class/osparc/component/share/NewCollaboratorsManager.js b/services/static-webserver/client/source/class/osparc/component/share/NewCollaboratorsManager.js
@@ -87,7 +87,7 @@ qx.Class.define("osparc.component.share.NewCollaboratorsManager", {
       } else {
         includeEveryone = osparc.data.Permissions.getInstance().canDo("study.everyone.share");
       }
-      osparc.store.Store.getInstance().getPotentialCollaborators(includeEveryone)
+      osparc.store.Store.getInstance().getPotentialCollaborators(false, includeEveryone)
         .then(potentialCollaborators => {
           this.__visibleCollaborators = potentialCollaborators;
           this.__addCollaborators();
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -208,7 +208,11 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         tagByGroup.addListener("execute", () => this._groupByChanged("tags"));
         groupByMenu.add(tagByGroup);
         groupOptions.add(tagByGroup);
-        if (osparc.product.Utils.isProduct("s4l") || osparc.product.Utils.isProduct("s4llite")) {
+        if (
+          osparc.product.Utils.isProduct("s4l") ||
+          osparc.product.Utils.isProduct("s4llite") ||
+          osparc.product.Utils.isProduct("s4lacad")
+        ) {
           tagByGroup.execute();
         }
       }
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js
@@ -447,6 +447,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           this.__addTIPPlusButtons();
           break;
         case "s4l":
+        case "s4lacad":
           this.__addS4LPlusButtons();
           break;
         case "s4llite":
diff --git a/services/static-webserver/client/source/class/osparc/data/Permissions.js b/services/static-webserver/client/source/class/osparc/data/Permissions.js
@@ -140,13 +140,16 @@ qx.Class.define("osparc.data.Permissions", {
       };
       let fromUserToTester = [];
       if (osparc.product.Utils.isProduct("tis")) {
+        // "templates" and "services" tabs only for testers
+        // start/stop/edit app mode only for testers
         fromUserToTester = [
           "dashboard.templates.read",
           "dashboard.services.read",
           "study.slides.edit",
           "study.slides.stop"
         ];
       } else if (osparc.product.Utils.isProduct("s4llite")) {
+        // "services" and "data" tabs only for testers
         fromUserToTester = [
           "dashboard.services.read",
           "dashboard.data.read"
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
@@ -111,7 +111,11 @@ qx.Class.define("osparc.desktop.MainPage", {
         if (!isReadOnly && preferencesSettings.getConfirmBackToDashboard()) {
           const studyName = this.__studyEditor.getStudy().getName();
           const win = new osparc.ui.window.Confirmation();
-          if (osparc.product.Utils.isProduct("s4l") || osparc.product.Utils.isProduct("s4llite")) {
+          if (
+            osparc.product.Utils.isProduct("s4l") ||
+            osparc.product.Utils.isProduct("s4llite") ||
+            osparc.product.Utils.isProduct("s4lacad")
+          ) {
             let msg = this.tr("Do you want to close ") + "<b>" + studyName + "</b>?";
             msg += "<br><br>";
             msg += this.tr("Make sure you saved your changes to:");
diff --git a/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js b/services/static-webserver/client/source/class/osparc/desktop/wallets/MembersList.js
@@ -91,7 +91,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
 
       this.__memberInvitation.setVisibility(this.__canIWrite() ? "visible" : "excluded");
 
-      this.__reloadMembers();
+      this.__reloadWalletMembers();
     },
 
     __canIWrite: function() {
@@ -198,7 +198,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       return memebersUIList;
     },
 
-    __reloadMembers: async function() {
+    __reloadWalletMembers: async function() {
       const membersModel = this.__membersModel;
       membersModel.removeAll();
 
@@ -208,7 +208,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       }
 
       const membersList = [];
-      const potentialCollaborators = await osparc.store.Store.getInstance().getPotentialCollaborators();
+      const potentialCollaborators = await osparc.store.Store.getInstance().getPotentialCollaborators(true);
       const canIWrite = wallet.getMyAccessRights()["write"];
       wallet.getAccessRights().forEach(accessRights => {
         const gid = accessRights["gid"];
@@ -271,7 +271,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
         .then(() => {
           osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)
             .then(() => {
-              this.__reloadMembers();
+              this.__reloadWalletMembers();
               if (cb) {
                 cb();
               }
@@ -295,7 +295,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       osparc.data.Resources.fetch("wallets", "putAccessRights", params)
         .then(() => {
           osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)
-            .then(() => this.__reloadMembers());
+            .then(() => this.__reloadWalletMembers());
         });
     },
 
@@ -315,7 +315,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       osparc.data.Resources.fetch("wallets", "putAccessRights", params)
         .then(() => {
           osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)
-            .then(() => this.__reloadMembers());
+            .then(() => this.__reloadWalletMembers());
         });
     },
 
@@ -334,7 +334,7 @@ qx.Class.define("osparc.desktop.wallets.MembersList", {
       osparc.data.Resources.fetch("wallets", "deleteAccessRights", params)
         .then(() => {
           osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)
-            .then(() => this.__reloadMembers());
+            .then(() => this.__reloadWalletMembers());
         });
     }
   }
diff --git a/services/static-webserver/client/source/class/osparc/product/AboutProduct.js b/services/static-webserver/client/source/class/osparc/product/AboutProduct.js
@@ -58,6 +58,9 @@ qx.Class.define("osparc.product.AboutProduct", {
         case "s4llite":
           this.__buildS4LLiteLayout();
           break;
+        case "s4lacad":
+          this.__buildS4LAcademicLayout();
+          break;
         default: {
           const noInfoText = this.tr("Information not available");
           const noInfoLabel = osparc.product.tutorial.Utils.createLabel(noInfoText).set({
@@ -122,6 +125,32 @@ qx.Class.define("osparc.product.AboutProduct", {
       this.__addCopyright();
     },
 
+    __buildS4LAcademicLayout: function() {
+      const color = qx.theme.manager.Color.getInstance().resolve("text");
+
+      const introText = "TODO: Intro text";
+
+      const licenseUrl = "";
+      const licenseText = `TODO: Click <a href=${licenseUrl} style='color: ${color}' target='_blank'>here</a> to read the license agreements.`;
+
+      // more info ZMT website
+      const moreInfoUrl = "https://zmt.swiss/";
+      const moreInfoText = `For more information about <i>S4L Academic</i>, visit <a href=${moreInfoUrl} style='color: ${color}' target='_blank'>our website</a>.`;
+
+      [
+        introText,
+        licenseText,
+        moreInfoText
+      ].forEach(text => {
+        const label = osparc.product.tutorial.Utils.createLabel(text).set({
+          maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING
+        });
+        this.add(label);
+      });
+
+      this.__addCopyright();
+    },
+
     __addCopyright: function() {
       const copyrightLink = new osparc.ui.basic.LinkLabel().set({
         font: "link-label-14"
diff --git a/services/static-webserver/client/source/class/osparc/product/Utils.js b/services/static-webserver/client/source/class/osparc/product/Utils.js
@@ -38,6 +38,7 @@ qx.Class.define("osparc.product.Utils", {
       switch (product) {
         case "s4l":
         case "s4llite":
+        case "s4lacad":
           if (options.plural) {
             alias = qx.locale.Manager.tr("projects");
           } else {
@@ -68,6 +69,7 @@ qx.Class.define("osparc.product.Utils", {
       switch (product) {
         case "s4l":
         case "s4llite":
+        case "s4lacad":
           if (options.plural) {
             alias = qx.locale.Manager.tr("tutorials");
           } else {
@@ -120,6 +122,9 @@ qx.Class.define("osparc.product.Utils", {
         case "s4llite":
           logosPath = lightLogo ? "osparc/s4llite-white.png" : "osparc/s4llite-black.png";
           break;
+        case "s4lacad":
+          logosPath = lightLogo ? "osparc/s4lacad-white.png" : "osparc/s4lacad-black.png";
+          break;
         case "tis":
           logosPath = lightLogo ? "osparc/tip_itis-white.svg" : "osparc/tip_itis-black.svg";
           break;
@@ -138,21 +143,21 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     showLicenseExtra: function() {
-      if (this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("tis")) {
+      if (this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("s4lacad") || this.isProduct("tis")) {
         return true;
       }
       return false;
     },
 
     showStudyPreview: function() {
-      if (this.isProduct("osparc") || this.isProduct("s4l") || this.isProduct("s4llite")) {
+      if (this.isProduct("osparc") || this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("s4lacad")) {
         return true;
       }
       return false;
     },
 
     showAboutProduct: function() {
-      if (this.isProduct("s4l") || this.isProduct("s4llite")) {
+      if (this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("s4lacad")) {
         return true;
       }
       return false;
@@ -187,14 +192,14 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     showQuality: function() {
-      if (this.isProduct("s4l") || this.isProduct("s4llite")) {
+      if (this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("s4lacad")) {
         return false;
       }
       return true;
     },
 
     showClassifiers: function() {
-      if (this.isProduct("s4l") || this.isProduct("s4llite")) {
+      if (this.isProduct("s4l") || this.isProduct("s4llite") || this.isProduct("s4lacad")) {
         return false;
       }
       return true;
diff --git a/services/static-webserver/client/source/class/osparc/store/Store.js b/services/static-webserver/client/source/class/osparc/store/Store.js
@@ -523,7 +523,7 @@ qx.Class.define("osparc.store.Store", {
       });
     },
 
-    getPotentialCollaborators: function(includeGlobalEveryone = false) {
+    getPotentialCollaborators: function(includeMe = false, includeGlobalEveryone = false) {
       return new Promise((resolve, reject) => {
         const promises = [];
         promises.push(this.getGroupsOrganizations());
@@ -545,6 +545,16 @@ qx.Class.define("osparc.store.Store", {
               members[gid]["collabType"] = 2;
               potentialCollaborators[gid] = members[gid];
             }
+            if (includeMe) {
+              const myData = osparc.auth.Data.getInstance();
+              const myGid = myData.getGroupId();
+              potentialCollaborators[myGid] = {
+                "login": myData.getEmail(),
+                "first_name": myData.getFirstName(),
+                "last_name": myData.getLastName(),
+                "collabType": 2
+              };
+            }
             const productEveryone = values[2]; // entry
             if (productEveryone && productEveryone["accessRights"]["read"]) {
               productEveryone["collabType"] = 0;
diff --git a/services/static-webserver/client/source/resource/osparc/favicon-s4lacad.png b/services/static-webserver/client/source/resource/osparc/favicon-s4lacad.png
diff --git a/services/static-webserver/client/source/resource/osparc/s4lacad-black.png b/services/static-webserver/client/source/resource/osparc/s4lacad-black.png
diff --git a/services/static-webserver/client/source/resource/osparc/s4lacad-white.png b/services/static-webserver/client/source/resource/osparc/s4lacad-white.png
diff --git a/services/static-webserver/client/source/resource/osparc/s4lacad_splitimage.png b/services/static-webserver/client/source/resource/osparc/s4lacad_splitimage.png
diff --git a/services/static-webserver/client/source/resource/osparc/tip_splitimage.png b/services/static-webserver/client/source/resource/osparc/tip_splitimage.png
diff --git a/services/web/server/src/simcore_service_webserver/statics/_constants.py b/services/web/server/src/simcore_service_webserver/statics/_constants.py
@@ -1,6 +1,6 @@
 # these are the apps built right now by static-webserver/client
 
-FRONTEND_APPS_AVAILABLE = frozenset({"osparc", "tis", "s4l", "s4llite"})
+FRONTEND_APPS_AVAILABLE = frozenset({"osparc", "tis", "s4l", "s4llite", "s4lacad"})
 FRONTEND_APP_DEFAULT = "osparc"
 
 assert FRONTEND_APP_DEFAULT in FRONTEND_APPS_AVAILABLE  # nosec
diff --git a/services/web/server/src/simcore_service_webserver/statics/_events.py b/services/web/server/src/simcore_service_webserver/statics/_events.py
@@ -47,7 +47,7 @@
 
 async def create_cached_indexes(app: web.Application) -> None:
     """
-    Currently the static resources are contain 4 folders: osparc, s4l, s4llite, tis
+    Currently the static resources are contain 4 folders: osparc, s4l, s4llite, s4lacad, tis
     each of them contain and index.html to be served to as the root of the site
     for each type of frontend.
 
diff --git a/services/web/server/src/simcore_service_webserver/statics/plugin.py b/services/web/server/src/simcore_service_webserver/statics/plugin.py
@@ -31,7 +31,7 @@ def setup_statics(app: web.Application) -> None:
     setup_products(app)
 
     # serves information composed by making 4 http requests (once for each product)
-    # to the index.html in each of the 4 product directories /osparc, /s4l, /s4llite and /tis
+    # to the index.html in each of the 4 product directories /osparc, /s4l, /s4llite, /s4lacad and /tis
     app.router.add_get("/", get_cached_frontend_index, name=INDEX_RESOURCE_NAME)
 
     # statics.json is computed here and contains information used

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ qx.Class.define("osparc.component.share.NewCollaboratorsManager", {`
`87`	`87`	`} else {`
`88`	`88`	`includeEveryone = osparc.data.Permissions.getInstance().canDo("study.everyone.share");`
`89`	`89`	`}`
`90`		`- osparc.store.Store.getInstance().getPotentialCollaborators(includeEveryone)`
	`90`	`+ osparc.store.Store.getInstance().getPotentialCollaborators(false, includeEveryone)`
`91`	`91`	`.then(potentialCollaborators => {`
`92`	`92`	`this.__visibleCollaborators = potentialCollaborators;`
`93`	`93`	`this.__addCollaborators();`
Original file line number	Diff line number	Diff line change
`@@ -208,7 +208,11 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {`
`208`	`208`	`tagByGroup.addListener("execute", () => this._groupByChanged("tags"));`
`209`	`209`	`groupByMenu.add(tagByGroup);`
`210`	`210`	`groupOptions.add(tagByGroup);`
`211`		`- if (osparc.product.Utils.isProduct("s4l") \|\| osparc.product.Utils.isProduct("s4llite")) {`
	`211`	`+ if (`
	`212`	`+ osparc.product.Utils.isProduct("s4l") \|\|`
	`213`	`+ osparc.product.Utils.isProduct("s4llite") \|\|`
	`214`	`+ osparc.product.Utils.isProduct("s4lacad")`
	`215`	`+ ) {`
`212`	`216`	`tagByGroup.execute();`
`213`	`217`	`}`
`214`	`218`	`}`