Transfer multiple files and folders (#1606)

* initial restructure * folder transfers * sharing working as expected * sharing is ready * toasts and error handling * error messages * transfer progress ready * lingui extract * Update packages/files-ui/src/Contexts/FilesContext.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * using reduce and handling each file share error * updated terms * lingui extract * added no files check * lingui extract * share messages * lingui extract * lint Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Oct 8, 2021 · 99b330b · 99b330b
1 parent 920bc0e
commit 99b330b
Show file tree

Hide file tree

Showing 12 changed files with 315 additions and 184 deletions.
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
@@ -169,8 +169,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   }, [currentPath, pathContents, redirect])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
-    [CONTENT_TYPES.Directory]: ["download", "move", "delete"],
-    [CONTENT_TYPES.File]: ["download", "delete", "move"]
+    [CONTENT_TYPES.Directory]: ["download", "move", "delete", "share"],
+    [CONTENT_TYPES.File]: ["download", "delete", "move", "share"]
   }), [])
 
   const itemOperations: IFilesTableBrowserProps["itemOperations"] = useMemo(() => ({
@@ -180,7 +180,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
     [CONTENT_TYPES.Pdf]: ["preview"],
     [CONTENT_TYPES.Text]: ["preview"],
     [CONTENT_TYPES.File]: ["download", "info", "rename", "move", "delete", "share"],
-    [CONTENT_TYPES.Directory]: ["download", "rename", "move", "delete"]
+    [CONTENT_TYPES.Directory]: ["download", "rename", "move", "delete", "share"]
   }), [])
 
   return (

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx
@@ -180,12 +180,11 @@ const useStyles = makeStyles(
 )
 
 interface IShareFileProps {
-  file: FileSystemItem
+  fileSystemItems: FileSystemItem[]
   close: () => void
-  filePath: string
 }
 
-const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
+const ShareModal = ({ close, fileSystemItems }: IShareFileProps) => {
   const classes = useStyles()
   const { handleCreateSharedFolder } = useCreateOrEditSharedFolder()
   const [sharedFolderName, setSharedFolderName] = useState("")
@@ -194,7 +193,7 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
   const [keepOriginalFile, setKeepOriginalFile] = useState(true)
   const [destinationBucket, setDestinationBucket] = useState<BucketKeyPermission | undefined>()
   const { buckets, transferFileBetweenBuckets } = useFiles()
-  const { bucket } = useFileBrowser()
+  const { bucket, currentPath } = useFileBrowser()
   const { profile } = useUser()
   const [nameError, setNameError] = useState("")
   const inSharedBucket = useMemo(() => bucket?.type === "share", [bucket])
@@ -284,21 +283,21 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
       return
     }
 
-    transferFileBetweenBuckets(bucket.id, file, filePath, bucketToUpload, keepOriginalFile)
+    transferFileBetweenBuckets(bucket, fileSystemItems, currentPath, bucketToUpload, keepOriginalFile)
     close()
   }, [
     bucket,
     destinationBucket,
-    file,
-    filePath,
     handleCreateSharedFolder,
     isUsingCurrentBucket,
     sharedFolderName,
     sharedFolderReaders,
     sharedFolderWriters,
     keepOriginalFile,
     close,
-    transferFileBetweenBuckets
+    transferFileBetweenBuckets,
+    currentPath,
+    fileSystemItems
   ])
 
   return (
@@ -428,7 +427,7 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
               <CheckboxInput
                 value={keepOriginalFile}
                 onChange={() => setKeepOriginalFile(!keepOriginalFile)}
-                label={t`Keep original file`}
+                label={t`Keep original files`}
               />
             </div>
           )}

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
@@ -190,7 +190,7 @@ const SharedFileBrowser = () => {
   }, [addToast, uploadFiles, bucket, refreshContents])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
-    [CONTENT_TYPES.Directory]: ["download", "move", "delete"],
+    [CONTENT_TYPES.Directory]: ["download", "move", "delete", "share"],
     [CONTENT_TYPES.File]: ["download", "delete", "move", "share"]
   }), [])
 
@@ -204,7 +204,7 @@ const SharedFileBrowser = () => {
           [CONTENT_TYPES.Pdf]: ["preview"],
           [CONTENT_TYPES.Text]: ["preview"],
           [CONTENT_TYPES.File]: ["download", "info", "rename", "move", "delete", "share"],
-          [CONTENT_TYPES.Directory]: ["rename", "move", "delete"]
+          [CONTENT_TYPES.Directory]: ["rename", "move", "delete", "share"]
         }
       case "writer":
         return {
@@ -214,7 +214,7 @@ const SharedFileBrowser = () => {
           [CONTENT_TYPES.Pdf]: ["preview"],
           [CONTENT_TYPES.Text]: ["preview"],
           [CONTENT_TYPES.File]: ["download", "info", "rename", "move", "delete", "report", "share"],
-          [CONTENT_TYPES.Directory]: ["rename", "move", "delete"]
+          [CONTENT_TYPES.Directory]: ["rename", "move", "delete", "share"]
         }
         // case "reader":
       default:

diff --git a/...ages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/...ages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx
@@ -122,7 +122,7 @@ interface IFileSystemItemProps {
   browserView: BrowserView
   reportFile?: (path: string) => void
   showFileInfo?: (path: string) => void
-  share?: (path: string, fileIndex: number) => void
+  handleShare?: (file: FileSystemItemType) => void
   showPreview?: (fileIndex: number) => void
 }
 
@@ -145,7 +145,7 @@ const FileSystemItem = ({
   resetSelectedFiles,
   reportFile,
   showFileInfo,
-  share,
+  handleShare,
   showPreview
 }: IFileSystemItemProps) => {
   const { bucket, downloadFile, currentPath, handleUploadOnDrop, moveItems } = useFileBrowser()
@@ -247,7 +247,7 @@ const FileSystemItem = ({
           </span>
         </>
       ),
-      onClick: () => share && share(filePath, files?.indexOf(file))
+      onClick: () => handleShare && handleShare(file)
     },
     info: {
       contents: (
@@ -316,9 +316,8 @@ const FileSystemItem = ({
     currentPath,
     downloadFile,
     moveFile,
-    share,
+    handleShare,
     filePath,
-    files,
     showFileInfo,
     recoverFile,
     onFilePreview,

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -616,6 +616,12 @@ const FilesList = ({ isShared = false }: Props) => {
     setIsDeleteModalOpen(true)
   }, [])
 
+  const handleOpenShareDialog = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsShareModalOpen(true)
+  }, [])
+
   const mobileMenuItems = useMemo(() => [
     {
       contents: (
@@ -642,13 +648,12 @@ const FilesList = ({ isShared = false }: Props) => {
   ],
   [classes.menuIcon])
 
-  const onShare = useCallback((fileInfoPath: string, fileIndex: number) => {
+  const onShare = useCallback((fileSystemItem: FileSystemItemType) => {
     if(hasSeenSharingExplainerModal) {
       setClickedShare(true)
     }
 
-    setFilePath(fileInfoPath)
-    setFileIndex(fileIndex)
+    setSelectedItems([fileSystemItem])
     setIsShareModalOpen(true)
   }, [hasSeenSharingExplainerModal])
 
@@ -817,6 +822,15 @@ const FilesList = ({ isShared = false }: Props) => {
                 <Trans>Delete selected</Trans>
               </Button>
             )}
+            {validBulkOps.includes("share") && (
+              <Button
+                onClick={handleOpenShareDialog}
+                variant="outline"
+                testId="share-selected-file"
+              >
+                <Trans>Share selected</Trans>
+              </Button>
+            )}
           </>
         )}
       </section>
@@ -954,7 +968,7 @@ const FilesList = ({ isShared = false }: Props) => {
                       setFileIndex(fileIndex)
                       setIsPreviewOpen(true)
                     }}
-                    share={onShare}
+                    handleShare={onShare}
                   />
                 ))}
               </TableBody>
@@ -1007,7 +1021,7 @@ const FilesList = ({ isShared = false }: Props) => {
                     setFilePath(fileInfoPath)
                     setIsFileInfoModalOpen(true)
                   }}
-                  share={onShare}
+                  handleShare={onShare}
                   showPreview={(fileIndex: number) => {
                     setFileIndex(fileIndex)
                     setIsPreviewOpen(true)
@@ -1093,14 +1107,13 @@ const FilesList = ({ isShared = false }: Props) => {
           }}
         />
       }
-      { !showExplainerBeforeShare && isShareModalOpen && filePath && fileIndex !== undefined &&
+      { !showExplainerBeforeShare && isShareModalOpen && selectedItems.length &&
         <ShareModal
-          file={files[fileIndex]}
           close={() => {
             setIsShareModalOpen(false)
             setFilePath(undefined)
           }}
-          filePath={currentPath}
+          fileSystemItems={selectedItems}
         />
       }
       <SharingExplainerModal