[Files] Download multiple files in a zip

packages/files-ui/package.json

@@ -27,6 +27,7 @@
     "dayjs": "^1.9.7",
     "eth-crypto": "^1.8.0",
     "ethers": "^5.4.3",
+    "fflate": "^0.7.1",
     "formik": "^2.2.5",
     "mime-matcher": "^1.0.5",
     "react": "^16.14.0",

packages/files-ui/src/Components/Modules/DownloadProgressToast/DownloadToast.tsx

@@ -1,17 +1,13 @@
 import React from "react"
-import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { DownloadProgress } from "../../../Contexts/FilesContext"
-import {
-  ProgressBar,
-  Typography,
-  CheckCircleIcon,
-  CloseCircleIcon
-} from "@chainsafe/common-components"
+import { ProgressBar, Typography, CheckCircleIcon, CloseCircleIcon } from "@chainsafe/common-components"
 import clsx from "clsx"
 import { Trans } from "@lingui/macro"
+import { CSFTheme } from "../../../Themes/types"
 
 const useStyles = makeStyles(
-  ({ constants, palette, animation, breakpoints }: ITheme) => {
+  ({ constants, palette, animation, breakpoints }: CSFTheme) => {
     return createStyles({
       boxContainer: {
         backgroundColor: palette.additional["gray"][3],
@@ -41,8 +37,9 @@ const useStyles = makeStyles(
       marginBottom: {
         marginBottom: constants.generalUnit
       },
-      marginRight: {
-        marginRight: constants.generalUnit * 2
+      icon: {
+        marginRight: constants.generalUnit * 2,
+        fill: constants.fileSystemItemRow.menuIcon
       }
     })
   }
@@ -53,46 +50,43 @@ interface IDownloadToast {
 }
 
 const DownloadToast: React.FC<IDownloadToast> = ({ downloadInProgress }) => {
-  const {
-    fileName,
-    complete,
-    error,
-    progress,
-    errorMessage
-  } = downloadInProgress
+  const { fileName, complete, error, progress, errorMessage, currentFileNumber, totalFileNumber } = downloadInProgress
   const classes = useStyles()
+  const fileProgress = totalFileNumber > 1 && `${currentFileNumber}/${totalFileNumber}`
 
   return (
     <>
       <div className={clsx(classes.appearBox, classes.boxContainer)}>
-        {complete ? (
+        {!!complete && !error && (
           <div className={classes.contentContainer}>
-            <CheckCircleIcon className={classes.marginRight} />
+            <CheckCircleIcon className={classes.icon} />
             <Typography
               variant="body1"
               component="p"
             >
               <Trans>Download complete</Trans>
             </Typography>
           </div>
-        ) : error ? (
+        )}
+        {error && (
           <div className={classes.contentContainer}>
-            <CloseCircleIcon className={classes.marginRight} />
+            <CloseCircleIcon className={classes.icon} />
             <Typography
               variant="body1"
               component="p"
             >
               {errorMessage}
             </Typography>
           </div>
-        ) : (
+        )}
+        {!complete && !error && (
           <div>
             <Typography
               variant="body2"
               component="p"
               className={classes.marginBottom}
             >
-              Downloading {fileName}…
+              <Trans>Downloading</Trans> {fileProgress} - {fileName}
             </Typography>
             <ProgressBar
               progress={progress}

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -204,8 +204,8 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   }, [currentPath, pathContents, redirect])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
-    [CONTENT_TYPES.Directory]: ["move", "delete"],
-    [CONTENT_TYPES.File]: ["delete", "move"]
+    [CONTENT_TYPES.Directory]: ["download", "move", "delete"],
+    [CONTENT_TYPES.File]: ["download", "delete", "move"]
   }), [])
 
   const itemOperations: IFilesTableBrowserProps["itemOperations"] = useMemo(() => ({
@@ -215,7 +215,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]: ["rename", "move", "delete"]
+    [CONTENT_TYPES.Directory]: ["download", "rename", "move", "delete"]
   }), [])
 
   return (

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -198,8 +198,8 @@ const SharedFileBrowser = () => {
   }, [addToastMessage, uploadFiles, bucket, refreshContents])
 
   const bulkOperations: IBulkOperations = useMemo(() => ({
-    [CONTENT_TYPES.Directory]: ["move", "delete"],
-    [CONTENT_TYPES.File]: ["delete", "move"]
+    [CONTENT_TYPES.Directory]: ["download", "move", "delete"],
+    [CONTENT_TYPES.File]: ["download", "delete", "move"]
   }), [])
 
   const itemOperations: IFilesTableBrowserProps["itemOperations"] = useMemo(() => {

packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useGetFile.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/macro"
 import { useCallback, useRef, useState } from "react"
-import { IFileSystemItem, useFiles } from "../../../../Contexts/FilesContext"
+import { FileSystemItem, useFiles } from "../../../../Contexts/FilesContext"
 import axios, { CancelTokenSource } from "axios"
 import { useFileBrowser } from "../../../../Contexts/FileBrowserContext"
 
 interface getFilesParams {
-  file: IFileSystemItem
+  file: FileSystemItem
   filePath: string
   bucketId?: string
 }

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -116,7 +116,7 @@ interface IFileSystemTableItemProps {
   isFolder: boolean
   isOverMove: boolean
   isOverUpload: boolean
-  selected: string[]
+  selectedCids: string[]
   file: FileSystemItem
   editing: string | undefined
   onFolderOrFileClicks: (e?: React.MouseEvent) => void
@@ -134,7 +134,7 @@ const FileSystemGridItem = React.forwardRef(
     isFolder,
     isOverMove,
     isOverUpload,
-    selected,
+    selectedCids,
     file,
     editing,
     onFolderOrFileClicks,
@@ -211,7 +211,7 @@ const FileSystemGridItem = React.forwardRef(
               classes.fileIcon,
               isFolder && classes.folderIcon,
               classes.gridIcon,
-              (isOverMove || isOverUpload || selected.includes(cid)) && "highlighted"
+              (isOverMove || isOverUpload || selectedCids.includes(cid)) && "highlighted"
             )}
           >
             {icon}

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -29,7 +29,7 @@ import { BrowserView, FileOperation } from "../../types"
 import { CSFTheme } from "../../../../../Themes/types"
 import FileItemTableItem from "./FileSystemTableItem"
 import FileItemGridItem from "./FileSystemGridItem"
-import { FileSystemItem as FileSystemItemType } from "../../../../../Contexts/FilesContext"
+import { FileSystemItem as FileSystemItemType, useFiles } from "../../../../../Contexts/FilesContext"
 import { useFileBrowser } from "../../../../../Contexts/FileBrowserContext"
 import { getPathWithFile } from "../../../../../Utils/pathUtils"
 import { BucketUser } from "@chainsafe/files-api-client"
@@ -104,10 +104,10 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
 interface IFileSystemItemProps {
   file: FileSystemItemType
   files: FileSystemItemType[]
-  selected: string[]
+  selectedCids: string[]
   owners?: BucketUser[]
-  handleSelectCid(selectedCid: string): void
-  handleAddToSelectedCids(selectedCid: string): void
+  handleSelectItem(selectedItem: FileSystemItemType): void
+  handleAddToSelectedItems(selectedItems: FileSystemItemType): void
   editing: string | undefined
   setEditing(editing: string | undefined): void
   handleRename?: (cid: string, newName: string) => Promise<void>
@@ -128,7 +128,7 @@ interface IFileSystemItemProps {
 const FileSystemItem = ({
   file,
   files,
-  selected,
+  selectedCids,
   owners,
   editing,
   setEditing,
@@ -137,8 +137,8 @@ const FileSystemItem = ({
   recoverFile,
   viewFolder,
   moveFile,
-  handleSelectCid,
-  handleAddToSelectedCids,
+  handleSelectItem,
+  handleAddToSelectedItems,
   itemOperations,
   browserView,
   resetSelectedFiles,
@@ -147,7 +147,8 @@ const FileSystemItem = ({
   share,
   showPreview
 }: IFileSystemItemProps) => {
-  const { downloadFile, currentPath, handleUploadOnDrop, moveItems } = useFileBrowser()
+  const { bucket, downloadFile, currentPath, handleUploadOnDrop, moveItems } = useFileBrowser()
+  const { downloadMultipleFiles } = useFiles()
   const { cid, name, isFolder, content_type } = file
 
   const formik = useFormik({
@@ -210,11 +211,17 @@ const FileSystemItem = ({
         <>
           <DownloadSvg className={classes.menuIcon} />
           <span data-cy="menu-download">
-            <Trans>Download</Trans>
+            {file.isFolder ? <Trans>Download as zip</Trans> : <Trans>Download</Trans>}
           </span>
         </>
       ),
-      onClick: () => downloadFile && downloadFile(cid)
+      onClick: () => {
+        if (file.isFolder) {
+          bucket && downloadMultipleFiles([file], currentPath, bucket.id)
+        } else {
+          downloadFile && downloadFile(cid)
+        }
+      }
     },
     move: {
       contents: (
@@ -295,21 +302,24 @@ const FileSystemItem = ({
     }
   }),
   [
-    cid,
     classes.menuIcon,
+    file,
+    setEditing,
+    cid,
     deleteFile,
+    bucket,
+    downloadMultipleFiles,
+    currentPath,
     downloadFile,
-    file,
+    moveFile,
+    share,
     filePath,
     files,
-    moveFile,
-    recoverFile,
-    reportFile,
-    setEditing,
     showFileInfo,
+    recoverFile,
+    onFilePreview,
     viewFolder,
-    share,
-    onFilePreview
+    reportFile
   ])
 
   const menuItems: IMenuItem[] = itemOperations.map(
@@ -319,13 +329,13 @@ const FileSystemItem = ({
   const [, dragMoveRef, preview] = useDrag(() =>
     ({ type: DragTypes.MOVABLE_FILE,
       item: () => {
-        if (selected.includes(file.cid)) {
-          return { ids: selected }
+        if (selectedCids.includes(file.cid)) {
+          return { ids: selectedCids }
         } else {
-          return { ids: [...selected, file.cid] }
+          return { ids: [...selectedCids, file.cid] }
         }
       }
-    }), [selected])
+    }), [selectedCids])
 
   useEffect(() => {
     // This gets called after every render, by default
@@ -377,9 +387,9 @@ const FileSystemItem = ({
       if (desktop) {
         // on desktop 
         if (e && (e.ctrlKey || e.metaKey)) {
-          handleAddToSelectedCids(cid)
+          handleAddToSelectedItems(file)
         } else {
-          handleSelectCid(cid)
+          handleSelectItem(file)
         }
       } else {
         // on mobile
@@ -390,7 +400,7 @@ const FileSystemItem = ({
         }
       }
     },
-    [cid, handleSelectCid, handleAddToSelectedCids, desktop, isFolder, viewFolder, file, onFilePreview]
+    [desktop, handleAddToSelectedItems, file, handleSelectItem, isFolder, viewFolder, onFilePreview]
   )
 
   const onDoubleClick = useCallback(
@@ -423,7 +433,7 @@ const FileSystemItem = ({
     currentPath,
     editing,
     file,
-    handleAddToSelectedCids,
+    handleAddToSelectedItems,
     handleRename,
     icon: <Icon />,
     isFolder,
@@ -432,7 +442,7 @@ const FileSystemItem = ({
     menuItems,
     onFolderOrFileClicks,
     preview,
-    selected,
+    selectedCids,
     setEditing,
     resetSelectedFiles
   }

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -103,10 +103,10 @@ interface IFileSystemTableItemProps {
   isFolder: boolean
   isOverMove: boolean
   isOverUpload: boolean
-  selected: string[]
+  selectedCids: string[]
   file: FileSystemItem
   editing: string | undefined
-  handleAddToSelectedCids: (selected: string) => void
+  handleAddToSelectedItems: (selected: FileSystemItem) => void
   onFolderOrFileClicks: (e?: React.MouseEvent) => void
   icon: React.ReactNode
   preview: ConnectDragPreview
@@ -121,10 +121,10 @@ const FileSystemTableItem = React.forwardRef(
     isFolder,
     isOverMove,
     isOverUpload,
-    selected,
+    selectedCids,
     file,
     editing,
-    handleAddToSelectedCids,
+    handleAddToSelectedItems,
     onFolderOrFileClicks,
     icon,
     preview,
@@ -162,13 +162,13 @@ const FileSystemTableItem = React.forwardRef(
         })}
         type="grid"
         ref={forwardedRef}
-        selected={selected.includes(cid)}
+        selected={selectedCids.includes(cid)}
       >
         {desktop && (
           <TableCell>
             <CheckboxInput
-              value={selected.includes(cid)}
-              onChange={() => handleAddToSelectedCids(cid)}
+              value={selectedCids.includes(cid)}
+              onChange={() => handleAddToSelectedItems(file)}
             />
           </TableCell>
         )}