🎨 [Frontend] Publish template UI/UX (#6617)

Author: odeimaiz

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

@@ -83,10 +83,12 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
   statics: {
     sortListByPriority: function(list) {
-      list.getChildren().sort((a, b) => {
-        let sortingValue = a.getPriority() - b.getPriority();
-        return sortingValue;
-      });
+      if (list) {
+        list.getChildren().sort((a, b) => {
+          let sortingValue = a.getPriority() - b.getPriority();
+          return sortingValue;
+        });
+      }
     },
 
     cardExists: function(container, newCard) {
@@ -233,6 +235,10 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __addCardToContainer: function(card, container) {
+      if (container == null) {
+        return;
+      }
+
       container.add(card);
 
       if (this.getMode() === "list") {

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

@@ -233,8 +233,10 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           }
 
           const studies = resp["data"];
-          this._resourcesContainer.getFlatList().nextRequest = resp["_links"]["next"];
           this.__addStudiesToList(studies);
+          if (this._resourcesContainer.getFlatList()) {
+            this._resourcesContainer.getFlatList().nextRequest = resp["_links"]["next"];
+          }
 
           // Show Quick Start if there are no studies in the root folder of the personal workspace
           const quickStartInfo = osparc.product.quickStart.Utils.getQuickStart();

services/static-webserver/client/source/class/osparc/service/ServiceListItem.js

@@ -57,7 +57,7 @@ qx.Class.define("osparc.service.ServiceListItem", {
     LATEST: "latest",
     ITEM_WIDTH: 550,
     ITEM_HEIGHT: 35,
-    SERVICE_ICON: "@FontAwesome5Solid/paw/24"
+    SERVICE_ICON: osparc.product.Utils.getProductThumbUrl()
   },
 
   members: {

services/static-webserver/client/source/class/osparc/share/AddCollaborators.js

@@ -27,11 +27,13 @@ qx.Class.define("osparc.share.AddCollaborators", {
 
   /**
     * @param serializedDataCopy {Object} Object containing the Serialized Data
+    * @param publishingTemplate {Boolean} Wether the widget needs to be initialized for publishing template
     */
-  construct: function(serializedDataCopy) {
+  construct: function(serializedDataCopy, publishingTemplate = false) {
     this.base(arguments);
 
-    this.setSerializedData(serializedDataCopy);
+    this.__serializedDataCopy = serializedDataCopy;
+    this.__publishingTemplate = publishingTemplate;
 
     this._setLayout(new qx.ui.layout.VBox(5));
 
@@ -44,6 +46,7 @@ qx.Class.define("osparc.share.AddCollaborators", {
 
   members: {
     __serializedDataCopy: null,
+    __publishingTemplate: null,
 
     _createChildControlImpl: function(id) {
       let control;
@@ -52,22 +55,31 @@ qx.Class.define("osparc.share.AddCollaborators", {
           control = new qx.ui.basic.Label(this.tr("Select from the list below and click Share"));
           this._add(control);
           break;
+        case "buttons-layout":
+          control = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+          this._add(control);
+          break;
         case "share-with":
           control = new qx.ui.form.Button(this.tr("Share with...")).set({
             appearance: "form-button",
             alignX: "left",
             allowGrowX: false
           });
-          this._add(control);
+          this.getChildControl("buttons-layout").add(control);
+          this.getChildControl("buttons-layout").add(new qx.ui.core.Spacer(), {
+            flex: 1
+          });
           break;
-        case "check-organizations":
-          control = new qx.ui.form.Button(this.tr("Check Organizations...")).set({
+        case "my-organizations":
+          control = new qx.ui.form.Button(this.tr("My Organizations...")).set({
             appearance: "form-button-outlined",
             allowGrowY: false,
             allowGrowX: false,
+            alignX: "right",
             icon: osparc.dashboard.CardBase.SHARED_ORGS
           });
-          this._add(control);
+          this.getChildControl("buttons-layout").add(control);
+          break;
       }
       return control || this.base(arguments, id);
     },
@@ -82,13 +94,16 @@ qx.Class.define("osparc.share.AddCollaborators", {
       const addCollaboratorBtn = this.getChildControl("share-with");
       addCollaboratorBtn.addListener("execute", () => {
         const collaboratorsManager = new osparc.share.NewCollaboratorsManager(this.__serializedDataCopy);
+        if (this.__publishingTemplate) {
+          collaboratorsManager.getActionButton().setLabel(this.tr("Publish for"));
+        }
         collaboratorsManager.addListener("addCollaborators", e => {
           collaboratorsManager.close();
           this.fireDataEvent("addCollaborators", e.getData());
         }, this);
       }, this);
 
-      const organizations = this.getChildControl("check-organizations");
+      const organizations = this.getChildControl("my-organizations");
       organizations.addListener("execute", () => osparc.desktop.organizations.OrganizationsWindow.openWindow(), this);
     }
   }

services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js

@@ -82,7 +82,8 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
         alignX: "right"
       }));
-      const orgsButton = this.__orgsButton = new qx.ui.form.Button(this.tr("Check Organizations...")).set({
+      // Quick access for users that still don't belong to any organization
+      const orgsButton = this.__orgsButton = new qx.ui.form.Button(this.tr("My Organizations...")).set({
         appearance: "form-button",
         visibility: "excluded",
       });
@@ -184,9 +185,6 @@ qx.Class.define("osparc.share.NewCollaboratorsManager", {
       });
     },
 
-    __openOrganization: function() {
-    },
-
     __shareClicked: function() {
       this.__collabButtonsContainer.setEnabled(false);
       this.__shareButton.setFetching(true);

services/static-webserver/client/source/class/osparc/share/PublishTemplate.js

@@ -48,11 +48,12 @@ qx.Class.define("osparc.share.PublishTemplate", {
     __buildLayout: function() {
       // mark it us template, so that testers can share it with product everyone
       this.__potentialTemplateData["resourceType"] = "template";
-      const addCollaborators = new osparc.share.AddCollaborators(this.__potentialTemplateData);
+      const addCollaborators = new osparc.share.AddCollaborators(this.__potentialTemplateData, true);
       addCollaborators.getChildControl("intro-text").set({
         value: this.tr("Make the ") + osparc.product.Utils.getTemplateAlias() + this.tr(" also accessible to:"),
         font: "text-14"
       });
+      addCollaborators.getChildControl("share-with").setLabel(this.tr("Publish for..."));
       this._add(addCollaborators);
 
       this._add(this.__selectedCollabs);