Web: Files: added MoveToPublicRoom dialog

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

@@ -138,5 +138,7 @@
   "DownloadAll": "Download all",
   "PublicRoom": "Public room",
   "PasswordSuccessfullyCopied": "Password successfully copied",
-  "LinkAddedSuccessfully": "Link added successfully"
+  "LinkAddedSuccessfully": "Link added successfully",
+  "MoveToPublicRoomTitle": "Move to Public room",
+  "MoveToPublicRoom": "This room and all its contents are available to anyone with the link. Do you want to continue?"
 }

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

@@ -29,6 +29,7 @@ import {
   UnsavedChangesDialog,
   DeleteLinkDialog,
   RoomSharingDialog,
+  MoveToPublicRoom,
 } from "../dialogs";
 import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
 import ArchiveDialog from "../dialogs/ArchiveDialog";
@@ -72,6 +73,7 @@ const Panels = (props) => {
     deleteLinkDialogVisible,
     embeddingPanelIsVisible,
     roomSharingPanelVisible,
+    moveToPublicRoomVisible,
   } = props;
 
   const { t } = useTranslation(["Translations", "Common"]);
@@ -155,6 +157,9 @@ const Panels = (props) => {
     deleteLinkDialogVisible && <DeleteLinkDialog key="delete-link-dialog" />,
     embeddingPanelIsVisible && <EmbeddingPanel key="embedding-panel" />,
     roomSharingPanelVisible && <RoomSharingDialog key="room-sharing-dialog" />,
+    moveToPublicRoomVisible && (
+      <MoveToPublicRoom key="move-to-public-room-panel" />
+    ),
   ];
 };
 
@@ -200,6 +205,7 @@ export default inject(
       deleteLinkDialogVisible,
       embeddingPanelIsVisible,
       roomSharingPanelVisible,
+      moveToPublicRoomVisible,
     } = dialogsStore;
 
     const { preparationPortalDialogVisible } = backup;
@@ -245,6 +251,7 @@ export default inject(
       deleteLinkDialogVisible,
       embeddingPanelIsVisible,
       roomSharingPanelVisible,
+      moveToPublicRoomVisible,
     };
   }
 )(observer(Panels));

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

@@ -65,6 +65,7 @@ const ConflictResolveDialog = (props) => {
     setMoveToPanelVisible,
     setCopyPanelVisible,
     setRestoreAllPanelVisible,
+    setMoveToPublicRoomVisible,
   } = props;
 
   const {
@@ -80,12 +81,16 @@ const ConflictResolveDialog = (props) => {
   const [resolveType, setResolveType] = useState("overwrite");
 
   const onSelectResolveType = (e) => setResolveType(e.target.value);
-  const onClose = () => setConflictResolveDialogVisible(false);
+  const onClose = () => {
+    setMoveToPublicRoomVisible(false);
+    setConflictResolveDialogVisible(false);
+  };
   const onClosePanels = () => {
     setConflictResolveDialogVisible(false);
     setMoveToPanelVisible(false);
     setCopyPanelVisible(false);
     setRestoreAllPanelVisible(false);
+    setMoveToPublicRoomVisible(false);
   };
   const onCloseDialog = () => {
     let newActiveFiles = activeFiles;
@@ -260,6 +265,7 @@ export default inject(({ auth, dialogsStore, uploadDataStore, filesStore }) => {
     setMoveToPanelVisible,
     setRestoreAllPanelVisible,
     setCopyPanelVisible,
+    setMoveToPublicRoomVisible,
   } = dialogsStore;
 
   const { itemOperationToFolder } = uploadDataStore;
@@ -278,6 +284,7 @@ export default inject(({ auth, dialogsStore, uploadDataStore, filesStore }) => {
     setMoveToPanelVisible,
     setRestoreAllPanelVisible,
     setCopyPanelVisible,
+    setMoveToPublicRoomVisible,
   };
 })(
   withTranslation(["ConflictResolveDialog", "Common"])(

packages/client/src/components/dialogs/MoveToPublicRoom/StyledMoveToPublicRoomDialog.js

@@ -0,0 +1,43 @@
+import ModalDialog from "@docspace/components/modal-dialog";
+import { tablet } from "@docspace/components/utils/device";
+import styled from "styled-components";
+
+const StyledMoveToPublicRoomDialog = styled(ModalDialog)`
+  /* .scroll-body {
+    padding-right: 0 !important;
+  } */
+
+  .modal-dialog-content-body {
+    padding: 0;
+    border: none;
+  }
+
+  .modal-dialog-aside-header {
+    margin: 0 -24px 0 -16px;
+    padding: 0 0 0 16px;
+  }
+
+  .modal-dialog-aside-footer {
+    @media ${tablet} {
+      width: 100%;
+      padding-right: 32px;
+      display: flex;
+    }
+  }
+
+  .button-dialog-accept {
+    @media ${tablet} {
+      width: 100%;
+    }
+  }
+
+  .button-dialog {
+    @media ${tablet} {
+      width: 100%;
+    }
+
+    display: inline-block;
+  }
+`;
+
+export { StyledMoveToPublicRoomDialog };

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

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import ModalDialog from "@docspace/components/modal-dialog";
+import { StyledMoveToPublicRoomDialog } from "./StyledMoveToPublicRoomDialog";
+import Button from "@docspace/components/button";
+import Text from "@docspace/components/text";
+import { withTranslation } from "react-i18next";
+import toastr from "@docspace/components/toast/toastr";
+import { inject, observer } from "mobx-react";
+
+let timerId;
+
+const MoveToPublicRoomComponent = (props) => {
+  const {
+    t,
+    tReady,
+    visible,
+    setIsVisible,
+    setConflictResolveDialogVisible,
+    setMoveToPanelVisible,
+    setCopyPanelVisible,
+    setRestoreAllPanelVisible,
+    moveToPublicRoomData,
+    checkFileConflicts,
+    setConflictDialogData,
+    setMovingInProgress,
+    itemOperationToFolder,
+    clearActiveOperations,
+  } = props;
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    document.addEventListener("keyup", onKeyUp, false);
+
+    return () => {
+      document.removeEventListener("keyup", onKeyUp, false);
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerId);
+      timerId = null;
+    };
+  });
+
+  const onKeyUp = (e) => {
+    if (e.keyCode === 27) onClose();
+    if (e.keyCode === 13 || e.which === 13) onMoveTo();
+  };
+
+  const onClosePanels = () => {
+    setIsVisible(false);
+    setConflictResolveDialogVisible(false);
+    setMoveToPanelVisible(false);
+    setCopyPanelVisible(false);
+    setRestoreAllPanelVisible(false);
+  };
+
+  const onClose = () => {
+    setIsVisible(false);
+  };
+
+  const onMoveTo = () => {
+    const { destFolderId, folderIds, fileIds, isCopy } = moveToPublicRoomData;
+
+    if (!timerId)
+      timerId = setTimeout(() => {
+        setIsLoading(true);
+      }, 500);
+
+    checkFileConflicts(destFolderId, folderIds, fileIds)
+      .then(async (conflicts) => {
+        if (conflicts.length) {
+          setConflictDialogData(conflicts, moveToPublicRoomData);
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          onClosePanels();
+          const move = !isCopy;
+          if (move) setMovingInProgress(move);
+          await itemOperationToFolder(moveToPublicRoomData);
+        }
+      })
+      .catch((e) => {
+        toastr.error(e);
+        setIsLoading(false);
+        clearActiveOperations(fileIds, folderIds);
+      })
+      .finally(() => {
+        clearTimeout(timerId);
+        timerId = null;
+      });
+  };
+
+  return (
+    <StyledMoveToPublicRoomDialog
+      isLoading={!tReady}
+      visible={visible}
+      onClose={onClose}
+    >
+      <ModalDialog.Header>
+        {t("Files:MoveToPublicRoomTitle")}
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <div className="modal-dialog-content-body">
+          <Text noSelect>{t("Files:MoveToPublicRoom")}</Text>
+        </div>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          id="delete-file-modal_submit"
+          key="OkButton"
+          label={t("Common:OKButton")}
+          size="normal"
+          primary
+          scale
+          onClick={onMoveTo}
+          isLoading={isLoading}
+        />
+        <Button
+          id="delete-file-modal_cancel"
+          key="CancelButton"
+          label={t("Common:CancelButton")}
+          size="normal"
+          scale
+          onClick={onClose}
+          isLoading={isLoading}
+        />
+      </ModalDialog.Footer>
+    </StyledMoveToPublicRoomDialog>
+  );
+};
+
+const MoveToPublicRoomDialog = withTranslation([
+  "Common",
+  "Translations",
+  "Files",
+  "EmptyTrashDialog",
+])(MoveToPublicRoomComponent);
+
+export default inject(
+  ({ dialogsStore, filesActionsStore, filesStore, uploadDataStore }) => {
+    const { setMovingInProgress } = filesStore;
+
+    const {
+      moveToPublicRoomVisible,
+      setMoveToPublicRoomVisible,
+      setConflictResolveDialogVisible,
+      setMoveToPanelVisible,
+      setCopyPanelVisible,
+      setRestoreAllPanelVisible,
+      moveToPublicRoomData,
+    } = dialogsStore;
+
+    const { setConflictDialogData, checkFileConflicts } = filesActionsStore;
+    const { itemOperationToFolder, clearActiveOperations } = uploadDataStore;
+
+    return {
+      visible: moveToPublicRoomVisible,
+      setIsVisible: setMoveToPublicRoomVisible,
+      setConflictResolveDialogVisible,
+      setMoveToPanelVisible,
+      setCopyPanelVisible,
+      setRestoreAllPanelVisible,
+      moveToPublicRoomData,
+      checkFileConflicts,
+      setConflictDialogData,
+      setMovingInProgress,
+      itemOperationToFolder,
+      clearActiveOperations,
+    };
+  }
+)(observer(MoveToPublicRoomDialog));

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

@@ -32,6 +32,7 @@ import PortalRenamingDialog from "./PortalRenamingDialog";
 import UnsavedChangesDialog from "./UnsavedChangesDialog";
 import DeleteLinkDialog from "./DeleteLinkDialog";
 import RoomSharingDialog from "./RoomSharingDialog";
+import MoveToPublicRoom from "./MoveToPublicRoom";
 
 export {
   EmptyTrashDialog,
@@ -68,4 +69,5 @@ export {
   UnsavedChangesDialog,
   DeleteLinkDialog,
   RoomSharingDialog,
+  MoveToPublicRoom,
 };

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-
+import { RoomsType } from "@docspace/common/constants";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import toastr from "@docspace/components/toast/toastr";
@@ -32,6 +32,8 @@ const OperationsPanelComponent = (props) => {
     thirdPartyMoveDialogVisible,
     setRestoreAllPanelVisible,
     setMovingInProgress,
+    setMoveToPublicRoomVisible,
+    moveToPublicRoomVisible,
   } = props;
 
   const deleteAfter = false; // TODO: get from settings
@@ -56,19 +58,20 @@ const OperationsPanelComponent = (props) => {
     setExpandedPanelKeys(null);
   };
 
-  const onSubmit = (selectedFolder, folderTitle, providerKey) => {
+  const onSubmit = (selectedFolder, folderTitle, providerKey, roomType) => {
     if (!isCopy && currentFolderId === selectedFolder) {
       return;
     }
 
-    if (isCopy) {
-      startOperation(isCopy, selectedFolder, folderTitle);
-    } else {
-      startOperation(isCopy, selectedFolder, folderTitle);
-    }
+    startOperation(isCopy, selectedFolder, folderTitle, roomType);
   };
 
-  const startOperation = async (isCopy, destFolderId, folderTitle) => {
+  const startOperation = async (
+    isCopy,
+    destFolderId,
+    folderTitle,
+    roomType
+  ) => {
     const isProviderFolder = selection.find((x) => !x.providerKey);
     const items =
       isProviderFolder && !isCopy
@@ -110,6 +113,11 @@ const OperationsPanelComponent = (props) => {
       },
     };
 
+    if (roomType === RoomsType.PublicRoom) {
+      setMoveToPublicRoomVisible(true, operationData);
+      return;
+    }
+
     if (!timerId)
       timerId = setTimeout(() => {
         setIsLoading(true);
@@ -141,7 +149,9 @@ const OperationsPanelComponent = (props) => {
 
   // console.log("Operations panel render", expandedKeys);
   const isVisible =
-    conflictResolveDialogVisible || thirdPartyMoveDialogVisible
+    conflictResolveDialogVisible ||
+    thirdPartyMoveDialogVisible ||
+    moveToPublicRoomVisible
       ? false
       : visible;
 
@@ -215,6 +225,8 @@ export default inject(
       thirdPartyMoveDialogVisible,
       restoreAllPanelVisible,
       setRestoreAllPanelVisible,
+      moveToPublicRoomVisible,
+      setMoveToPublicRoomVisible,
     } = dialogsStore;
 
     const selections = isRestore
@@ -254,6 +266,8 @@ export default inject(
       clearActiveOperations,
       thirdPartyMoveDialogVisible,
       setMovingInProgress,
+      moveToPublicRoomVisible,
+      setMoveToPublicRoomVisible,
     };
   }
 )(observer(OperationsPanel));

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

@@ -175,11 +175,12 @@ class SelectFolderDialog extends React.Component {
       folderTitle,
       resultingFolderId,
       setSelectedItems,
+      roomType,
     } = this.props;
 
     setSelectedItems();
 
-    onSubmit && onSubmit(resultingFolderId, folderTitle, providerKey);
+    onSubmit && onSubmit(resultingFolderId, folderTitle, providerKey, roomType);
     onSave && onSave(e, resultingFolderId);
     onSetNewFolderPath && onSetNewFolderPath(resultingFolderId);
     onSelectFolder && onSelectFolder(resultingFolderId);
@@ -341,6 +342,7 @@ export default inject(
       toDefault,
       setItemSecurity,
       securityItem,
+      roomType,
     } = selectFolderDialogStore;
 
     const selectedFolderId = selectedId ? selectedId : id;
@@ -350,6 +352,7 @@ export default inject(
       providerKey,
       folderTitle,
       resultingFolderId,
+      roomType,
       setExpandedPanelKeys,
       setResultingFolderId,
       setFolderTitle,

packages/client/src/components/panels/SelectionPanel/FilesListWrapper.js

@@ -55,6 +55,7 @@ class FilesListWrapper extends React.Component {
       setFolderTitle,
       setProviderKey,
       setResultingFolderId,
+      setRoomType,
       folderSelection,
     } = this.props;
 
@@ -91,6 +92,7 @@ class FilesListWrapper extends React.Component {
           setFolderTitle(data.current.title);
           setProviderKey(data.current.providerKey);
           setResultingFolderId(folderId);
+          setRoomType(data.current.roomType);
         }
 
         const finalData = [...data.files];
@@ -144,6 +146,7 @@ export default inject(
     const { id } = selectedFolderStore;
     const {
       setResultingFolderId,
+      setRoomType,
       setFolderTitle,
       setProviderKey,
     } = selectFolderDialogStore;
@@ -151,6 +154,7 @@ export default inject(
     return {
       storeFolderId: id,
       setResultingFolderId,
+      setRoomType,
       setFolderTitle,
       setProviderKey,
     };

packages/client/src/store/DialogsStore.js

@@ -28,6 +28,8 @@ class DialogsStore {
   convertPasswordDialogVisible = false;
   inviteUsersWarningDialogVisible = false;
   unsavedChangesDialogVisible = false;
+  moveToPublicRoomVisible = false;
+  moveToPublicRoomData = null;
 
   isFolderActions = false;
   roomCreation = false;
@@ -343,6 +345,11 @@ class DialogsStore {
     this.embeddingPanelIsVisible = embeddingPanelIsVisible;
   };
 
+  setMoveToPublicRoomVisible = (visible, data = null) => {
+    this.moveToPublicRoomVisible = visible;
+    this.moveToPublicRoomData = data;
+  };
+
   get someDialogIsOpen() {
     return (
       this.sharingPanelVisible ||
@@ -373,7 +380,8 @@ class DialogsStore {
       this.editLinkPanelIsVisible ||
       this.unsavedChangesDialogVisible ||
       this.deleteLinkDialogVisible ||
-      this.embeddingPanelIsVisible
+      this.embeddingPanelIsVisible ||
+      this.moveToPublicRoomVisible
     );
   }
 

packages/client/src/store/SelectFolderDialogStore.js

@@ -2,6 +2,7 @@ import { makeAutoObservable } from "mobx";
 
 class SelectFolderDialogStore {
   resultingFolderId = null;
+  roomType = null;
   fileInfo = null;
   folderTitle = "";
   providerKey = null;
@@ -18,6 +19,7 @@ class SelectFolderDialogStore {
 
   toDefault = () => {
     this.resultingFolderId = null;
+    this.roomType = null;
     this.resultingFolderTree = [];
     this.baseFolderPath = "";
     this.newFolderPath = "";
@@ -57,6 +59,10 @@ class SelectFolderDialogStore {
     this.resultingFolderId = id;
   };
 
+  setRoomType = (type) => {
+    this.roomType = type;
+  };
+
   setFolderTitle = (title) => {
     this.folderTitle = title;
   };