✨ [Frontend] Trash bin

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

@@ -395,6 +395,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
       return this.getResourceType() === resourceType;
     },
 
+    isItemNotClickable: function() {
+      const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
+      return (
+        this.getBlocked() === true || // It could be blocked by IN_USE or UNKNOWN_SERVICE
+        (this.isResourceType("study") && (studyBrowserContext === "trash")) // It could a trashed study
+      );
+    },
+
     __applyResourceData: function(resourceData) {
       let uuid = null;
       let owner = null;
@@ -776,9 +784,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
         if (moveToButton) {
           moveToButton.setEnabled(osparc.study.Utils.canMoveTo(resourceData));
         }
-        const deleteButton = menuButtons.find(menuBtn => "deleteButton" in menuBtn);
-        if (deleteButton) {
-          deleteButton.setEnabled(osparc.study.Utils.canBeDeleted(resourceData));
+        const trashButton = menuButtons.find(menuBtn => "trashButton" in menuBtn);
+        if (trashButton) {
+          trashButton.setEnabled(osparc.study.Utils.canBeDeleted(resourceData));
         }
       }
     },

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

@@ -24,21 +24,15 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
     this._setLayout(new qx.ui.layout.HBox(5).set({
       alignY: "middle"
     }));
+
+    osparc.store.Store.getInstance().addListener("changeStudyBrowserContext", () => this.__rebuild(), this);
   },
 
   events: {
     "locationChanged": "qx.event.type.Data",
   },
 
   properties: {
-    currentContext: {
-      check: ["studiesAndFolders", "workspaces", "search"],
-      nullable: false,
-      init: "studiesAndFolders",
-      event: "changeCurrentContext",
-      apply: "__rebuild"
-    },
-
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
@@ -60,7 +54,8 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
     __rebuild: function() {
       this._removeAll();
 
-      if (this.getCurrentContext() !== "studiesAndFolders") {
+      const currentContext = osparc.store.Store.getInstance().getStudyBrowserContext();
+      if (currentContext !== "studiesAndFolders") {
         return;
       }
 

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

@@ -46,6 +46,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     "folderSelected": "qx.event.type.Data",
     "folderUpdated": "qx.event.type.Data",
     "moveFolderToRequested": "qx.event.type.Data",
+    "trashFolderRequested": "qx.event.type.Data",
+    "untrashFolderRequested": "qx.event.type.Data",
     "deleteFolderRequested": "qx.event.type.Data",
     "changeContext": "qx.event.type.Data",
   },
@@ -85,7 +87,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       check: "Date",
       nullable: true,
       apply: "__applyLastModified"
-    }
+    },
   },
 
   members: {
@@ -219,6 +221,16 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
 
         menu.addSeparator();
 
+        const trashButton = new qx.ui.menu.Button(this.tr("Trash"), "@FontAwesome5Solid/trash/12");
+        trashButton.addListener("execute", () => this.__trashFolderRequested(), this);
+        menu.add(trashButton);
+      } else if (studyBrowserContext === "trash") {
+        const restoreButton = new qx.ui.menu.Button(this.tr("Restore"), "@MaterialIcons/restore_from_trash/16");
+        restoreButton.addListener("execute", () => this.fireDataEvent("untrashFolderRequested", this.getFolder()), this);
+        menu.add(restoreButton);
+
+        menu.addSeparator();
+
         const deleteButton = new qx.ui.menu.Button(this.tr("Delete"), "@FontAwesome5Solid/trash/12");
         osparc.utils.Utils.setIdToWidget(deleteButton, "deleteFolderMenuItem");
         deleteButton.addListener("execute", () => this.__deleteFolderRequested(), this);
@@ -229,7 +241,9 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     },
 
     __itemSelected: function(newVal) {
-      if (newVal) {
+      const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();
+      // do not allow selecting workspace
+      if (studyBrowserContext !== "trash" && newVal) {
         this.fireDataEvent("folderSelected", this.getFolderId());
       }
       this.setValue(false);
@@ -262,6 +276,24 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       folderEditor.addListener("cancel", () => win.close());
     },
 
+    __trashFolderRequested: function() {
+      const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();
+      let msg = this.tr("Are you sure you want to move the Folder and all its content to the trash?");
+      msg += "<br><br>" + this.tr("It will be permanently deleted after ") + trashDays + " days.";
+      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
+        caption: this.tr("Move to Trash"),
+        confirmText: this.tr("Move to Trash"),
+        confirmAction: "delete"
+      });
+      confirmationWin.center();
+      confirmationWin.open();
+      confirmationWin.addListener("close", () => {
+        if (confirmationWin.getConfirmed()) {
+          this.fireDataEvent("trashFolderRequested", this.getFolderId());
+        }
+      }, this);
+    },
+
     __deleteFolderRequested: function() {
       const msg = this.tr("Are you sure you want to delete") + " <b>" + this.getTitle() + "</b>?";
       const confirmationWin = new osparc.ui.window.Confirmation(msg).set({

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

@@ -188,8 +188,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     },
 
     __itemSelected: function() {
-      // It could be blocked by IN_USE or UNKNOWN_SERVICE
-      if (this.getBlocked() === true) {
+      if (this.isItemNotClickable()) {
         this.setValue(false);
         return;
       }

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

@@ -274,8 +274,7 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
     },
 
     __itemSelected: function() {
-      // It could be blocked by IN_USE or UNKNOWN_SERVICE
-      if (this.getBlocked() === true) {
+      if (this.isItemNotClickable()) {
         this.setValue(false);
         return;
       }

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

@@ -244,7 +244,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       this._addToLayout(searchBarFilter);
     },
 
-    _createResourcesLayout: function() {
+    _createResourcesLayout: function(flatListId) {
       const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({
         backgroundColor: "transparent",
         spacing: 10,
@@ -255,7 +255,13 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       this.__viewModeLayout = new qx.ui.toolbar.Part();
 
-      const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager();
+      const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager(this._resourceType);
+      if (flatListId) {
+        const list = this._resourcesContainer.getFlatList();
+        if (list) {
+          osparc.utils.Utils.setIdToWidget(list, flatListId);
+        }
+      }
       if (this._resourceType === "study") {
         const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem("studiesViewMode");
         if (viewMode) {
@@ -270,6 +276,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("emptyStudyClicked", e => this._deleteResourceRequested(e.getData()));
       resourcesContainer.addListener("folderUpdated", e => this._folderUpdated(e.getData()));
       resourcesContainer.addListener("moveFolderToRequested", e => this._moveFolderToRequested(e.getData()));
+      resourcesContainer.addListener("trashFolderRequested", e => this._trashFolderRequested(e.getData()));
+      resourcesContainer.addListener("untrashFolderRequested", e => this._untrashFolderRequested(e.getData()));
       resourcesContainer.addListener("deleteFolderRequested", e => this._deleteFolderRequested(e.getData()));
       resourcesContainer.addListener("folderSelected", e => {
         const folderId = e.getData();
@@ -288,6 +296,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         this._changeContext(context, workspaceId, folderId);
       }, this);
       resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
+      resourcesContainer.addListener("trashWorkspaceRequested", e => this._trashWorkspaceRequested(e.getData()));
+      resourcesContainer.addListener("untrashWorkspaceRequested", e => this._untrashWorkspaceRequested(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
 
       this._addToLayout(resourcesContainer);
@@ -502,6 +512,14 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
+    _trashFolderRequested: function(folderId) {
+      throw new Error("Abstract method called!");
+    },
+
+    _untrashFolderRequested: function(folder) {
+      throw new Error("Abstract method called!");
+    },
+
     _deleteFolderRequested: function(folderId) {
       throw new Error("Abstract method called!");
     },

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

@@ -18,7 +18,7 @@
 qx.Class.define("osparc.dashboard.ResourceContainerManager", {
   extend: qx.ui.core.Widget,
 
-  construct: function() {
+  construct: function(resourceType) {
     this.base(arguments);
 
     this._setLayout(new qx.ui.layout.VBox(15));
@@ -27,19 +27,20 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       paddingBottom: 60
     });
 
-    this.__foldersList = [];
     this.__workspacesList = [];
+    this.__foldersList = [];
     this.__resourcesList = [];
     this.__groupedContainersList = [];
 
+    if (resourceType === "study") {
+      const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.ToggleButtonContainer();
+      this._add(workspacesContainer);
+      workspacesContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
 
-    const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.ToggleButtonContainer();
-    workspacesContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
-
-
-    const foldersContainer = this.__foldersContainer = new osparc.dashboard.ToggleButtonContainer();
-    this._add(foldersContainer);
-    foldersContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
+      const foldersContainer = this.__foldersContainer = new osparc.dashboard.ToggleButtonContainer();
+      this._add(foldersContainer);
+      foldersContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
+    }
 
     const nonGroupedContainer = this.__nonGroupedContainer = this.__createFlatList();
     this._add(nonGroupedContainer);
@@ -75,9 +76,13 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     "folderSelected": "qx.event.type.Data",
     "folderUpdated": "qx.event.type.Data",
     "moveFolderToRequested": "qx.event.type.Data",
+    "trashFolderRequested": "qx.event.type.Data",
+    "untrashFolderRequested": "qx.event.type.Data",
     "deleteFolderRequested": "qx.event.type.Data",
     "workspaceSelected": "qx.event.type.Data",
     "workspaceUpdated": "qx.event.type.Data",
+    "trashWorkspaceRequested": "qx.event.type.Data",
+    "untrashWorkspaceRequested": "qx.event.type.Data",
     "deleteWorkspaceRequested": "qx.event.type.Data",
     "changeContext": "qx.event.type.Data",
   },
@@ -260,9 +265,13 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     __cleanAll: function() {
-      if (this.__workspacesContainer) {
-        this.__workspacesContainer.removeAll();
+      if (this._getChildren().includes(this.__nonGroupedContainer)) {
+        this._remove(this.__nonGroupedContainer);
+      }
+      if (this._getChildren().includes(this.__groupedContainers)) {
+        this._remove(this.__groupedContainers);
       }
+
       if (this.__nonGroupedContainer) {
         this.__nonGroupedContainer.removeAll();
         this.__nonGroupedContainer = null;
@@ -274,7 +283,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         groupedContainer.getContentContainer().removeAll();
       });
       this.__groupedContainersList = [];
-      this._removeAll();
     },
 
     __addFoldersContainer: function() {
@@ -299,9 +307,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     __rebuildLayout: function(resourceType) {
       this.__cleanAll();
-      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        this.__addFoldersContainer();
-      }
       if (this.getGroupBy()) {
         const noGroupContainer = this.__createGroupContainer("no-group", "No Group", "transparent");
         this.__groupedContainers.add(noGroupContainer);
@@ -361,8 +366,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
 
     reloadWorkspaces: function() {
-      this.__cleanAll();
-      this._add(this.__workspacesContainer);
+      if (this.__workspacesContainer) {
+        this.__workspacesContainer.removeAll();
+      }
       let workspacesCards = [];
       this.__workspacesList.forEach(workspaceData => workspacesCards.push(this.__workspaceToCard(workspaceData)));
       return workspacesCards;
@@ -383,6 +389,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       [
         "workspaceSelected",
         "workspaceUpdated",
+        "trashWorkspaceRequested",
+        "untrashWorkspaceRequested",
         "deleteWorkspaceRequested",
       ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));
       return card;
@@ -419,6 +427,8 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         "folderSelected",
         "folderUpdated",
         "moveFolderToRequested",
+        "trashFolderRequested",
+        "untrashFolderRequested",
         "deleteFolderRequested",
         "changeContext",
       ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));
@@ -494,7 +504,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
             } else {
               groupContainer.exclude();
             }
-            this._add(groupContainer);
+            this.__groupedContainers.add(groupContainer);
             this.__moveNoGroupToLast();
           }
           const card = this.__createCard(resourceData);