✨ [Frontend] Trash bin

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

@@ -776,9 +776,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

@@ -32,7 +32,7 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
 
   properties: {
     currentContext: {
-      check: ["studiesAndFolders", "workspaces", "search"],
+      check: ["studiesAndFolders", "workspaces", "search", "trash"],
       nullable: false,
       init: "studiesAndFolders",
       event: "changeCurrentContext",

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);
@@ -262,6 +274,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/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);

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

@@ -34,6 +34,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
   },
 
   events: {
+    "trashContext": "qx.event.type.Event",
     "changeSharedWith": "qx.event.type.Data",
     "changeSelectedTags": "qx.event.type.Data",
     "changeServiceType": "qx.event.type.Data"
@@ -42,13 +43,15 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
   members: {
     __resourceType: null,
     __workspacesAndFoldersTree: null,
+    __trashButton: null,
     __sharedWithButtons: null,
     __tagButtons: null,
     __serviceTypeButtons: null,
 
     __buildLayout: function() {
       if (this.__resourceType === "study" && osparc.utils.DisabledPlugins.isFoldersEnabled()) {
         this._add(this.__createWorkspacesAndFoldersTree());
+        this._add(this.__createTrashBin());
       } else {
         this._add(this.__createSharedWithFilterLayout());
       }
@@ -62,6 +65,16 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       }
     },
 
+    contextChanged: function(context, workspaceId, folderId) {
+      this.__workspacesAndFoldersTree.set({
+        currentWorkspaceId: workspaceId,
+        currentFolderId: folderId,
+      });
+      this.__workspacesAndFoldersTree.contextChanged(context);
+
+      this.__trashButton.setValue(context === "trash");
+    },
+
     /* WORKSPACES AND FOLDERS */
     __createWorkspacesAndFoldersTree: function() {
       const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
@@ -85,6 +98,24 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     },
     /* /WORKSPACES AND FOLDERS */
 
+    /* TRASH BIN */
+    __createTrashBin: function() {
+      const trashButton = this.__trashButton = new qx.ui.toolbar.RadioButton().set({
+        value: false,
+        appearance: "filter-toggle-button",
+        label: this.tr("Trash"),
+        icon: "@FontAwesome5Solid/trash/18",
+      });
+      trashButton.addListener("changeValue", e => {
+        const trashEnabled = e.getData();
+        if (trashEnabled) {
+          this.fireEvent("trashContext");
+        }
+      });
+      return trashButton;
+    },
+    /* /TRASH BIN */
+
     /* SHARED WITH */
     __createSharedWithFilterLayout: function() {
       const sharedWithLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));

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

@@ -129,11 +129,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
     // LAYOUT //
     _createLayout: function() {
       this._createSearchBar();
-      this._createResourcesLayout();
-      const list = this._resourcesContainer.getFlatList();
-      if (list) {
-        osparc.utils.Utils.setIdToWidget(list, "servicesList");
-      }
+      this._createResourcesLayout("servicesList");
 
       this.__addNewServiceButtons();
       this._toolbar.add(new qx.ui.core.Spacer(), {