Web:Client: add Archive dialog for archive rooms and restore rooms operations

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

@@ -0,0 +1,8 @@
+{
+  "ArchiveHeader": "Move to Archived?",
+  "ArchiveRoom": "You are about to archive a room. Are you sure you want to continue?",
+  "ArchiveRooms": "You are about to archive rooms. Are you sure you want to continue?",
+  "RestoreRoom": "Are you sure you want to restore room?",
+  "RestoreRooms": "Are you sure you want to restore rooms?",
+  "RestoreAllRooms": "Are you sure you want to restore all rooms?"
+}

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

@@ -1,6 +1,4 @@
 {
-  "MoveToArchiveTitle": "Move to Archived",
-  "MoveToArchiveDescription": "You are about to archive a room. Are you sure you want to continue?",
   "MoveToTrashButton": "Move to Trash",
   "MoveToTrashFile": "You are about to delete this file? Please note, that if you have shared it with someone, it will become unavailable. Are you sure you want to continue?",
   "MoveToTrashFolder": "You are about to delete this folder? Please note, that if you have shared it with someone, it will become unavailable. Are you sure you want to continue?",

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

@@ -1,5 +0,0 @@
-{
-  "RestoreArchive": "Are you sure you want to restore room?",
-  "RestoreArchives": "Are you sure you want to restore rooms?",
-  "RestoreAllArchives": "Are you sure you want to restore all rooms?"
-}

packages/client/src/HOCs/withHotkeys.js

@@ -55,7 +55,7 @@ const withHotkeys = (Component) => {
 
       isVisitor,
       deleteRooms,
-      moveRoomsToArchive,
+      archiveRooms,
     } = props;
 
     const hotkeysFilter = {
@@ -260,7 +260,7 @@ const withHotkeys = (Component) => {
         }
 
         if (isRoomsFolder) {
-          isAvailableOption("archive") && moveRoomsToArchive(t);
+          isAvailableOption("archive") && archiveRooms("archive");
           return;
         }
 
@@ -394,7 +394,7 @@ const withHotkeys = (Component) => {
         backToParentFolder,
         setFavoriteAction,
         deleteRooms,
-        moveRoomsToArchive,
+        archiveRooms,
       } = filesActionsStore;
 
       const { visible: mediaViewerIsVisible } = mediaViewerDataStore;
@@ -456,7 +456,7 @@ const withHotkeys = (Component) => {
 
         isVisitor,
         deleteRooms,
-        moveRoomsToArchive,
+        archiveRooms,
       };
     }
   )(observer(WithHotkeys));

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

@@ -26,7 +26,7 @@ import {
   InviteUsersWarningDialog,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
-import RestoreArchiveDialog from "../dialogs/RestoreArchiveDialog";
+import ArchiveDialog from "../dialogs/ArchiveDialog";
 
 const Panels = (props) => {
   const {
@@ -54,7 +54,7 @@ const Panels = (props) => {
     convertPasswordDialogVisible,
     createRoomDialogVisible,
     restoreAllPanelVisible,
-    restoreArchiveDialogVisible,
+    archiveDialogVisible,
     inviteUsersWarningDialogVisible,
   } = props;
 
@@ -121,9 +121,7 @@ const Panels = (props) => {
     convertPasswordDialogVisible && (
       <ConvertPasswordDialog key="convert-password-dialog" />
     ),
-    restoreArchiveDialogVisible && (
-      <RestoreArchiveDialog key="restore-all-archive-dialog" />
-    ),
+    archiveDialogVisible && <ArchiveDialog key="archive-dialog" />,
     inviteUsersWarningDialogVisible && (
       <InviteUsersWarningDialog key="invite-users-warning-dialog" />
     ),
@@ -151,7 +149,7 @@ export default inject(
       convertPasswordDialogVisible,
       connectItem, //TODO:
       restoreAllPanelVisible,
-      restoreArchiveDialogVisible,
+      archiveDialogVisible,
 
       createMasterForm,
       selectFileDialogVisible,
@@ -189,7 +187,7 @@ export default inject(
       hotkeyPanelVisible,
       restoreAllPanelVisible,
       invitePanelVisible: invitePanelOptions.visible,
-      restoreArchiveDialogVisible,
+      archiveDialogVisible,
       inviteUsersWarningDialogVisible,
     };
   }

packages/client/src/components/dialogs/ArchiveDialog/index.js

@@ -17,16 +17,18 @@ const StyledModal = styled(ModalDialogContainer)`
   }
 `;
 
-const RestoreArchiveDialogComponent = (props) => {
+const ArchiveDialogComponent = (props) => {
   const {
     t,
     tReady,
 
     visible,
     restoreAll,
+    action,
 
-    setRestoreArchiveDialogVisible,
+    setArchiveDialogVisible,
     setRestoreAllArchive,
+    setArchiveActionType,
 
     setArchiveAction,
     items,
@@ -43,14 +45,15 @@ const RestoreArchiveDialogComponent = (props) => {
   const onClose = () => {
     if (!requestRunning) {
       setRestoreAllArchive(false);
-      setRestoreArchiveDialogVisible(false);
+      setArchiveActionType(null);
+      setArchiveDialogVisible(false);
     }
   };
 
-  const onRestore = () => {
+  const onAction = () => {
     setRequestRunning(true);
 
-    setArchiveAction("unarchive", items, t).then(() => {
+    setArchiveAction(action, items, t).then(() => {
       setRequestRunning(false);
       onClose();
     });
@@ -58,13 +61,33 @@ const RestoreArchiveDialogComponent = (props) => {
 
   const onKeyPress = (e) => {
     if (e.keyCode === 13) {
-      onRestore();
+      onAction();
     }
   };
 
-  const description = restoreAll
-    ? t("RestoreArchiveDialog:RestoreAllArchives")
-    : "work at progress";
+  const getDescription = () => {
+    if (restoreAll) return t("ArchiveDialog:RestoreAllRooms");
+
+    if (action === "archive") {
+      return items.length > 1
+        ? t("ArchiveDialog:ArchiveRooms")
+        : t("ArchiveDialog:ArchiveRoom");
+    }
+
+    if (action === "unarchive") {
+      return items.length > 1
+        ? t("ArchiveDialog:RestoreRooms")
+        : t("ArchiveDialog:RestoreRoom");
+    }
+  };
+
+  const header =
+    action === "archive"
+      ? t("ArchiveDialog:ArchiveHeader")
+      : t("Common:Restore");
+  const description = getDescription();
+  const acceptButton =
+    action === "archive" ? t("Common:OKButton") : t("Common:Restore");
 
   return (
     <StyledModal
@@ -73,17 +96,17 @@ const RestoreArchiveDialogComponent = (props) => {
       onClose={onClose}
       displayType="modal"
     >
-      <ModalDialog.Header>{t("Common:Restore")}</ModalDialog.Header>
+      <ModalDialog.Header>{header}</ModalDialog.Header>
       <ModalDialog.Body>
         <Text>{description}</Text>
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <Button
           key="OkButton"
-          label={t("Common:Restore")}
+          label={acceptButton}
           size="normal"
           primary
-          onClick={onRestore}
+          onClick={onAction}
           isLoading={requestRunning}
           scale
         />
@@ -100,34 +123,40 @@ const RestoreArchiveDialogComponent = (props) => {
   );
 };
 
-const RestoreArchiveDialog = withTranslation([
-  "Files",
-  "RestoreArchiveDialog",
-  "Common",
-])(RestoreArchiveDialogComponent);
+const ArchiveDialog = withTranslation(["Files", "ArchiveDialog", "Common"])(
+  ArchiveDialogComponent
+);
 
 export default inject(({ filesStore, filesActionsStore, dialogsStore }) => {
-  const { folders } = filesStore;
+  const { folders, selection, bufferSelection } = filesStore;
   const { setArchiveAction } = filesActionsStore;
 
   const {
-    restoreArchiveDialogVisible: visible,
+    archiveDialogVisible: visible,
     restoreAllArchive: restoreAll,
+    archiveAction: action,
 
-    setRestoreArchiveDialogVisible,
+    setArchiveDialogVisible,
     setRestoreAllArchive,
+    setArchiveAction: setArchiveActionType,
   } = dialogsStore;
 
-  const items = restoreAll ? folders : [];
+  const items = restoreAll
+    ? folders
+    : selection.length > 0
+    ? selection
+    : [bufferSelection];
 
   return {
     visible,
     restoreAll,
+    action,
 
-    setRestoreArchiveDialogVisible,
+    setArchiveDialogVisible,
     setRestoreAllArchive,
+    setArchiveActionType,
 
     setArchiveAction,
     items,
   };
-})(withRouter(observer(RestoreArchiveDialog)));
+})(withRouter(observer(ArchiveDialog)));

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

@@ -317,8 +317,9 @@ class SectionHeaderContent extends React.Component {
 
     if (isExistActiveItems) return;
 
+    this.props.setArchiveAction("unarchive");
     this.props.setRestoreAllArchive(true);
-    this.props.setRestoreArchiveDialogVisible(true);
+    this.props.setArchiveDialogVisible(true);
   };
 
   onShowInfo = () => {
@@ -718,8 +719,9 @@ export default inject(
       setSelectFileDialogVisible,
       setIsFolderActions,
       setRestoreAllPanelVisible,
-      setRestoreArchiveDialogVisible,
+      setArchiveDialogVisible,
       setRestoreAllArchive,
+      setArchiveAction,
     } = dialogsStore;
 
     const {
@@ -826,8 +828,9 @@ export default inject(
 
       setRestoreAllPanelVisible,
       isEmptyPage,
-      setRestoreArchiveDialogVisible,
+      setArchiveDialogVisible,
       setRestoreAllArchive,
+      setArchiveAction,
 
       selectedFolder,
 

packages/client/src/store/ContextOptionsStore.js

@@ -438,13 +438,18 @@ class ContextOptionsStore {
     this.filesActionsStore.setPinAction(action, id, t);
   };
 
-  onClickArchive = (e, item, t) => {
+  onClickArchive = (e) => {
     const data = (e.currentTarget && e.currentTarget.dataset) || e;
     const { action } = data;
 
-    this.filesActionsStore
-      .setArchiveAction(action, item, t)
-      .catch((err) => toastr.error(err));
+    const { setArchiveDialogVisible, setArchiveAction } = this.dialogsStore;
+
+    setArchiveAction(action);
+    setArchiveDialogVisible(true);
+
+    // this.filesActionsStore
+    //   .setArchiveAction(action, item, t)
+    //   .catch((err) => toastr.error(err));
   };
 
   onSelect = (item) => {
@@ -799,7 +804,7 @@ class ContextOptionsStore {
         key: "archive-room",
         label: t("Archived"),
         icon: "/static/images/room.archive.svg",
-        onClick: (e) => this.onClickArchive(e, item, t),
+        onClick: (e) => this.onClickArchive(e),
         disabled: false,
         "data-action": "archive",
         action: "archive",
@@ -808,7 +813,7 @@ class ContextOptionsStore {
         key: "unarchive-room",
         label: t("Common:Restore"),
         icon: "images/subtract.react.svg",
-        onClick: (e) => this.onClickArchive(e, item, t),
+        onClick: (e) => this.onClickArchive(e),
         disabled: false,
         "data-action": "unarchive",
         action: "unarchive",
@@ -895,15 +900,19 @@ class ContextOptionsStore {
             key: "archive-room",
             label: t("Archived"),
             icon: "/static/images/room.archive.svg",
-            onClick: () => moveRoomsToArchive(t),
+            onClick: (e) => this.onClickArchive(e),
             disabled: false,
+            "data-action": "archive",
+            action: "archive",
           }
         : {
             key: "unarchive-room",
             label: t("Common:Restore"),
             icon: "images/subtract.react.svg",
-            onClick: () => moveRoomsFromArchive(t),
+            onClick: (e) => this.onClickArchive(e),
             disabled: false,
+            "data-action": "unarchive",
+            action: "unarchive",
           };
 
       const options = [];

packages/client/src/store/DialogsStore.js

@@ -35,7 +35,7 @@ class DialogsStore {
     defaultAccess: ShareAccessRights.FullAccess,
   };
   restoreAllPanelVisible = false;
-  restoreArchiveDialogVisible = false;
+  archiveDialogVisible = false;
   eventDialogVisible = false;
 
   removeItem = null;
@@ -47,7 +47,7 @@ class DialogsStore {
   conflictResolveDialogItems = null;
   removeMediaItem = null;
   unsubscribe = null;
-  archived = null;
+  archiveAction = null;
   convertItem = null;
   formCreationInfo = null;
   saveThirdpartyResponse = null;
@@ -72,12 +72,16 @@ class DialogsStore {
     this.versionHistoryStore = versionHistoryStore;
   }
 
+  setArchiveAction = (archiveAction) => {
+    this.archiveAction = archiveAction;
+  };
+
   setRestoreAllArchive = (restoreAllArchive) => {
     this.restoreAllArchive = restoreAllArchive;
   };
 
-  setRestoreArchiveDialogVisible = (restoreArchiveDialogVisible) => {
-    this.restoreArchiveDialogVisible = restoreArchiveDialogVisible;
+  setArchiveDialogVisible = (archiveDialogVisible) => {
+    this.archiveDialogVisible = archiveDialogVisible;
   };
 
   setSharingPanelVisible = (sharingPanelVisible) => {
@@ -240,10 +244,6 @@ class DialogsStore {
     this.unsubscribe = unsubscribe;
   };
 
-  setArchived = (archived) => {
-    this.archived = archived;
-  };
-
   setConvertDialogVisible = (visible) => {
     this.convertDialogVisible = visible;
   };
@@ -322,7 +322,7 @@ class DialogsStore {
       this.versionHistoryStore.isVisible ||
       this.eventDialogVisible ||
       this.invitePanelOptions.visible ||
-      this.restoreArchiveDialogVisible ||
+      this.archiveDialogVisible ||
       this.restoreAllPanelVisible ||
       this.inviteUsersWarningDialogVisible
     );

packages/client/src/store/FilesActionsStore.js

@@ -1358,28 +1358,11 @@ class FilesActionStore {
     this.setPinAction("unpin", items);
   };
 
-  moveRoomsToArchive = (t) => {
-    const { selection } = this.filesStore;
+  archiveRooms = (action) => {
+    const { setArchiveAction, setArchiveDialogVisible } = this.dialogsStore;
 
-    const items = [];
-
-    selection.forEach((item) => {
-      items.push(item);
-    });
-
-    this.setArchiveAction("archive", items, t);
-  };
-
-  moveRoomsFromArchive = (t) => {
-    const { selection } = this.filesStore;
-
-    const items = [];
-
-    selection.forEach((item) => {
-      items.push(item);
-    });
-
-    this.setArchiveAction("unarchive", items, t);
+    setArchiveAction(action);
+    setArchiveDialogVisible(true);
   };
 
   deleteRooms = (t) => {
@@ -1490,7 +1473,7 @@ class FilesActionStore {
             key: "archive",
             label: t("Archived"),
             iconUrl: "/static/images/room.archive.svg",
-            onClick: () => this.moveRoomsToArchive(t),
+            onClick: () => this.archiveRooms("archive"),
             disabled: false,
           };
       case "unarchive":
@@ -1500,7 +1483,7 @@ class FilesActionStore {
             key: "unarchive",
             label: t("Common:Restore"),
             iconUrl: "images/subtract.react.svg",
-            onClick: () => this.moveRoomsFromArchive(t),
+            onClick: () => this.archiveRooms("unarchive"),
             disabled: false,
           };
       case "delete-room":