Client: Upload files: styling password error + remove display duplicated toasts

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

@@ -117,6 +117,7 @@
   "OpenLocation": "Open location",
   "PasswordAccess": "Password access",
   "PasswordLink": "Add a password to protect your link.",
+  "PasswordProtectedFiles": "Please <0>enter a password</0> for the protected files to continue",
   "PasswordSuccessfullyCopied": "Password successfully copied",
   "Pin": "Pin",
   "PinToTop": "Pin to top",

packages/client/src/store/UploadDataStore.js

@@ -25,9 +25,11 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { makeAutoObservable, runInAction } from "mobx";
+import { Trans } from "react-i18next";
 import { TIMEOUT } from "@docspace/client/src/helpers/filesConstants";
 import uniqueid from "lodash/uniqueId";
 import sumBy from "lodash/sumBy";
+import uniqBy from "lodash/uniqBy";
 import { ConflictResolveType } from "@docspace/shared/enums";
 import {
   getFileInfo,
@@ -57,6 +59,8 @@ import {
   getCategoryTypeByFolderType,
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
+import { Link } from "@docspace/shared/components/link";
+import { globalColors } from "@docspace/shared/themes";
 
 class UploadDataStore {
   settingsStore;
@@ -636,7 +640,7 @@ class UploadDataStore {
 
     if (this.uploaded || (this.isParallel && allFilesIsUploaded)) {
       this.setConversionPercent(100);
-      this.finishUploadFiles();
+      this.finishUploadFiles(t);
     } else {
       runInAction(() => {
         this.converted = true;
@@ -1264,7 +1268,7 @@ class UploadDataStore {
     let files = this.files;
 
     if (files.length === 0 || this.filesSize === 0) {
-      return this.finishUploadFiles();
+      return this.finishUploadFiles(t);
     }
 
     const progressData = {
@@ -1311,7 +1315,7 @@ class UploadDataStore {
       }
 
       if (!this.filesToConversion.length) {
-        this.finishUploadFiles();
+        this.finishUploadFiles(t);
       } else {
         runInAction(() => {
           this.uploaded = true;
@@ -1513,7 +1517,7 @@ class UploadDataStore {
 
         if (allFilesIsUploaded) {
           if (!this.filesToConversion.length) {
-            this.finishUploadFiles();
+            this.finishUploadFiles(t);
           } else {
             runInAction(() => {
               this.uploaded = true;
@@ -1543,7 +1547,7 @@ class UploadDataStore {
       });
   };
 
-  finishUploadFiles = () => {
+  finishUploadFiles = (t) => {
     const { fetchFiles, filter } = this.filesStore;
     const { withPaging } = this.settingsStore;
 
@@ -1555,7 +1559,7 @@ class UploadDataStore {
       this.asyncUploadObj = {};
 
       for (let item of this.tempFiles) {
-        const { uploadFiles, folderId, t } = item;
+        const { uploadFiles, folderId } = item;
         this.startUpload(uploadFiles, folderId, t);
       }
       this.tempFiles = [];
@@ -1563,12 +1567,36 @@ class UploadDataStore {
       return;
     }
 
-    const totalErrorsCount = sumBy(this.files, (f) => {
-      f.error && toastr.error(f.error);
-      return f.error ? 1 : 0;
-    });
+    const filesWithErrors = this.files.filter((f) => f.error);
+
+    const totalErrorsCount = filesWithErrors.length;
 
     if (totalErrorsCount > 0) {
+      const uniqErrors = uniqBy(filesWithErrors, "error");
+      uniqErrors.forEach((f) =>
+        f.error.indexOf("password") > -1
+          ? toastr.warning(
+              <Trans
+                i18nKey="Files:PasswordProtectedFiles"
+                t={t}
+                components={[
+                  <Link
+                    isHovered
+                    color={globalColors.link}
+                    onClick={() => {
+                      toastr.clear();
+                      this.setUploadPanelVisible(true);
+                    }}
+                  />,
+                ]}
+              />,
+              null,
+              60000,
+              true,
+            )
+          : toastr.error(f.error),
+      );
+
       this.primaryProgressDataStore.setPrimaryProgressBarShowError(true); // for empty file
       this.primaryProgressDataStore.setPrimaryProgressBarErrors(
         totalErrorsCount,