Storage Quota/Upload Limit Integration

package.json

@@ -18,7 +18,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.85",
+    "@iqss/dataverse-client-javascript": "v2.1.0-pr421.6d795bb",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

public/locales/en/shared.json

@@ -220,6 +220,9 @@
     "selectFileMultiple": "Select files to add",
     "dragDropSingle": "Drag and drop file here.",
     "dragDropMultiple": "Drag and drop files and/or directories here.",
+    "uploadWidgetHelp": "Select files or drag and drop into the upload widget. Maximum of {{maxFilesPerUpload}} files per upload.",
+    "uploadWidgetMaxFilesHelp": "Maximum of {{maxFilesAvailableToUpload}} files available to upload.",
+    "uploadWidgetStorageQuotaHelp": "Storage quota: {{storageQuotaRemaining}} remaining.",
     "cancelUpload": "Cancel upload",
     "uploadFailed": "There was an error uploading this file.",
     "loadingConfiguration": "Loading configuration",

public/locales/es/shared.json

@@ -220,6 +220,9 @@
     "selectFileMultiple": "Seleccionar ficheros para agregar",
     "dragDropSingle": "Arrastra y suelta el fichero aquí.",
     "dragDropMultiple": "Arrastra y suelta ficheros y/o directorios aquí.",
+    "uploadWidgetHelp": "Selecciona ficheros o arrástralos y suéltalos en el widget de carga. Máximo de {{maxFilesPerUpload}} ficheros por carga.",
+    "uploadWidgetMaxFilesHelp": "Máximo de {{maxFilesAvailableToUpload}} ficheros disponibles para cargar.",
+    "uploadWidgetStorageQuotaHelp": "Cuota de almacenamiento: {{storageQuotaRemaining}} restantes.",
     "cancelUpload": "Cancelar carga",
     "uploadFailed": "Ocurrió un error al cargar este fichero.",
     "loadingConfiguration": "Cargando configuración",

src/dataset/domain/models/DatasetUploadLimits.ts

@@ -0,0 +1,4 @@
+export interface DatasetUploadLimits {
+  numberOfFilesRemaining?: number
+  storageQuotaRemaining?: number
+}

src/dataset/domain/repositories/DatasetRepository.ts

@@ -11,6 +11,7 @@ import { FormattedCitation, CitationFormat } from '../models/DatasetCitation'
 import { DatasetLicenseUpdateRequest } from '../models/DatasetLicenseUpdateRequest'
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
 import { DatasetVersionPaginationInfo } from '../models/DatasetVersionPaginationInfo'
+import { DatasetUploadLimits } from '../models/DatasetUploadLimits'
 
 export interface DatasetRepository {
   getByPersistentId: (
@@ -68,4 +69,5 @@ export interface DatasetRepository {
   link(datasetId: string | number, collectionIdOrAlias: string | number): Promise<void>
   unlink(datasetId: string | number, collectionIdOrAlias: string | number): Promise<void>
   getDatasetLinkedCollections: (datasetId: string | number) => Promise<CollectionSummary[]>
+  getDatasetUploadLimits: (datasetId: string | number) => Promise<DatasetUploadLimits>
 }

src/dataset/domain/useCases/getDatasetUploadLimits.ts

@@ -0,0 +1,9 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetUploadLimits } from '../models/DatasetUploadLimits'
+
+export async function getDatasetUploadLimits(
+  datasetId: string | number,
+  datasetRepository: DatasetRepository
+): Promise<DatasetUploadLimits> {
+  return datasetRepository.getDatasetUploadLimits(datasetId)
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -43,7 +43,8 @@ import {
   unlinkDataset,
   getDatasetLinkedCollections,
   updateTermsOfAccess,
-  updateDatasetLicense
+  updateDatasetLicense,
+  getDatasetUploadLimits
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
 import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
@@ -62,6 +63,7 @@ import { requireAppConfig } from '../../../config'
 import { AxiosResponse } from 'axios'
 import { JSDataverseReadErrorHandler } from '@/shared/helpers/JSDataverseReadErrorHandler'
 import { CollectionSummary } from '@/collection/domain/models/CollectionSummary'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 const includeDeaccessioned = true
 
@@ -468,4 +470,8 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
   updateTermsOfAccess(datasetId: string | number, termsOfAccess: TermsOfAccess): Promise<void> {
     return updateTermsOfAccess.execute(datasetId, termsOfAccess)
   }
+
+  getDatasetUploadLimits(datasetId: string | number): Promise<DatasetUploadLimits> {
+    return getDatasetUploadLimits.execute(datasetId)
+  }
 }

src/sections/replace-file/ReplaceFile.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { useFile } from '../file/useFile'
 import { useLoading } from '../../shared/contexts/loading/LoadingContext'
@@ -13,6 +14,7 @@ import styles from './ReplaceFile.module.scss'
 
 interface ReplaceFileProps {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   fileIdFromParams: number
   datasetPidFromParams: string
   datasetVersionFromParams: string
@@ -27,6 +29,7 @@ export enum ReplaceFileReferrer {
 
 export const ReplaceFile = ({
   fileRepository,
+  datasetRepository,
   fileIdFromParams,
   datasetPidFromParams,
   datasetVersionFromParams,
@@ -78,6 +81,7 @@ export const ReplaceFile = ({
           <div className={styles.tab_container}>
             <FileUploader
               fileRepository={fileRepository}
+              datasetRepository={datasetRepository}
               datasetPersistentId={datasetPidFromParams}
               storageType="S3"
               operationType={OperationType.REPLACE_FILE}

src/sections/replace-file/ReplaceFileFactory.tsx

@@ -1,11 +1,13 @@
 import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { FileJSDataverseRepository } from '@/files/infrastructure/FileJSDataverseRepository'
+import { DatasetJSDataverseRepository } from '@/dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { ReplaceFile, ReplaceFileReferrer } from './ReplaceFile'
 import { QueryParamKey } from '../Route.enum'
 import { searchParamVersionToDomainVersion } from '@/router'
 
 const fileRepository = new FileJSDataverseRepository()
+const datasetRepository = new DatasetJSDataverseRepository()
 
 export class ReplaceFileFactory {
   static create(): ReactElement {
@@ -37,6 +39,7 @@ function ReplaceFileWithParams() {
   return (
     <ReplaceFile
       fileRepository={fileRepository}
+      datasetRepository={datasetRepository}
       fileIdFromParams={fileId}
       datasetPidFromParams={datasetId}
       datasetVersionFromParams={datasetVersionNumber}

src/sections/shared/file-uploader/FileUploader.tsx

@@ -1,5 +1,7 @@
 import { File as FileModel } from '@/files/domain/models/File'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { FileUploaderProvider } from './context/FileUploaderContext'
 import { useGetFixityAlgorithm } from './useGetFixityAlgorithm'
@@ -10,19 +12,29 @@ import FileUploaderPanel from './FileUploaderPanel'
 type FileUploaderProps =
   | {
       fileRepository: FileRepository
+      datasetRepository: DatasetRepository
       datasetPersistentId: string
       storageType: StorageType
       operationType: OperationType.REPLACE_FILE
       originalFile: FileModel
       referrer?: ReplaceFileReferrer
+      fetchUploadLimits?: (
+        datasetId: string | number,
+        datasetRepository: DatasetRepository
+      ) => Promise<DatasetUploadLimits>
     }
   | {
       fileRepository: FileRepository
+      datasetRepository: DatasetRepository
       datasetPersistentId: string
       storageType: StorageType
       operationType: OperationType.ADD_FILES_TO_DATASET
       originalFile?: never
       referrer?: never
+      fetchUploadLimits?: (
+        datasetId: string | number,
+        datasetRepository: DatasetRepository
+      ) => Promise<DatasetUploadLimits>
     }
 
 export type StorageType = 'S3'
@@ -37,11 +49,13 @@ export enum OperationType {
 
 export const FileUploader = ({
   fileRepository,
+  datasetRepository,
   datasetPersistentId,
   storageType,
   operationType,
   originalFile,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderProps) => {
   const { fixityAlgorithm, isLoadingFixityAlgorithm } = useGetFixityAlgorithm(fileRepository)
 
@@ -67,7 +81,9 @@ export const FileUploader = ({
     <FileUploaderProvider initialConfig={initialConfig}>
       <FileUploaderPanel
         fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
         datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
         referrer={referrer}
       />
     </FileUploaderProvider>

src/sections/shared/file-uploader/FileUploaderPanel.tsx

@@ -7,22 +7,31 @@ import { Stack } from '@iqss/dataverse-design-system'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import { QueryParamKey, Route } from '@/sections/Route.enum'
 import { DatasetNonNumericVersionSearchParam } from '@/dataset/domain/models/Dataset'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { ReplaceFileReferrer } from '@/sections/replace-file/ReplaceFile'
 import { useFileUploaderContext } from './context/FileUploaderContext'
 import FileUploadInput from './file-upload-input/FileUploadInput'
 import { UploadedFilesList } from './uploaded-files-list/UploadedFilesList'
 import { ConfirmLeaveModal } from './confirm-leave-modal/ConfirmLeaveModal'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
 
 interface FileUploaderPanelProps {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   datasetPersistentId: string
   referrer?: ReplaceFileReferrer
+  fetchUploadLimits?: (
+    datasetId: string | number,
+    datasetRepository: DatasetRepository
+  ) => Promise<DatasetUploadLimits>
 }
 
 const FileUploaderPanel = ({
   fileRepository,
+  datasetRepository,
   datasetPersistentId,
-  referrer
+  referrer,
+  fetchUploadLimits
 }: FileUploaderPanelProps) => {
   const { t } = useTranslation('shared')
   const navigate = useNavigate()
@@ -101,7 +110,12 @@ const FileUploaderPanel = ({
 
   return (
     <Stack gap={4}>
-      <FileUploadInput fileRepository={fileRepository} datasetPersistentId={datasetPersistentId} />
+      <FileUploadInput
+        fileRepository={fileRepository}
+        datasetRepository={datasetRepository}
+        datasetPersistentId={datasetPersistentId}
+        fetchUploadLimits={fetchUploadLimits}
+      />
 
       {uploadedFiles.length > 0 && (
         <UploadedFilesList

src/sections/shared/file-uploader/file-upload-input/FileUploadInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, DragEventHandler, memo, useRef, useState } from 'react'
+import { ChangeEventHandler, DragEventHandler, useRef, useState } from 'react'
 import { Accordion, Button, Card, ProgressBar } from '@iqss/dataverse-design-system'
 import { ExclamationTriangle, Plus, XLg } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
@@ -8,22 +8,37 @@ import cn from 'classnames'
 import { FileRepository } from '@/files/domain/repositories/FileRepository'
 import MimeTypeDisplay from '@/files/domain/models/FileTypeToFriendlyTypeMap'
 import { uploadFile } from '@/files/domain/useCases/uploadFile'
+import { DatasetUploadLimits } from '@/dataset/domain/models/DatasetUploadLimits'
+import { DatasetRepository } from '@/dataset/domain/repositories/DatasetRepository'
 import { useFileUploaderContext } from '../context/FileUploaderContext'
 import { FileUploadState, FileUploadStatus } from '../context/fileUploaderReducer'
 import { OperationType } from '../FileUploader'
 import { FileUploaderHelper } from '../FileUploaderHelper'
 import { SwalModal } from '../../swal-modal/SwalModal'
 import styles from './FileUploadInput.module.scss'
+import { useUploadLimit } from './useUploadLimit'
 
 type FileUploadInputProps = {
   fileRepository: FileRepository
+  datasetRepository: DatasetRepository
   datasetPersistentId: string
+  fetchUploadLimits?: (
+    datasetId: string | number,
+    datasetRepository: DatasetRepository
+  ) => Promise<DatasetUploadLimits>
 }
 
 const limit = 6
 const semaphore = new Semaphore(limit)
 
-const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInputProps) => {
+const maxFilesPerUpload = 1000
+
+const FileUploadInput = ({
+  fileRepository,
+  datasetRepository,
+  datasetPersistentId,
+  fetchUploadLimits
+}: FileUploadInputProps) => {
   const {
     fileUploaderState,
     addFile,
@@ -44,6 +59,7 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
   const inputRef = useRef<HTMLInputElement>(null)
 
   const [isDragging, setIsDragging] = useState(false)
+  const { uploadLimit } = useUploadLimit(datasetPersistentId, datasetRepository, fetchUploadLimits)
 
   const totalFiles = Object.keys(fileUploaderState.files).length
 
@@ -267,6 +283,27 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
         <Accordion.Item eventKey="0">
           <Accordion.Header>{t('fileUploader.accordionTitle')}</Accordion.Header>
           <Accordion.Body>
+            <p className={styles.helper_text}>
+              {t('fileUploader.uploadWidgetHelp', {
+                maxFilesPerUpload: maxFilesPerUpload.toLocaleString()
+              })}
+              {uploadLimit.maxFilesAvailableToUploadFormatted && (
+                <>
+                  {' '}
+                  {t('fileUploader.uploadWidgetMaxFilesHelp', {
+                    maxFilesAvailableToUpload: uploadLimit.maxFilesAvailableToUploadFormatted
+                  })}
+                </>
+              )}
+              {uploadLimit.storageQuotaRemainingFormatted && (
+                <>
+                  {' '}
+                  {t('fileUploader.uploadWidgetStorageQuotaHelp', {
+                    storageQuotaRemaining: uploadLimit.storageQuotaRemainingFormatted
+                  })}
+                </>
+              )}
+            </p>
             <Card>
               <Card.Header>
                 <Button
@@ -360,4 +397,4 @@ const FileUploadInput = ({ fileRepository, datasetPersistentId }: FileUploadInpu
   )
 }
 
-export default memo(FileUploadInput)
+export default FileUploadInput