Merge pull request #848 from ONLYOFFICE/bugfix/trash-context-menu

Bugfix/trash context menu

packages/client/public/images/subtract.react.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1C0.895431 1 0 1.89543 0 3V5H2V3H6.58579L9 5.41421C9.37507 5.78929 9.88378 6 10.4142 6H14V13H2V11H0V13C0 14.1046 0.895431 15 2 15H14C15.1046 15 16 14.1046 16 13V6C16 4.89543 15.1046 4 14 4H10.4142L8 1.58579C7.62493 1.21071 7.11622 1 6.58579 1H2ZM3.29289 5.70711L4.58577 6.99998L6.3888e-05 6.99994L4.80408e-05 8.99994L4.58581 8.99998L3.29289 10.2929L4.70711 11.7071L7.70711 8.70711C8.09763 8.31658 8.09763 7.68342 7.70711 7.29289L4.70711 4.29289L3.29289 5.70711Z" fill="#333333"/>
+</svg>

packages/client/public/locales/en/Files.json

@@ -77,6 +77,7 @@
   "PrivateRoomHeader": "Welcome to ONLYOFFICE private room where every symbol you type is encrypted",
   "PrivateRoomSupport": "Work in Private Room is available via {{organizationName}} desktop app. <3>Instructions</3>",
   "RecentEmptyContainerDescription": "Your last viewed or edited docs will be displayed in this section.",
+  "RecycleBinAction": "Empty trash",
   "RemoveFromFavorites": "Remove from favorites",
   "RemoveFromList": "Remove from list",
   "RemovedFromFavorites": "Removed from favorites",
@@ -85,6 +86,7 @@
   "RoomEmptyContainerDescription": "Please create the first room.",
   "RoomRemoved": "Room removed",
   "RoomsRemoved": "Rooms removed",
+  "RestoreAll": "Restore all",
   "SearchByContent": "Search by file contents",
   "SendByEmail": "Send by email",
   "Share": "Share",

packages/client/src/components/FilesPanels/index.js

@@ -49,6 +49,7 @@ const Panels = (props) => {
     hotkeyPanelVisible,
     convertPasswordDialogVisible,
     createRoomDialogVisible,
+    restoreAllPanelVisible,
   } = props;
 
   const { t } = useTranslation(["Translations", "SelectFile"]);
@@ -66,8 +67,12 @@ const Panels = (props) => {
       />
     ),
     ownerPanelVisible && <ChangeOwnerPanel key="change-owner-panel" />,
-    (moveToPanelVisible || copyPanelVisible) && (
-      <OperationsPanel key="operation-panel" isCopy={copyPanelVisible} />
+    (moveToPanelVisible || copyPanelVisible || restoreAllPanelVisible) && (
+      <OperationsPanel
+        key="operation-panel"
+        isCopy={copyPanelVisible}
+        isRestore={restoreAllPanelVisible}
+      />
     ),
     thirdPartyMoveDialogVisible && (
       <ThirdPartyMoveDialog key="thirdparty-move-dialog" />
@@ -132,6 +137,7 @@ export default inject(
       createRoomDialogVisible,
       convertPasswordDialogVisible,
       connectItem, //TODO:
+      restoreAllPanelVisible,
 
       createMasterForm,
       selectFileDialogVisible,
@@ -165,6 +171,7 @@ export default inject(
       createMasterForm,
       setSelectFileDialogVisible,
       hotkeyPanelVisible,
+      restoreAllPanelVisible,
     };
   }
 )(observer(Panels));

packages/client/src/components/panels/OperationsPanel/index.js

@@ -12,6 +12,7 @@ const OperationsPanelComponent = (props) => {
     tReady,
     filter,
     isCopy,
+    isRestore,
     visible,
     provider,
     selection,
@@ -31,6 +32,7 @@ const OperationsPanelComponent = (props) => {
     conflictResolveDialogVisible,
     clearActiveOperations,
     thirdPartyMoveDialogVisible,
+    setRestoreAllPanelVisible,
   } = props;
 
   const deleteAfter = false; // TODO: get from settings
@@ -47,6 +49,8 @@ const OperationsPanelComponent = (props) => {
     if (isCopy) {
       setCopyPanelVisible(false);
       setIsFolderActions(false);
+    } else if (isRestore) {
+      setRestoreAllPanelVisible(false);
     } else {
       setMoveToPanelVisible(false);
     }
@@ -189,9 +193,9 @@ export default inject(
       filesActionsStore,
       uploadDataStore,
     },
-    { isCopy }
+    { isCopy, isRestore }
   ) => {
-    const { filter, selection, bufferSelection } = filesStore;
+    const { filter, selection, filesList, bufferSelection } = filesStore;
     const { isRecycleBinFolder, setExpandedPanelKeys } = treeFoldersStore;
     const { setConflictDialogData, checkFileConflicts } = filesActionsStore;
     const { itemOperationToFolder, clearActiveOperations } = uploadDataStore;
@@ -207,27 +211,37 @@ export default inject(
       setIsFolderActions,
       conflictResolveDialogVisible,
       thirdPartyMoveDialogVisible,
+      restoreAllPanelVisible,
+      setRestoreAllPanelVisible,
     } = dialogsStore;
 
-    const selections = selection.length ? selection : [bufferSelection];
-    const selectionsWithoutEditing = isCopy
+    const selections = isRestore
+      ? filesList
+      : selection.length
+      ? selection
+      : [bufferSelection];
+
+    const selectionsWithoutEditing = isRestore
+      ? filesList
+      : isCopy
       ? selections
       : selections.filter((f) => !f.isEditing);
 
-    const provider = selections.find((x) => x.providerKey);
+    const provider = selections?.find((x) => x?.providerKey);
 
     return {
       currentFolderId: selectedFolderStore.id,
       parentFolderId: selectedFolderStore.parentId,
       isRecycleBin: isRecycleBinFolder,
       filter,
-      visible: copyPanelVisible || moveToPanelVisible,
+      visible: copyPanelVisible || moveToPanelVisible || restoreAllPanelVisible,
       provider,
       selection: selectionsWithoutEditing,
       isFolderActions,
 
       setCopyPanelVisible,
       setMoveToPanelVisible,
+      setRestoreAllPanelVisible,
       setDestFolderId,
       setIsFolderActions,
       setThirdPartyMoveDialogVisible,

packages/client/src/components/panels/SelectFolderDialog/index.js

@@ -214,7 +214,7 @@ class SelectFolderDialog extends React.Component {
       : t("Common:SaveHereButton");
     const name = dialogName ? dialogName : t("Common:SaveButton");
 
-    //console.log("Render Folder Component?", this.state);
+    // console.log("Render Folder Component?", this.state);
 
     const folderSelectionDisabled =
       folderId === sharedRoomId || folderId === sharedRoomId?.toString();

packages/client/src/pages/Home/Section/Header/index.js

@@ -282,51 +282,74 @@ class SectionHeaderContent extends React.Component {
     this.props.setEmptyTrashDialogVisible(true);
   };
 
+  onRestoreAllAction = () => {
+    const { activeFiles, activeFolders } = this.props;
+    const isExistActiveItems = [...activeFiles, ...activeFolders].length > 0;
+
+    if (isExistActiveItems) return;
+
+    this.props.setRestoreAllPanelVisible(true);
+  };
+
   getContextOptionsFolder = () => {
-    const { t, toggleInfoPanel, personal } = this.props;
+    const { t, toggleInfoPanel, isRecycleBinFolder } = this.props;
 
     return [
       {
         key: "sharing-settings",
         label: t("SharingPanel:SharingSettingsTitle"),
         onClick: this.onOpenSharingPanel,
-        disabled: personal ? true : false,
+        disabled: true,
         icon: "/static/images/share.react.svg",
       },
       {
         key: "link-portal-users",
         label: t("LinkForPortalUsers"),
         onClick: this.createLinkForPortalUsers,
-        disabled: personal ? true : false,
+        disabled: true,
         icon: "/static/images/invitation.link.react.svg",
       },
+      {
+        key: "empty-trash",
+        label: t("RecycleBinAction"),
+        onClick: this.onEmptyTrashAction,
+        disabled: !isRecycleBinFolder,
+        icon: "images/clear.trash.react.svg",
+      },
+      {
+        key: "restore-all",
+        label: t("RestoreAll"),
+        onClick: this.onRestoreAllAction,
+        disabled: !isRecycleBinFolder,
+        icon: "images/subtract.react.svg",
+      },
       {
         key: "show-info",
         label: t("InfoPanel:ViewDetails"),
         onClick: toggleInfoPanel,
-        disabled: false,
+        disabled: isRecycleBinFolder,
         icon: "/static/images/info.react.svg",
       },
-      { key: "separator-2", isSeparator: true },
+      { key: "separator-2", isSeparator: true, disabled: isRecycleBinFolder },
       {
         key: "move-to",
         label: t("MoveTo"),
         onClick: this.onMoveAction,
-        disabled: false,
+        disabled: isRecycleBinFolder,
         icon: "images/move.react.svg",
       },
       {
         key: "copy",
         label: t("Translations:Copy"),
         onClick: this.onCopyAction,
-        disabled: false,
+        disabled: isRecycleBinFolder,
         icon: "/static/images/copy.react.svg",
       },
       {
         key: "download",
         label: t("Common:Download"),
         onClick: this.downloadAction,
-        disabled: false,
+        disabled: isRecycleBinFolder,
         icon: "images/download.react.svg",
       },
       {
@@ -340,7 +363,7 @@ class SectionHeaderContent extends React.Component {
         key: "delete",
         label: t("Common:Delete"),
         onClick: this.onDeleteAction,
-        disabled: false,
+        disabled: isRecycleBinFolder,
         icon: "/static/images/catalog.trash.react.svg",
       },
     ];
@@ -565,6 +588,7 @@ export default inject(
       setEmptyTrashDialogVisible,
       setSelectFileDialogVisible,
       setIsFolderActions,
+      setRestoreAllPanelVisible,
     } = dialogsStore;
 
     const {
@@ -650,6 +674,8 @@ export default inject(
       categoryType,
 
       enablePlugins,
+
+      setRestoreAllPanelVisible,
     };
   }
 )(

packages/client/src/store/DialogsStore.js

@@ -28,6 +28,7 @@ class DialogsStore {
   convertPasswordDialogVisible = false;
   isFolderActions = false;
   roomCreation = false;
+  restoreAllPanelVisible = false;
 
   removeItem = null;
   connectItem = null;
@@ -75,6 +76,10 @@ class DialogsStore {
     this.moveToPanelVisible = moveToPanelVisible;
   };
 
+  setRestoreAllPanelVisible = (restoreAllPanelVisible) => {
+    this.restoreAllPanelVisible = restoreAllPanelVisible;
+  };
+
   setCopyPanelVisible = (copyPanelVisible) => {
     !copyPanelVisible && this.deselectActiveFiles();
     this.copyPanelVisible = copyPanelVisible;

packages/common/components/Navigation/sub-components/control-btn.js

@@ -112,9 +112,10 @@ const ControlButtons = ({
 
   return (
     <StyledContainer isDropBox={isDropBox}>
-      {!isRootFolder && canCreate ? (
+      {(!isRootFolder && canCreate) ||
+      (isRecycleBinFolder && !isEmptyFilesList) ? (
         <>
-          {!isMobile && (
+          {!isMobile && canCreate && (
             <PlusButton
               className="add-button"
               getData={getContextOptionsPlus}
@@ -160,24 +161,6 @@ const ControlButtons = ({
             />
           )}
         </>
-      ) : isRecycleBinFolder && !isEmptyFilesList ? (
-        <>
-          <IconButton
-            iconName="images/clear.trash.react.svg"
-            size={15}
-            isFill={true}
-            onClick={clearTrash}
-            className="trash-button"
-            title={(titles && titles["trash"]) || ""}
-          />
-          {!isDesktop && (
-            <ToggleInfoPanelButton
-              isRootFolder={isRootFolder}
-              isInfoPanelVisible={isInfoPanelVisible}
-              toggleInfoPanel={toggleInfoPanelAction}
-            />
-          )}
-        </>
       ) : (
         <>
           {!isDesktop && (