🎨 [Frontend] UX: New Workspace and New Organization (#6699)

Author: odeimaiz

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

@@ -116,7 +116,11 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         };
         osparc.data.Resources.fetch("studies", "getWallet", params)
           .then(wallet => {
-            if (isStudyCreation || wallet === null || osparc.desktop.credits.Utils.getWallet(wallet["walletId"]) === null) {
+            if (
+              isStudyCreation ||
+              wallet === null ||
+              osparc.desktop.credits.Utils.getWallet(wallet["walletId"]) === null
+            ) {
               // pop up study options if the study was just created or if it has no wallet assigned or user has no access to it
               const resourceSelector = new osparc.study.StudyOptions(studyId);
               const win = osparc.study.StudyOptions.popUpInWindow(resourceSelector);

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

@@ -364,7 +364,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       const resourceData = this.__resourceData;
       if (osparc.utils.Resources.isStudy(resourceData)) {
         const id = "Billing";
-        const title = this.tr("Billing Settings");
+        const title = this.tr("Tier Settings");
         const iconSrc = "@FontAwesome5Solid/cogs/22";
         const page = this.__billingSettings = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);
         this.__addOpenButton(page);

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

@@ -374,12 +374,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       newWorkspaceCard.setCardKey("new-workspace");
       newWorkspaceCard.subscribeToFilterGroup("searchBarFilter");
       [
-        "createWorkspace",
-        "updateWorkspace"
+        "workspaceCreated",
+        "workspaceDeleted",
+        "workspaceUpdated",
       ].forEach(e => {
-        newWorkspaceCard.addListener(e, () => {
-          this.__reloadWorkspaces();
-        });
+        newWorkspaceCard.addListener(e, () => this.__reloadWorkspaces());
       });
       this._resourcesContainer.addNewWorkspaceCard(newWorkspaceCard);
     },
@@ -1170,7 +1169,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __newStudyBtnClicked: function(button) {
       button.setValue(false);
       const minStudyData = osparc.data.model.Study.createMinStudyObject();
-      const title = osparc.utils.Utils.getUniqueStudyName(minStudyData.name, this._resourcesList);
+      const existingNames = this._resourcesList.map(study => study["name"]);
+      const title = osparc.utils.Utils.getUniqueName(minStudyData.name, existingNames);
       minStudyData["name"] = title;
       minStudyData["workspaceId"] = this.getCurrentWorkspaceId();
       minStudyData["folderId"] = this.getCurrentFolderId();
@@ -1190,7 +1190,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __newPlanBtnClicked: function(templateData, newStudyName) {
       // do not override cached template data
       const templateCopyData = osparc.utils.Utils.deepCloneObject(templateData);
-      const title = osparc.utils.Utils.getUniqueStudyName(newStudyName, this._resourcesList);
+      const existingNames = this._resourcesList.map(study => study["name"]);
+      const title = osparc.utils.Utils.getUniqueName(newStudyName, existingNames);
       templateCopyData.name = title;
       this._showLoadingPage(this.tr("Creating ") + (newStudyName || osparc.product.Utils.getStudyAlias()));
       const contextProps = {
@@ -1411,7 +1412,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __getBillingMenuButton: function(card) {
-      const text = osparc.utils.Utils.capitalize(this.tr("Billing Settings..."));
+      const text = osparc.utils.Utils.capitalize(this.tr("Tier Settings..."));
       const studyBillingSettingsButton = new qx.ui.menu.Button(text);
       studyBillingSettingsButton["billingSettingsButton"] = true;
       studyBillingSettingsButton.addListener("tap", () => card.openBilling(), this);

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

@@ -339,10 +339,10 @@ qx.Class.define("osparc.dashboard.StudyBrowserHeader", {
 
     __editWorkspace: function() {
       const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
-      const permissionsView = new osparc.editor.WorkspaceEditor(workspace);
+      const workspaceEditor = new osparc.editor.WorkspaceEditor(workspace);
       const title = this.tr("Edit Workspace");
-      const win = osparc.ui.window.Window.popUpInWindow(permissionsView, title, 300, 200);
-      permissionsView.addListener("workspaceUpdated", () => {
+      const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 300, 150);
+      workspaceEditor.addListener("workspaceUpdated", () => {
         win.close();
         this.__buildLayout();
       }, this);

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

@@ -185,7 +185,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonItem", {
           const workspace = this.getWorkspace();
           const workspaceEditor = new osparc.editor.WorkspaceEditor(workspace);
           const title = this.tr("Edit Workspace");
-          const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 300, 200);
+          const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 300, 150);
           workspaceEditor.addListener("workspaceUpdated", () => {
             win.close();
             this.fireDataEvent("workspaceUpdated", workspace.getWorkspaceId());

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

@@ -46,26 +46,29 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonNew", {
   },
 
   events: {
-    "createWorkspace": "qx.event.type.Data",
-    "updateWorkspace": "qx.event.type.Data"
+    "workspaceCreated": "qx.event.type.Event",
+    "workspaceDeleted": "qx.event.type.Event",
+    "workspaceUpdated": "qx.event.type.Event",
   },
 
   members: {
     __itemSelected: function(newVal) {
       if (newVal) {
-        const workspaceCreator = new osparc.editor.WorkspaceEditor();
+        const workspaceEditor = new osparc.editor.WorkspaceEditor();
         const title = this.tr("New Workspace");
-        const win = osparc.ui.window.Window.popUpInWindow(workspaceCreator, title, 300, 200);
-        workspaceCreator.addListener("workspaceCreated", e => {
-          win.close();
-          const newWorkspace = e.getData();
-          this.fireDataEvent("createWorkspace", newWorkspace.getWorkspaceId(), this);
-          const permissionsView = new osparc.share.CollaboratorsWorkspace(newWorkspace);
-          const title2 = qx.locale.Manager.tr("Share Workspace");
-          osparc.ui.window.Window.popUpInWindow(permissionsView, title2, 500, 500);
-          permissionsView.addListener("updateAccessRights", () => this.fireDataEvent("updateWorkspace", newWorkspace.getWorkspaceId()), this);
+        const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 500, 500).set({
+          modal: true,
+          clickAwayClose: false,
         });
-        workspaceCreator.addListener("cancel", () => win.close());
+        workspaceEditor.addListener("workspaceCreated", () => this.fireEvent("workspaceCreated"));
+        workspaceEditor.addListener("workspaceDeleted", () => this.fireEvent("workspaceDeleted"));
+        workspaceEditor.addListener("workspaceUpdated", () => {
+          win.close();
+          this.fireEvent("workspaceUpdated");
+        }, this);
+        workspaceEditor.addListener("updateAccessRights", () => this.fireEvent("workspaceUpdated"));
+        win.getChildControl("close-button").addListener("tap", () => workspaceEditor.cancel());
+        workspaceEditor.addListener("cancel", () => win.close());
       }
       this.setValue(false);
     }

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

@@ -300,7 +300,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
       if (oldParentFolderId === undefined) {
         // it was removed, not moved
         // remove it from the cached models
-        const modelFound = this.__getModel(folder.getWorkspaceId(), folder.getParentFolderId());
+        const modelFound = this.__getModel(folder.getWorkspaceId(), folder.getFolderId());
         if (modelFound) {
           const index = this.__models.indexOf(modelFound);
           if (index > -1) { // only splice array when item is found

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js

@@ -94,17 +94,9 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
 
     __openEditOrganization: function() {
       const org = this.__orgModel;
-
-      const newOrg = false;
-      const orgEditor = new osparc.editor.OrganizationEditor(newOrg);
-      org.bind("gid", orgEditor, "gid");
-      org.bind("label", orgEditor, "label");
-      org.bind("description", orgEditor, "description");
-      org.bind("thumbnail", orgEditor, "thumbnail", {
-        converter: val => val ? val : ""
-      });
       const title = this.tr("Organization Details Editor");
-      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
+      const orgEditor = new osparc.editor.OrganizationEditor(org);
+      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);
       orgEditor.addListener("updateOrg", () => {
         this.__updateOrganization(win, orgEditor.getChildControl("save"), orgEditor);
       });

services/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js

@@ -99,10 +99,9 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         allowGrowX: false
       });
       createOrgBtn.addListener("execute", function() {
-        const newOrg = true;
-        const orgEditor = new osparc.editor.OrganizationEditor(newOrg);
         const title = this.tr("New Organization");
-        const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
+        const orgEditor = new osparc.editor.OrganizationEditor();
+        const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);
         orgEditor.addListener("createOrg", () => {
           this.__createOrganization(win, orgEditor.getChildControl("create"), orgEditor);
         });
@@ -176,7 +175,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
       }
     },
 
-    reloadOrganizations: function() {
+    reloadOrganizations: function(orgId) {
       this.__orgsUIList.resetSelection();
       const orgsModel = this.__orgsModel;
       orgsModel.removeAll();
@@ -199,6 +198,9 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
           orgsList.sort(this.self().sortOrganizations);
           orgsList.forEach(org => orgsModel.append(qx.data.marshal.Json.createModel(org)));
           this.setOrganizationsLoaded(true);
+          if (orgId) {
+            this.fireDataEvent("organizationSelected", orgId);
+          }
         });
     },
 
@@ -208,16 +210,9 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         return;
       }
 
-      const newOrg = false;
-      const orgEditor = new osparc.editor.OrganizationEditor(newOrg);
-      org.bind("gid", orgEditor, "gid");
-      org.bind("label", orgEditor, "label");
-      org.bind("description", orgEditor, "description");
-      org.bind("thumbnail", orgEditor, "thumbnail", {
-        converter: val => val ? val : ""
-      });
       const title = this.tr("Organization Details Editor");
-      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
+      const orgEditor = new osparc.editor.OrganizationEditor(org);
+      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);
       orgEditor.addListener("updateOrg", () => {
         this.__updateOrganization(win, orgEditor.getChildControl("save"), orgEditor);
       });
@@ -287,14 +282,15 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         }
       };
       osparc.data.Resources.fetch("organizations", "post", params)
-        .then(() => {
+        .then(org => {
           osparc.FlashMessenger.getInstance().logAs(name + this.tr(" successfully created"));
           button.setFetching(false);
           osparc.store.Store.getInstance().reset("organizations");
           // reload "profile", "organizations" are part of the information in this endpoint
           osparc.data.Resources.getOne("profile", {}, null, false)
             .then(() => {
-              this.reloadOrganizations();
+              // open it
+              this.reloadOrganizations(org["gid"]);
             });
         })
         .catch(err => {

services/static-webserver/client/source/class/osparc/editor/OrganizationEditor.js

@@ -18,7 +18,7 @@
 qx.Class.define("osparc.editor.OrganizationEditor", {
   extend: qx.ui.core.Widget,
 
-  construct: function(newOrg = true) {
+  construct: function(organization) {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.VBox(8));
@@ -29,7 +29,27 @@ qx.Class.define("osparc.editor.OrganizationEditor", {
     manager.add(title);
     this.getChildControl("description");
     this.getChildControl("thumbnail");
-    newOrg ? this.getChildControl("create") : this.getChildControl("save");
+    organization ? this.getChildControl("save") : this.getChildControl("create");
+
+    if (organization) {
+      organization.bind("gid", this, "gid");
+      organization.bind("label", this, "label");
+      organization.bind("description", this, "description");
+      organization.bind("thumbnail", this, "thumbnail", {
+        converter: val => val ? val : ""
+      });
+    } else {
+      osparc.store.Store.getInstance().getGroupsOrganizations()
+        .then(orgs => {
+          const existingNames = orgs.map(org => org["label"]);
+          const defaultName = osparc.utils.Utils.getUniqueName("New Organization", existingNames)
+          title.setValue(defaultName);
+        })
+        .catch(err => {
+          console.error(err);
+          title.setValue("New Organization");
+        });
+    }
 
     this.addListener("appear", () => {
       title.focus();
@@ -82,20 +102,18 @@ qx.Class.define("osparc.editor.OrganizationEditor", {
             font: "text-14",
             backgroundColor: "background-main",
             placeholder: this.tr("Title"),
-            height: 35
+            height: 30,
           });
           this.bind("label", control, "value");
           control.bind("value", this, "label");
           this._add(control);
           break;
         }
         case "description": {
-          control = new qx.ui.form.TextArea().set({
+          control = new qx.ui.form.TextField().set({
             font: "text-14",
             placeholder: this.tr("Description"),
-            autoSize: true,
-            minHeight: 70,
-            maxHeight: 140
+            height: 30,
           });
           this.bind("description", control, "value");
           control.bind("value", this, "description");
@@ -106,7 +124,7 @@ qx.Class.define("osparc.editor.OrganizationEditor", {
           control = new qx.ui.form.TextField().set({
             font: "text-14",
             placeholder: this.tr("Thumbnail"),
-            height: 35
+            height: 30,
           });
           this.bind("thumbnail", control, "value");
           control.bind("value", this, "thumbnail");