From 6db71c108d8e8ef114e6843e951406cfa592c4b7 Mon Sep 17 00:00:00 2001 From: Odei Maiz <33152403+odeimaiz@users.noreply.github.com> Date: Tue, 29 Oct 2024 17:32:50 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20[Frontend]=20Publish=20template?= =?UTF-8?q?=20UI/UX=20(#6617)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/ResourceContainerManager.js | 14 ++++++--- .../class/osparc/dashboard/StudyBrowser.js | 4 ++- .../class/osparc/service/ServiceListItem.js | 2 +- .../class/osparc/share/AddCollaborators.js | 29 ++++++++++++++----- .../osparc/share/NewCollaboratorsManager.js | 6 ++-- .../class/osparc/share/PublishTemplate.js | 3 +- 6 files changed, 40 insertions(+), 18 deletions(-) diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js index f066e10b56e..187f6b441d3 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js +++ b/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") { diff --git a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js index 7f79e02f3b1..70a3554ae41 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js +++ b/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(); diff --git a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js b/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js index 059dd840170..e93cf802333 100644 --- a/services/static-webserver/client/source/class/osparc/service/ServiceListItem.js +++ b/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: { diff --git a/services/static-webserver/client/source/class/osparc/share/AddCollaborators.js b/services/static-webserver/client/source/class/osparc/share/AddCollaborators.js index 148eead1bf9..da0394cd010 100644 --- a/services/static-webserver/client/source/class/osparc/share/AddCollaborators.js +++ b/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); } } diff --git a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js b/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js index 148d8df6f14..65510ea9142 100644 --- a/services/static-webserver/client/source/class/osparc/share/NewCollaboratorsManager.js +++ b/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); diff --git a/services/static-webserver/client/source/class/osparc/share/PublishTemplate.js b/services/static-webserver/client/source/class/osparc/share/PublishTemplate.js index 6572c24a900..746d8360870 100644 --- a/services/static-webserver/client/source/class/osparc/share/PublishTemplate.js +++ b/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);