Toasts update for uploads and downloads [storage] (#2149)

* toasts refactor

* locale

* refactor ok

* lingui extract

* removed plural cast

* removed plural cast

* delete uploadStatusToast and add uploadCompleteToast

* undo delete awaitBucketRefresh

* delete awaitBucketRefresh

* move awaitBucketRefresh after upload file click and before toast appears

Co-authored-by: GitHub Actions <actions@github.com>
Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Co-authored-by: Juan Manuel Spoleti <juan@chainsafe.io>
Co-authored-by: Juan Manuel Spoleti <104365141+juans-chainsafe@users.noreply.github.com>

packages/files-ui/src/Contexts/FilesContext.tsx

@@ -366,7 +366,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       title: plural(files.length, {
         one: `Encrypting and uploading ${files.length} file`,
         other: `Encrypting and uploading ${files.length} files`
-      }) as string,
+      }),
       type: "success",
       progress: 0,
       onProgressCancel: cancelSource.cancel,
@@ -401,9 +401,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
         uploadedSize += batchSize
       }
 
-
       setUploadsInProgress(false)
-
       await refreshBuckets()
       // setting complete
       updateToast(toastId, {

packages/storage-ui/cypress/support/page-objects/toasts/uploadCompleteToast.ts

@@ -0,0 +1,4 @@
+export const uploadCompleteToast = {
+  body: () => cy.get("[data-testid=toast-upload-complete]", { timeout: 10000 }),
+  closeButton: () => cy.get("[data-testid=button-close-toast-upload-complete]")
+}

packages/storage-ui/cypress/tests/bucket-management-spec.ts

@@ -4,7 +4,7 @@ import { chainSafeBucketName, ipfsBucketName } from "../fixtures/storageTestData
 import { createBucketModal } from "../support/page-objects/modals/createBucketModal"
 import { navigationMenu } from "../support/page-objects/navigationMenu"
 import { fileUploadModal } from "../support/page-objects/modals/fileUploadModal"
-import { uploadStatusToast } from "../support/page-objects/toasts/uploadStatusToast"
+import { uploadCompleteToast } from "../support/page-objects/toasts/uploadCompleteToast"
 
 describe("Bucket management", () => {
 
@@ -41,8 +41,9 @@ describe("Bucket management", () => {
       fileUploadModal.fileList().should("have.length", 1)
       fileUploadModal.uploadButton().safeClick()
       fileUploadModal.body().should("not.exist")
-      uploadStatusToast.body().should("be.visible")
       bucketContentsPage.awaitBucketRefresh()
+      uploadCompleteToast.body().should("be.visible")
+      uploadCompleteToast.closeButton().click()
       bucketContentsPage.fileItemRow().should("have.length", 1)
 
       // delete chainsafe bucket
@@ -81,8 +82,9 @@ describe("Bucket management", () => {
       fileUploadModal.fileList().should("have.length", 1)
       fileUploadModal.uploadButton().safeClick()
       fileUploadModal.body().should("not.exist")
-      uploadStatusToast.body().should("be.visible")
       bucketContentsPage.awaitBucketRefresh()
+      uploadCompleteToast.body().should("be.visible")
+      uploadCompleteToast.closeButton().click()
       bucketContentsPage.fileItemRow().should("have.length", 1)
 
       // delete ipfs bucket

packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx

@@ -6,13 +6,11 @@ import {
   SortDirection,
   Table,
   TableBody,
-  TableCell,
   TableHead,
   TableHeadCell,
   TableRow,
   Typography,
   Breadcrumb,
-  CircularProgressBar,
   Button,
   PlusCircleIcon,
   UploadIcon,
@@ -34,8 +32,6 @@ import { useDrop } from "react-dnd"
 import { BrowserView, FileOperation, MoveModalMode } from "../../../Contexts/types"
 import { FileSystemItem as FileSystemItemType } from "../../../Contexts/StorageContext"
 import FileSystemItem from "../FileSystemItem/FileSystemItem"
-import UploadProgressModals from "../UploadProgressModals"
-import DownloadProgressModals from "../DownloadProgressModals"
 import CreateFolderModal from "../CreateFolderModal/CreateFolderModal"
 import UploadFileModal from "../UploadFileModal/UploadFileModal"
 import MoveFileModal from "../MoveFileModal/MoveFileModal"
@@ -345,8 +341,6 @@ const FilesList = () => {
     currentPath,
     refreshContents,
     loadingCurrentPath,
-    uploadsInProgress,
-    showUploadsInTable,
     allowDropUpload,
     itemOperations,
     moduleRootPath,
@@ -1091,36 +1085,6 @@ const FilesList = () => {
             </TableHead>
           )}
           <TableBody>
-            {!desktop &&
-              showUploadsInTable &&
-              uploadsInProgress
-                ?.filter(
-                  (uploadInProgress) =>
-                    uploadInProgress.path === currentPath &&
-                    !uploadInProgress.complete &&
-                    !uploadInProgress.error
-                )
-                .map((uploadInProgress) => (
-                  <TableRow
-                    key={uploadInProgress.id}
-                    className={classes.tableRow}
-                    type="grid"
-                  >
-                    <TableCell className={classes.progressIcon}>
-                      <CircularProgressBar
-                        progress={uploadInProgress.progress}
-                        size="small"
-                        width={15}
-                      />
-                    </TableCell>
-                    <TableCell align="left">
-                      {uploadInProgress.noOfFiles > 1
-                        ? t`Uploading ${uploadInProgress.noOfFiles} files`
-                        : uploadInProgress.fileName}
-                    </TableCell>
-                    <TableCell />
-                  </TableRow>
-                ))}
             {items.map((file, index) => (
               <FileSystemItem
                 key={index}
@@ -1206,8 +1170,6 @@ const FilesList = () => {
           e.stopPropagation()
         }}
       />
-      <UploadProgressModals />
-      <DownloadProgressModals />
       {
         refreshContents && (
           <>