Replace File integration

.storybook/preview.tsx

@@ -4,6 +4,8 @@ import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
 import 'react-loading-skeleton/dist/skeleton.css'
+import '../src/assets/swal-custom.scss'
+import '../src/assets/react-toastify-custom.scss'
 
 const preview: Preview = {
   parameters: {

package.json

@@ -17,7 +17,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.29",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.31",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -50,6 +50,9 @@
     "react-toastify": "11.0.2",
     "react-topbar-progress-indicator": "4.1.1",
     "sass": "1.58.1",
+    "sweetalert2": "11.17.2",
+    "sweetalert2-react-content": "5.1.0",
+    "turndown": "7.2.0",
     "typescript": "5.7.2",
     "use-deep-compare": "1.2.1",
     "vite-plugin-istanbul": "4.0.1",

packages/design-system/src/lib/components/form/form-group/form-element/FormTextArea.tsx

@@ -9,16 +9,17 @@ export interface FormTextAreaProps extends Omit<React.HTMLAttributes<FormInputEl
   isInvalid?: boolean
   value?: string
   autoFocus?: boolean
+  rows?: number
 }
 
 export const FormTextArea = React.forwardRef(function FormTextArea(
-  { name, disabled, isValid, isInvalid, value, autoFocus, ...props }: FormTextAreaProps,
+  { name, disabled, isValid, isInvalid, value, autoFocus, rows = 5, ...props }: FormTextAreaProps,
   ref
 ) {
   return (
     <FormBS.Control
       as="textarea"
-      rows={5}
+      rows={rows}
       disabled={disabled}
       name={name}
       isValid={isValid}

public/locales/en/file.json

@@ -67,6 +67,12 @@
   },
   "fileDeletedSuccess": "The file has been deleted.",
   "defaultFileDeleteError": "Something went wrong deleting the file. Try again later.",
+  "alerts": {
+    "draftVersion": {
+      "heading": "This draft version needs to be published",
+      "alertText": "When ready for sharing, please <a>go to the dataset page</a> to publish it so that others can see these changes."
+    }
+  },
   "restriction": {
     "fileRestrictdSuccess": "The file has been restricted.",
     "fileUnrestrictedSuccess": "The file has been unrestricted.",

public/locales/en/files.json

@@ -1,4 +1,5 @@
 {
+  "files": "Files",
   "filesLoading": "Files loading spinner symbol",
   "errorUnkownGetFilesFromDataset": "There was an error getting the files total download size",
   "errorUnkownGetFilesCountInfo": "There was an error getting the files count info",

public/locales/en/replaceFile.json

@@ -0,0 +1,5 @@
+{
+  "pageTitle": "Replace File",
+  "notAllowedToReplaceFile": "You do not have permissions to replace this file.",
+  "originalFile": "Original File"
+}

public/locales/en/shared.json

@@ -158,6 +158,72 @@
     },
     "createCollection": "Create Collection"
   },
+  "fileUploader": {
+    "supportedFiles": "All file types are supported for upload and download in their original format. If you are uploading Excel, CSV, TSV, RData, Stata, or SPSS files, <anchor>see the guides</anchor> for tabular support and limitations.",
+    "accordionTitle": "Upload with HTTP via your browser",
+    "selectFileSingle": "Select file to add",
+    "selectFileMultiple": "Select files to add",
+    "dragDropSingle": "Drag and drop file here.",
+    "dragDropMultiple": "Drag and drop files and/or directories here.",
+    "cancelUpload": "Cancel upload",
+    "uploadFailed": "There was an error uploading this file.",
+    "loadingConfiguration": "Loading configuration",
+    "replaceFileMultipleError": "You can only drop one file to replace.",
+    "replaceFileAlreadyOneFileError": "You already have a file to replace. Please remove it first.",
+    "fileReplacedSuccessfully": "The file has been replaced successfully.",
+    "defaultFileReplaceError": "Something went wrong replacing the file. Try again later.",
+    "defaultAddUploadedFilesToDatasetError": "Something went wrong adding the uploaded files to the dataset. Try again later.",
+    "filesAddedToDatasetSuccessfully": "Files added to dataset successfully.",
+    "fileUploadSkipped": {
+      "dsStore": "File upload skipped: .DS_Store files are not allowed.",
+      "alreadyUploaded": "File {{fileName}} was skipped because it has already been uploaded."
+    },
+    "fileTypeDifferentModal": {
+      "title": "File Type Different",
+      "message": "The original file ({{originalFileType}}) and replacement file ({{replacementFileType}}) are different file types. Would you like to continue?"
+    },
+    "confirmLeaveModal": {
+      "title": "Discard Uploaded Files?",
+      "message": "Uploaded files haven’t been saved. If you leave now, they’ll be lost.",
+      "stay": "Stay on this page",
+      "leave": "Leave without saving"
+    },
+    "uploadedFilesList": {
+      "fields": {
+        "fileName": {
+          "label": "File Name",
+          "required": "File Name is required",
+          "invalid": {
+            "maxLength": "File Name must be at most {{maxLength}} characters.",
+            "characters": "The file name contains invalid characters. The following characters are not allowed: : < > ; # / \" * | ? \\",
+            "duplicateCombination": "File Name, File Path or combination of File path + File name should be unique. There is already a combination with the same value."
+          }
+        },
+        "filePath": {
+          "label": "File Path",
+          "description": "Hierarchical directory structure path used to display file organization and support reproducibility.",
+          "invalid": {
+            "maxLength": "File Path must be at most {{maxLength}} characters.",
+            "characters": "The file path contains invalid characters. Only letters, numbers, spaces, dashes, periods, backslashes, and forward slashes are allowed.",
+            "duplicateCombination": "File Name, File Path or combination of File path + File name should be unique. There is already a combination with the same value."
+          }
+        },
+        "description": {
+          "label": "Description",
+          "invalid": {
+            "maxLength": "Description must be at most {{maxLength}} characters."
+          }
+        }
+      },
+      "removeFile": "Remove File",
+      "editSelectedFiles": "Edit Selected Files",
+      "removeSelectedFiles": "Remove Selected Files",
+      "uploadedFile": "File uploaded",
+      "uploadedFiles": "Files uploaded",
+      "selectAllFiles": "Select all files",
+      "deselectAllFiles": "Deselect all files"
+    }
+  },
   "contact": {
     "message": "Message",
     "subject": "Subject",

src/App.tsx

@@ -7,6 +7,7 @@ import { BASE_URL } from './config'
 import { ToastContainer } from 'react-toastify'
 import 'react-loading-skeleton/dist/skeleton.css'
 import './assets/react-toastify-custom.scss'
+import './assets/swal-custom.scss'
 
 if (BASE_URL === '') {
   throw Error('VITE_DATAVERSE_BACKEND_URL environment variable should be specified.')

src/assets/swal-custom.scss

@@ -0,0 +1,52 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module';
+
+/*
+  Here are declared the classes that will overwrite certain SweetAlert2 modal styles.
+  The classes declared here are defined in the SwalModal component that takes the Swal component from the library and adds some defaults to it.
+  So we have a SweetAlert2 component with the styles that we want in the whole app.
+*/
+
+.swal-popup-custom {
+  width: clamp(300px, 80%, 700px);
+  padding-bottom: 0;
+}
+
+.swal-title-custom {
+  padding: 1rem;
+  color: $dv-text-color;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-align: left;
+  border-bottom: solid 1px $dv-border-color;
+}
+
+.swal-html-container-custom {
+  padding: 1rem;
+  color: $dv-text-color;
+  font-size: $dv-font-size;
+  text-align: left;
+}
+
+.swal-actions-custom {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin: 0;
+  padding: 12px;
+  border-top: solid 1px $dv-border-color;
+}
+
+.swal-button-custom {
+  &.confirm {
+    order: 3;
+  }
+
+  &.cancel {
+    order: 2;
+  }
+
+  &.deny {
+    order: 1;
+  }
+}

src/files/domain/models/FileUploadState.ts

@@ -1,6 +1,7 @@
 import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
 import { FileSize, FileSizeUnit } from './FileMetadata'
 import { UploadedFileDTOMapper } from '../../infrastructure/mappers/UploadedFileDTOMapper'
+import { FixityAlgorithm } from './FixityAlgorithm'
 
 export interface FileUploadState {
   progress: number
@@ -152,6 +153,7 @@ export class FileUploadTools {
         uploadedFile.restricted,
         uploadedFile.storageId as string,
         uploadedFile.checksumValue as string,
+        FixityAlgorithm.MD5,
         uploadedFile.fileType === '' ? 'application/octet-stream' : uploadedFile.fileType // some browsers (e.g., chromium for .java files) fail to detect the mime type for some files and leave the fileType as an empty string, we use the default value 'application/octet-stream' in that case
       )
     )

src/files/domain/models/FixityAlgorithm.ts

@@ -0,0 +1,6 @@
+export enum FixityAlgorithm {
+  MD5 = 'MD5',
+  SHA1 = 'SHA-1',
+  SHA256 = 'SHA-256',
+  SHA512 = 'SHA-512'
+}

src/files/domain/repositories/FileRepository.ts

@@ -8,6 +8,7 @@ import { FilePreview } from '../models/FilePreview'
 import { FilesWithCount } from '../models/FilesWithCount'
 import { FileHolder } from '../models/FileHolder'
 import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
+import { FixityAlgorithm } from '../models/FixityAlgorithm'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (
@@ -44,5 +45,7 @@ export interface FileRepository {
   ) => Promise<void>
   addUploadedFiles: (datasetId: number | string, files: UploadedFileDTO[]) => Promise<void>
   delete: (fileId: number | string) => Promise<void>
+  replace: (fileId: number | string, uploadedFileDTO: UploadedFileDTO) => Promise<number>
+  getFixityAlgorithm: () => Promise<FixityAlgorithm>
   restrict: (fileId: number | string, restrict: boolean) => Promise<void>
 }

src/files/domain/useCases/addUploadedFiles.ts

@@ -4,13 +4,7 @@ import { FileRepository } from '../repositories/FileRepository'
 export function addUploadedFiles(
   fileRepository: FileRepository,
   datasetId: number | string,
-  files: UploadedFileDTO[],
-  done: () => void
-): void {
-  fileRepository
-    .addUploadedFiles(datasetId, files)
-    .then(done)
-    .catch((error: Error) => {
-      throw new Error(error.message)
-    })
+  files: UploadedFileDTO[]
+): Promise<void> {
+  return fileRepository.addUploadedFiles(datasetId, files)
 }

src/files/domain/useCases/getFixityAlgorithm.ts

@@ -0,0 +1,8 @@
+import { FileRepository } from '../repositories/FileRepository'
+import { FixityAlgorithm } from '../models/FixityAlgorithm'
+
+export async function getFixityAlgorithm(repository: FileRepository): Promise<FixityAlgorithm> {
+  return repository.getFixityAlgorithm().catch((error: Error) => {
+    throw error
+  })
+}

src/files/domain/useCases/replaceFile.ts

@@ -0,0 +1,10 @@
+import { UploadedFileDTO } from '@iqss/dataverse-client-javascript'
+import { FileRepository } from '../repositories/FileRepository'
+
+export function replaceFile(
+  fileRepository: FileRepository,
+  fileId: number | string,
+  newFile: UploadedFileDTO
+): Promise<number> {
+  return fileRepository.replace(fileId, newFile)
+}

src/files/domain/useCases/uploadFile.ts

@@ -10,9 +10,11 @@ export function uploadFile(
   storageIdSetter: (storageId: string) => void
 ): () => void {
   const controller = new AbortController()
+
   fileRepository
     .uploadFile(datasetId, { file: file }, progress, controller, storageIdSetter)
     .then(done)
     .catch(failed)
+
   return () => controller.abort()
 }