✨ [Frontend] Listen to openFunction iframe's message

services/static-webserver/client/source/class/osparc/notification/NotificationUI.js

@@ -169,15 +169,13 @@ qx.Class.define("osparc.notification.NotificationUI", {
         case "TEMPLATE_SHARED":
           icon.setSource("@FontAwesome5Solid/copy/14");
           if (resourceId) {
-            const template = osparc.store.Templates.getTemplate(resourceId);
-            if (template) {
-              const templateAlias = osparc.product.Utils.getTemplateAlias({
-                firstUpperCase: true
-              });
-              titleLabel.setValue(`${templateAlias} '${template["name"]}'`);
-            } else {
-              this.setEnabled(false);
-            }
+            osparc.store.Templates.fetchTemplate(resourceId)
+              .then(templateData => {
+                if (templateData) {
+                  titleLabel.setValue(templateData["name"]);
+                }
+              })
+              .catch(() => this.setEnabled(false));
           }
           if (userFromId) {
             const user = osparc.store.Groups.getInstance().getUserByUserId(userFromId);

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

@@ -43,6 +43,16 @@ qx.Class.define("osparc.store.Templates", {
       return this.__fetchTemplatesPaginated(params, options);
     },
 
+    fetchTemplate: function(templateId) {
+      const params = {
+        url: {
+          "studyId": templateId,
+        }
+      };
+      return osparc.data.Resources.fetch("studies", "getOne", params)
+        .catch(err => console.error(err));
+    },
+
     __fetchAllTutorials: function() {
       const params = {
         url: {

services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js

@@ -328,6 +328,22 @@ qx.Class.define("osparc.widget.PersistentIframe", {
             }
             break;
           }
+          case "openFunction": {
+            // this is the MetaModeling service trying to show function/template information
+            if (data["message"] && data["message"]["functionId"]) {
+              const templateId = data["message"]["functionId"];
+              osparc.store.Templates.fetchTemplate(templateId)
+                .then(templateData => {
+                  templateData["resourceType"] = "template";
+                  const resourceDetails = new osparc.dashboard.ResourceDetails(templateData).set({
+                    showOpenButton: false,
+                  });
+                  osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
+                })
+                .catch(() => osparc.FlashMessenger.logError(this.tr("Function not found")));
+            }
+            break;
+          }
         }
       }
     },