Merge pull request #1232 from internxt/feature/PB-2468-measure-web-dr…

…ive-behaviour-on-upload

[PB-2399 ,PB-2468]: feature/Increase files to upload at once to 3000

src/app/drive/components/DriveExplorer/DriveExplorer.tsx

@@ -20,6 +20,8 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import moveItemsToTrash from 'use_cases/trash/move-items-to-trash';
 
 import { Role } from '@internxt/sdk/dist/drive/share/types';
+import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
+import { t } from 'i18next';
 import BannerWrapper from '../../../banners/BannerWrapper';
 import deviceService from '../../../core/services/device.service';
 import errorService from '../../../core/services/error.service';
@@ -69,10 +71,9 @@ import WarningMessageWrapper from '../WarningMessage/WarningMessageWrapper';
 import './DriveExplorer.scss';
 import { DriveTopBarItems } from './DriveTopBarItems';
 import DriveTopBarActions from './components/DriveTopBarActions';
-import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
 
 const TRASH_PAGINATION_OFFSET = 50;
-const UPLOAD_ITEMS_LIMIT = 1000;
+export const UPLOAD_ITEMS_LIMIT = 3000;
 
 interface DriveExplorerProps {
   title: JSX.Element | string;
@@ -372,7 +373,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
   const onUploadFileInputChanged = (e) => {
     const files = e.target.files;
 
-    if (files.length < UPLOAD_ITEMS_LIMIT) {
+    if (files.length <= UPLOAD_ITEMS_LIMIT) {
       const unrepeatedUploadedFiles = handleRepeatedUploadingFiles(Array.from(files), items, dispatch) as File[];
       dispatch(
         storageThunks.uploadItemsThunk({
@@ -387,7 +388,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
     } else {
       dispatch(uiActions.setIsUploadItemsFailsDialogOpen(true));
       notificationsService.show({
-        text: 'The maximum is 1000 files per upload.',
+        text: translate('drive.uploadItems.advice'),
         type: ToastType.Warning,
       });
     }
@@ -951,24 +952,10 @@ declare module 'react' {
   }
 }
 
-const countTotalItemsInIRoot = (rootList: IRoot[]) => {
-  let totalFilesToUpload = 0;
-
-  rootList.forEach((n) => {
-    totalFilesToUpload += n.childrenFiles.length;
-    if (n.childrenFolders.length >= 1) {
-      countTotalItemsInIRoot(n.childrenFolders);
-    }
-  });
-
-  return totalFilesToUpload;
-};
-
 const uploadItems = async (props: DriveExplorerProps, rootList: IRoot[], files: File[]) => {
   const { dispatch, currentFolderId, onDragAndDropEnd, items } = props;
-  const countTotalItemsToUpload: number = files.length + countTotalItemsInIRoot(rootList);
 
-  if (countTotalItemsToUpload < UPLOAD_ITEMS_LIMIT) {
+  if (files.length <= UPLOAD_ITEMS_LIMIT) {
     if (files.length) {
       errorService.addBreadcrumb({
         level: 'info',
@@ -1022,7 +1009,7 @@ const uploadItems = async (props: DriveExplorerProps, rootList: IRoot[], files:
   } else {
     dispatch(uiActions.setIsUploadItemsFailsDialogOpen(true));
     notificationsService.show({
-      text: 'The maximum is 1000 files per upload.',
+      text: t('drive.uploadItems.advice'),
       type: ToastType.Warning,
     });
   }

src/app/drive/components/UploadItemsFailsDialog/UploadItemsFailsDialog.tsx

@@ -1,9 +1,9 @@
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import BaseDialog from 'app/shared/components/BaseDialog/BaseDialog';
-import { uiActions } from 'app/store/slices/ui';
-import { useAppDispatch, useAppSelector } from 'app/store/hooks';
-import { RootState } from 'app/store';
 import Button from 'app/shared/components/Button/Button';
-import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { RootState } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { uiActions } from 'app/store/slices/ui';
 
 const UploadItemsDialog = (): JSX.Element => {
   const { translate } = useTranslationContext();
@@ -22,12 +22,13 @@ const UploadItemsDialog = (): JSX.Element => {
       titleClasses="text-left px-5 text-2xl font-medium"
       onClose={onClose}
       closeClass={'hidden'}
+      bgColor="bg-surface"
     >
       <span className="mt-20px block w-full px-5 text-left text-base text-gray-100">
         {translate('drive.uploadItems.advice')}
       </span>
 
-      <div className="my-20px flex justify-end bg-white">
+      <div className="my-20px flex justify-end bg-surface px-5 py-4">
         <Button variant="secondary" onClick={onClose} className="mr-3">
           {translate('drive.uploadItems.close')}
         </Button>

src/app/i18n/locales/de.json

@@ -1267,7 +1267,7 @@
     },
     "uploadItems": {
       "title": "Maximaler Datei-Upload",
-      "advice": "Das Maximum ist 1000 Dateien pro Upload.",
+      "advice": "Das Maximum ist 3000 Dateien pro Upload.",
       "close": "Schließen"
     },
     "movingToTrash": "Verschiebe Elemente in den Papierkorb",

src/app/i18n/locales/en.json

@@ -1325,7 +1325,7 @@
     },
     "uploadItems": {
       "title": "Maximum file upload",
-      "advice": "The maximum is 1000 files per upload.",
+      "advice": "The maximum is 3000 files per upload.",
       "close": "Close"
     },
     "movingToTrash": "Moving items to trash",

src/app/i18n/locales/es.json

@@ -1301,8 +1301,8 @@
       "progress": "Vaciando papelera..."
     },
     "uploadItems": {
-      "title": "Maximum file upload",
-      "advice": "The maximum is 1000 files per upload.",
+      "title": "Subida máxima de archivos alcanzada",
+      "advice": "El máximo es de 3000 archivos por subida.",
       "close": "Cerrar"
     },
     "movingToTrash": "Moviendo elementos a la papelera",

src/app/i18n/locales/fr.json

@@ -1252,7 +1252,7 @@
     },
     "uploadItems": {
       "title": "Chargement maximum de fichiers",
-      "advice": "Le maximum est de 1000 fichiers par téléchargement",
+      "advice": "Le maximum est de 3000 fichiers par téléchargement",
       "close": "Fermer"
     },
     "movingToTrash": "Déplacement d'éléments vers la corbeille",

src/app/i18n/locales/it.json

@@ -1312,7 +1312,7 @@
     },
     "uploadItems": {
       "title": "Caricamento massimo dei file",
-      "advice": "Il massimo è di 1000 file per upload.",
+      "advice": "Il massimo è di 3000 file per upload.",
       "close": "Chiudi"
     },
     "movingToTrash": "Spostare gli oggetti nella spazzatura",

src/app/i18n/locales/ru.json

@@ -1292,7 +1292,7 @@
     },
     "uploadItems": {
       "title": "Максимальная загрузка файлов",
-      "advice": "Максимум - 1000 файлов за одну загрузку",
+      "advice": "Максимум - 3000 файлов за одну загрузку",
       "close": "Закрыть"
     },
     "movingToTrash": "Перемещение в корзину",

src/app/i18n/locales/tw.json

@@ -1286,7 +1286,7 @@
     },
     "uploadItems": {
       "title": "最大檔案上傳數量",
-      "advice": "最多可一次上傳 1000 個檔案。",
+      "advice": "最多可一次上傳 3000 個檔案。",
       "close": "關閉"
     },
     "movingToTrash": "正在將項目移到垃圾桶",

src/app/i18n/locales/zh.json

@@ -1324,7 +1324,7 @@
     },
     "uploadItems": {
       "title": "最大文件上传",
-      "advice": "每次上传最多 1000 个文件。",
+      "advice": "每次上传最多 3000 个文件。",
       "close": "关闭"
     },
     "movingToTrash": "正在将项目移动到回收站",

src/app/share/views/SharedLinksView/SharedView.tsx

@@ -19,6 +19,7 @@ import { NativeTypes } from 'react-dnd-html5-backend';
 import { Helmet } from 'react-helmet-async';
 import moveItemsToTrash from '../../../../use_cases/trash/move-items-to-trash';
 import errorService from '../../../core/services/error.service';
+import { UPLOAD_ITEMS_LIMIT } from '../../../drive/components/DriveExplorer/DriveExplorer';
 import EditItemNameDialog from '../../../drive/components/EditItemNameDialog/EditItemNameDialog';
 import FileViewerWrapper from '../../../drive/components/FileViewer/FileViewerWrapper';
 import ItemDetailsDialog from '../../../drive/components/ItemDetailsDialog/ItemDetailsDialog';
@@ -365,10 +366,10 @@ function SharedView({
 
     if (!items) return;
 
-    if (items.length >= 1000 || !currentParentFolderId) {
+    if (items.length >= UPLOAD_ITEMS_LIMIT || !currentParentFolderId) {
       dispatch(uiActions.setIsUploadItemsFailsDialogOpen(true));
       notificationsService.show({
-        text: 'The maximum is 1000 files per upload.',
+        text: translate('drive.uploadItems.advice'),
         type: ToastType.Warning,
       });
       return; // Exit the function if the condition fails

src/app/shared/components/BaseDialog/BaseDialog.tsx

@@ -43,7 +43,7 @@ const BaseDialog = ({
       <div
         className={`${panelClasses || ''} absolute left-1/2 top-1/2 flex w-104 -translate-x-1/2
         -translate-y-1/2 flex-col overflow-hidden  ${dialogRounded ? 'rounded-2xl' : 'rounded-lg pt-8'} text-gray-100 ${
-          bgColor || 'bg-white'
+          bgColor || 'bg-surface'
         }`}
       >
         <div className={`${subTitle ? 'justify-between bg-gray-1 p-5' : ''} flex flex-row items-start`}>
@@ -57,7 +57,7 @@ const BaseDialog = ({
           ) : null}
           {hideCloseButton ? null : (
             <div
-              className={`relative ml-auto cursor-pointer
+              className={`relative ml-auto cursor-pointer bg-surface
            transition duration-200 ease-in-out ${closeClass || 'text-primary hover:text-primary-dark'} `}
             >
               <X onClick={onClose} size={28} weight={weightIcon} />