🎨 [Frontend] Functions browser: connect FE to BE

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

@@ -228,6 +228,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
       this.addHintFromGids(shareIcon, gids);
     },
 
+    populateMyAccessRightsIcon: function(shareIcon, myAccessRights) {
+      const canIWrite = Boolean(myAccessRights["write"]);
+      shareIcon.set({
+        source: canIWrite ? osparc.dashboard.CardBase.SHARE_ICON : osparc.dashboard.CardBase.SHARED_USER,
+        toolTipText: canIWrite ? "" : qx.locale.Manager.tr("Shared"),
+      });
+    },
+
     addHintFromGids: function(icon, gids) {
       const groupsStore = osparc.store.Groups.getInstance();
       const groupEveryone = groupsStore.getEveryoneGroup();
@@ -524,6 +532,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
 
     __applyResourceData: function(resourceData) {
       let uuid = null;
+      let title = "";
       let owner = null;
       let workbench = null;
       let defaultHits = null;
@@ -534,16 +543,19 @@ qx.Class.define("osparc.dashboard.CardBase", {
         case "tutorial":
         case "hypertool":
           uuid = resourceData.uuid ? resourceData.uuid : null;
+          title = resourceData.name,
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
           break;
         case "function":
           uuid = resourceData.uuid ? resourceData.uuid : null;
+          title = resourceData.title,
           owner = "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
           break;
         case "service":
           uuid = resourceData.key ? resourceData.key : null;
+          title = resourceData.name,
           owner = resourceData.owner ? resourceData.owner : resourceData.contact;
           icon = resourceData["icon"] || osparc.dashboard.CardBase.PRODUCT_ICON;
           defaultHits = 0;
@@ -553,7 +565,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       this.set({
         resourceType: resourceData.resourceType,
         uuid,
-        title: resourceData.name,
+        title,
         description: resourceData.description,
         owner,
         accessRights: resourceData.accessRights ? resourceData.accessRights : {},
@@ -593,7 +605,11 @@ qx.Class.define("osparc.dashboard.CardBase", {
           break;
         }
         case "function":
-          this.setIcon(osparc.data.model.StudyUI.PIPELINE_ICON);
+          if (resourceData["functionClass"] === osparc.data.model.Function.FUNCTION_CLASS.PROJECT) {
+            this.setIcon(osparc.data.model.StudyUI.PIPELINE_ICON);
+          } else {
+            this.setIcon(osparc.dashboard.CardBase.PRODUCT_ICON);
+          }
           break;
       }
     },

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

@@ -249,23 +249,33 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     // overridden
     _applyOwner: function(value, old) {
       const label = this.getChildControl("subtitle-text");
-      const user = this.__createOwner(value);
-      label.setValue(user);
-      label.setVisibility(value ? "visible" : "excluded");
+      if (osparc.utils.Resources.isFunction(this.getResourceData())) {
+        const canIWrite = Boolean(this.getResourceData()["accessRights"]["write"]);
+        label.setValue(canIWrite ? "My Function" : "Read Only");
+      } else {
+        const user = this.__createOwner(value);
+        label.setValue(user);
+        label.setVisibility(value ? "visible" : "excluded");
+      }
     },
 
     _applyAccessRights: function(value) {
       if (value && Object.keys(value).length) {
         const shareIcon = this.getChildControl("subtitle-icon");
-        shareIcon.addListener("tap", e => {
-          e.stopPropagation();
-          this.openAccessRights();
-        }, this);
-        shareIcon.addListener("pointerdown", e => e.stopPropagation());
-        osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);
+        if (this.isResourceType("function")) {
+          // in case of functions, the access rights are actually myAccessRights
+          osparc.dashboard.CardBase.populateMyAccessRightsIcon(shareIcon, value);
+        } else {
+          shareIcon.addListener("tap", e => {
+            e.stopPropagation();
+            this.openAccessRights();
+          }, this);
+          shareIcon.addListener("pointerdown", e => e.stopPropagation());
+          osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);
 
-        if (this.isResourceType("study")) {
-          this._setStudyPermissions(value);
+          if (this.isResourceType("study")) {
+            this._setStudyPermissions(value);
+          }
         }
       }
     },

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

@@ -243,24 +243,34 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
 
     _applyOwner: function(value, old) {
       const label = this.getChildControl("owner");
-      const user = this.__createOwner(value);
-      label.setValue(user);
+      if (osparc.utils.Resources.isFunction(this.getResourceData())) {
+        const canIWrite = Boolean(this.getResourceData()["accessRights"]["write"]);
+        label.setValue(canIWrite ? "My Function" : "Read Only");
+      } else {
+        const user = this.__createOwner(value);
+        label.setValue(user);
+      }
 
       this.__makeItemResponsive(label);
     },
 
     _applyAccessRights: function(value) {
       if (value && Object.keys(value).length) {
         const shareIcon = this.getChildControl("shared-icon");
-        shareIcon.addListener("tap", e => {
-          e.stopPropagation();
-          this.openAccessRights();
-        }, this);
-        shareIcon.addListener("pointerdown", e => e.stopPropagation());
-        osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);
+        if (this.isResourceType("function")) {
+          // in case of functions, the access rights are actually myAccessRights
+          osparc.dashboard.CardBase.populateMyAccessRightsIcon(shareIcon, value);
+        } else {
+          shareIcon.addListener("tap", e => {
+            e.stopPropagation();
+            this.openAccessRights();
+          }, this);
+          shareIcon.addListener("pointerdown", e => e.stopPropagation());
+          osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);
 
-        if (this.isResourceType("study")) {
-          this._setStudyPermissions(value);
+          if (this.isResourceType("study")) {
+            this._setStudyPermissions(value);
+          }
         }
       }
     },

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

@@ -66,6 +66,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
               const studyStore = osparc.store.Study.getInstance();
               this.__resourceData["debt"] = studyStore.getStudyDebt(this.__resourceData["uuid"]);
             }
+            // prefetch project's services metadata
             osparc.store.Services.getStudyServicesMetadata(latestResourceData)
               .finally(() => {
                 this.__resourceModel = new osparc.data.model.Study(latestResourceData);
@@ -75,15 +76,25 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
               });
             break;
           case "function": {
-            // use function's underlying template info to fetch services metadata
-            // osparc.store.Templates.fetchTemplate(resourceData["uuid"]);
-            osparc.store.Services.getStudyServicesMetadata(latestResourceData)
-              .finally(() => {
-                this.__resourceModel = new osparc.data.model.Function(latestResourceData);
-                this.__resourceModel["resourceType"] = resourceData["resourceType"];
-                this.__resourceData["services"] = resourceData["services"];
-                this.__addPages();
-              });
+            addPages = (functionData, templateData = null) => {
+              this.__resourceModel = new osparc.data.model.Function(functionData, templateData);
+              this.__resourceModel["resourceType"] = resourceData["resourceType"];
+              this.__addPages();
+            }
+            if (resourceData["functionClass"] === osparc.data.model.Function.FUNCTION_CLASS.PROJECT) {
+              // this is only required for functions that have a template linked
+              osparc.store.Templates.fetchTemplate(resourceData["templateId"])
+                .then(templateData => {
+                  // prefetch function's underlying template's services metadata
+                  osparc.store.Services.getStudyServicesMetadata(templateData)
+                    .finally(() => {
+                      this.__resourceData["services"] = resourceData["services"];
+                      addPages(latestResourceData, templateData);
+                    });
+                });
+            } else {
+              addPages(latestResourceData);
+            }
             break;
           }
           case "service": {
@@ -121,7 +132,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
     popUpInWindow: function(resourceData) {
       const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
-      const title = resourceData.name;
+      const title = resourceData.name || resourceData.title; // title is used by functions
       const window = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({
         layout: new qx.ui.layout.Grow(),
         ...osparc.ui.window.TabbedWindow.DEFAULT_PROPS,
@@ -173,7 +184,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     __addToolbarButtons: function(page) {
       const resourceData = this.__resourceData;
 
-      if (this.__resourceData["resourceType"] === "function") {
+      if (osparc.utils.Resources.isFunction(this.__resourceData)) {
         return; // no toolbar buttons for functions
       }
 
@@ -395,10 +406,11 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         this.__addPreviewPage();
         this.fireEvent("pagesAdded");
         return;
-      } else if (this.__resourceData["resourceType"] === "function") {
+      } else if (osparc.utils.Resources.isFunction(this.__resourceData)) {
         this.__addInfoPage();
-        // to build the preview page we need the underlying template data
-        // this.__addPreviewPage();
+        if (this.__resourceModel.getFunctionClass() === osparc.data.model.Function.FUNCTION_CLASS.PROJECT) {
+          this.__addPreviewPage();
+        }
         this.fireEvent("pagesAdded");
         return;
       }
@@ -575,12 +587,12 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);
       this.__addToolbarButtons(page);
 
-      const studyData = this.__resourceData;
+      const studyData = osparc.utils.Resources.isFunction(this.__resourceData) ? this.__resourceModel.getTemplate().serialize() : this.__resourceData;
       const enabled = osparc.study.Utils.canShowPreview(studyData);
       page.setEnabled(enabled);
 
       const lazyLoadContent = () => {
-        const resourceModel = this.__resourceModel;
+        const resourceModel = osparc.utils.Resources.isFunction(this.__resourceData) ? this.__resourceModel.getTemplate() : this.__resourceData;
         const preview = new osparc.study.StudyPreview(resourceModel);
         page.addToContent(preview);
         this.__widgets.push(preview);

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

@@ -310,11 +310,6 @@ qx.Class.define("osparc.data.Permissions", {
         return false;
       }
 
-      // This needs to be provided by the backend
-      if (action === "readFunctions") {
-        return osparc.utils.Utils.isDevelopmentPlatform();
-      }
-
       if (
         this.__functionPermissions &&
         action in this.__functionPermissions

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

@@ -628,18 +628,22 @@ qx.Class.define("osparc.data.Resources", {
       "functions": {
         useCache: false,
         endpoints: {
-          create: {
-            method: "POST",
-            url: statics.API + "/functions"
-          },
           getOne: {
             method: "GET",
             url: statics.API + "/functions/{functionId}?include_extras=true"
           },
           getPage: {
             method: "GET",
-            url: statics.API + "/functions?include_extras=true"
-          }
+            url: statics.API + "/functions?include_extras=true&offset={offset}&limit={limit}"
+          },
+          create: {
+            method: "POST",
+            url: statics.API + "/functions"
+          },
+          patch: {
+            method: "PATCH",
+            url: statics.API + "/functions/{functionId}"
+          },
         }
       },
       /*