🎨 [Frontend] UX: New Workspace and New Organization

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);
     },
@@ -1411,7 +1410,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

@@ -104,7 +104,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
         converter: val => val ? val : ""
       });
       const title = this.tr("Organization Details Editor");
-      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
+      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

@@ -102,7 +102,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         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 win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);
         orgEditor.addListener("createOrg", () => {
           this.__createOrganization(win, orgEditor.getChildControl("create"), orgEditor);
         });
@@ -176,7 +176,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
       }
     },
 
-    reloadOrganizations: function() {
+    reloadOrganizations: function(orgId) {
       this.__orgsUIList.resetSelection();
       const orgsModel = this.__orgsModel;
       orgsModel.removeAll();
@@ -199,6 +199,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);
+          }
         });
     },
 
@@ -217,7 +220,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
         converter: val => val ? val : ""
       });
       const title = this.tr("Organization Details Editor");
-      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 250);
+      const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);
       orgEditor.addListener("updateOrg", () => {
         this.__updateOrganization(win, orgEditor.getChildControl("save"), orgEditor);
       });
@@ -287,14 +290,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

@@ -82,20 +82,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 +104,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");