✨ [Frontend] Templates and Public Projects in Study Browser (#7676)

Author: odeimaiz

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

@@ -18,7 +18,7 @@
 /**
  * Widget containing a TabView including:
  * - StudyBrowser
- * - TemplateBrowser
+ * - TutorialBrowser
  * - AppBrowser
  * - DataBrowser
  *
@@ -82,16 +82,16 @@ qx.Class.define("osparc.dashboard.Dashboard", {
 
   members: {
     __studyBrowser: null,
-    __templateBrowser: null,
+    __tutorialBrowser: null,
     __appBrowser: null,
     __dataBrowser: null,
 
     getStudyBrowser: function() {
       return this.__studyBrowser;
     },
 
-    getTemplateBrowser: function() {
-      return this.__templateBrowser;
+    getTutorialBrowser: function() {
+      return this.__tutorialBrowser;
     },
 
     getAppBrowser: function() {
@@ -104,23 +104,17 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       const tabs = [{
         id: "studiesTab",
         buttonId: "studiesTabBtn",
-        label: osparc.product.Utils.getStudyAlias({
-          plural: true,
-          allUpperCase: true
-        }),
+        label: this.tr("PROJECTS"),
         icon: "@FontAwesome5Solid/file/"+tabIconSize,
         buildLayout: this.__createStudyBrowser
       }];
       if (permissions.canDo("dashboard.templates.read")) {
         tabs.push({
           id: "templatesTab",
           buttonId: "templatesTabBtn",
-          label: osparc.product.Utils.getTemplateAlias({
-            plural: true,
-            allUpperCase: true
-          }),
+          label: this.tr("TUTORIALS"),
           icon: "@FontAwesome5Solid/copy/"+tabIconSize,
-          buildLayout: this.__createTemplateBrowser
+          buildLayout: this.__createTutorialBrowser
         });
       }
       if (permissions.canDo("dashboard.services.read")) {
@@ -228,8 +222,8 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       return studiesView;
     },
 
-    __createTemplateBrowser: function() {
-      const templatesView = this.__templateBrowser = new osparc.dashboard.TemplateBrowser();
+    __createTutorialBrowser: function() {
+      const templatesView = this.__tutorialBrowser = new osparc.dashboard.TutorialBrowser();
       return templatesView;
     },
 

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

@@ -232,7 +232,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       }
 
       if (permissions.canDo("dashboard.services.read")) {
-        const servicesButton = this.self().createMenuButton("@FontAwesome5Solid/cog/16", this.tr("Services..."));
+        const servicesButton = this.self().createMenuButton("@FontAwesome5Solid/cog/16", this.tr("Apps..."));
         servicesButton.addListener("execute", () => this.fireDataEvent("changeTab", "appsTab"), this);
         moreMenu.add(servicesButton);
       }

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

@@ -29,11 +29,13 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
     this.__tagButtons = [];
     this.__appTypeButtons = [];
 
-    this._setLayout(new qx.ui.layout.VBox(15));
+    this._setLayout(new qx.ui.layout.VBox(10));
     this.__buildLayout();
   },
 
   events: {
+    "templatesContext": "qx.event.type.Event",
+    "publicContext": "qx.event.type.Event",
     "trashContext": "qx.event.type.Event",
     "changeTab": "qx.event.type.Data",
     "trashStudyRequested": "qx.event.type.Data",
@@ -46,6 +48,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
   members: {
     __resourceType: null,
     __workspacesAndFoldersTree: null,
+    __templatesButton: null,
+    __publicProjectsButton: null,
     __trashButton: null,
     __sharedWithButtons: null,
     __tagButtons: null,
@@ -56,6 +60,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       switch (this.__resourceType) {
         case "study": {
           this._add(this.__createWorkspacesAndFoldersTree());
+          this._add(this.__createTemplates());
+          this._add(this.__createPublicProjects());
           this._add(this.__createTrashBin());
           this._add(filtersSpacer);
           const scrollView = new qx.ui.container.Scroll();
@@ -90,6 +96,8 @@ 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");
     },
 
@@ -116,6 +124,40 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
     },
     /* /WORKSPACES AND FOLDERS */
 
+    __createTemplates: function() {
+      const templatesButton = this.__templatesButton = new qx.ui.toolbar.RadioButton().set({
+        value: false,
+        appearance: "filter-toggle-button",
+        label: this.tr("Templates"),
+        icon: "@FontAwesome5Solid/copy/16",
+        paddingLeft: 10, // align it with the context
+      });
+      templatesButton.addListener("changeValue", e => {
+        const templatesEnabled = e.getData();
+        if (templatesEnabled) {
+          this.fireEvent("templatesContext");
+        }
+      });
+      return templatesButton;
+    },
+
+    __createPublicProjects: function() {
+      const publicProjectsButton = this.__publicProjectsButton = new qx.ui.toolbar.RadioButton().set({
+        value: false,
+        appearance: "filter-toggle-button",
+        label: this.tr("Public Projects"),
+        icon: "@FontAwesome5Solid/globe/16",
+        paddingLeft: 10, // align it with the context
+      });
+      publicProjectsButton.addListener("changeValue", e => {
+        const templatesEnabled = e.getData();
+        if (templatesEnabled) {
+          this.fireEvent("publicContext");
+        }
+      });
+      return publicProjectsButton;
+    },
+
     /* TRASH BIN */
     __createTrashBin: function() {
       const trashButton = this.__trashButton = new qx.ui.toolbar.RadioButton().set({

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

@@ -34,9 +34,11 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     if (resourceType === "study") {
       const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.CardContainer();
+      this.__workspacesContainer.exclude();
       this._add(workspacesContainer);
 
       const foldersContainer = this.__foldersContainer = new osparc.dashboard.CardContainer();
+      this.__foldersContainer.exclude();
       this._add(foldersContainer);
     }
 
@@ -294,26 +296,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       this.__groupedContainersList = [];
     },
 
-    __addFoldersContainer: function() {
-      // add foldersContainer dynamically
-      [
-        "addChildWidget",
-        "removeChildWidget"
-      ].forEach(ev => {
-        this.__foldersContainer.addListener(ev, () => {
-          const children = this.__foldersContainer.getChildren();
-          if (children.length && !children.includes(this.__foldersContainer)) {
-            this._addAt(this.__foldersContainer, 0);
-            return;
-          }
-          if (children.length === 0 && children.includes(this.__foldersContainer)) {
-            this._remove(this.__foldersContainer);
-            return;
-          }
-        })
-      });
-    },
-
     __rebuildLayout: function(resourceType) {
       this.__cleanAll();
       if (this.getGroupBy()) {
@@ -386,6 +368,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     reloadWorkspaces: function() {
       if (this.__workspacesContainer) {
         this.__workspacesContainer.removeAll();
+        this.__workspacesContainer.exclude();
       }
       let workspacesCards = [];
       this.__workspacesList.forEach(workspaceData => workspacesCards.push(this.__workspaceToCard(workspaceData)));
@@ -394,11 +377,13 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     addNewWorkspaceCard: function(newWorkspaceCard) {
       this.__workspacesContainer.addAt(newWorkspaceCard, 0);
+      this.__workspacesContainer.show();
     },
 
     __workspaceToCard: function(workspaceData) {
       const card = this.__createWorkspaceCard(workspaceData);
       this.__workspacesContainer.add(card);
+      this.__workspacesContainer.show();
       return card;
     },
 
@@ -423,6 +408,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     reloadFolders: function() {
       if (this.__foldersContainer) {
         this.__foldersContainer.removeAll();
+        this.__foldersContainer.exclude();
       }
       let folderCards = [];
       this.__foldersList.forEach(folderData => folderCards.push(this.__folderToCard(folderData)));
@@ -431,11 +417,13 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     addNewFolderCard: function(newFolderCard) {
       this.__foldersContainer.addAt(newFolderCard, 0);
+      this.__foldersContainer.show();
     },
 
     __folderToCard: function(folderData) {
       const card = this.__createFolderCard(folderData);
       this.__foldersContainer.add(card);
+      this.__foldersContainer.show();
       return card;
     },