🐛 [Frontend] Fix: Templates listing (#7673)

Author: odeimaiz

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

@@ -69,13 +69,17 @@ qx.Class.define("osparc.dashboard.Dashboard", {
     appearance: {
       init: "dashboard",
       refine: true
-    }
+    },
   },
 
   statics: {
     PADDING: 15
   },
 
+  events: {
+    "preResourcesLoaded": "qx.event.type.Event",
+  },
+
   members: {
     __studyBrowser: null,
     __templateBrowser: null,
@@ -181,12 +185,15 @@ qx.Class.define("osparc.dashboard.Dashboard", {
         this.add(tabPage);
       }, this);
 
+      let preResourcesLoaded = false;
       const preResourcePromises = [];
       const groupsStore = osparc.store.Groups.getInstance();
       preResourcePromises.push(groupsStore.fetchGroupsAndMembers());
       preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
       Promise.all(preResourcePromises)
         .then(() => {
+          preResourcesLoaded = true;
+          this.fireEvent("preResourcesLoaded");
           if (this.__studyBrowser) {
             this.__studyBrowser.initResources();
           }
@@ -196,15 +203,24 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           if (this.__dataBrowser) {
             this.__dataBrowser.initResources();
           }
-
-          this.addListener("changeSelection", e => {
-            const selectedTab = e.getData()[0];
-            if (selectedTab && selectedTab.resourceBrowser) {
-              selectedTab.resourceBrowser.initResources();
-            }
-          }, this);
         })
         .catch(err => console.error(err));
+
+      this.addListener("changeSelection", e => {
+        const selectedTab = e.getData()[0];
+        if (selectedTab && selectedTab.resourceBrowser) {
+          // avoid changing the selection when the PreResources are not yet loaded
+          if (preResourcesLoaded) {
+            selectedTab.resourceBrowser.initResources();
+          } else {
+            const initTab = () => {
+              selectedTab.resourceBrowser.initResources()
+              this.removeListener("preResourcesLoaded", initTab);
+            };
+            this.addListener("preResourcesLoaded", initTab, this);
+          }
+        }
+      }, this);
     },
 
     __createStudyBrowser: function() {

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

@@ -45,33 +45,25 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     HEIGHT: 36,
 
     getSharedWithOptions: function(resourceType) {
-      if (resourceType === "service") {
-        resourceType = "app";
-      }
+      const resourceAlias = osparc.product.Utils.resourceTypeToAlias(resourceType, {
+        firstUpperCase: true,
+        plural: true
+      });
       return [{
         id: "show-all",
-        label: qx.locale.Manager.tr("All") + " " + osparc.product.Utils.resourceTypeToAlias(resourceType, {
-          firstUpperCase: true,
-          plural: true
-        }),
+        label: qx.locale.Manager.tr("All") + " " + resourceAlias,
         icon: "@FontAwesome5Solid/home/20"
       }, {
         id: "my-resources",
-        label: qx.locale.Manager.tr("My") + " " + osparc.product.Utils.resourceTypeToAlias(resourceType, {
-          firstUpperCase: true,
-          plural: true
-        }),
+        label: qx.locale.Manager.tr("My") + " " + resourceAlias,
         icon: "@FontAwesome5Solid/user/20"
       }, {
         id: "shared-with-me",
         label: qx.locale.Manager.tr("Shared with Me"),
         icon: "@FontAwesome5Solid/users/20"
       }, {
         id: "shared-with-everyone",
-        label: qx.locale.Manager.tr("Public") + " " + osparc.product.Utils.resourceTypeToAlias(resourceType, {
-          firstUpperCase: true,
-          plural: true
-        }),
+        label: qx.locale.Manager.tr("Public") + " " + resourceAlias,
         icon: "@FontAwesome5Solid/globe/20"
       }];
     }

services/static-webserver/client/source/class/osparc/product/Utils.js

@@ -139,7 +139,9 @@ qx.Class.define("osparc.product.Utils", {
         case "template":
           return this.getTemplateAlias(options);
         case "service":
-          return this.getServiceAlias(options);
+          // return this.getServiceAlias(options);
+          // Do not use this alias anymore, use "app" instead
+          return this.getAppAlias(options);
         case "hypertool":
           return this.getHypertoolAlias(options);
         case "app":

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

@@ -360,6 +360,7 @@ qx.Class.define("osparc.store.Services", {
     __addServiceToCache: function(service) {
       const key = service.key;
       const version = service.version;
+      service["resourceType"] = "service";
       this.__addToCache(key, version, service);
     },