✨ Update Open Graph metadata in index.html (ITISFoundation#5520)

Author: odeimaiz

services/static-webserver/client/Makefile

@@ -52,6 +52,7 @@ compile: ## qx compiles host' 'source' -> image's 'build-output'
 		--build-arg VCS_STATUS_CLIENT=${VCS_STATUS_CLIENT} \
 		--build-arg VCS_URL=${VCS_URL} \
 		--target=build-client .
+	python ./scripts/post-compile.py
 
 touch: ## minimal image build with /project/output-build inside
 	# touch /project/output-build such that multi-stage 'services/web/Dockerfile' can build development target (fixes #1097)

services/static-webserver/client/scripts/apps_metadata.json

@@ -0,0 +1,54 @@
+{
+    "applications": [
+        {
+            "application": "osparc",
+            "replacements": {
+                "replace_me_og_title": "oSPARC",
+                "replace_me_og_description": "open online simulations for Stimulating Peripheral Activity to Relieve Conditions",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ITISFoundation/osparc-simcore/master/services/static-webserver/client/source/resource/osparc/favicon-osparc.png"
+            }
+        }, {
+            "application": "s4l",
+            "replacements": {
+                "replace_me_og_title": "Sim4Life",
+                "replace_me_og_description": "Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-default.png"
+            }
+        }, {
+            "application": "s4lacad",
+            "replacements": {
+                "replace_me_og_title": "Sim4Life Science",
+                "replace_me_og_description": "Sim4Life for Science - Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-academy.png"
+            }
+        }, {
+            "application": "s4ldesktop",
+            "replacements": {
+                "replace_me_og_title": "Sim4Life (Desktop)",
+                "replace_me_og_description": "Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-default.png"
+            }
+        }, {
+            "application": "s4ldesktopacad",
+            "replacements": {
+                "replace_me_og_title": "Sim4Life Science (Desktop)",
+                "replace_me_og_description": "Sim4Life for Science - Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-academy.png"
+            }
+        }, {
+            "application": "s4llite",
+            "replacements": {
+                "replace_me_og_title": "S4L Lite",
+                "replace_me_og_description": "Sim4Life for Students - Computational life sciences platform that combines computable human phantoms, powerful physics solvers and advanced tissue models.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images/S4L/Sim4Life-head-lite.png"
+            }
+        }, {
+            "application": "tis",
+            "replacements": {
+                "replace_me_og_title": "TI Plan - IT'IS",
+                "replace_me_og_description": "A tool powered by o²S²PARC technology that reduces optimization of targeted neurostimulation protocols.",
+                "replace_me_og_image": "https://raw.githubusercontent.com/ITISFoundation/osparc-simcore/master/services/static-webserver/client/source/resource/osparc/tip_splitimage.png"
+            }
+        }
+    ]
+}

services/static-webserver/client/scripts/post-compile.py

@@ -0,0 +1,41 @@
+import os
+import json
+
+
+output_folders = [
+    "source-output", # dev output
+    "build-output",  # default production output
+    "build-client"   # I believe we create the production outputs here
+]
+
+
+def read_json_file(filename):
+    dirname = os.path.dirname(__file__)
+    meta_filename = os.path.join(dirname, filename)
+    with open(meta_filename, "r") as file:
+        metadata = json.load(file)
+        return metadata["applications"]
+
+
+def update_apps_metadata():
+    dirname = os.path.dirname(__file__)
+    applications = read_json_file("apps_metadata.json")
+    for i in applications:
+        application = i.get("application")
+        for output_folder in output_folders:
+            filename = os.path.join(dirname, '..', output_folder, application, "index.html")
+            if not os.path.isfile(filename):
+                continue
+            with open(filename, "r") as file:
+                data = file.read()
+                replacements = i.get("replacements")
+                for key in replacements:
+                    replace_text = replacements[key]
+                    data = data.replace(key, replace_text)
+            with open(filename, "w") as file: 
+                print(f"Updating app metadata: {filename}")
+                file.write(data)
+
+
+if __name__ == "__main__":
+    update_apps_metadata()

services/static-webserver/client/source/boot/index.html

@@ -28,10 +28,10 @@
   <link rel="mask-icon" href="${resourcePath}osparc/favicon-osparc.png"/>
 
   <!-- Open Graph metadata -->
-  <meta property="og:title" id="openGraphTitle" content="${appTitle}" />
-  <!-- They need to be written by the compiler, modifying the page after BootJs doesn't make the trick -->
-  <!-- <meta property="og:description" id="openGraphDescription" content="open online simulations for Stimulating Peripheral Activity to Relieve Conditions" /> -->
-  <!-- <meta property="og:image" id="openGraphImage" content="../resource/osparc/favicon-osparc.png" /> -->
+  <meta property="og:title" content="replace_me_og_title" />
+  <meta property="og:description" content="replace_me_og_description" />
+  <meta property="og:image" content="replace_me_og_image" />
+  <meta property="og:type" content="website" />
 
   <style>
     body {
@@ -46,7 +46,7 @@
   </style>
 
   <title>${appTitle}</title>
-  <meta name="description" content="open online simulations for Stimulating Peripheral Activity to Relieve Conditions" />
+  <meta name="description" content="replace_me_og_description" />
 
   <noscript>
     <meta http-equiv="refresh" content="0; url=nojs.html"/>

services/static-webserver/client/source/class/osparc/po/PreRegistration.js

@@ -17,54 +17,38 @@
 ************************************************************************ */
 
 qx.Class.define("osparc.po.PreRegistration", {
-  extend: qx.ui.core.Widget,
-
-  construct: function() {
-    this.base(arguments);
-
-    this._setLayout(new qx.ui.layout.VBox(10));
-
-    this.__buildLayout();
-  },
-
-  statics: {
-    createGroupBox: function(title) {
-      const box = new qx.ui.groupbox.GroupBox(title).set({
-        appearance: "settings-groupbox",
-        layout: new qx.ui.layout.VBox(5),
-        alignX: "center"
-      });
-      box.getChildControl("legend").set({
-        font: "text-14"
-      });
-      box.getChildControl("frame").set({
-        backgroundColor: "transparent"
-      });
-      return box;
-    },
-
-  },
+  extend: osparc.po.BaseView,
 
   members: {
-    __preRegistrationLayout: null,
-
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
         case "search-preregistration":
           control = this.__searchPreRegistration();
           this._add(control);
           break;
+        case "finding-status":
+          control = new qx.ui.basic.Label();
+          this._add(control);
+          break;
+        case "pre-registration-container":
+          control = new qx.ui.container.Scroll();
+          this._add(control, {
+            flex: 1
+          });
+          break;
       }
       return control || this.base(arguments, id);
     },
 
-    __buildLayout: function() {
-      this._createChildControlImpl("search-preregistration");
+    _buildLayout: function() {
+      this.getChildControl("search-preregistration");
+      this.getChildControl("finding-status");
+      this.getChildControl("pre-registration-container");
     },
 
     __searchPreRegistration: function() {
-      const groupBox = this.self().createGroupBox(this.tr("Pre-Registration"));
+      const groupBox = osparc.po.BaseView.createGroupBox(this.tr("Pre-Registration"));
       const form = this.__preRegistrationForm();
       const formRenderer = new qx.ui.form.renderer.Single(form);
       groupBox.add(formRenderer);
@@ -91,20 +75,23 @@ qx.Class.define("osparc.po.PreRegistration", {
           return;
         }
         if (form.validate()) {
-          if (this.__preRegistrationLayout) {
-            this._remove(this.__preRegistrationLayout);
-          }
-
+          submitBtn.setFetching(true);
+          const findingStatus = this.getChildControl("finding-status");
+          findingStatus.setValue(this.tr("Searching Pre-Registered users..."));
           const params = {
             data: JSON.parse(requestAccountData.getValue())
           };
-          submitBtn.setFetching(true);
           osparc.data.Resources.fetch("users", "preRegister", params)
             .then(data => {
-              const layout = this.__preRegistrationLayout = this.__createPreRegistrationLayout(data);
-              this._add(layout);
+              if (data.length) {
+                findingStatus.setValue(this.tr("Pre-Registered as:"));
+              } else {
+                findingStatus.setValue(this.tr("No Pre-Registered user found"));
+              }
+              this.__populatePreRegistrationLayout(data);
             })
             .catch(err => {
+              findingStatus.setValue(this.tr("Error searching Pre-Registered users"));
               console.error(err);
               osparc.FlashMessenger.logAs(err.message, "ERROR");
             })
@@ -116,23 +103,10 @@ qx.Class.define("osparc.po.PreRegistration", {
       return form;
     },
 
-    __createPreRegistrationLayout: function(respData) {
-      const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));
-
-      const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
-        alignY: "middle"
-      }));
-      vBox.add(hBox);
-
-      const respLabel = new qx.ui.basic.Label(this.tr("Pre-Registered as:"));
-      vBox.add(respLabel);
-
+    __populatePreRegistrationLayout: function(respData) {
+      const preRegistrationContainer = this.getChildControl("pre-registration-container");
       const preregistrationRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, "preregistration-data");
-      const container = new qx.ui.container.Scroll();
-      container.add(preregistrationRespViewer);
-      vBox.add(container);
-
-      return vBox;
+      preRegistrationContainer.add(preregistrationRespViewer);
     }
   }
 });

services/static-webserver/client/source/class/osparc/po/Users.js

@@ -31,13 +31,12 @@ qx.Class.define("osparc.po.Users", {
           control = new qx.ui.basic.Label();
           this._add(control);
           break;
-        case "found-users-container": {
+        case "found-users-container":
           control = new qx.ui.container.Scroll();
           this._add(control, {
             flex: 1
           });
           break;
-        }
       }
       return control || this.base(arguments, id);
     },

services/static-webserver/client/tools/qooxdoo-kit/builder/Dockerfile

@@ -51,6 +51,13 @@ RUN \
   ls -la build-output
 # -> /project/build-output
 
+# Install python...
+RUN apk add --update python3 py3-pip
+# ...and run post compilation step
+RUN \
+  --mount=type=bind,source=scripts,target=scripts \
+  python3 ./scripts/post-compile.py
+
 
 FROM joseluisq/static-web-server:1.16.0-alpine as server-base
 

services/web/server/tests/unit/isolated/test_statics.py

@@ -31,6 +31,13 @@ def source_boot_index_html(web_client_dir: Path) -> Path:
     return index_html
 
 
+@pytest.fixture(scope="module")
+def metadata_file(web_client_dir: Path) -> Path:
+    metadata_filepath = web_client_dir / "scripts" / "apps_metadata.json"
+    assert metadata_filepath.exists()
+    return json.loads(metadata_filepath.read_text())
+
+
 def test_expected_frontend_apps_produced_by_webclient(client_compile_cfg: dict):
     """
     tests that names in FRONTEND_APP_DEFAULT and FRONTEND_APPS_AVAILABLE
@@ -66,3 +73,21 @@ def test_expected_frontend_apps_produced_by_webclient(client_compile_cfg: dict):
     ), "Sync with values in FRONTEND_APPS_AVAILABLE with {compile_filepath}"
 
     assert FRONTEND_APP_DEFAULT in FRONTEND_APPS_AVAILABLE
+
+
+def test_expected_frontend_apps_metadata(client_compile_cfg: dict, metadata_file: dict):
+    """
+    tests that names in FRONTEND_APP_DEFAULT and metadata provided in app_metadata.json
+    corresponds to actual front-end apps produced by static-webserver/client
+    """
+    frontend_apps_in_repo = {
+        feapp["name"] for feapp in client_compile_cfg["applications"]
+    }
+
+    frontend_apps_in_metadata = {
+        feapp["application"] for feapp in metadata_file["applications"]
+    }
+
+    assert (
+        frontend_apps_in_repo == frontend_apps_in_metadata
+    ), "Sync with values in FRONTEND_APPS_AVAILABLE with {metadata_filepath}"

tests/e2e/tests/title.test.js

@@ -1,8 +1,30 @@
+const appMetadata = require('../../../services/static-webserver/client/scripts/apps_metadata.json')
+
 beforeAll(async () => {
   await page.goto(url);
 }, ourTimeout);
 
 test('Check site title', async () => {
   const title = await page.title();
-  expect(title).toBe('oSPARC');
+  expect(title).toBe("oSPARC");
+  
+  // oSPARC ([0]) is the product served by default
+  const replacements = appMetadata["applications"][0]["replacements"];
+
+  const description = await page.$$eval("head > meta[name='description']", descriptions => {
+    return descriptions[0].content;
+  });
+  expect(description).toBe(replacements["replace_me_og_description"]);
+
+  // Open Graph metadata
+  const ogTitle = await page.$$eval("head > meta[property='og:title']", ogTitles => {
+    return ogTitles[0].content;
+  });
+  expect(ogTitle).toBe(replacements["replace_me_og_title"]);
+
+  const ogDescription = await page.$$eval("head > meta[property='og:description']", ogDescriptions => {
+    return ogDescriptions[0].content;
+  });
+  expect(ogDescription).toBe(replacements["replace_me_og_description"]);
+
 }, 20000);