✨ [Frontend] Search Templates and Search Public Projects

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

@@ -129,8 +129,6 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
         this._populateCardMenu(card);
       });
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
-
-      this._resourcesContainer.evaluateNoResourcesFoundLabel(cards, this._resourceType);
     },
 
     __itemClicked: function(card) {

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

@@ -508,7 +508,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
       return (
         this.getBlocked() === true || // It could be blocked by IN_USE or UNKNOWN_SERVICE
-        (this.isResourceType("study") && (studyBrowserContext === "trash")) // It could a trashed study
+        (this.isResourceType("study") && (studyBrowserContext === osparc.dashboard.StudyBrowser.CONTEXT.TRASH)) // It could a trashed study
       );
     },
 

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

@@ -105,7 +105,11 @@ qx.Class.define("osparc.dashboard.CardContainer", {
     },
 
     areMoreResourcesRequired: function(loadingResourcesBtn) {
-      if (this.nextRequest !== null && loadingResourcesBtn && osparc.utils.Utils.isWidgetOnScreen(loadingResourcesBtn)) {
+      if (
+        this.nextRequest !== null &&
+        loadingResourcesBtn &&
+        osparc.utils.Utils.isWidgetOnScreen(loadingResourcesBtn)
+      ) {
         return true;
       }
       return false;

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

@@ -55,18 +55,16 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
       this._removeAll();
 
       const currentContext = osparc.store.Store.getInstance().getStudyBrowserContext();
-      if (currentContext !== "studiesAndFolders") {
-        return;
-      }
-
-      if (this.getCurrentFolderId()) {
-        const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
-        this.__createUpstreamButtons(currentFolder);
-      }
+      if (currentContext === osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS) {
+        if (this.getCurrentFolderId()) {
+          const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
+          this.__createUpstreamButtons(currentFolder);
+        }
 
-      const currentFolderButton = this.__createCurrentFolderButton();
-      if (currentFolderButton) {
-        this._add(currentFolderButton);
+        const currentFolderButton = this.__createCurrentFolderButton();
+        if (currentFolderButton) {
+          this._add(currentFolderButton);
+        }
       }
     },
 

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

@@ -276,19 +276,19 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
 
       const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
       if (
-        studyBrowserContext === "search" ||
-        studyBrowserContext === "studiesAndFolders"
+        studyBrowserContext === osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS ||
+        studyBrowserContext === osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PROJECTS
       ) {
         const editButton = new qx.ui.menu.Button(this.tr("Rename..."), "@FontAwesome5Solid/pencil-alt/12");
         editButton.addListener("execute", () => this.__editFolder(), this);
         menu.add(editButton);
 
-        if (studyBrowserContext === "search") {
+        if (studyBrowserContext === osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PROJECTS) {
           const openLocationButton = new qx.ui.menu.Button(this.tr("Open location"), "@FontAwesome5Solid/external-link-alt/12");
           openLocationButton.addListener("execute", () => {
             const folder = this.getFolder();
             this.fireDataEvent("changeContext", {
-              context: "studiesAndFolders",
+              context: osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS,
               workspaceId: folder.getWorkspaceId(),
               folderId: folder.getParentFolderId(),
             });
@@ -306,7 +306,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         const trashButton = new qx.ui.menu.Button(this.tr("Delete"), "@FontAwesome5Solid/trash/12");
         trashButton.addListener("execute", () => this.fireDataEvent("trashFolderRequested", this.getFolderId()), this);
         menu.add(trashButton);
-      } else if (studyBrowserContext === "trash") {
+      } else if (studyBrowserContext === osparc.dashboard.StudyBrowser.CONTEXT.TRASH) {
         const restoreButton = new qx.ui.menu.Button(this.tr("Restore"), "@MaterialIcons/restore_from_trash/16");
         restoreButton.addListener("execute", () => this.fireDataEvent("untrashFolderRequested", this.getFolder()), this);
         menu.add(restoreButton);
@@ -325,7 +325,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     __itemSelected: function() {
       const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
       // do not allow selecting workspace
-      if (studyBrowserContext !== "trash") {
+      if (studyBrowserContext !== osparc.dashboard.StudyBrowser.CONTEXT.TRASH) {
         this.fireDataEvent("folderSelected", this.getFolderId());
       }
     },

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

@@ -35,7 +35,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
 
   events: {
     "templatesContext": "qx.event.type.Event",
-    "publicContext": "qx.event.type.Event",
+    "publicTemplatesContext": "qx.event.type.Event",
     "trashContext": "qx.event.type.Event",
     "changeTab": "qx.event.type.Data",
     "trashStudyRequested": "qx.event.type.Data",
@@ -100,9 +100,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       });
       this.__workspacesAndFoldersTree.contextChanged(context);
 
-      this.__templatesButton.setValue(context === "templates");
-      this.__publicProjectsButton.setValue(context === "public");
-      this.__trashButton.setValue(context === "trash");
+      this.__templatesButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.TEMPLATES);
+      this.__publicProjectsButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.PUBLIC_TEMPLATES);
+      this.__trashButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.TRASH);
     },
 
     /* WORKSPACES AND FOLDERS */
@@ -158,7 +158,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       publicProjectsButton.addListener("changeValue", e => {
         const templatesEnabled = e.getData();
         if (templatesEnabled) {
-          this.fireEvent("publicContext");
+          this.fireEvent("publicTemplatesContext");
         }
       });
       return publicProjectsButton;

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

@@ -31,6 +31,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     this.__foldersList = [];
     this.__resourcesList = [];
     this.__groupedContainersList = [];
+    this.__resourceType = resourceType || "study";
 
     if (resourceType === "study") {
       const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.CardContainer();
@@ -135,35 +136,57 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     __groupedContainersList: null,
     __foldersContainer: null,
     __workspacesContainer: null,
-    __noResourcesFound: null,
     __nonGroupedContainer: null,
     __groupedContainers: null,
-
-    evaluateNoResourcesFoundLabel: function(cards, context) {
-      if (this.__noResourcesFound) {
-        let text = null;
-        switch (context) {
-          case "studiesAndFolders":
-          case "search":
-            text = this.tr("No Projects found");
-            break;
-          case "templates":
-            text = this.tr("No Templates found");
-            break;
-          case "public":
-            text = this.tr("No Public Projects found");
-            break;
-          case "template":
-            text = this.tr("No Tutorials found");
-            break;
-          case "service":
-            text = this.tr("No Apps found");
-            break;
+    __resourceType: null,
+    __noResourcesFound: null,
+    __noResourcesFoundTimer: null,
+
+    __evaluateNoResourcesFoundLabel: function() {
+      let text = null;
+      switch (this.__resourceType) {
+        case "study": {
+          const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
+          switch (studyBrowserContext) {
+            case osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS:
+            case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PROJECTS:
+            case osparc.dashboard.StudyBrowser.CONTEXT.TRASH:
+              text = this.tr("No Projects found");
+              break;
+            case osparc.dashboard.StudyBrowser.CONTEXT.TEMPLATES:
+            case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_TEMPLATES:
+              text = this.tr("No Templates found");
+              break;
+            case osparc.dashboard.StudyBrowser.CONTEXT.PUBLIC_TEMPLATES:
+            case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PUBLIC_TEMPLATES:
+              text = this.tr("No Public Projects found");
+              break;
+          }
+          break;
         }
-        this.__noResourcesFound.set({
-          value: text,
-          visibility: text && cards.length === 0 ? "visible" : "excluded",
-        });
+        case "template":
+          text = this.tr("No Tutorials found");
+          break;
+        case "service":
+          text = this.tr("No Apps found");
+          break;
+        default:
+          text = this.tr("No Resources found");
+          break;
+      }
+
+      this.__noResourcesFound.exclude();
+      if (this.__noResourcesFoundTimer) {
+        clearTimeout(this.__noResourcesFoundTimer);
+      }
+      if (text && this.__resourcesList.length === 0) {
+        // delay it a bit to avoid the initial flickering
+        this.__noResourcesFoundTimer = setTimeout(() => {
+          this.__noResourcesFound.set({
+            value: text,
+            visibility: "visible",
+          });
+        }, 2000);
       }
     },
 
@@ -307,6 +330,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     setResourcesToList: function(resourcesList) {
       this.__resourcesList = resourcesList;
+
+      this.__evaluateNoResourcesFoundLabel();
     },
 
     __cleanAll: function() {