From d1a4186161216ce5d0f36eed2691e3809c22f6b1 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 14 Jun 2024 11:32:37 +0200
Subject: [PATCH 01/96] merged file upload use case

---
 src/files/domain/models/FileUploadState.ts      |  8 ++++++++
 src/files/domain/repositories/FileRepository.ts |  3 ++-
 src/files/domain/useCases/uploadFile.ts         |  5 +++--
 .../infrastructure/FileJSDataverseRepository.ts | 17 ++++++++++-------
 .../upload-dataset-files/UploadDatasetFiles.tsx |  3 ++-
 .../file/FileMockFailedUploadRepository.ts      |  3 ++-
 src/stories/file/FileMockRepository.ts          |  4 +++-
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index c2e9e3ffd..c55c1f057 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -2,6 +2,7 @@ import { FileSize, FileSizeUnit } from './FileMetadata'
 
 export interface FileUploadState {
   progress: number
+  storageId?: string
   progressHidden: boolean
   fileSizeString: string
   failed: boolean
@@ -20,6 +21,7 @@ export class FileUploadTools {
       const key = this.key(file)
       const newValue: FileUploadState = {
         progress: 0,
+        storageId: undefined,
         progressHidden: true,
         fileSizeString: new FileSize(file.size, FileSizeUnit.BYTES).toString(),
         failed: false,
@@ -56,6 +58,12 @@ export class FileUploadTools {
     return newState
   }
 
+  static storageId(file: File, id: string, oldState: FileUploaderState): FileUploaderState {
+    const [newState, newValue] = this.toNewState(file, oldState)
+    newValue.storageId = id
+    return newState
+  }
+
   static failed(file: File, oldState: FileUploaderState): FileUploaderState {
     const [newState, newValue] = this.toNewState(file, oldState)
     newValue.failed = true
diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index 5dfb30399..04556a0ba 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -31,6 +31,7 @@ export interface FileRepository {
     datasetId: number | string,
     file: FileHolder,
     progress: (now: number) => void,
-    abortController: AbortController
+    abortController: AbortController,
+    storageIdSetter: (storageId: string) => void
   ) => Promise<void>
 }
diff --git a/src/files/domain/useCases/uploadFile.ts b/src/files/domain/useCases/uploadFile.ts
index 978c45b95..309a3e8d3 100644
--- a/src/files/domain/useCases/uploadFile.ts
+++ b/src/files/domain/useCases/uploadFile.ts
@@ -6,11 +6,12 @@ export function uploadFile(
   file: File,
   done: () => void,
   failed: () => void,
-  progress: (now: number) => void
+  progress: (now: number) => void,
+  storageIdSetter: (storageId: string) => void
 ): () => void {
   const controller = new AbortController()
   fileRepository
-    .uploadFile(datasetId, { file: file }, progress, controller)
+    .uploadFile(datasetId, { file: file }, progress, controller, storageIdSetter)
     .then(() => done())
     .catch(() => failed())
   return () => controller.abort()
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index a42f904b7..fc529c733 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -14,7 +14,8 @@ import {
   getFileDataTables,
   getFileDownloadCount,
   getFileUserPermissions,
-  ReadError
+  ReadError,
+  uploadFile as jsUploadFile
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
 import { DomainFileMapper } from './mappers/DomainFileMapper'
@@ -239,12 +240,14 @@ export class FileJSDataverseRepository implements FileRepository {
   }
 
   uploadFile(
-    _datasetId: number | string,
-    _file: FileHolder,
-    _progress: (now: number) => void,
-    _abortController: AbortController
+    datasetId: number | string,
+    file: FileHolder,
+    progress: (now: number) => void,
+    abortController: AbortController,
+    storageIdSetter: (storageId: string) => void
   ): Promise<void> {
-    // TODO:
-    return new Promise(() => {})
+    return jsUploadFile
+      .execute(datasetId, file.file, progress, abortController)
+      .then(storageIdSetter)
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 1efc09eb1..aad33e949 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -69,7 +69,8 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
         setState(FileUploadTools.failed(file, fileUploaderState))
         fileUploadFinished(file)
       },
-      (now) => setState(FileUploadTools.progress(file, now, fileUploaderState))
+      (now) => setState(FileUploadTools.progress(file, now, fileUploaderState)),
+      (storageId) => setState(FileUploadTools.storageId(file, storageId, fileUploaderState))
     )
     setUploadingToCancelMap((x) => x.set(key, cancel))
   }
diff --git a/src/stories/file/FileMockFailedUploadRepository.ts b/src/stories/file/FileMockFailedUploadRepository.ts
index 112153558..b8f3edca0 100644
--- a/src/stories/file/FileMockFailedUploadRepository.ts
+++ b/src/stories/file/FileMockFailedUploadRepository.ts
@@ -7,7 +7,8 @@ export class FileMocFailedRepository extends FileMockRepository implements FileR
     _datasetId: number | string,
     _file: FileHolder,
     _progress: (now: number) => void,
-    _abortController: AbortController
+    _abortController: AbortController,
+    _storageIdSetter: (storageId: string) => void
   ): Promise<void> {
     return Promise.reject(new Error('fail'))
   }
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 673df7c58..7f8878dc2 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -71,7 +71,8 @@ export class FileMockRepository implements FileRepository {
     _datasetId: number | string,
     _file: FileHolder,
     progress: (now: number) => void,
-    abortController: AbortController
+    abortController: AbortController,
+    storageIdSetter: (storageId: string) => void
   ): Promise<void> {
     let t: NodeJS.Timeout
     const sleep = (delay: number) => new Promise((res) => (t = setTimeout(res, delay)))
@@ -84,6 +85,7 @@ export class FileMockRepository implements FileRepository {
         progress(now)
         //console.log(FileUploadTools.key(_file.file) + ': ' + String(now))
       }
+      storageIdSetter('some-storage-identifier')
     }
     return res()
   }

From 2693d45faf40ce040076bb62734ef8e791c1fbf4 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 14 Jun 2024 20:28:41 +0200
Subject: [PATCH 02/96] added file list top file uploader

---
 src/files/domain/models/FileUploadState.ts    | 44 +++++++++++++++++--
 .../UploadDatasetFiles.tsx                    | 12 ++++-
 .../upload-dataset-files/UploadedFiles.tsx    | 43 ++++++++++++++++++
 3 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 src/sections/upload-dataset-files/UploadedFiles.tsx

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index c55c1f057..aacc14fbc 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -8,10 +8,15 @@ export interface FileUploadState {
   failed: boolean
   done: boolean
   removed: boolean
+  fileName: string
+  fileDir: string
+  fileType: string
+  key: string
 }
 
 export interface FileUploaderState {
   state: Map<string, FileUploadState>
+  uploaded: FileUploadState[]
 }
 
 export class FileUploadTools {
@@ -26,11 +31,15 @@ export class FileUploadTools {
         fileSizeString: new FileSize(file.size, FileSizeUnit.BYTES).toString(),
         failed: false,
         done: false,
-        removed: false
+        removed: false,
+        fileName: file.name,
+        fileDir: file.webkitRelativePath,
+        fileType: file.type,
+        key: this.key(file)
       }
       newState.set(key, newValue)
     })
-    return { state: newState }
+    return { state: newState, uploaded: this.toUploaded(newState) }
   }
 
   static key(file: File): string {
@@ -48,7 +57,11 @@ export class FileUploadTools {
       fileSizeString: new FileSize(file.size, FileSizeUnit.BYTES).toString(),
       failed: false,
       done: false,
-      removed: false
+      removed: false,
+      fileName: file.name,
+      fileDir: file.webkitRelativePath,
+      fileType: file.type,
+      key: this.key(file)
     }
   }
 
@@ -88,12 +101,35 @@ export class FileUploadTools {
     return newState
   }
 
+  static fileName(file: File, name: string, oldState: FileUploaderState): FileUploaderState {
+    const [newState, newValue] = this.toNewState(file, oldState)
+    newValue.fileName = name
+    return newState
+  }
+
+  static fileDir(file: File, dir: string, oldState: FileUploaderState): FileUploaderState {
+    const [newState, newValue] = this.toNewState(file, oldState)
+    newValue.fileDir = dir
+    return newState
+  }
+
+  static delete(fileUploadState: FileUploadState, oldState: FileUploaderState): FileUploaderState {
+    fileUploadState.removed = true
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
+  }
+
   private static toNewState(
     file: File,
     oldState: FileUploaderState
   ): [FileUploaderState, FileUploadState] {
     const newValue = this.get(file, oldState)
     oldState.state.set(this.key(file), newValue)
-    return [{ state: oldState.state }, newValue]
+    return [{ state: oldState.state, uploaded: this.toUploaded(oldState.state) }, newValue]
+  }
+
+  private static toUploaded(state: Map<string, FileUploadState>): FileUploadState[] {
+    return Array.from(state.values())
+      .filter((x) => x.done)
+      .sort((a, b) => (a.fileDir + a.fileName).localeCompare(b.fileDir + b.fileName))
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index aad33e949..60e83bfe5 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -6,8 +6,9 @@ import { useDataset } from '../dataset/DatasetContext'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { FileUploader } from './FileUploader'
-import { FileUploadTools } from '../../files/domain/models/FileUploadState'
+import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
 import { uploadFile } from '../../files/domain/useCases/uploadFile'
+import { UploadedFiles } from './UploadedFiles'
 
 interface UploadDatasetFilesProps {
   fileRepository: FileRepository
@@ -99,6 +100,10 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     setState(FileUploadTools.removed(file, fileUploaderState))
   }
 
+  const deleteFile = (file: FileUploadState) => {
+    setState(FileUploadTools.delete(file, fileUploaderState))
+  }
+
   useEffect(() => {
     setIsLoading(isLoading)
   }, [isLoading, setIsLoading])
@@ -127,6 +132,11 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
               fileUploaderState={fileUploaderState}
               cancelUpload={cancelUpload}
             />
+            <UploadedFiles
+              fileUploadState={fileUploaderState.uploaded}
+              cancelTitle={t('cancel')}
+              deleteFile={deleteFile}
+            />
           </article>
         </>
       )}
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
new file mode 100644
index 000000000..52c4758cf
--- /dev/null
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -0,0 +1,43 @@
+import { Button } from '@iqss/dataverse-design-system'
+import { X } from 'react-bootstrap-icons'
+import { info } from 'sass'
+import { FileUploadState } from '../../files/domain/models/FileUploadState'
+import styles from './FileUploader.module.scss'
+
+interface DatasetFilesProps {
+  fileUploadState: FileUploadState[]
+  cancelTitle: string
+  deleteFile: (file: FileUploadState) => void
+}
+
+export function UploadedFiles({ fileUploadState, cancelTitle, deleteFile }: DatasetFilesProps) {
+  return (
+    <>
+      {fileUploadState && fileUploadState.filter((x) => x.done).length > 0 ? (
+        <div className={styles.files}>
+          {fileUploadState.map((file) => (
+            <div className={styles.file} key={file.key}>
+              <div className={styles.file_name}>
+                {file.fileDir}
+                {file.fileName}
+              </div>
+              <div className={styles.file_size}>{file.fileSizeString}</div>
+              <div className={styles.upload_progress}>{null}</div>
+              <div className={styles.cancel_upload}>
+                <Button
+                  variant="secondary"
+                  {...{ size: 'sm' }}
+                  withSpacing
+                  onClick={() => deleteFile(file)}>
+                  <X className={styles.icon} title={cancelTitle} />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={styles.info}>{info}</div>
+      )}
+    </>
+  )
+}

From f8dc2d018630d100a6039f40b807090bf05891db Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Sat, 15 Jun 2024 01:02:32 +0200
Subject: [PATCH 03/96] uploaded files list

---
 src/files/domain/models/FileUploadState.ts    | 38 ++++++----
 .../FileUploader.module.scss                  |  4 +
 .../upload-dataset-files/FileUploader.tsx     | 27 ++++---
 .../UploadDatasetFiles.tsx                    | 31 ++++++--
 .../upload-dataset-files/UploadedFiles.tsx    | 73 ++++++++++++-------
 5 files changed, 112 insertions(+), 61 deletions(-)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index aacc14fbc..e4d4e5cbf 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -66,27 +66,35 @@ export class FileUploadTools {
   }
 
   static progress(file: File, now: number, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.progress = now
-    return newState
+    const fileUploadState = oldState.state.get(this.key(file))
+    if (fileUploadState) {
+      fileUploadState.progress = now
+    }
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
   static storageId(file: File, id: string, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.storageId = id
-    return newState
+    const fileUploadState = oldState.state.get(this.key(file))
+    if (fileUploadState) {
+      fileUploadState.storageId = id
+    }
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
   static failed(file: File, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.failed = true
-    return newState
+    const fileUploadState = oldState.state.get(this.key(file))
+    if (fileUploadState) {
+      fileUploadState.failed = true
+    }
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
   static done(file: File, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.done = true
-    return newState
+    const fileUploadState = oldState.state.get(this.key(file))
+    if (fileUploadState) {
+      fileUploadState.done = true
+    }
+    return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
   static removed(file: File, oldState: FileUploaderState): FileUploaderState {
@@ -113,8 +121,8 @@ export class FileUploadTools {
     return newState
   }
 
-  static delete(fileUploadState: FileUploadState, oldState: FileUploaderState): FileUploaderState {
-    fileUploadState.removed = true
+  static delete(file: File, oldState: FileUploaderState): FileUploaderState {
+    oldState.state.delete(this.key(file))
     return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
   }
 
@@ -129,7 +137,7 @@ export class FileUploadTools {
 
   private static toUploaded(state: Map<string, FileUploadState>): FileUploadState[] {
     return Array.from(state.values())
-      .filter((x) => x.done)
+      .filter((x) => !x.removed && x.done)
       .sort((a, b) => (a.fileDir + a.fileName).localeCompare(b.fileDir + b.fileName))
   }
 }
diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 6299fb9c2..feef43082 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -47,3 +47,7 @@
     font-size: 1.3em;
     text-align: center;
 }
+
+.uploaded {
+    padding-left: 1em;
+}
diff --git a/src/sections/upload-dataset-files/FileUploader.tsx b/src/sections/upload-dataset-files/FileUploader.tsx
index c544b909e..4a1f9751c 100644
--- a/src/sections/upload-dataset-files/FileUploader.tsx
+++ b/src/sections/upload-dataset-files/FileUploader.tsx
@@ -12,6 +12,7 @@ export interface FileUploaderProps {
   selectText: string
   fileUploaderState: FileUploaderState
   cancelUpload: (file: File) => void
+  cleanFileState: (file: File) => void
 }
 
 export function FileUploader({
@@ -20,7 +21,8 @@ export function FileUploader({
   info,
   selectText,
   fileUploaderState,
-  cancelUpload
+  cancelUpload,
+  cleanFileState
 }: FileUploaderProps) {
   const theme = useTheme()
   const [files, setFiles] = useState<File[]>([])
@@ -104,16 +106,21 @@ export function FileUploader({
     }
   }
 
-  const handleRemoveFile = (f: File) => {
-    cancelUpload(f)
-    setFiles((newFiles) =>
-      newFiles.filter((x) => !FileUploadTools.get(x, fileUploaderState).removed)
-    )
-  }
-
   useEffect(() => {
     upload(files)
-  }, [files, fileUploaderState, upload])
+  }, [files, upload])
+
+  useEffect(() => {
+    setFiles((newFiles) =>
+      newFiles.filter((x) => {
+        const res = !FileUploadTools.get(x, fileUploaderState).removed
+        if (!res) {
+          cleanFileState(x)
+        }
+        return res
+      })
+    )
+  }, [fileUploaderState, cleanFileState])
 
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -168,7 +175,7 @@ export function FileUploader({
                         variant="secondary"
                         {...{ size: 'sm' }}
                         withSpacing
-                        onClick={() => handleRemoveFile(file)}>
+                        onClick={() => cancelUpload(file)}>
                         <X className={styles.icon} title={cancelTitle} />
                       </Button>
                     </div>
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 60e83bfe5..75e27a3f5 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -20,7 +20,6 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
   const { t } = useTranslation('uploadDatasetFiles')
   const [fileUploaderState, setState] = useState(FileUploadTools.createNewState([]))
   const [uploadingToCancelMap, setUploadingToCancelMap] = useState(new Map<string, () => void>())
-  const [uploadFinished, setUploadFinished] = useState(new Set<string>())
   const [semaphore, setSemaphore] = useState(new Set<string>())
 
   const sleep = (delay: number) => new Promise((res) => setTimeout(res, delay))
@@ -44,7 +43,6 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
 
   const fileUploadFinished = (file: File) => {
     const key = FileUploadTools.key(file)
-    setUploadFinished((x) => x.add(key))
     setUploadingToCancelMap((x) => {
       x.delete(key)
       return x
@@ -52,9 +50,14 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     releaseSemaphore(file)
   }
 
+  const canUpload = (file: File) =>
+    !uploadingToCancelMap.has(FileUploadTools.key(file)) &&
+    !FileUploadTools.get(file, fileUploaderState).failed &&
+    !FileUploadTools.get(file, fileUploaderState).done
+
   const uploadOneFile = (file: File) => {
     const key = FileUploadTools.key(file)
-    if (uploadingToCancelMap.has(key) || uploadFinished.has(key)) {
+    if (!canUpload(file)) {
       return
     }
     setState(FileUploadTools.showProgressBar(file, fileUploaderState))
@@ -78,29 +81,40 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
 
   const upload = async (files: File[]) => {
     for (const file of files) {
-      const key = FileUploadTools.key(file)
-      if (!uploadingToCancelMap.has(key) && !uploadFinished.has(key)) {
+      if (canUpload(file)) {
         await acquireSemaphore(file)
         uploadOneFile(file)
       }
     }
   }
 
-  const cancelUpload = (file: File) => {
+  const cleanup = (file: File) => {
     const key = FileUploadTools.key(file)
     const cancel = uploadingToCancelMap.get(key)
     if (cancel) {
       cancel()
-      releaseSemaphore(file)
     }
     setUploadingToCancelMap((x) => {
       x.delete(key)
       return x
     })
+    releaseSemaphore(file)
+  }
+
+  const cancelUpload = (file: File) => {
+    cleanup(file)
     setState(FileUploadTools.removed(file, fileUploaderState))
   }
 
-  const deleteFile = (file: FileUploadState) => {
+  const deleteFile = (fileUploadState: FileUploadState) => {
+    setState((x) => {
+      fileUploadState.removed = true
+      return { state: x.state, uploaded: x.uploaded }
+    })
+  }
+
+  const cleanFileState = (file: File) => {
+    cleanup(file)
     setState(FileUploadTools.delete(file, fileUploaderState))
   }
 
@@ -131,6 +145,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
               selectText={t('select')}
               fileUploaderState={fileUploaderState}
               cancelUpload={cancelUpload}
+              cleanFileState={cleanFileState}
             />
             <UploadedFiles
               fileUploadState={fileUploaderState.uploaded}
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 52c4758cf..022f555f9 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@iqss/dataverse-design-system'
+import { Button, Card } from '@iqss/dataverse-design-system'
 import { X } from 'react-bootstrap-icons'
-import { info } from 'sass'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
 
@@ -12,32 +11,50 @@ interface DatasetFilesProps {
 
 export function UploadedFiles({ fileUploadState, cancelTitle, deleteFile }: DatasetFilesProps) {
   return (
-    <>
-      {fileUploadState && fileUploadState.filter((x) => x.done).length > 0 ? (
-        <div className={styles.files}>
-          {fileUploadState.map((file) => (
-            <div className={styles.file} key={file.key}>
-              <div className={styles.file_name}>
-                {file.fileDir}
-                {file.fileName}
+    <div hidden={fileUploadState.length === 0}>
+      <Card>
+        <Card.Header>
+          <Button withSpacing onClick={() => {}}>
+            Save
+          </Button>
+          <Button withSpacing variant="secondary" onClick={() => {}}>
+            Cancel
+          </Button>
+          <span className={styles.uploaded}>
+            <span>
+              {fileUploadState.length}
+              {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
+            </span>
+          </span>
+        </Card.Header>
+        <Card.Body>
+          <div>
+            {fileUploadState.length > 0 ? (
+              <div className={styles.files}>
+                {fileUploadState.map((file) => (
+                  <div className={styles.file} key={file.key}>
+                    <div className={styles.file_name}>
+                      {file.fileDir}
+                      {file.fileName}
+                    </div>
+                    <div className={styles.file_size}>{file.fileSizeString}</div>
+                    <div className={styles.upload_progress}>{null}</div>
+                    <div className={styles.cancel_upload}>
+                      <Button
+                        variant="secondary"
+                        {...{ size: 'sm' }}
+                        withSpacing
+                        onClick={() => deleteFile(file)}>
+                        <X className={styles.icon} title={cancelTitle} />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
               </div>
-              <div className={styles.file_size}>{file.fileSizeString}</div>
-              <div className={styles.upload_progress}>{null}</div>
-              <div className={styles.cancel_upload}>
-                <Button
-                  variant="secondary"
-                  {...{ size: 'sm' }}
-                  withSpacing
-                  onClick={() => deleteFile(file)}>
-                  <X className={styles.icon} title={cancelTitle} />
-                </Button>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className={styles.info}>{info}</div>
-      )}
-    </>
+            ) : null}
+          </div>
+        </Card.Body>
+      </Card>
+    </div>
   )
 }

From b0dc639d67e2b3887fe67bb1f6c82beaac417d60 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Sat, 15 Jun 2024 01:40:14 +0200
Subject: [PATCH 04/96] added info on dirs drop

---
 public/locales/en/uploadDatasetFiles.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 29cbc3838..451e2e629 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -1,6 +1,6 @@
 {
   "breadcrumbActionItem": "Upload files",
   "cancel": "Cancel upload",
-  "info": "Drag and drop files here.",
+  "info": "Drag and drop files and/or directories here.",
   "select": "Select files to add"
 }

From 854a0b32d7469c78cc24e884de3c67c9c4a06d3a Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 12:15:17 +0200
Subject: [PATCH 05/96] save and cancel buttons implementation

---
 .../domain/repositories/FileRepository.ts     |  5 +++
 src/files/domain/useCases/addUploadedFile.ts  | 17 ++++++++++
 .../FileJSDataverseRepository.ts              |  7 +++-
 .../UploadDatasetFiles.tsx                    | 34 +++++++++++++++++++
 .../upload-dataset-files/UploadedFiles.tsx    | 26 ++++++++++++--
 src/stories/file/FileMockRepository.ts        |  8 +++++
 6 files changed, 93 insertions(+), 4 deletions(-)
 create mode 100644 src/files/domain/useCases/addUploadedFile.ts

diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index 04556a0ba..ecc0494c3 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -34,4 +34,9 @@ export interface FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ) => Promise<void>
+  addUploadedFile: (
+    datasetId: number | string,
+    file: FileHolder,
+    storageId: string
+  ) => Promise<void>
 }
diff --git a/src/files/domain/useCases/addUploadedFile.ts b/src/files/domain/useCases/addUploadedFile.ts
new file mode 100644
index 000000000..e354bb186
--- /dev/null
+++ b/src/files/domain/useCases/addUploadedFile.ts
@@ -0,0 +1,17 @@
+import { FileRepository } from '../repositories/FileRepository'
+
+export function addUploadedFile(
+  fileRepository: FileRepository,
+  datasetId: number | string,
+  file: File,
+  storageId: string
+): void {
+  fileRepository
+    .addUploadedFile(datasetId, { file: file }, storageId)
+    .then(() => {
+      // console.log('File added to the dataset successfully.')
+    })
+    .catch((error: Error) => {
+      throw new Error(error.message)
+    })
+}
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index fc529c733..9747cff7b 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -15,7 +15,8 @@ import {
   getFileDownloadCount,
   getFileUserPermissions,
   ReadError,
-  uploadFile as jsUploadFile
+  uploadFile as jsUploadFile,
+  addUploadedFileToDataset
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
 import { DomainFileMapper } from './mappers/DomainFileMapper'
@@ -250,4 +251,8 @@ export class FileJSDataverseRepository implements FileRepository {
       .execute(datasetId, file.file, progress, abortController)
       .then(storageIdSetter)
   }
+
+  addUploadedFile(datasetId: number | string, file: FileHolder, storageId: string): Promise<void> {
+    return addUploadedFileToDataset.execute(datasetId, file.file, storageId)
+  }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 75e27a3f5..de248559c 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -9,6 +9,7 @@ import { FileUploader } from './FileUploader'
 import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
 import { uploadFile } from '../../files/domain/useCases/uploadFile'
 import { UploadedFiles } from './UploadedFiles'
+import { addUploadedFile } from '../../files/domain/useCases/addUploadedFile'
 
 interface UploadDatasetFilesProps {
   fileRepository: FileRepository
@@ -118,6 +119,37 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     setState(FileUploadTools.delete(file, fileUploaderState))
   }
 
+  type MutableFile = {
+    -readonly [K in keyof File]: File[K]
+  }
+
+  const stateToFiles = (state: FileUploadState[]) =>
+    state.map((x) => {
+      const f = new File([], x.fileName, { type: x.fileType })
+      const mutable: MutableFile = f
+      mutable.webkitRelativePath = x.fileDir
+      const res: File = mutable
+      return res
+    })
+
+  const cleanAllState = () => {
+    stateToFiles(Array.from(fileUploaderState.state.values())).forEach((file) => {
+      cleanup(file)
+      setState(FileUploadTools.delete(file, fileUploaderState))
+    })
+  }
+
+  const addFiles = (state: FileUploadState[]) => {
+    stateToFiles(state).forEach((file, index) =>
+      addUploadedFile(
+        fileRepository,
+        dataset?.persistentId as string,
+        file,
+        state[index].storageId as string
+      )
+    )
+  }
+
   useEffect(() => {
     setIsLoading(isLoading)
   }, [isLoading, setIsLoading])
@@ -151,6 +183,8 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
               fileUploadState={fileUploaderState.uploaded}
               cancelTitle={t('cancel')}
               deleteFile={deleteFile}
+              cleanup={cleanAllState}
+              addFiles={addFiles}
             />
           </article>
         </>
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 022f555f9..338366901 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -2,22 +2,42 @@ import { Button, Card } from '@iqss/dataverse-design-system'
 import { X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
+import { useState } from 'react'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
   cancelTitle: string
   deleteFile: (file: FileUploadState) => void
+  cleanup: () => void
+  addFiles: (fileUploadState: FileUploadState[]) => void
 }
 
-export function UploadedFiles({ fileUploadState, cancelTitle, deleteFile }: DatasetFilesProps) {
+export function UploadedFiles({
+  fileUploadState,
+  cancelTitle,
+  deleteFile,
+  cleanup,
+  addFiles
+}: DatasetFilesProps) {
+  const [saving, setSaving] = useState(false)
+  const save = () => {
+    setSaving(true)
+    addFiles(fileUploadState)
+    cleanup()
+    setSaving(false)
+  }
+
   return (
     <div hidden={fileUploadState.length === 0}>
       <Card>
         <Card.Header>
-          <Button withSpacing onClick={() => {}}>
+          <Button
+            withSpacing
+            onClick={save}
+            disabled={fileUploadState.some((x) => !(x.failed || x.done || x.removed))}>
             Save
           </Button>
-          <Button withSpacing variant="secondary" onClick={() => {}}>
+          <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
             Cancel
           </Button>
           <span className={styles.uploaded}>
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 7f8878dc2..458b470b3 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -89,4 +89,12 @@ export class FileMockRepository implements FileRepository {
     }
     return res()
   }
+
+  addUploadedFile(
+    _datasetId: number | string,
+    _file: FileHolder,
+    _storageId: string
+  ): Promise<void> {
+    return new Promise(() => {})
+  }
 }

From 62d9f711f89bd390227ddb4825c0c01ba7076762 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 12:31:16 +0200
Subject: [PATCH 06/96] passing label not possible yet

---
 .../upload-dataset-files/UploadDatasetFiles.tsx        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index de248559c..110d19868 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -119,17 +119,19 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     setState(FileUploadTools.delete(file, fileUploaderState))
   }
 
-  type MutableFile = {
+  /*type MutableFile = {
     -readonly [K in keyof File]: File[K]
-  }
+  }*/
 
   const stateToFiles = (state: FileUploadState[]) =>
     state.map((x) => {
-      const f = new File([], x.fileName, { type: x.fileType })
+      //TODO: pass label and description, preferably use multiple files add
+      /*const f = new File([], x.fileName, { type: x.fileType })
       const mutable: MutableFile = f
       mutable.webkitRelativePath = x.fileDir
       const res: File = mutable
-      return res
+      return res*/
+      return new File([], x.fileName, { type: x.fileType })
     })
 
   const cleanAllState = () => {

From 37ff2be61b1b237cf0435361d104999232f5cf7a Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 12:32:21 +0200
Subject: [PATCH 07/96] clean state after add

---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 110d19868..314c14b36 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -150,6 +150,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
         state[index].storageId as string
       )
     )
+    cleanAllState()
   }
 
   useEffect(() => {

From 3220abc682f0407bd911cc7d05e694cce0319726 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 13:33:14 +0200
Subject: [PATCH 08/96] some fixes

---
 src/files/domain/models/FileUploadState.ts    |  7 +++
 .../domain/repositories/FileRepository.ts     |  3 +-
 src/files/domain/useCases/addUploadedFile.ts  |  5 +-
 .../FileJSDataverseRepository.ts              | 55 +++++++++++++++----
 .../UploadDatasetFiles.tsx                    | 25 ++-------
 src/stories/file/FileMockRepository.ts        |  3 +-
 6 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index e4d4e5cbf..8dbc7f3dd 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -5,6 +5,8 @@ export interface FileUploadState {
   storageId?: string
   progressHidden: boolean
   fileSizeString: string
+  fileSize: number
+  fileLastModified: number
   failed: boolean
   done: boolean
   removed: boolean
@@ -12,6 +14,7 @@ export interface FileUploadState {
   fileDir: string
   fileType: string
   key: string
+  description?: string
 }
 
 export interface FileUploaderState {
@@ -29,6 +32,8 @@ export class FileUploadTools {
         storageId: undefined,
         progressHidden: true,
         fileSizeString: new FileSize(file.size, FileSizeUnit.BYTES).toString(),
+        fileSize: file.size,
+        fileLastModified: file.lastModified,
         failed: false,
         done: false,
         removed: false,
@@ -55,6 +60,8 @@ export class FileUploadTools {
       progress: 0,
       progressHidden: true,
       fileSizeString: new FileSize(file.size, FileSizeUnit.BYTES).toString(),
+      fileSize: file.size,
+      fileLastModified: file.lastModified,
       failed: false,
       done: false,
       removed: false,
diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index ecc0494c3..767bc5c15 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -6,6 +6,7 @@ import { DatasetVersion, DatasetVersionNumber } from '../../../dataset/domain/mo
 import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { FilePreview } from '../models/FilePreview'
 import { FileHolder } from './File'
+import { FileUploadState } from '../models/FileUploadState'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (
@@ -36,7 +37,7 @@ export interface FileRepository {
   ) => Promise<void>
   addUploadedFile: (
     datasetId: number | string,
-    file: FileHolder,
+    file: FileUploadState,
     storageId: string
   ) => Promise<void>
 }
diff --git a/src/files/domain/useCases/addUploadedFile.ts b/src/files/domain/useCases/addUploadedFile.ts
index e354bb186..c6ce8f47d 100644
--- a/src/files/domain/useCases/addUploadedFile.ts
+++ b/src/files/domain/useCases/addUploadedFile.ts
@@ -1,13 +1,14 @@
+import { FileUploadState } from '../models/FileUploadState'
 import { FileRepository } from '../repositories/FileRepository'
 
 export function addUploadedFile(
   fileRepository: FileRepository,
   datasetId: number | string,
-  file: File,
+  file: FileUploadState,
   storageId: string
 ): void {
   fileRepository
-    .addUploadedFile(datasetId, { file: file }, storageId)
+    .addUploadedFile(datasetId, file, storageId)
     .then(() => {
       // console.log('File added to the dataset successfully.')
     })
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 9747cff7b..d64429a15 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -14,9 +14,7 @@ import {
   getFileDataTables,
   getFileDownloadCount,
   getFileUserPermissions,
-  ReadError,
-  uploadFile as jsUploadFile,
-  addUploadedFileToDataset
+  ReadError
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
 import { DomainFileMapper } from './mappers/DomainFileMapper'
@@ -31,6 +29,7 @@ import { JSFileMetadataMapper } from './mappers/JSFileMetadataMapper'
 import { FilePermissions } from '../domain/models/FilePermissions'
 import { JSFilePermissionsMapper } from './mappers/JSFilePermissionsMapper'
 import { FileHolder } from '../domain/repositories/File'
+import { FileUploadState } from '../domain/models/FileUploadState'
 
 const includeDeaccessioned = true
 
@@ -241,18 +240,50 @@ export class FileJSDataverseRepository implements FileRepository {
   }
 
   uploadFile(
-    datasetId: number | string,
-    file: FileHolder,
-    progress: (now: number) => void,
-    abortController: AbortController,
-    storageIdSetter: (storageId: string) => void
+    _datasetId: number | string,
+    _file: FileHolder,
+    _progress: (now: number) => void,
+    _abortController: AbortController,
+    _storageIdSetter: (storageId: string) => void
   ): Promise<void> {
-    return jsUploadFile
+    /*return jsUploadFile
       .execute(datasetId, file.file, progress, abortController)
-      .then(storageIdSetter)
+      .then(storageIdSetter)*/
+    return new Promise(() => {})
   }
 
-  addUploadedFile(datasetId: number | string, file: FileHolder, storageId: string): Promise<void> {
-    return addUploadedFileToDataset.execute(datasetId, file.file, storageId)
+  addUploadedFile(
+    _datasetId: number | string,
+    file: FileUploadState,
+    _storageId: string
+  ): Promise<void> {
+    const f: FileHolder = {
+      file: {
+        lastModified: file.fileLastModified,
+        name: file.fileName,
+        webkitRelativePath: file.fileDir,
+        size: file.fileSize,
+        type: file.fileType,
+        arrayBuffer: function (): Promise<ArrayBuffer> {
+          throw new Error('Function not implemented.')
+        },
+        slice: function (
+          _start?: number | undefined,
+          _end?: number | undefined,
+          _contentType?: string | undefined
+        ): Blob {
+          throw new Error('Function not implemented.')
+        },
+        stream: function (): ReadableStream<Uint8Array> {
+          throw new Error('Function not implemented.')
+        },
+        text: function (): Promise<string> {
+          throw new Error('Function not implemented.')
+        }
+      }
+    }
+    console.log(f.file.name)
+    return new Promise(() => {})
+    //return addUploadedFileToDataset.execute(datasetId, f.file, storageId, description)
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 314c14b36..079b8e153 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -119,30 +119,17 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     setState(FileUploadTools.delete(file, fileUploaderState))
   }
 
-  /*type MutableFile = {
-    -readonly [K in keyof File]: File[K]
-  }*/
-
-  const stateToFiles = (state: FileUploadState[]) =>
-    state.map((x) => {
-      //TODO: pass label and description, preferably use multiple files add
-      /*const f = new File([], x.fileName, { type: x.fileType })
-      const mutable: MutableFile = f
-      mutable.webkitRelativePath = x.fileDir
-      const res: File = mutable
-      return res*/
-      return new File([], x.fileName, { type: x.fileType })
-    })
-
   const cleanAllState = () => {
-    stateToFiles(Array.from(fileUploaderState.state.values())).forEach((file) => {
-      cleanup(file)
-      setState(FileUploadTools.delete(file, fileUploaderState))
+    setState((x) => {
+      Array.from(x.state.values()).forEach((fileUploadState) => {
+        fileUploadState.removed = true
+      })
+      return { state: x.state, uploaded: x.uploaded }
     })
   }
 
   const addFiles = (state: FileUploadState[]) => {
-    stateToFiles(state).forEach((file, index) =>
+    state.forEach((file, index) =>
       addUploadedFile(
         fileRepository,
         dataset?.persistentId as string,
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 458b470b3..3dcf3f283 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -12,6 +12,7 @@ import { File } from '../../files/domain/models/File'
 import { FilePreview } from '../../files/domain/models/FilePreview'
 import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 import { FileHolder } from '../../files/domain/repositories/File'
+import { FileUploadState } from '../../files/domain/models/FileUploadState'
 
 export class FileMockRepository implements FileRepository {
   constructor(public readonly fileMock?: File) {}
@@ -92,7 +93,7 @@ export class FileMockRepository implements FileRepository {
 
   addUploadedFile(
     _datasetId: number | string,
-    _file: FileHolder,
+    _file: FileUploadState,
     _storageId: string
   ): Promise<void> {
     return new Promise(() => {})

From 00f8ab24f7d8b8d7b98f4e1a289939889e3ba5db Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 13:35:43 +0200
Subject: [PATCH 09/96] added description setter

---
 src/files/domain/models/FileUploadState.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index 8dbc7f3dd..b6bfa631b 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -128,6 +128,12 @@ export class FileUploadTools {
     return newState
   }
 
+  static fileDescription(file: File, txt: string, oldState: FileUploaderState): FileUploaderState {
+    const [newState, newValue] = this.toNewState(file, oldState)
+    newValue.description = txt
+    return newState
+  }
+
   static delete(file: File, oldState: FileUploaderState): FileUploaderState {
     oldState.state.delete(this.key(file))
     return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }

From 2a7396648770b4e0f607477b6274c433a8893689 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 13:46:17 +0200
Subject: [PATCH 10/96] save button enabled logic fix

---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 4 ++++
 src/sections/upload-dataset-files/UploadedFiles.tsx      | 7 +++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 079b8e153..d25e4c4bb 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -140,6 +140,9 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     cleanAllState()
   }
 
+  const saveDisabled = () =>
+    Array.from(fileUploaderState.state.values()).some((x) => !(x.failed || x.done || x.removed))
+
   useEffect(() => {
     setIsLoading(isLoading)
   }, [isLoading, setIsLoading])
@@ -172,6 +175,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
             <UploadedFiles
               fileUploadState={fileUploaderState.uploaded}
               cancelTitle={t('cancel')}
+              saveDisabled={saveDisabled()}
               deleteFile={deleteFile}
               cleanup={cleanAllState}
               addFiles={addFiles}
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 338366901..c6edd3be1 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -7,6 +7,7 @@ import { useState } from 'react'
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
   cancelTitle: string
+  saveDisabled: boolean
   deleteFile: (file: FileUploadState) => void
   cleanup: () => void
   addFiles: (fileUploadState: FileUploadState[]) => void
@@ -15,6 +16,7 @@ interface DatasetFilesProps {
 export function UploadedFiles({
   fileUploadState,
   cancelTitle,
+  saveDisabled,
   deleteFile,
   cleanup,
   addFiles
@@ -31,10 +33,7 @@ export function UploadedFiles({
     <div hidden={fileUploadState.length === 0}>
       <Card>
         <Card.Header>
-          <Button
-            withSpacing
-            onClick={save}
-            disabled={fileUploadState.some((x) => !(x.failed || x.done || x.removed))}>
+          <Button withSpacing onClick={save} disabled={saveDisabled}>
             Save
           </Button>
           <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>

From ab20b778ada6cc0e09699f932c91d3bb99083da6 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 13:59:44 +0200
Subject: [PATCH 11/96] moved files rebuilding

---
 .../domain/repositories/FileRepository.ts     |  6 +-
 src/files/domain/useCases/addUploadedFile.ts  |  5 +-
 .../FileJSDataverseRepository.ts              | 58 +++++++++----------
 .../UploadDatasetFiles.tsx                    |  9 +--
 src/stories/file/FileMockRepository.ts        |  6 +-
 5 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index 767bc5c15..38ea3df8e 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -35,9 +35,5 @@ export interface FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ) => Promise<void>
-  addUploadedFile: (
-    datasetId: number | string,
-    file: FileUploadState,
-    storageId: string
-  ) => Promise<void>
+  addUploadedFile: (datasetId: number | string, files: FileUploadState[]) => Promise<void>
 }
diff --git a/src/files/domain/useCases/addUploadedFile.ts b/src/files/domain/useCases/addUploadedFile.ts
index c6ce8f47d..b231b0d57 100644
--- a/src/files/domain/useCases/addUploadedFile.ts
+++ b/src/files/domain/useCases/addUploadedFile.ts
@@ -4,11 +4,10 @@ import { FileRepository } from '../repositories/FileRepository'
 export function addUploadedFile(
   fileRepository: FileRepository,
   datasetId: number | string,
-  file: FileUploadState,
-  storageId: string
+  files: FileUploadState[]
 ): void {
   fileRepository
-    .addUploadedFile(datasetId, file, storageId)
+    .addUploadedFile(datasetId, files)
     .then(() => {
       // console.log('File added to the dataset successfully.')
     })
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index d64429a15..2e64fedc4 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -252,38 +252,36 @@ export class FileJSDataverseRepository implements FileRepository {
     return new Promise(() => {})
   }
 
-  addUploadedFile(
-    _datasetId: number | string,
-    file: FileUploadState,
-    _storageId: string
-  ): Promise<void> {
-    const f: FileHolder = {
-      file: {
-        lastModified: file.fileLastModified,
-        name: file.fileName,
-        webkitRelativePath: file.fileDir,
-        size: file.fileSize,
-        type: file.fileType,
-        arrayBuffer: function (): Promise<ArrayBuffer> {
-          throw new Error('Function not implemented.')
-        },
-        slice: function (
-          _start?: number | undefined,
-          _end?: number | undefined,
-          _contentType?: string | undefined
-        ): Blob {
-          throw new Error('Function not implemented.')
-        },
-        stream: function (): ReadableStream<Uint8Array> {
-          throw new Error('Function not implemented.')
-        },
-        text: function (): Promise<string> {
-          throw new Error('Function not implemented.')
+  addUploadedFile(_datasetId: number | string, files: FileUploadState[]): Promise<void> {
+    files.forEach((file) => {
+      const f: FileHolder = {
+        file: {
+          lastModified: file.fileLastModified,
+          name: file.fileName,
+          webkitRelativePath: file.fileDir,
+          size: file.fileSize,
+          type: file.fileType,
+          arrayBuffer: function (): Promise<ArrayBuffer> {
+            throw new Error('Function not implemented.')
+          },
+          slice: function (
+            _start?: number | undefined,
+            _end?: number | undefined,
+            _contentType?: string | undefined
+          ): Blob {
+            throw new Error('Function not implemented.')
+          },
+          stream: function (): ReadableStream<Uint8Array> {
+            throw new Error('Function not implemented.')
+          },
+          text: function (): Promise<string> {
+            throw new Error('Function not implemented.')
+          }
         }
       }
-    }
-    console.log(f.file.name)
+      console.log(f.file.name)
+      //addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string, file.description)
+    })
     return new Promise(() => {})
-    //return addUploadedFileToDataset.execute(datasetId, f.file, storageId, description)
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index d25e4c4bb..6b5f68e02 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -129,14 +129,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
   }
 
   const addFiles = (state: FileUploadState[]) => {
-    state.forEach((file, index) =>
-      addUploadedFile(
-        fileRepository,
-        dataset?.persistentId as string,
-        file,
-        state[index].storageId as string
-      )
-    )
+    addUploadedFile(fileRepository, dataset?.persistentId as string, state)
     cleanAllState()
   }
 
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 3dcf3f283..dfbab1915 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -91,11 +91,7 @@ export class FileMockRepository implements FileRepository {
     return res()
   }
 
-  addUploadedFile(
-    _datasetId: number | string,
-    _file: FileUploadState,
-    _storageId: string
-  ): Promise<void> {
+  addUploadedFile(_datasetId: number | string, _files: FileUploadState[]): Promise<void> {
     return new Promise(() => {})
   }
 }

From 9ae3275809de5c722ed7c2a7fbb2f4ccd215293c Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 15:31:38 +0200
Subject: [PATCH 12/96] promise all

---
 src/files/domain/repositories/FileRepository.ts          | 2 +-
 src/files/domain/useCases/addUploadedFile.ts             | 6 ++++--
 src/files/infrastructure/FileJSDataverseRepository.ts    | 6 ++++--
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 4 +++-
 src/stories/file/FileMockRepository.ts                   | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index 38ea3df8e..aad517f31 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -35,5 +35,5 @@ export interface FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ) => Promise<void>
-  addUploadedFile: (datasetId: number | string, files: FileUploadState[]) => Promise<void>
+  addUploadedFile: (datasetId: number | string, files: FileUploadState[]) => Promise<void[]>
 }
diff --git a/src/files/domain/useCases/addUploadedFile.ts b/src/files/domain/useCases/addUploadedFile.ts
index b231b0d57..c8f2114fe 100644
--- a/src/files/domain/useCases/addUploadedFile.ts
+++ b/src/files/domain/useCases/addUploadedFile.ts
@@ -4,14 +4,16 @@ import { FileRepository } from '../repositories/FileRepository'
 export function addUploadedFile(
   fileRepository: FileRepository,
   datasetId: number | string,
-  files: FileUploadState[]
+  files: FileUploadState[],
+  done: () => void
 ): void {
   fileRepository
     .addUploadedFile(datasetId, files)
     .then(() => {
-      // console.log('File added to the dataset successfully.')
+      done()
     })
     .catch((error: Error) => {
+      done()
       throw new Error(error.message)
     })
 }
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 2e64fedc4..46de92b8e 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -252,7 +252,8 @@ export class FileJSDataverseRepository implements FileRepository {
     return new Promise(() => {})
   }
 
-  addUploadedFile(_datasetId: number | string, files: FileUploadState[]): Promise<void> {
+  addUploadedFile(_datasetId: number | string, files: FileUploadState[]): Promise<void[]> {
+    const all: Promise<void>[] = []
     files.forEach((file) => {
       const f: FileHolder = {
         file: {
@@ -280,8 +281,9 @@ export class FileJSDataverseRepository implements FileRepository {
         }
       }
       console.log(f.file.name)
+      all.push(new Promise(() => {}))
       //addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string, file.description)
     })
-    return new Promise(() => {})
+    return Promise.all(all)
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 6b5f68e02..1dd35688b 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -129,7 +129,9 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
   }
 
   const addFiles = (state: FileUploadState[]) => {
-    addUploadedFile(fileRepository, dataset?.persistentId as string, state)
+    setIsLoading(true)
+    const done = () => setIsLoading(false)
+    addUploadedFile(fileRepository, dataset?.persistentId as string, state, done)
     cleanAllState()
   }
 
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index dfbab1915..d35370a5f 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -91,7 +91,7 @@ export class FileMockRepository implements FileRepository {
     return res()
   }
 
-  addUploadedFile(_datasetId: number | string, _files: FileUploadState[]): Promise<void> {
+  addUploadedFile(_datasetId: number | string, _files: FileUploadState[]): Promise<void[]> {
     return new Promise(() => {})
   }
 }

From 53e6bca481f46a26cfe696d57bf75f69f8dc2d8a Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 17 Jun 2024 15:35:49 +0200
Subject: [PATCH 13/96] use case integration preparation

---
 src/files/infrastructure/FileJSDataverseRepository.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 46de92b8e..66951ed9c 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -248,7 +248,10 @@ export class FileJSDataverseRepository implements FileRepository {
   ): Promise<void> {
     /*return jsUploadFile
       .execute(datasetId, file.file, progress, abortController)
-      .then(storageIdSetter)*/
+      .then(storageIdSetter)
+      .catch((error: ReadError) => {
+        throw new Error(error.message)
+      })*/
     return new Promise(() => {})
   }
 
@@ -282,7 +285,7 @@ export class FileJSDataverseRepository implements FileRepository {
       }
       console.log(f.file.name)
       all.push(new Promise(() => {}))
-      //addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string, file.description)
+      //all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string, file.description))
     })
     return Promise.all(all)
   }

From 5831706f0b77d302097dfde9f81a8959f4f19180 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 11:08:39 +0200
Subject: [PATCH 14/96] fixed unit tests

---
 .../UploadDatasetFiles.spec.tsx                   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 4b16b5a8f..8e0e35284 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -63,7 +63,8 @@ describe('UploadDatasetFiles', () => {
     )
 
     cy.findByText('Select files to add').should('exist')
-    cy.findByText('Drag and drop files here.').should('exist')
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
   })
 
   it('renders the files being uploaded', () => {
@@ -111,10 +112,6 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByTitle('Cancel upload').should('exist')
     cy.findAllByRole('progressbar').should('exist')
     cy.findByText('Select files to add').should('exist')
-    cy.findByText('Drag and drop files here.').should('not.exist')
-    // wait for upload to finish
-    cy.findByText('users2.json').should('not.exist')
-    cy.findByText('users3.json').should('not.exist')
   })
 
   it('renders file upload by clicking add button', () => {
@@ -180,8 +177,8 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 2)
     cy.findByText('Select files to add').should('exist')
     // wait for upload to finish
-    cy.findByText('users3.json').should('not.exist')
-    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('Save').should('exist')
+    cy.findByText('Cancel').should('exist')
     cy.get('@dnd').selectFile(
       { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
       { action: 'drag-drop' }
@@ -190,8 +187,8 @@ describe('UploadDatasetFiles', () => {
       { fileName: 'users3.json', contents: [{ name: 'John Doe the 3rd' }] },
       { action: 'drag-drop' }
     )
-    cy.findByText('users3.json').should('not.exist')
-    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('users3.json').should('have.length', 1)
+    cy.findByText('users1.json').should('have.length', 1)
   })
 
   it('prevents double uploads', () => {

From ab49fe091d0c8eca0b1da74966e2e0b9932e2eef Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 12:27:23 +0200
Subject: [PATCH 15/96] added tests and improved coverage

---
 .../UploadDatasetFiles.tsx                    |  2 +-
 .../UploadDatasetFiles.spec.tsx               | 89 +++++++++++++++++++
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 1dd35688b..634d54576 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -169,7 +169,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
             />
             <UploadedFiles
               fileUploadState={fileUploaderState.uploaded}
-              cancelTitle={t('cancel')}
+              cancelTitle={'Delete'}
               saveDisabled={saveDisabled()}
               deleteFile={deleteFile}
               cleanup={cleanAllState}
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 8e0e35284..9cac026af 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -271,4 +271,93 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 6)
     cy.findByText('Select files to add').should('exist')
   })
+
+  it('saves uploaded files', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    cy.findByText('users1.json').should('exist')
+    cy.findByText('users2.json').should('exist')
+    cy.findAllByTitle('Cancel upload').should('have.length', 2)
+    cy.findAllByRole('progressbar').should('have.length', 2)
+    cy.findByText('Select files to add').should('exist')
+    // wait for upload to finish
+    cy.findByText('Save').should('exist')
+    cy.findByText('Cancel').should('exist')
+    cy.findByText('Save').click()
+    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('users2.json').should('not.exist')
+    // wait for reload
+    cy.findByText('Temporary Loading until having shape of skeleton').should('not.exist')
+  })
+
+  it('cancels saving uploaded files', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    cy.findByText('users1.json').should('exist')
+    cy.findByText('users2.json').should('exist')
+    cy.findAllByTitle('Cancel upload').should('have.length', 2)
+    cy.findAllByRole('progressbar').should('have.length', 2)
+    cy.findByText('Select files to add').should('exist')
+    // wait for upload to finish
+    cy.findByText('Save').should('exist')
+    cy.findByText('Cancel').should('exist')
+    cy.findByText('Cancel').click()
+    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('users2.json').should('not.exist')
+  })
+
+  it('deletes uploaded files', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    cy.findByText('users1.json').should('exist')
+    cy.findByText('users2.json').should('exist')
+    cy.findAllByTitle('Cancel upload').should('have.length', 2)
+    cy.findAllByRole('progressbar').should('have.length', 2)
+    cy.findByText('Select files to add').should('exist')
+    // wait for upload to finish
+    cy.findByText('Save').should('exist')
+    cy.findByText('Cancel').should('exist')
+    cy.findAllByTitle('Delete').first().parent().click()
+    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('users2.json').should('exist')
+  })
 })

From d24318b8d3d1b6bd72dc8a64ba0bf61fb9e3faac Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 14:29:10 +0200
Subject: [PATCH 16/96] background color on drag fix

---
 src/sections/upload-dataset-files/FileUploader.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.tsx b/src/sections/upload-dataset-files/FileUploader.tsx
index 4a1f9751c..6e7da9ef4 100644
--- a/src/sections/upload-dataset-files/FileUploader.tsx
+++ b/src/sections/upload-dataset-files/FileUploader.tsx
@@ -131,14 +131,15 @@ export function FileUploader({
           <Plus></Plus> {selectText}
         </Button>
       </Card.Header>
-      <Card.Body style={{ backgroundColor: bgColor }}>
+      <Card.Body>
         <div
           className={styles.file_uploader}
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragEnter={handleDragEnter}
           onDragLeave={handleDragLeave}
-          data-testid="drag-and-drop">
+          data-testid="drag-and-drop"
+          style={{ backgroundColor: bgColor }}>
           <div>
             <input
               ref={inputRef}

From b5d04fb866d1de1951184283b5c1969ba5653c4f Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 16:11:28 +0200
Subject: [PATCH 17/96] editable file name, dir and description

---
 src/files/domain/models/FileUploadState.ts    | 34 ++++-----
 .../FileJSDataverseRepository.ts              |  2 +-
 .../upload-dataset-files/FileUploader.tsx     |  3 +-
 .../UploadDatasetFiles.tsx                    |  8 +++
 .../upload-dataset-files/UploadedFiles.tsx    | 69 +++++++++++++++++--
 5 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index b6bfa631b..f581daec4 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -38,9 +38,9 @@ export class FileUploadTools {
         done: false,
         removed: false,
         fileName: file.name,
-        fileDir: file.webkitRelativePath,
+        fileDir: this.toDir(file.webkitRelativePath),
         fileType: file.type,
-        key: this.key(file)
+        key: key
       }
       newState.set(key, newValue)
     })
@@ -48,7 +48,7 @@ export class FileUploadTools {
   }
 
   static key(file: File): string {
-    return file.webkitRelativePath + file.name
+    return file.webkitRelativePath ? file.webkitRelativePath : file.name
   }
 
   static get(file: File, state: FileUploaderState): FileUploadState {
@@ -66,7 +66,7 @@ export class FileUploadTools {
       done: false,
       removed: false,
       fileName: file.name,
-      fileDir: file.webkitRelativePath,
+      fileDir: this.toDir(file.webkitRelativePath),
       fileType: file.type,
       key: this.key(file)
     }
@@ -116,24 +116,6 @@ export class FileUploadTools {
     return newState
   }
 
-  static fileName(file: File, name: string, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.fileName = name
-    return newState
-  }
-
-  static fileDir(file: File, dir: string, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.fileDir = dir
-    return newState
-  }
-
-  static fileDescription(file: File, txt: string, oldState: FileUploaderState): FileUploaderState {
-    const [newState, newValue] = this.toNewState(file, oldState)
-    newValue.description = txt
-    return newState
-  }
-
   static delete(file: File, oldState: FileUploaderState): FileUploaderState {
     oldState.state.delete(this.key(file))
     return { state: oldState.state, uploaded: this.toUploaded(oldState.state) }
@@ -153,4 +135,12 @@ export class FileUploadTools {
       .filter((x) => !x.removed && x.done)
       .sort((a, b) => (a.fileDir + a.fileName).localeCompare(b.fileDir + b.fileName))
   }
+
+  private static toDir(relativePath: string): string {
+    const parts = relativePath.split('/')
+    if (parts.length > 0) {
+      return parts.slice(0, parts.length - 1).join('/')
+    }
+    return relativePath
+  }
 }
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 66951ed9c..b588390ce 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -262,7 +262,7 @@ export class FileJSDataverseRepository implements FileRepository {
         file: {
           lastModified: file.fileLastModified,
           name: file.fileName,
-          webkitRelativePath: file.fileDir,
+          webkitRelativePath: file.fileDir ? (file.fileDir + '/' + file.fileName) : file.fileName,
           size: file.fileSize,
           type: file.fileType,
           arrayBuffer: function (): Promise<ArrayBuffer> {
diff --git a/src/sections/upload-dataset-files/FileUploader.tsx b/src/sections/upload-dataset-files/FileUploader.tsx
index 6e7da9ef4..b1cde331c 100644
--- a/src/sections/upload-dataset-files/FileUploader.tsx
+++ b/src/sections/upload-dataset-files/FileUploader.tsx
@@ -160,8 +160,7 @@ export function FileUploader({
                       className={cn(styles.file_name, {
                         [styles.failed]: FileUploadTools.get(file, fileUploaderState).failed
                       })}>
-                      {file.webkitRelativePath}
-                      {file.name}
+                      {file.webkitRelativePath ? file.webkitRelativePath : file.name}
                     </div>
                     <div className={styles.file_size}>
                       {FileUploadTools.get(file, fileUploaderState).fileSizeString}
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 634d54576..ceaaefe77 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -114,6 +114,13 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     })
   }
 
+  const updateFile = (fileUploadState: FileUploadState) => {
+    setState((x) => {
+      x.state.set(fileUploadState.key, fileUploadState)
+      return { state: x.state, uploaded: x.uploaded }
+    })
+  }
+
   const cleanFileState = (file: File) => {
     cleanup(file)
     setState(FileUploadTools.delete(file, fileUploaderState))
@@ -174,6 +181,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
               deleteFile={deleteFile}
               cleanup={cleanAllState}
               addFiles={addFiles}
+              updateFile={updateFile}
             />
           </article>
         </>
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index c6edd3be1..c3341fe55 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,8 +1,8 @@
-import { Button, Card } from '@iqss/dataverse-design-system'
+import { Button, Card, Col, Form } from '@iqss/dataverse-design-system'
 import { X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
-import { useState } from 'react'
+import { FormEvent, useState } from 'react'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -11,6 +11,7 @@ interface DatasetFilesProps {
   deleteFile: (file: FileUploadState) => void
   cleanup: () => void
   addFiles: (fileUploadState: FileUploadState[]) => void
+  updateFile: (file: FileUploadState) => void
 }
 
 export function UploadedFiles({
@@ -19,7 +20,8 @@ export function UploadedFiles({
   saveDisabled,
   deleteFile,
   cleanup,
-  addFiles
+  addFiles,
+  updateFile
 }: DatasetFilesProps) {
   const [saving, setSaving] = useState(false)
   const save = () => {
@@ -28,6 +30,18 @@ export function UploadedFiles({
     cleanup()
     setSaving(false)
   }
+  const updateFileName = (file: FileUploadState, updated: string) => {
+    file.fileName = updated
+    updateFile(file)
+  }
+  const updateFileDir = (file: FileUploadState, updated: string) => {
+    file.fileDir = updated
+    updateFile(file)
+  }
+  const updateFileDescription = (file: FileUploadState, updated: string) => {
+    file.description = updated
+    updateFile(file)
+  }
 
   return (
     <div hidden={fileUploadState.length === 0}>
@@ -53,11 +67,54 @@ export function UploadedFiles({
                 {fileUploadState.map((file) => (
                   <div className={styles.file} key={file.key}>
                     <div className={styles.file_name}>
-                      {file.fileDir}
-                      {file.fileName}
+                      <Form>
+                        <Form.Group>
+                          <Form.Group.Label column sm={3}>
+                            File name
+                          </Form.Group.Label>
+                          <Col sm={9}>
+                            <Form.Group.Input
+                              type="text"
+                              placeholder="File name"
+                              defaultValue={file.fileName}
+                              onChange={(event: FormEvent<HTMLInputElement>) =>
+                                updateFileName(file, event.currentTarget.value)
+                              }
+                            />
+                          </Col>
+                        </Form.Group>
+                        <Form.Group>
+                          <Form.Group.Label column sm={3}>
+                            File path
+                          </Form.Group.Label>
+                          <Col sm={9}>
+                            <Form.Group.Input
+                              type="text"
+                              placeholder="File path"
+                              defaultValue={file.fileDir}
+                              onChange={(event: FormEvent<HTMLInputElement>) =>
+                                updateFileDir(file, event.currentTarget.value)
+                              }
+                            />
+                          </Col>
+                        </Form.Group>
+                        <Form.Group>
+                          <Form.Group.Label column sm={3}>
+                            Description
+                          </Form.Group.Label>
+                          <Col sm={9}>
+                            <Form.Group.TextArea
+                              defaultValue={file.description}
+                              onChange={(event: FormEvent<HTMLInputElement>) =>
+                                updateFileDescription(file, event.currentTarget.value)
+                              }
+                            />
+                          </Col>
+                        </Form.Group>
+                      </Form>
                     </div>
                     <div className={styles.file_size}>{file.fileSizeString}</div>
-                    <div className={styles.upload_progress}>{null}</div>
+                    <div>{null}</div>
                     <div className={styles.cancel_upload}>
                       <Button
                         variant="secondary"

From 5228ce955460ae886df7e469c0362ba93ba111a9 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 17:15:41 +0200
Subject: [PATCH 18/96] restricted and tags edit

---
 src/files/domain/models/FileUploadState.ts    | 10 ++++--
 .../FileJSDataverseRepository.ts              |  2 +-
 .../upload-dataset-files/UploadedFiles.tsx    | 34 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/files/domain/models/FileUploadState.ts b/src/files/domain/models/FileUploadState.ts
index f581daec4..854cb3035 100644
--- a/src/files/domain/models/FileUploadState.ts
+++ b/src/files/domain/models/FileUploadState.ts
@@ -15,6 +15,8 @@ export interface FileUploadState {
   fileType: string
   key: string
   description?: string
+  tags: string[]
+  restricted: boolean
 }
 
 export interface FileUploaderState {
@@ -40,7 +42,9 @@ export class FileUploadTools {
         fileName: file.name,
         fileDir: this.toDir(file.webkitRelativePath),
         fileType: file.type,
-        key: key
+        key: key,
+        tags: [],
+        restricted: false
       }
       newState.set(key, newValue)
     })
@@ -68,7 +72,9 @@ export class FileUploadTools {
       fileName: file.name,
       fileDir: this.toDir(file.webkitRelativePath),
       fileType: file.type,
-      key: this.key(file)
+      key: this.key(file),
+      tags: [],
+      restricted: false
     }
   }
 
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index b588390ce..129e58bcf 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -262,7 +262,7 @@ export class FileJSDataverseRepository implements FileRepository {
         file: {
           lastModified: file.fileLastModified,
           name: file.fileName,
-          webkitRelativePath: file.fileDir ? (file.fileDir + '/' + file.fileName) : file.fileName,
+          webkitRelativePath: file.fileDir ? file.fileDir + '/' + file.fileName : file.fileName,
           size: file.fileSize,
           type: file.fileType,
           arrayBuffer: function (): Promise<ArrayBuffer> {
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index c3341fe55..659dc2ef0 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,5 +1,5 @@
 import { Button, Card, Col, Form } from '@iqss/dataverse-design-system'
-import { X } from 'react-bootstrap-icons'
+import { Plus, X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
 import { FormEvent, useState } from 'react'
@@ -42,6 +42,15 @@ export function UploadedFiles({
     file.description = updated
     updateFile(file)
   }
+  const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
+    file.restricted = updated
+    updateFile(file)
+    // TODO: show dialog for restriction
+  }
+
+  const addTag = (file: FileUploadState) => {
+    // TODO: show dialog for tag
+  }
 
   return (
     <div hidden={fileUploadState.length === 0}>
@@ -111,6 +120,29 @@ export function UploadedFiles({
                             />
                           </Col>
                         </Form.Group>
+                        <Form.Group>
+                          <Form.Group.Label column sm={3}>
+                            Restricted
+                          </Form.Group.Label>
+                          <Col sm={9}>
+                            <Form.Group.Checkbox
+                              label=""
+                              id={'restricted-' + file.key}
+                              defaultChecked={file.restricted}
+                              onChange={(event: FormEvent<HTMLInputElement>) =>
+                                updateFileRestricted(file, event.currentTarget.checked)
+                              }
+                            />
+                          </Col>
+                        </Form.Group>
+                        <Button
+                          variant="secondary"
+                          {...{ size: 'sm' }}
+                          withSpacing
+                          onClick={() => addTag(file)}>
+                          <Plus className={styles.icon} title="Add tag" />
+                          Tag
+                        </Button>
                       </Form>
                     </div>
                     <div className={styles.file_size}>{file.fileSizeString}</div>

From 1d163e7922bf249cd983ddcac976b609b2072380 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 21:13:13 +0200
Subject: [PATCH 19/96] css tweaks

---
 .../FileUploader.module.scss                  | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index feef43082..0da48a99c 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -9,6 +9,16 @@
     grid-template-columns: repeat(4, auto);
 }
 
+.file:nth-of-type(even)>div{
+    padding: 0.5rem;
+    background-color: #F0F0F0;
+}
+
+.file:nth-of-type(odd)>div{
+    padding: 0.5rem;
+    background-color: white;
+}
+
 .file {
     display: contents;
 }
@@ -28,13 +38,12 @@
 }
 
 .cancel_upload {
-    padding: 0.25em;
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem;
 }
 
 .upload_progress {
-    width: 10em;
-    margin-top: 0.25em;
-    padding: 0.25em;
+    min-width: 10em;
 }
 
 .icon {
@@ -50,4 +59,4 @@
 
 .uploaded {
     padding-left: 1em;
-}
+}
\ No newline at end of file

From 990023725152bad9b2f1f73c8e3ee7624f0199dc Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 18 Jun 2024 21:27:12 +0200
Subject: [PATCH 20/96] fixed tag button

---
 .../upload-dataset-files/UploadedFiles.tsx    | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 659dc2ef0..c8eda5e01 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -44,12 +44,13 @@ export function UploadedFiles({
   }
   const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
     file.restricted = updated
-    updateFile(file)
     // TODO: show dialog for restriction
+    updateFile(file)
   }
 
   const addTag = (file: FileUploadState) => {
     // TODO: show dialog for tag
+    updateFile(file)
   }
 
   return (
@@ -135,15 +136,15 @@ export function UploadedFiles({
                             />
                           </Col>
                         </Form.Group>
-                        <Button
-                          variant="secondary"
-                          {...{ size: 'sm' }}
-                          withSpacing
-                          onClick={() => addTag(file)}>
-                          <Plus className={styles.icon} title="Add tag" />
-                          Tag
-                        </Button>
                       </Form>
+                      <Button
+                        variant="secondary"
+                        {...{ size: 'sm' }}
+                        withSpacing
+                        onClick={() => addTag(file)}>
+                        <Plus className={styles.icon} title="Add tag" />
+                        Tag
+                      </Button>
                     </div>
                     <div className={styles.file_size}>{file.fileSizeString}</div>
                     <div>{null}</div>

From bf2cddc78682d3026c638ad4aa2cb3c686f35ba5 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Wed, 19 Jun 2024 10:45:07 +0200
Subject: [PATCH 21/96] file selection

---
 .../FileUploader.module.scss                  | 10 ++++++-
 .../upload-dataset-files/UploadedFiles.tsx    | 29 +++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 0da48a99c..b596d8b8a 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -11,7 +11,7 @@
 
 .file:nth-of-type(even)>div{
     padding: 0.5rem;
-    background-color: #F0F0F0;
+    background-color: #f8f9fc;
 }
 
 .file:nth-of-type(odd)>div{
@@ -23,6 +23,14 @@
     display: contents;
 }
 
+.selected_file {
+    display: contents;
+}
+
+.selected_file>div {
+    background-color: #ffc!important;
+}
+
 .file_name {
     padding: 0.25em;
 }
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index c8eda5e01..28f5d1438 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,8 +1,9 @@
 import { Button, Card, Col, Form } from '@iqss/dataverse-design-system'
+import cn from 'classnames'
 import { Plus, X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
-import { FormEvent, useState } from 'react'
+import { FormEvent, useState, MouseEvent } from 'react'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -23,6 +24,7 @@ export function UploadedFiles({
   addFiles,
   updateFile
 }: DatasetFilesProps) {
+  const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [saving, setSaving] = useState(false)
   const save = () => {
     setSaving(true)
@@ -47,11 +49,27 @@ export function UploadedFiles({
     // TODO: show dialog for restriction
     updateFile(file)
   }
-
   const addTag = (file: FileUploadState) => {
     // TODO: show dialog for tag
     updateFile(file)
   }
+  const clicked = (event: MouseEvent<HTMLDivElement, unknown>, file: FileUploadState) => {
+    const classList = (event.target as HTMLDivElement).classList
+    if (
+      !classList.contains('form-control') &&
+      !classList.contains('btn') &&
+      !classList.contains('form-check-input')
+    ) {
+      setSelected((current) => {
+        if (current.has(file)) {
+          current.delete(file)
+        } else {
+          current.add(file)
+        }
+        return new Set<FileUploadState>(current)
+      })
+    }
+  }
 
   return (
     <div hidden={fileUploadState.length === 0}>
@@ -75,7 +93,12 @@ export function UploadedFiles({
             {fileUploadState.length > 0 ? (
               <div className={styles.files}>
                 {fileUploadState.map((file) => (
-                  <div className={styles.file} key={file.key}>
+                  <div
+                    className={cn(styles.file, {
+                      [styles.selected_file]: selected.has(file)
+                    })}
+                    key={file.key}
+                    onClick={(event) => clicked(event, file)}>
                     <div className={styles.file_name}>
                       <Form>
                         <Form.Group>

From fda7c639ebee437ed05192764c1f05852dce96ed Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Wed, 19 Jun 2024 10:49:44 +0200
Subject: [PATCH 22/96] lint fix

---
 .../upload-dataset-files/FileUploader.module.scss         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index b596d8b8a..5352f64f6 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -9,6 +9,10 @@
     grid-template-columns: repeat(4, auto);
 }
 
+.selected_file>div {
+    background-color: #ffc!important;
+}
+
 .file:nth-of-type(even)>div{
     padding: 0.5rem;
     background-color: #f8f9fc;
@@ -27,10 +31,6 @@
     display: contents;
 }
 
-.selected_file>div {
-    background-color: #ffc!important;
-}
-
 .file_name {
     padding: 0.25em;
 }

From 046f0161098a12365049c3b4483f399414c23062 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Wed, 19 Jun 2024 12:56:56 +0200
Subject: [PATCH 23/96] select actions

---
 .../FileUploader.module.scss                  |  9 +-
 .../UploadDatasetFiles.tsx                    | 16 ++--
 .../upload-dataset-files/UploadedFiles.tsx    | 90 +++++++++++++++----
 3 files changed, 88 insertions(+), 27 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 5352f64f6..913576981 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -58,6 +58,11 @@
     display: inline-block;
 }
 
+.icon_pencil {
+    margin-right: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
 .info {
     padding: 0.5em;
     color: $dv-subtext-color;
@@ -65,6 +70,8 @@
     text-align: center;
 }
 
-.uploaded {
+.selected {
+    display: inline-flex;
+    align-items: center;
     padding-left: 1em;
 }
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index ceaaefe77..4396451fa 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -107,16 +107,11 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     setState(FileUploadTools.removed(file, fileUploaderState))
   }
 
-  const deleteFile = (fileUploadState: FileUploadState) => {
+  const updateFiles = (fileUploadState: FileUploadState[]) => {
     setState((x) => {
-      fileUploadState.removed = true
-      return { state: x.state, uploaded: x.uploaded }
-    })
-  }
-
-  const updateFile = (fileUploadState: FileUploadState) => {
-    setState((x) => {
-      x.state.set(fileUploadState.key, fileUploadState)
+      fileUploadState.forEach((file) => {
+        x.state.set(file.key, file)
+      })
       return { state: x.state, uploaded: x.uploaded }
     })
   }
@@ -178,10 +173,9 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
               fileUploadState={fileUploaderState.uploaded}
               cancelTitle={'Delete'}
               saveDisabled={saveDisabled()}
-              deleteFile={deleteFile}
+              updateFiles={updateFiles}
               cleanup={cleanAllState}
               addFiles={addFiles}
-              updateFile={updateFile}
             />
           </article>
         </>
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 28f5d1438..79148c590 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,6 +1,13 @@
-import { Button, Card, Col, Form } from '@iqss/dataverse-design-system'
+import {
+  Button,
+  Card,
+  Col,
+  DropdownButton,
+  DropdownButtonItem,
+  Form
+} from '@iqss/dataverse-design-system'
 import cn from 'classnames'
-import { Plus, X } from 'react-bootstrap-icons'
+import { PencilFill, Plus, X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
@@ -9,20 +16,18 @@ interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
   cancelTitle: string
   saveDisabled: boolean
-  deleteFile: (file: FileUploadState) => void
+  updateFiles: (file: FileUploadState[]) => void
   cleanup: () => void
   addFiles: (fileUploadState: FileUploadState[]) => void
-  updateFile: (file: FileUploadState) => void
 }
 
 export function UploadedFiles({
   fileUploadState,
   cancelTitle,
   saveDisabled,
-  deleteFile,
+  updateFiles,
   cleanup,
-  addFiles,
-  updateFile
+  addFiles
 }: DatasetFilesProps) {
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [saving, setSaving] = useState(false)
@@ -34,24 +39,32 @@ export function UploadedFiles({
   }
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
-    updateFile(file)
+    updateFiles([file])
   }
   const updateFileDir = (file: FileUploadState, updated: string) => {
     file.fileDir = updated
-    updateFile(file)
+    updateFiles([file])
   }
   const updateFileDescription = (file: FileUploadState, updated: string) => {
     file.description = updated
-    updateFile(file)
+    updateFiles([file])
   }
   const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
     file.restricted = updated
     // TODO: show dialog for restriction
-    updateFile(file)
+    updateFiles([file])
   }
   const addTag = (file: FileUploadState) => {
     // TODO: show dialog for tag
-    updateFile(file)
+    updateFiles([file])
+  }
+  const deleteFile = (file: FileUploadState) => {
+    file.removed = true
+    setSelected((x) => {
+      x.delete(file)
+      return x
+    })
+    updateFiles([file])
   }
   const clicked = (event: MouseEvent<HTMLDivElement, unknown>, file: FileUploadState) => {
     const classList = (event.target as HTMLDivElement).classList
@@ -70,6 +83,38 @@ export function UploadedFiles({
       })
     }
   }
+  const all = () => {
+    setSelected((current) => {
+      if (current.size === fileUploadState.length) {
+        return new Set<FileUploadState>()
+      } else {
+        return new Set<FileUploadState>(fileUploadState)
+      }
+    })
+  }
+  const restrictSelected = () => {
+    // TODO: show dialog for restriction
+    const res = Array.from(selected).map((x) => {
+      x.restricted = true
+      return x
+    })
+    updateFiles(res)
+  }
+  const unrestrictSelected = () => {
+    const res = Array.from(selected).map((x) => {
+      x.restricted = false
+      return x
+    })
+    updateFiles(res)
+  }
+  const deleteSelected = () => {
+    const res = Array.from(selected).map((x) => {
+      x.removed = true
+      return x
+    })
+    setSelected(new Set<FileUploadState>())
+    updateFiles(res)
+  }
 
   return (
     <div hidden={fileUploadState.length === 0}>
@@ -81,11 +126,26 @@ export function UploadedFiles({
           <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
             Cancel
           </Button>
-          <span className={styles.uploaded}>
+          <Button withSpacing variant="link" onClick={all} disabled={saving}>
+            {' '}
+            {fileUploadState.length}
+            {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
+          </Button>
+          <span className={styles.selected} hidden={selected.size === 0}>
             <span>
-              {fileUploadState.length}
-              {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
+              {selected.size}
+              {selected.size === 1 ? ' file selected' : ' files selected'}
             </span>
+            <DropdownButton
+              variant="secondary"
+              withSpacing
+              icon={<PencilFill className={styles.icon_pencil} />}
+              id={'edit-files'}
+              title={'Edit files'}>
+              <DropdownButtonItem onClick={restrictSelected}>{'Restrict'}</DropdownButtonItem>
+              <DropdownButtonItem onClick={unrestrictSelected}>{'Unrestrict'}</DropdownButtonItem>
+              <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
+            </DropdownButton>
           </span>
         </Card.Header>
         <Card.Body>

From 8ebeda7d90f989c6cd1acb2a3f1281e8732c5b42 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Wed, 19 Jun 2024 16:40:20 +0200
Subject: [PATCH 24/96] checkox fix

---
 src/sections/upload-dataset-files/UploadedFiles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 79148c590..dae278d4f 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -212,7 +212,7 @@ export function UploadedFiles({
                             <Form.Group.Checkbox
                               label=""
                               id={'restricted-' + file.key}
-                              defaultChecked={file.restricted}
+                              checked={file.restricted}
                               onChange={(event: FormEvent<HTMLInputElement>) =>
                                 updateFileRestricted(file, event.currentTarget.checked)
                               }

From f73c9a57c0b11fc34263b827d6a9ae977cc9412c Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Wed, 19 Jun 2024 19:08:54 +0200
Subject: [PATCH 25/96] select click fix

---
 .../upload-dataset-files/UploadedFiles.tsx       | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index dae278d4f..1468faa3a 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -67,12 +67,16 @@ export function UploadedFiles({
     updateFiles([file])
   }
   const clicked = (event: MouseEvent<HTMLDivElement, unknown>, file: FileUploadState) => {
-    const classList = (event.target as HTMLDivElement).classList
-    if (
-      !classList.contains('form-control') &&
-      !classList.contains('btn') &&
-      !classList.contains('form-check-input')
-    ) {
+    const classList = Array.from((event.target as HTMLDivElement).classList)
+    const parent = (event.target as HTMLDivElement).parentElement
+    if (parent) {
+      classList.push(...Array.from(parent.classList))
+      if (parent.parentElement) {
+        classList.push(...Array.from(parent.parentElement.classList))
+      }
+    }
+    console.log(classList)
+    if (!classList.some((x) => x === 'form-control' || x === 'btn' || x === 'form-check-input')) {
       setSelected((current) => {
         if (current.has(file)) {
           current.delete(file)

From 921ba0c62c5ff235adb636c26f79665f2f5201cc Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Wed, 19 Jun 2024 20:53:28 +0200
Subject: [PATCH 26/96] improved file list design

---
 .../upload-dataset-files/UploadedFiles.tsx    | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 1468faa3a..49524b65b 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -4,7 +4,8 @@ import {
   Col,
   DropdownButton,
   DropdownButtonItem,
-  Form
+  Form,
+  SelectMultiple
 } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
 import { PencilFill, Plus, X } from 'react-bootstrap-icons'
@@ -31,6 +32,7 @@ export function UploadedFiles({
 }: DatasetFilesProps) {
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [saving, setSaving] = useState(false)
+  const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
   const save = () => {
     setSaving(true)
     addFiles(fileUploadState)
@@ -54,8 +56,8 @@ export function UploadedFiles({
     // TODO: show dialog for restriction
     updateFiles([file])
   }
-  const addTag = (file: FileUploadState) => {
-    // TODO: show dialog for tag
+  const setTags = (file: FileUploadState, tags: string[]) => {
+    file.tags = tags
     updateFiles([file])
   }
   const deleteFile = (file: FileUploadState) => {
@@ -75,8 +77,8 @@ export function UploadedFiles({
         classList.push(...Array.from(parent.parentElement.classList))
       }
     }
-    console.log(classList)
-    if (!classList.some((x) => x === 'form-control' || x === 'btn' || x === 'form-check-input')) {
+    const ignoreClasses = new Set<string>(['form-control', 'btn', 'form-check-input', 'form-check-label', 'dropdown-item', 'dropdown'])
+    if (!classList.some((x) => ignoreClasses.has(x))) {
       setSelected((current) => {
         if (current.has(file)) {
           current.delete(file)
@@ -210,31 +212,27 @@ export function UploadedFiles({
                         </Form.Group>
                         <Form.Group>
                           <Form.Group.Label column sm={3}>
-                            Restricted
+                            Tags
                           </Form.Group.Label>
                           <Col sm={9}>
-                            <Form.Group.Checkbox
-                              label=""
-                              id={'restricted-' + file.key}
-                              checked={file.restricted}
-                              onChange={(event: FormEvent<HTMLInputElement>) =>
-                                updateFileRestricted(file, event.currentTarget.checked)
-                              }
-                            />
+                            <SelectMultiple
+                              options={tags}
+                              onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
                           </Col>
                         </Form.Group>
                       </Form>
-                      <Button
-                        variant="secondary"
-                        {...{ size: 'sm' }}
-                        withSpacing
-                        onClick={() => addTag(file)}>
-                        <Plus className={styles.icon} title="Add tag" />
-                        Tag
-                      </Button>
                     </div>
                     <div className={styles.file_size}>{file.fileSizeString}</div>
-                    <div>{null}</div>
+                    <div>
+                      <Form.Group.Checkbox
+                        label="Restricted"
+                        id={'restricted-' + file.key}
+                        checked={file.restricted}
+                        onChange={(event: FormEvent<HTMLInputElement>) =>
+                          updateFileRestricted(file, event.currentTarget.checked)
+                        }
+                      />
+                    </div>
                     <div className={styles.cancel_upload}>
                       <Button
                         variant="secondary"

From d378b152eae9888d15870733b48bff5b0322064b Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Wed, 19 Jun 2024 20:58:50 +0200
Subject: [PATCH 27/96] rename class in css: selected -> selected_files_info

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 2 +-
 src/sections/upload-dataset-files/UploadedFiles.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 913576981..5f652fe53 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -70,7 +70,7 @@
     text-align: center;
 }
 
-.selected {
+.selected_files_info {
     display: inline-flex;
     align-items: center;
     padding-left: 1em;
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 49524b65b..416a0dece 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -137,7 +137,7 @@ export function UploadedFiles({
             {fileUploadState.length}
             {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
           </Button>
-          <span className={styles.selected} hidden={selected.size === 0}>
+          <span className={styles.selected_files_info} hidden={selected.size === 0}>
             <span>
               {selected.size}
               {selected.size === 1 ? ' file selected' : ' files selected'}

From 9e2bd2a758807913aa07b3e6d2d6c45f6d4ce7fc Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Wed, 19 Jun 2024 21:01:40 +0200
Subject: [PATCH 28/96] code format

---
 src/sections/upload-dataset-files/UploadedFiles.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 416a0dece..61285dbbc 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -8,7 +8,7 @@ import {
   SelectMultiple
 } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
-import { PencilFill, Plus, X } from 'react-bootstrap-icons'
+import { PencilFill, X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
@@ -33,6 +33,14 @@ export function UploadedFiles({
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [saving, setSaving] = useState(false)
   const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
+  const ignoreClasses = new Set<string>([
+    'form-control',
+    'btn',
+    'form-check-input',
+    'form-check-label',
+    'dropdown-item',
+    'dropdown'
+  ])
   const save = () => {
     setSaving(true)
     addFiles(fileUploadState)
@@ -77,7 +85,6 @@ export function UploadedFiles({
         classList.push(...Array.from(parent.parentElement.classList))
       }
     }
-    const ignoreClasses = new Set<string>(['form-control', 'btn', 'form-check-input', 'form-check-label', 'dropdown-item', 'dropdown'])
     if (!classList.some((x) => ignoreClasses.has(x))) {
       setSelected((current) => {
         if (current.has(file)) {

From 91f744d2968f305310903f67261e08d5c1b7f3c2 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 12:55:23 +0200
Subject: [PATCH 29/96] added tag options form and refactored code

---
 .../FileUploader.module.scss                  |  11 -
 .../upload-dataset-files/UploadedFiles.tsx    | 237 ++++--------------
 .../file-form/FileForm.module.scss            |   5 +
 .../file-form/FileForm.tsx                    |  98 ++++++++
 .../files-header/FilesHeader.module.scss      |  12 +
 .../files-header/FilesHeader.tsx              | 102 ++++++++
 .../tag-options/TagOptions.module.scss        |  19 ++
 .../tag-options/TagOptions.tsx                |  63 +++++
 8 files changed, 349 insertions(+), 198 deletions(-)
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 5f652fe53..e7db32cad 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -58,20 +58,9 @@
     display: inline-block;
 }
 
-.icon_pencil {
-    margin-right: 0.3rem;
-  margin-bottom: 0.2rem;
-}
-
 .info {
     padding: 0.5em;
     color: $dv-subtext-color;
     font-size: 1.3em;
     text-align: center;
 }
-
-.selected_files_info {
-    display: inline-flex;
-    align-items: center;
-    padding-left: 1em;
-}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index 61285dbbc..b2be1e9e6 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,17 +1,16 @@
 import {
   Button,
   Card,
-  Col,
-  DropdownButton,
-  DropdownButtonItem,
-  Form,
-  SelectMultiple
+  Form
 } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
-import { PencilFill, X } from 'react-bootstrap-icons'
+import { X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 import styles from './FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
+import { FileForm } from './uploaded-files-list/file-form/FileForm'
+import { TagOptions } from './uploaded-files-list/tag-options/TagOptions'
+import { FilesHeader } from './uploaded-files-list/files-header/FilesHeader'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -31,7 +30,6 @@ export function UploadedFiles({
   addFiles
 }: DatasetFilesProps) {
   const [selected, setSelected] = useState(new Set<FileUploadState>())
-  const [saving, setSaving] = useState(false)
   const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
   const ignoreClasses = new Set<string>([
     'form-control',
@@ -41,33 +39,11 @@ export function UploadedFiles({
     'dropdown-item',
     'dropdown'
   ])
-  const save = () => {
-    setSaving(true)
-    addFiles(fileUploadState)
-    cleanup()
-    setSaving(false)
-  }
-  const updateFileName = (file: FileUploadState, updated: string) => {
-    file.fileName = updated
-    updateFiles([file])
-  }
-  const updateFileDir = (file: FileUploadState, updated: string) => {
-    file.fileDir = updated
-    updateFiles([file])
-  }
-  const updateFileDescription = (file: FileUploadState, updated: string) => {
-    file.description = updated
-    updateFiles([file])
-  }
   const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
     file.restricted = updated
     // TODO: show dialog for restriction
     updateFiles([file])
   }
-  const setTags = (file: FileUploadState, tags: string[]) => {
-    file.tags = tags
-    updateFiles([file])
-  }
   const deleteFile = (file: FileUploadState) => {
     file.removed = true
     setSelected((x) => {
@@ -96,166 +72,53 @@ export function UploadedFiles({
       })
     }
   }
-  const all = () => {
-    setSelected((current) => {
-      if (current.size === fileUploadState.length) {
-        return new Set<FileUploadState>()
-      } else {
-        return new Set<FileUploadState>(fileUploadState)
-      }
-    })
-  }
-  const restrictSelected = () => {
-    // TODO: show dialog for restriction
-    const res = Array.from(selected).map((x) => {
-      x.restricted = true
-      return x
-    })
-    updateFiles(res)
-  }
-  const unrestrictSelected = () => {
-    const res = Array.from(selected).map((x) => {
-      x.restricted = false
-      return x
-    })
-    updateFiles(res)
-  }
-  const deleteSelected = () => {
-    const res = Array.from(selected).map((x) => {
-      x.removed = true
-      return x
-    })
-    setSelected(new Set<FileUploadState>())
-    updateFiles(res)
-  }
 
   return (
-    <div hidden={fileUploadState.length === 0}>
-      <Card>
-        <Card.Header>
-          <Button withSpacing onClick={save} disabled={saveDisabled}>
-            Save
-          </Button>
-          <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
-            Cancel
-          </Button>
-          <Button withSpacing variant="link" onClick={all} disabled={saving}>
-            {' '}
-            {fileUploadState.length}
-            {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
-          </Button>
-          <span className={styles.selected_files_info} hidden={selected.size === 0}>
-            <span>
-              {selected.size}
-              {selected.size === 1 ? ' file selected' : ' files selected'}
-            </span>
-            <DropdownButton
-              variant="secondary"
-              withSpacing
-              icon={<PencilFill className={styles.icon_pencil} />}
-              id={'edit-files'}
-              title={'Edit files'}>
-              <DropdownButtonItem onClick={restrictSelected}>{'Restrict'}</DropdownButtonItem>
-              <DropdownButtonItem onClick={unrestrictSelected}>{'Unrestrict'}</DropdownButtonItem>
-              <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
-            </DropdownButton>
-          </span>
-        </Card.Header>
-        <Card.Body>
-          <div>
-            {fileUploadState.length > 0 ? (
-              <div className={styles.files}>
-                {fileUploadState.map((file) => (
-                  <div
-                    className={cn(styles.file, {
-                      [styles.selected_file]: selected.has(file)
-                    })}
-                    key={file.key}
-                    onClick={(event) => clicked(event, file)}>
-                    <div className={styles.file_name}>
-                      <Form>
-                        <Form.Group>
-                          <Form.Group.Label column sm={3}>
-                            File name
-                          </Form.Group.Label>
-                          <Col sm={9}>
-                            <Form.Group.Input
-                              type="text"
-                              placeholder="File name"
-                              defaultValue={file.fileName}
-                              onChange={(event: FormEvent<HTMLInputElement>) =>
-                                updateFileName(file, event.currentTarget.value)
-                              }
-                            />
-                          </Col>
-                        </Form.Group>
-                        <Form.Group>
-                          <Form.Group.Label column sm={3}>
-                            File path
-                          </Form.Group.Label>
-                          <Col sm={9}>
-                            <Form.Group.Input
-                              type="text"
-                              placeholder="File path"
-                              defaultValue={file.fileDir}
-                              onChange={(event: FormEvent<HTMLInputElement>) =>
-                                updateFileDir(file, event.currentTarget.value)
-                              }
-                            />
-                          </Col>
-                        </Form.Group>
-                        <Form.Group>
-                          <Form.Group.Label column sm={3}>
-                            Description
-                          </Form.Group.Label>
-                          <Col sm={9}>
-                            <Form.Group.TextArea
-                              defaultValue={file.description}
-                              onChange={(event: FormEvent<HTMLInputElement>) =>
-                                updateFileDescription(file, event.currentTarget.value)
-                              }
-                            />
-                          </Col>
-                        </Form.Group>
-                        <Form.Group>
-                          <Form.Group.Label column sm={3}>
-                            Tags
-                          </Form.Group.Label>
-                          <Col sm={9}>
-                            <SelectMultiple
-                              options={tags}
-                              onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
-                          </Col>
-                        </Form.Group>
-                      </Form>
-                    </div>
-                    <div className={styles.file_size}>{file.fileSizeString}</div>
-                    <div>
-                      <Form.Group.Checkbox
-                        label="Restricted"
-                        id={'restricted-' + file.key}
-                        checked={file.restricted}
-                        onChange={(event: FormEvent<HTMLInputElement>) =>
-                          updateFileRestricted(file, event.currentTarget.checked)
-                        }
-                      />
-                    </div>
-                    <div className={styles.cancel_upload}>
-                      <Button
-                        variant="secondary"
-                        {...{ size: 'sm' }}
-                        withSpacing
-                        onClick={() => deleteFile(file)}>
-                        <X className={styles.icon} title={cancelTitle} />
-                      </Button>
+    <>
+      <TagOptions tags={tags} setTagOptions={setTagOptions} />
+      <div hidden={fileUploadState.length === 0}>
+        <Card>
+          <FilesHeader fileUploadState={fileUploadState} saveDisabled={saveDisabled} updateFiles={updateFiles} cleanup={cleanup} addFiles={addFiles} selected={selected} setSelected={setSelected}/>
+          <Card.Body>
+            <div>
+              {fileUploadState.length > 0 ? (
+                <div className={styles.files}>
+                  {fileUploadState.map((file) => (
+                    <div
+                      className={cn(styles.file, {
+                        [styles.selected_file]: selected.has(file)
+                      })}
+                      key={file.key}
+                      onClick={(event) => clicked(event, file)}>
+                      <FileForm file={file} updateFiles={updateFiles} tags={tags} />
+                      <div className={styles.file_size}>{file.fileSizeString}</div>
+                      <div>
+                        <Form.Group.Checkbox
+                          label="Restricted"
+                          id={'restricted-' + file.key}
+                          checked={file.restricted}
+                          onChange={(event: FormEvent<HTMLInputElement>) =>
+                            updateFileRestricted(file, event.currentTarget.checked)
+                          }
+                        />
+                      </div>
+                      <div className={styles.cancel_upload}>
+                        <Button
+                          variant="secondary"
+                          {...{ size: 'sm' }}
+                          withSpacing
+                          onClick={() => deleteFile(file)}>
+                          <X className={styles.icon} title={cancelTitle} />
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                ))}
-              </div>
-            ) : null}
-          </div>
-        </Card.Body>
-      </Card>
-    </div>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </Card.Body>
+        </Card>
+      </div>
+    </>
   )
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
new file mode 100644
index 000000000..6772b8dde
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
@@ -0,0 +1,5 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.file_form {
+    padding: 0.25em;
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
new file mode 100644
index 000000000..ec46e08f2
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -0,0 +1,98 @@
+import {
+  Col,
+  Form,
+  SelectMultiple
+} from '@iqss/dataverse-design-system'
+import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
+import styles from './FileForm.module.scss'
+import { FormEvent } from 'react'
+
+interface FileFormProps {
+  file: FileUploadState
+  updateFiles: (file: FileUploadState[]) => void
+  tags: string[]
+}
+
+export function FileForm({
+  file,
+  updateFiles,
+  tags
+}: FileFormProps) {
+  const updateFileName = (file: FileUploadState, updated: string) => {
+    file.fileName = updated
+    updateFiles([file])
+  }
+  const updateFileDir = (file: FileUploadState, updated: string) => {
+    file.fileDir = updated
+    updateFiles([file])
+  }
+  const updateFileDescription = (file: FileUploadState, updated: string) => {
+    file.description = updated
+    updateFiles([file])
+  }
+  const setTags = (file: FileUploadState, tags: string[]) => {
+    file.tags = tags
+    updateFiles([file])
+  }
+
+
+  return (
+    <div className={styles.file_form}>
+      <Form>
+        <Form.Group>
+          <Form.Group.Label column sm={3}>
+            File name
+          </Form.Group.Label>
+          <Col sm={9}>
+            <Form.Group.Input
+              type="text"
+              placeholder="File name"
+              defaultValue={file.fileName}
+              onChange={(event: FormEvent<HTMLInputElement>) =>
+                updateFileName(file, event.currentTarget.value)
+              }
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group>
+          <Form.Group.Label column sm={3}>
+            File path
+          </Form.Group.Label>
+          <Col sm={9}>
+            <Form.Group.Input
+              type="text"
+              placeholder="File path"
+              defaultValue={file.fileDir}
+              onChange={(event: FormEvent<HTMLInputElement>) =>
+                updateFileDir(file, event.currentTarget.value)
+              }
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group>
+          <Form.Group.Label column sm={3}>
+            Description
+          </Form.Group.Label>
+          <Col sm={9}>
+            <Form.Group.TextArea
+              defaultValue={file.description}
+              onChange={(event: FormEvent<HTMLInputElement>) =>
+                updateFileDescription(file, event.currentTarget.value)
+              }
+            />
+          </Col>
+        </Form.Group>
+        <Form.Group>
+          <Form.Group.Label column sm={3}>
+            Tags
+          </Form.Group.Label>
+          <Col sm={9}>
+            <SelectMultiple
+              options={tags}
+              onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
+          </Col>
+        </Form.Group>
+      </Form>
+    </div>
+  )
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
new file mode 100644
index 000000000..fea1090b4
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -0,0 +1,12 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.icon_pencil {
+    margin-right: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
+.selected_files_info {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 1em;
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
new file mode 100644
index 000000000..3ffce2736
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -0,0 +1,102 @@
+import {
+  Button,
+  Card,
+  DropdownButton,
+  DropdownButtonItem
+} from '@iqss/dataverse-design-system'
+import { PencilFill } from 'react-bootstrap-icons'
+import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
+import styles from './FilesHeader.module.scss'
+import { Dispatch, SetStateAction, useState } from 'react'
+
+interface FilesHeaderProps {
+  fileUploadState: FileUploadState[]
+  selected: Set<FileUploadState>
+  setSelected: Dispatch<SetStateAction<Set<FileUploadState>>>
+  saveDisabled: boolean
+  updateFiles: (file: FileUploadState[]) => void
+  cleanup: () => void
+  addFiles: (fileUploadState: FileUploadState[]) => void
+}
+
+export function FilesHeader({
+  fileUploadState,
+  selected,
+  setSelected,
+  saveDisabled,
+  updateFiles,
+  cleanup,
+  addFiles
+}: FilesHeaderProps) {
+  const [saving, setSaving] = useState(false)
+  const save = () => {
+    setSaving(true)
+    addFiles(fileUploadState)
+    cleanup()
+    setSaving(false)
+  }
+  const all = () => {
+    setSelected(current => {
+      if (current.size === fileUploadState.length) {
+        return new Set<FileUploadState>()
+      } else {
+        return new Set<FileUploadState>(fileUploadState)
+      }
+    })
+  }
+  const restrictSelected = () => {
+    // TODO: show dialog for restriction
+    const res = Array.from(selected).map((x) => {
+      x.restricted = true
+      return x
+    })
+    updateFiles(res)
+  }
+  const unrestrictSelected = () => {
+    const res = Array.from(selected).map((x) => {
+      x.restricted = false
+      return x
+    })
+    updateFiles(res)
+  }
+  const deleteSelected = () => {
+    const res = Array.from(selected).map((x) => {
+      x.removed = true
+      return x
+    })
+    setSelected(new Set<FileUploadState>())
+    updateFiles(res)
+  }
+
+  return (
+    <Card.Header>
+      <Button withSpacing onClick={save} disabled={saveDisabled}>
+        Save
+      </Button>
+      <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
+        Cancel
+      </Button>
+      <Button withSpacing variant="link" onClick={all} disabled={saving}>
+        {' '}
+        {fileUploadState.length}
+        {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
+      </Button>
+      <span className={styles.selected_files_info} hidden={selected.size === 0}>
+        <span>
+          {selected.size}
+          {selected.size === 1 ? ' file selected' : ' files selected'}
+        </span>
+        <DropdownButton
+          variant="secondary"
+          withSpacing
+          icon={<PencilFill className={styles.icon_pencil} />}
+          id={'edit-files'}
+          title={'Edit files'}>
+          <DropdownButtonItem onClick={restrictSelected}>{'Restrict'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={unrestrictSelected}>{'Unrestrict'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
+        </DropdownButton>
+      </span>
+    </Card.Header>
+  )
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
new file mode 100644
index 000000000..28fdc9e3f
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
@@ -0,0 +1,19 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.tag_options {
+    display: inline-flex;
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+    align-items: center;
+}
+
+.tag_info {
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+    color: $dv-subtext-color;
+    text-align: left;
+}
+
+.apply_button {
+    height: 2.4rem;
+}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
new file mode 100644
index 000000000..8fed0528d
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
@@ -0,0 +1,63 @@
+import {
+  Button,
+  Col,
+  Form
+} from '@iqss/dataverse-design-system'
+import styles from './TagOptions.module.scss'
+import { FormEvent, useState } from 'react'
+
+interface TagOptionsProps {
+  tags: string[]
+  setTagOptions: (newTags: string[]) => void
+}
+
+export function TagOptions({
+  tags,
+  setTagOptions
+}: TagOptionsProps) {
+  const [tag, setTag] = useState('')
+  const addTagOption = () => {
+    console.log(tag)
+    if (tag && !tags.includes(tag)) {
+      setTagOptions([...tags, tag])
+    }
+    console.log(tags)
+  }
+
+  return (
+    <div className={styles.tag_options}>
+      <div>
+        <Form>
+          <Form.Group>
+            <Form.Group.Label column sm={3}>
+              Custom file tag
+            </Form.Group.Label>
+            <Col sm={9}>
+              <div className={styles.tag_info}>Creating a new tag will add it as a tag option for all files in this dataset.</div>
+              <div className="input-group mb-3">
+                <Form.Group.Input
+                  type="text"
+                  placeholder="Add new file tag..."
+                  onChange={(event: FormEvent<HTMLInputElement>) =>
+                    setTag(event.currentTarget.value)
+                  }
+                />
+                <div className="input-group-append">
+                  <Button className={styles.apply_button}
+                    variant="secondary"
+                    type='button'
+                    {...{ size: 'sm' }}
+                    withSpacing
+                    onClick={addTagOption}>
+                    Apply
+                  </Button>
+                </div>
+              </div>
+              <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
+            </Col>
+          </Form.Group>
+        </Form>
+      </div>
+    </div>
+  )
+}

From af9a0d9c242a1adb2b6ff001b54da7ec42824379 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 15:52:50 +0200
Subject: [PATCH 30/96] form field reset after the tag option is added

---
 .../uploaded-files-list/tag-options/TagOptions.tsx              | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
index 8fed0528d..6a830c05f 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
@@ -20,6 +20,7 @@ export function TagOptions({
     console.log(tag)
     if (tag && !tags.includes(tag)) {
       setTagOptions([...tags, tag])
+      setTag('')
     }
     console.log(tags)
   }
@@ -38,6 +39,7 @@ export function TagOptions({
                 <Form.Group.Input
                   type="text"
                   placeholder="Add new file tag..."
+                  value={tag}
                   onChange={(event: FormEvent<HTMLInputElement>) =>
                     setTag(event.currentTarget.value)
                   }

From 7c90fbf70b364ac797d534d6d4ea170e47fbfda0 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 16:40:52 +0200
Subject: [PATCH 31/96] restrict access form

---
 .../FileUploader.module.scss                  |  4 ++
 .../upload-dataset-files/UploadedFiles.tsx    | 10 ++-
 .../files-header/FilesHeader.module.scss      | 10 +--
 .../RestrictionForm.module.scss               | 12 ++++
 .../restriction-form/RestrictionForm.tsx      | 61 +++++++++++++++++++
 .../tag-options/TagOptions.module.scss        |  3 -
 .../tag-options/TagOptions.tsx                |  2 -
 7 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index e7db32cad..542de0c6a 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -64,3 +64,7 @@
     font-size: 1.3em;
     text-align: center;
 }
+
+.forms {
+    padding: 0.5em;
+}
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index b2be1e9e6..f8bc4632e 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -11,6 +11,7 @@ import { FormEvent, useState, MouseEvent } from 'react'
 import { FileForm } from './uploaded-files-list/file-form/FileForm'
 import { TagOptions } from './uploaded-files-list/tag-options/TagOptions'
 import { FilesHeader } from './uploaded-files-list/files-header/FilesHeader'
+import { RestrictionForm } from './uploaded-files-list/restriction-form/RestrictionForm'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -31,6 +32,8 @@ export function UploadedFiles({
 }: DatasetFilesProps) {
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
+  const [terms, setTerms] = useState('')
+  const [requestAccess, setRequestAccess] = useState(true)
   const ignoreClasses = new Set<string>([
     'form-control',
     'btn',
@@ -75,10 +78,13 @@ export function UploadedFiles({
 
   return (
     <>
-      <TagOptions tags={tags} setTagOptions={setTagOptions} />
+      <div className={styles.forms}>
+        <TagOptions tags={tags} setTagOptions={setTagOptions} />
+        <RestrictionForm terms={terms} updateTerms={setTerms} requestAccess={requestAccess} updateRequestAccess={setRequestAccess}/>
+      </div>
       <div hidden={fileUploadState.length === 0}>
         <Card>
-          <FilesHeader fileUploadState={fileUploadState} saveDisabled={saveDisabled} updateFiles={updateFiles} cleanup={cleanup} addFiles={addFiles} selected={selected} setSelected={setSelected}/>
+          <FilesHeader fileUploadState={fileUploadState} saveDisabled={saveDisabled} updateFiles={updateFiles} cleanup={cleanup} addFiles={addFiles} selected={selected} setSelected={setSelected} />
           <Card.Body>
             <div>
               {fileUploadState.length > 0 ? (
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
index fea1090b4..4d240e982 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -1,12 +1,12 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .icon_pencil {
-    margin-right: 0.3rem;
+  margin-right: 0.3rem;
   margin-bottom: 0.2rem;
 }
 
 .selected_files_info {
-    display: inline-flex;
-    align-items: center;
-    padding-left: 1em;
-}
+  display: inline-flex;
+  align-items: center;
+  padding-left: 1em;
+}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
new file mode 100644
index 000000000..3be14f43f
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
@@ -0,0 +1,12 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.restriction_form {
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+}
+
+.restriction_info {
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+    color: $dv-subtext-color;
+}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
new file mode 100644
index 000000000..4c407b0cd
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
@@ -0,0 +1,61 @@
+import {
+  Button,
+  Col,
+  Form
+} from '@iqss/dataverse-design-system'
+import styles from './RestrictionForm.module.scss'
+import { FormEvent, useState } from 'react'
+
+interface RestrictionFormProps {
+  requestAccess: boolean
+  updateRequestAccess: (checked: boolean) => void
+  terms: string
+  updateTerms: (newTerms: string) => void
+}
+
+export function RestrictionForm({
+  requestAccess,
+  updateRequestAccess,
+  terms,
+  updateTerms
+}: RestrictionFormProps) {
+
+  return (
+    <div className={styles.restriction_form}>
+        <div className={styles.restriction_info}>
+          <p>Restricting limits access to published files. People who want to use the restricted files can request access by default. If you disable request access, you must add information about access to the Terms of Access field.</p>
+          <p>Learn about restricting files and dataset access in the User Guide.</p>
+        </div>
+        <Form>
+          <Form.Group>
+            <Form.Group.Label column sm={3}>
+              Request Access
+            </Form.Group.Label>
+            <Col sm={9}>
+              <Form.Group.Checkbox
+                label="Enable access request"
+                id={'requestAccessCB'}
+                checked={requestAccess}
+                onChange={(event: FormEvent<HTMLInputElement>) =>
+                  updateRequestAccess(event.currentTarget.checked)
+                }
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group>
+            <Form.Group.Label column sm={3}>
+              Terms of Access for Restricted Files
+            </Form.Group.Label>
+            <Col sm={9}>
+              <Form.Group.TextArea
+                defaultValue={terms}
+                onChange={(event: FormEvent<HTMLInputElement>) =>
+                  updateTerms(event.currentTarget.value)
+                }
+              />
+            </Col>
+          </Form.Group>
+        </Form>
+    </div>
+  )
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
index 28fdc9e3f..c77639591 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
@@ -1,17 +1,14 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .tag_options {
-    display: inline-flex;
     padding-bottom: 0.5em;
     padding-top: 0.5em;
-    align-items: center;
 }
 
 .tag_info {
     padding-bottom: 0.5em;
     padding-top: 0.5em;
     color: $dv-subtext-color;
-    text-align: left;
 }
 
 .apply_button {
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
index 6a830c05f..c61964d28 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
@@ -27,7 +27,6 @@ export function TagOptions({
 
   return (
     <div className={styles.tag_options}>
-      <div>
         <Form>
           <Form.Group>
             <Form.Group.Label column sm={3}>
@@ -59,7 +58,6 @@ export function TagOptions({
             </Col>
           </Form.Group>
         </Form>
-      </div>
     </div>
   )
 }

From f19d7a14bc5cff2b0cba1412bdcccb762fcd55e3 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 16:51:56 +0200
Subject: [PATCH 32/96] restriction dialog

---
 .../upload-dataset-files/UploadedFiles.tsx    |  28 +++--
 .../file-form/FileForm.tsx                    |  13 +--
 .../files-header/FilesHeader.tsx              |   9 +-
 .../RestrictionForm.module.scss               |   4 +-
 .../restriction-form/RestrictionForm.tsx      | 104 +++++++++++-------
 .../tag-options/TagOptions.module.scss        |   4 +-
 .../tag-options/TagOptions.tsx                |  72 ++++++------
 7 files changed, 123 insertions(+), 111 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/UploadedFiles.tsx
index f8bc4632e..a79efaa32 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadedFiles.tsx
@@ -1,8 +1,4 @@
-import {
-  Button,
-  Card,
-  Form
-} from '@iqss/dataverse-design-system'
+import { Button, Card, Form } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
 import { X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
@@ -34,6 +30,7 @@ export function UploadedFiles({
   const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
+  const [showRestrictionForm, setShowRestrictionForm] = useState(false)
   const ignoreClasses = new Set<string>([
     'form-control',
     'btn',
@@ -44,7 +41,7 @@ export function UploadedFiles({
   ])
   const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
     file.restricted = updated
-    // TODO: show dialog for restriction
+    setShowRestrictionForm(true)
     updateFiles([file])
   }
   const deleteFile = (file: FileUploadState) => {
@@ -80,11 +77,26 @@ export function UploadedFiles({
     <>
       <div className={styles.forms}>
         <TagOptions tags={tags} setTagOptions={setTagOptions} />
-        <RestrictionForm terms={terms} updateTerms={setTerms} requestAccess={requestAccess} updateRequestAccess={setRequestAccess}/>
+        <RestrictionForm
+          terms={terms}
+          updateTerms={setTerms}
+          requestAccess={requestAccess}
+          updateRequestAccess={setRequestAccess}
+          show={showRestrictionForm}
+          setShow={setShowRestrictionForm}
+        />
       </div>
       <div hidden={fileUploadState.length === 0}>
         <Card>
-          <FilesHeader fileUploadState={fileUploadState} saveDisabled={saveDisabled} updateFiles={updateFiles} cleanup={cleanup} addFiles={addFiles} selected={selected} setSelected={setSelected} />
+          <FilesHeader
+            fileUploadState={fileUploadState}
+            saveDisabled={saveDisabled}
+            updateFiles={updateFiles}
+            cleanup={cleanup}
+            addFiles={addFiles}
+            selected={selected}
+            setSelected={setSelected}
+          />
           <Card.Body>
             <div>
               {fileUploadState.length > 0 ? (
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index ec46e08f2..e0c2501d9 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,8 +1,4 @@
-import {
-  Col,
-  Form,
-  SelectMultiple
-} from '@iqss/dataverse-design-system'
+import { Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
 import { FormEvent } from 'react'
@@ -13,11 +9,7 @@ interface FileFormProps {
   tags: string[]
 }
 
-export function FileForm({
-  file,
-  updateFiles,
-  tags
-}: FileFormProps) {
+export function FileForm({ file, updateFiles, tags }: FileFormProps) {
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
     updateFiles([file])
@@ -35,7 +27,6 @@ export function FileForm({
     updateFiles([file])
   }
 
-
   return (
     <div className={styles.file_form}>
       <Form>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 3ffce2736..cf07f8d67 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -1,9 +1,4 @@
-import {
-  Button,
-  Card,
-  DropdownButton,
-  DropdownButtonItem
-} from '@iqss/dataverse-design-system'
+import { Button, Card, DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
 import { PencilFill } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FilesHeader.module.scss'
@@ -36,7 +31,7 @@ export function FilesHeader({
     setSaving(false)
   }
   const all = () => {
-    setSelected(current => {
+    setSelected((current) => {
       if (current.size === fileUploadState.length) {
         return new Set<FileUploadState>()
       } else {
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
index 3be14f43f..d2367d31b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
@@ -1,12 +1,12 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .restriction_form {
-    padding-bottom: 0.5em;
     padding-top: 0.5em;
+    padding-bottom: 0.5em;
 }
 
 .restriction_info {
-    padding-bottom: 0.5em;
     padding-top: 0.5em;
+    padding-bottom: 0.5em;
     color: $dv-subtext-color;
 }
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
index 4c407b0cd..d01506401 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
@@ -1,61 +1,81 @@
-import {
-  Button,
-  Col,
-  Form
-} from '@iqss/dataverse-design-system'
+import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './RestrictionForm.module.scss'
-import { FormEvent, useState } from 'react'
+import { FormEvent } from 'react'
 
 interface RestrictionFormProps {
   requestAccess: boolean
   updateRequestAccess: (checked: boolean) => void
   terms: string
   updateTerms: (newTerms: string) => void
+  show: boolean
+  setShow: (doShow: boolean) => void
 }
 
 export function RestrictionForm({
   requestAccess,
   updateRequestAccess,
   terms,
-  updateTerms
+  updateTerms,
+  show,
+  setShow
 }: RestrictionFormProps) {
+  const handleClose = () => setShow(false)
 
   return (
-    <div className={styles.restriction_form}>
-        <div className={styles.restriction_info}>
-          <p>Restricting limits access to published files. People who want to use the restricted files can request access by default. If you disable request access, you must add information about access to the Terms of Access field.</p>
-          <p>Learn about restricting files and dataset access in the User Guide.</p>
+    <Modal show={show} onHide={handleClose} size="lg">
+      <Modal.Header>
+        <Modal.Title>Restrict Access</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className={styles.restriction_form}>
+          <div className={styles.restriction_info}>
+            <p>
+              Restricting limits access to published files. People who want to use the restricted
+              files can request access by default. If you disable request access, you must add
+              information about access to the Terms of Access field.
+            </p>
+            <p>Learn about restricting files and dataset access in the User Guide.</p>
+          </div>
+          <Form>
+            <Form.Group>
+              <Form.Group.Label column sm={3}>
+                Request Access
+              </Form.Group.Label>
+              <Col sm={9}>
+                <Form.Group.Checkbox
+                  label="Enable access request"
+                  id={'requestAccessCB'}
+                  checked={requestAccess}
+                  onChange={(event: FormEvent<HTMLInputElement>) =>
+                    updateRequestAccess(event.currentTarget.checked)
+                  }
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group>
+              <Form.Group.Label column sm={3}>
+                Terms of Access for Restricted Files
+              </Form.Group.Label>
+              <Col sm={9}>
+                <Form.Group.TextArea
+                  defaultValue={terms}
+                  onChange={(event: FormEvent<HTMLInputElement>) =>
+                    updateTerms(event.currentTarget.value)
+                  }
+                />
+              </Col>
+            </Form.Group>
+          </Form>
         </div>
-        <Form>
-          <Form.Group>
-            <Form.Group.Label column sm={3}>
-              Request Access
-            </Form.Group.Label>
-            <Col sm={9}>
-              <Form.Group.Checkbox
-                label="Enable access request"
-                id={'requestAccessCB'}
-                checked={requestAccess}
-                onChange={(event: FormEvent<HTMLInputElement>) =>
-                  updateRequestAccess(event.currentTarget.checked)
-                }
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group>
-            <Form.Group.Label column sm={3}>
-              Terms of Access for Restricted Files
-            </Form.Group.Label>
-            <Col sm={9}>
-              <Form.Group.TextArea
-                defaultValue={terms}
-                onChange={(event: FormEvent<HTMLInputElement>) =>
-                  updateTerms(event.currentTarget.value)
-                }
-              />
-            </Col>
-          </Form.Group>
-        </Form>
-    </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={handleClose}>
+          Save Changes
+        </Button>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
index c77639591..916d1599e 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
@@ -1,13 +1,13 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .tag_options {
-    padding-bottom: 0.5em;
     padding-top: 0.5em;
+    padding-bottom: 0.5em;
 }
 
 .tag_info {
-    padding-bottom: 0.5em;
     padding-top: 0.5em;
+    padding-bottom: 0.5em;
     color: $dv-subtext-color;
 }
 
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
index c61964d28..6f12009f4 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
@@ -1,8 +1,4 @@
-import {
-  Button,
-  Col,
-  Form
-} from '@iqss/dataverse-design-system'
+import { Button, Col, Form } from '@iqss/dataverse-design-system'
 import styles from './TagOptions.module.scss'
 import { FormEvent, useState } from 'react'
 
@@ -11,10 +7,7 @@ interface TagOptionsProps {
   setTagOptions: (newTags: string[]) => void
 }
 
-export function TagOptions({
-  tags,
-  setTagOptions
-}: TagOptionsProps) {
+export function TagOptions({ tags, setTagOptions }: TagOptionsProps) {
   const [tag, setTag] = useState('')
   const addTagOption = () => {
     console.log(tag)
@@ -27,37 +20,38 @@ export function TagOptions({
 
   return (
     <div className={styles.tag_options}>
-        <Form>
-          <Form.Group>
-            <Form.Group.Label column sm={3}>
-              Custom file tag
-            </Form.Group.Label>
-            <Col sm={9}>
-              <div className={styles.tag_info}>Creating a new tag will add it as a tag option for all files in this dataset.</div>
-              <div className="input-group mb-3">
-                <Form.Group.Input
-                  type="text"
-                  placeholder="Add new file tag..."
-                  value={tag}
-                  onChange={(event: FormEvent<HTMLInputElement>) =>
-                    setTag(event.currentTarget.value)
-                  }
-                />
-                <div className="input-group-append">
-                  <Button className={styles.apply_button}
-                    variant="secondary"
-                    type='button'
-                    {...{ size: 'sm' }}
-                    withSpacing
-                    onClick={addTagOption}>
-                    Apply
-                  </Button>
-                </div>
+      <Form>
+        <Form.Group>
+          <Form.Group.Label column sm={3}>
+            Custom file tag
+          </Form.Group.Label>
+          <Col sm={9}>
+            <div className={styles.tag_info}>
+              Creating a new tag will add it as a tag option for all files in this dataset.
+            </div>
+            <div className="input-group mb-3">
+              <Form.Group.Input
+                type="text"
+                placeholder="Add new file tag..."
+                value={tag}
+                onChange={(event: FormEvent<HTMLInputElement>) => setTag(event.currentTarget.value)}
+              />
+              <div className="input-group-append">
+                <Button
+                  className={styles.apply_button}
+                  variant="secondary"
+                  type="button"
+                  {...{ size: 'sm' }}
+                  withSpacing
+                  onClick={addTagOption}>
+                  Apply
+                </Button>
               </div>
-              <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
-            </Col>
-          </Form.Group>
-        </Form>
+            </div>
+            <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
+          </Col>
+        </Form.Group>
+      </Form>
     </div>
   )
 }

From 4e535a69ec4b0018f46fe0e8c7ab0853f8487104 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 17:38:45 +0200
Subject: [PATCH 33/96] moved uploaded files list implementation

---
 .../upload-dataset-files/UploadDatasetFiles.tsx      |  2 +-
 .../{ => uploaded-files-list}/UploadedFiles.tsx      | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename src/sections/upload-dataset-files/{ => uploaded-files-list}/UploadedFiles.tsx (91%)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 4396451fa..1bce006c9 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -8,7 +8,7 @@ import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { FileUploader } from './FileUploader'
 import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
 import { uploadFile } from '../../files/domain/useCases/uploadFile'
-import { UploadedFiles } from './UploadedFiles'
+import { UploadedFiles } from './uploaded-files-list/UploadedFiles'
 import { addUploadedFile } from '../../files/domain/useCases/addUploadedFile'
 
 interface UploadDatasetFilesProps {
diff --git a/src/sections/upload-dataset-files/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
similarity index 91%
rename from src/sections/upload-dataset-files/UploadedFiles.tsx
rename to src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index a79efaa32..5b7e38a9d 100644
--- a/src/sections/upload-dataset-files/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -1,13 +1,13 @@
 import { Button, Card, Form } from '@iqss/dataverse-design-system'
 import cn from 'classnames'
 import { X } from 'react-bootstrap-icons'
-import { FileUploadState } from '../../files/domain/models/FileUploadState'
-import styles from './FileUploader.module.scss'
+import { FileUploadState } from '../../../files/domain/models/FileUploadState'
+import styles from '../FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
-import { FileForm } from './uploaded-files-list/file-form/FileForm'
-import { TagOptions } from './uploaded-files-list/tag-options/TagOptions'
-import { FilesHeader } from './uploaded-files-list/files-header/FilesHeader'
-import { RestrictionForm } from './uploaded-files-list/restriction-form/RestrictionForm'
+import { FileForm } from './file-form/FileForm'
+import { TagOptions } from './tag-options/TagOptions'
+import { FilesHeader } from './files-header/FilesHeader'
+import { RestrictionForm } from './restriction-form/RestrictionForm'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]

From bc315cd7391065c130834f4f8c1ac2165f90ab06 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 17:46:45 +0200
Subject: [PATCH 34/96] rename: restriction form -> restriction modal

---
 .../upload-dataset-files/uploaded-files-list/UploadedFiles.tsx  | 2 +-
 .../RestrictionModal.module.scss}                               | 0
 .../RestrictionModal.tsx}                                       | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/sections/upload-dataset-files/uploaded-files-list/{restriction-form/RestrictionForm.module.scss => restriction-modal/RestrictionModal.module.scss} (100%)
 rename src/sections/upload-dataset-files/uploaded-files-list/{restriction-form/RestrictionForm.tsx => restriction-modal/RestrictionModal.tsx} (98%)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 5b7e38a9d..91c261dfb 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -7,7 +7,7 @@ import { FormEvent, useState, MouseEvent } from 'react'
 import { FileForm } from './file-form/FileForm'
 import { TagOptions } from './tag-options/TagOptions'
 import { FilesHeader } from './files-header/FilesHeader'
-import { RestrictionForm } from './restriction-form/RestrictionForm'
+import { RestrictionForm } from './restriction-modal/RestrictionModal'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.module.scss
similarity index 100%
rename from src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.module.scss
rename to src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.module.scss
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
similarity index 98%
rename from src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
rename to src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index d01506401..2cbeaaba9 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-form/RestrictionForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
-import styles from './RestrictionForm.module.scss'
+import styles from './RestrictionModal.module.scss'
 import { FormEvent } from 'react'
 
 interface RestrictionFormProps {

From 8364d7a087a2b0c6d6ed0b7341ddb126ec80e307 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 17:47:58 +0200
Subject: [PATCH 35/96] rename: tag options -> tag options modal

---
 .../upload-dataset-files/uploaded-files-list/UploadedFiles.tsx  | 2 +-
 .../TagOptionsModal.module.scss}                                | 0
 .../TagOptions.tsx => tag-options-modal/TagOptionsModal.tsx}    | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/sections/upload-dataset-files/uploaded-files-list/{tag-options/TagOptions.module.scss => tag-options-modal/TagOptionsModal.module.scss} (100%)
 rename src/sections/upload-dataset-files/uploaded-files-list/{tag-options/TagOptions.tsx => tag-options-modal/TagOptionsModal.tsx} (97%)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 91c261dfb..2152eca5d 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -5,7 +5,7 @@ import { FileUploadState } from '../../../files/domain/models/FileUploadState'
 import styles from '../FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
 import { FileForm } from './file-form/FileForm'
-import { TagOptions } from './tag-options/TagOptions'
+import { TagOptions } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
 import { RestrictionForm } from './restriction-modal/RestrictionModal'
 
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss
similarity index 100%
rename from src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.module.scss
rename to src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
similarity index 97%
rename from src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
rename to src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index 6f12009f4..7b2efbd1c 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options/TagOptions.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Col, Form } from '@iqss/dataverse-design-system'
-import styles from './TagOptions.module.scss'
+import styles from './TagOptionsModal.module.scss'
 import { FormEvent, useState } from 'react'
 
 interface TagOptionsProps {

From 79ec76a1d79f75d26524390824e8b603e686c85c Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 18:42:57 +0200
Subject: [PATCH 36/96] improved restriction modal

---
 .../uploaded-files-list/UploadedFiles.tsx     | 41 ++++++++++------
 .../files-header/FilesHeader.tsx              | 24 +++-------
 .../restriction-modal/RestrictionModal.tsx    | 48 ++++++++++---------
 3 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 2152eca5d..6e472872d 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -7,7 +7,7 @@ import { FormEvent, useState, MouseEvent } from 'react'
 import { FileForm } from './file-form/FileForm'
 import { TagOptions } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
-import { RestrictionForm } from './restriction-modal/RestrictionModal'
+import { RestrictionModal, RestrictionModalResult } from './restriction-modal/RestrictionModal'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -27,10 +27,11 @@ export function UploadedFiles({
   addFiles
 }: DatasetFilesProps) {
   const [selected, setSelected] = useState(new Set<FileUploadState>())
+  const [filesToRestrict, setFilesToRestrict] = useState<FileUploadState[]>([])
   const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
-  const [showRestrictionForm, setShowRestrictionForm] = useState(false)
+  const [showRestrictionModal, setShowRestrictionModal] = useState(false)
   const ignoreClasses = new Set<string>([
     'form-control',
     'btn',
@@ -39,10 +40,23 @@ export function UploadedFiles({
     'dropdown-item',
     'dropdown'
   ])
-  const updateFileRestricted = (file: FileUploadState, updated: boolean) => {
-    file.restricted = updated
-    setShowRestrictionForm(true)
-    updateFiles([file])
+  const updateFilesRestricted = (files: FileUploadState[], restricted: boolean) => {
+    if (restricted) {
+      setFilesToRestrict(files)
+      setShowRestrictionModal(true)
+    } else {
+      files.forEach((file) => file.restricted = false)
+      updateFiles(files)
+    }
+  }
+  const restrict = (res: RestrictionModalResult) => {
+    if (res.saved) {
+      setTerms(res.terms)
+      setRequestAccess(res.requestAccess)
+      filesToRestrict.forEach((file) => file.restricted = true)
+      updateFiles(filesToRestrict)
+    }
+    setShowRestrictionModal(false)
   }
   const deleteFile = (file: FileUploadState) => {
     file.removed = true
@@ -77,13 +91,11 @@ export function UploadedFiles({
     <>
       <div className={styles.forms}>
         <TagOptions tags={tags} setTagOptions={setTagOptions} />
-        <RestrictionForm
-          terms={terms}
-          updateTerms={setTerms}
-          requestAccess={requestAccess}
-          updateRequestAccess={setRequestAccess}
-          show={showRestrictionForm}
-          setShow={setShowRestrictionForm}
+        <RestrictionModal
+          defaultRequestAccess={requestAccess}
+          defaultTerms={terms}
+          show={showRestrictionModal}
+          update={restrict}
         />
       </div>
       <div hidden={fileUploadState.length === 0}>
@@ -96,6 +108,7 @@ export function UploadedFiles({
             addFiles={addFiles}
             selected={selected}
             setSelected={setSelected}
+            updateFilesRestricted={updateFilesRestricted}
           />
           <Card.Body>
             <div>
@@ -116,7 +129,7 @@ export function UploadedFiles({
                           id={'restricted-' + file.key}
                           checked={file.restricted}
                           onChange={(event: FormEvent<HTMLInputElement>) =>
-                            updateFileRestricted(file, event.currentTarget.checked)
+                            updateFilesRestricted([file], event.currentTarget.checked)
                           }
                         />
                       </div>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index cf07f8d67..334feb27b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -12,6 +12,7 @@ interface FilesHeaderProps {
   updateFiles: (file: FileUploadState[]) => void
   cleanup: () => void
   addFiles: (fileUploadState: FileUploadState[]) => void
+  updateFilesRestricted: (fileUploadState: FileUploadState[], restricted: boolean) => void
 }
 
 export function FilesHeader({
@@ -21,7 +22,8 @@ export function FilesHeader({
   saveDisabled,
   updateFiles,
   cleanup,
-  addFiles
+  addFiles,
+  updateFilesRestricted
 }: FilesHeaderProps) {
   const [saving, setSaving] = useState(false)
   const save = () => {
@@ -39,20 +41,8 @@ export function FilesHeader({
       }
     })
   }
-  const restrictSelected = () => {
-    // TODO: show dialog for restriction
-    const res = Array.from(selected).map((x) => {
-      x.restricted = true
-      return x
-    })
-    updateFiles(res)
-  }
-  const unrestrictSelected = () => {
-    const res = Array.from(selected).map((x) => {
-      x.restricted = false
-      return x
-    })
-    updateFiles(res)
+  const updateRestriction = (restrict: boolean) => {
+    updateFilesRestricted(Array.from(selected), restrict)
   }
   const deleteSelected = () => {
     const res = Array.from(selected).map((x) => {
@@ -87,8 +77,8 @@ export function FilesHeader({
           icon={<PencilFill className={styles.icon_pencil} />}
           id={'edit-files'}
           title={'Edit files'}>
-          <DropdownButtonItem onClick={restrictSelected}>{'Restrict'}</DropdownButtonItem>
-          <DropdownButtonItem onClick={unrestrictSelected}>{'Unrestrict'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={() => updateRestriction(true)}>{'Restrict'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={() => updateRestriction(false)}>{'Unrestrict'}</DropdownButtonItem>
           <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
         </DropdownButton>
       </span>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index 2cbeaaba9..9432b51d6 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -1,28 +1,32 @@
 import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './RestrictionModal.module.scss'
-import { FormEvent } from 'react'
+import { FormEvent, useState } from 'react'
 
-interface RestrictionFormProps {
-  requestAccess: boolean
-  updateRequestAccess: (checked: boolean) => void
-  terms: string
-  updateTerms: (newTerms: string) => void
+interface RestrictionModalProps {
+  defaultRequestAccess: boolean
+  defaultTerms: string
   show: boolean
-  setShow: (doShow: boolean) => void
+  update: (res: RestrictionModalResult) => void
+}
+
+export interface RestrictionModalResult {
+  saved: boolean
+  terms: string
+  requestAccess: boolean
 }
 
-export function RestrictionForm({
-  requestAccess,
-  updateRequestAccess,
-  terms,
-  updateTerms,
+export function RestrictionModal({
+  defaultRequestAccess,
+  defaultTerms,
   show,
-  setShow
-}: RestrictionFormProps) {
-  const handleClose = () => setShow(false)
+  update
+}: RestrictionModalProps) {
+  const [terms, setTerms] = useState('')
+  const [requestAccess, setRequestAccess] = useState(true)
+  const handleClose = (saved: boolean) => update({saved: saved, terms: terms, requestAccess: requestAccess})
 
   return (
-    <Modal show={show} onHide={handleClose} size="lg">
+    <Modal show={show} onHide={() => handleClose(false)} size="lg">
       <Modal.Header>
         <Modal.Title>Restrict Access</Modal.Title>
       </Modal.Header>
@@ -45,9 +49,9 @@ export function RestrictionForm({
                 <Form.Group.Checkbox
                   label="Enable access request"
                   id={'requestAccessCB'}
-                  checked={requestAccess}
+                  checked={defaultRequestAccess}
                   onChange={(event: FormEvent<HTMLInputElement>) =>
-                    updateRequestAccess(event.currentTarget.checked)
+                    setRequestAccess(event.currentTarget.checked)
                   }
                 />
               </Col>
@@ -58,9 +62,9 @@ export function RestrictionForm({
               </Form.Group.Label>
               <Col sm={9}>
                 <Form.Group.TextArea
-                  defaultValue={terms}
+                  defaultValue={defaultTerms}
                   onChange={(event: FormEvent<HTMLInputElement>) =>
-                    updateTerms(event.currentTarget.value)
+                    setTerms(event.currentTarget.value)
                   }
                 />
               </Col>
@@ -69,10 +73,10 @@ export function RestrictionForm({
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <Button variant="primary" onClick={handleClose}>
+        <Button variant="primary" onClick={() => handleClose(true)}>
           Save Changes
         </Button>
-        <Button variant="secondary" onClick={handleClose}>
+        <Button variant="secondary" onClick={() => handleClose(false)}>
           Cancel
         </Button>
       </Modal.Footer>

From d15592274825536458909512820f5cc126732a19 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 20:44:38 +0200
Subject: [PATCH 37/96] tag options modal

---
 .../uploaded-files-list/UploadedFiles.tsx     |  8 +-
 .../file-form/FileForm.module.scss            | 12 +++
 .../file-form/FileForm.tsx                    | 25 ++++--
 .../tag-options-modal/TagOptionsModal.tsx     | 86 +++++++++++--------
 4 files changed, 85 insertions(+), 46 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 6e472872d..3bba1a75e 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -5,7 +5,7 @@ import { FileUploadState } from '../../../files/domain/models/FileUploadState'
 import styles from '../FileUploader.module.scss'
 import { FormEvent, useState, MouseEvent } from 'react'
 import { FileForm } from './file-form/FileForm'
-import { TagOptions } from './tag-options-modal/TagOptionsModal'
+import { TagOptionsModal } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
 import { RestrictionModal, RestrictionModalResult } from './restriction-modal/RestrictionModal'
 
@@ -32,6 +32,7 @@ export function UploadedFiles({
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
+  const [showTagOptionsModal, setShowTagOptionsModal] = useState(false)
   const ignoreClasses = new Set<string>([
     'form-control',
     'btn',
@@ -90,7 +91,8 @@ export function UploadedFiles({
   return (
     <>
       <div className={styles.forms}>
-        <TagOptions tags={tags} setTagOptions={setTagOptions} />
+        <TagOptionsModal tags={tags} setTagOptions={setTagOptions}
+          show={showTagOptionsModal} hide={() => setShowTagOptionsModal(false)}/>
         <RestrictionModal
           defaultRequestAccess={requestAccess}
           defaultTerms={terms}
@@ -121,7 +123,7 @@ export function UploadedFiles({
                       })}
                       key={file.key}
                       onClick={(event) => clicked(event, file)}>
-                      <FileForm file={file} updateFiles={updateFiles} tags={tags} />
+                      <FileForm file={file} updateFiles={updateFiles} tags={tags} editTagOptions={() => setShowTagOptionsModal(true)}/>
                       <div className={styles.file_size}>{file.fileSizeString}</div>
                       <div>
                         <Form.Group.Checkbox
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
index 6772b8dde..dfccc541a 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
@@ -3,3 +3,15 @@
 .file_form {
     padding: 0.25em;
 }
+
+.tags {
+    display: flex;
+}
+
+.edit_tags_btn {
+    margin: 0;
+}
+
+.tags_select{
+    width: 100%;
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index e0c2501d9..274feceb0 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,15 +1,17 @@
-import { Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
 import { FormEvent } from 'react'
+import { Plus } from 'react-bootstrap-icons'
 
 interface FileFormProps {
   file: FileUploadState
   updateFiles: (file: FileUploadState[]) => void
   tags: string[]
+  editTagOptions: () => void
 }
 
-export function FileForm({ file, updateFiles, tags }: FileFormProps) {
+export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormProps) {
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
     updateFiles([file])
@@ -77,10 +79,21 @@ export function FileForm({ file, updateFiles, tags }: FileFormProps) {
           <Form.Group.Label column sm={3}>
             Tags
           </Form.Group.Label>
-          <Col sm={9}>
-            <SelectMultiple
-              options={tags}
-              onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
+          <Col sm={9} className={styles.tags}>
+            <div className={styles.tags_select}>
+              <SelectMultiple
+                options={tags}
+                onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
+            </div>
+            <Button
+              className={styles.edit_tags_btn}
+              variant="secondary"
+              type="button"
+              {...{ size: 'sm' }}
+              withSpacing
+              onClick={editTagOptions}>
+              <Plus className={styles.icon} title={"Add tag options"} />
+            </Button>
           </Col>
         </Form.Group>
       </Form>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index 7b2efbd1c..c42934726 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -1,13 +1,15 @@
-import { Button, Col, Form } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './TagOptionsModal.module.scss'
 import { FormEvent, useState } from 'react'
 
-interface TagOptionsProps {
+interface TagOptionsModalProps {
   tags: string[]
   setTagOptions: (newTags: string[]) => void
+  show: boolean
+  hide: () => void
 }
 
-export function TagOptions({ tags, setTagOptions }: TagOptionsProps) {
+export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsModalProps) {
   const [tag, setTag] = useState('')
   const addTagOption = () => {
     console.log(tag)
@@ -19,39 +21,49 @@ export function TagOptions({ tags, setTagOptions }: TagOptionsProps) {
   }
 
   return (
-    <div className={styles.tag_options}>
-      <Form>
-        <Form.Group>
-          <Form.Group.Label column sm={3}>
-            Custom file tag
-          </Form.Group.Label>
-          <Col sm={9}>
-            <div className={styles.tag_info}>
-              Creating a new tag will add it as a tag option for all files in this dataset.
-            </div>
-            <div className="input-group mb-3">
-              <Form.Group.Input
-                type="text"
-                placeholder="Add new file tag..."
-                value={tag}
-                onChange={(event: FormEvent<HTMLInputElement>) => setTag(event.currentTarget.value)}
-              />
-              <div className="input-group-append">
-                <Button
-                  className={styles.apply_button}
-                  variant="secondary"
-                  type="button"
-                  {...{ size: 'sm' }}
-                  withSpacing
-                  onClick={addTagOption}>
-                  Apply
-                </Button>
-              </div>
-            </div>
-            <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
-          </Col>
-        </Form.Group>
-      </Form>
-    </div>
+    <Modal show={show} onHide={hide} size="lg">
+      <Modal.Header>
+        <Modal.Title>Edit tag options</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className={styles.tag_options}>
+          <Form>
+            <Form.Group>
+              <Form.Group.Label column sm={3}>
+                Custom file tag
+              </Form.Group.Label>
+              <Col sm={9}>
+                <div className={styles.tag_info}>
+                  Creating a new tag will add it as a tag option for all files in this dataset.
+                </div>
+                <div className="input-group mb-3">
+                  <Form.Group.Input
+                    type="text"
+                    placeholder="Add new file tag..."
+                    value={tag}
+                    onChange={(event: FormEvent<HTMLInputElement>) => setTag(event.currentTarget.value)}
+                  />
+                  <Button
+                    className={styles.apply_button}
+                    variant="secondary"
+                    type="button"
+                    {...{ size: 'sm' }}
+                    withSpacing
+                    onClick={addTagOption}>
+                    Apply
+                  </Button>
+                </div>
+                <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
+              </Col>
+            </Form.Group>
+          </Form>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={hide}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
   )
 }

From 4342a677634de243b6a9779cbe8a1601883816af Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 21:14:32 +0200
Subject: [PATCH 38/96] handle enter in tag options dialog

---
 .../uploaded-files-list/UploadedFiles.tsx     | 19 ++++++++++++++-----
 .../file-form/FileForm.tsx                    |  2 +-
 .../files-header/FilesHeader.tsx              |  8 ++++++--
 .../restriction-modal/RestrictionModal.tsx    |  3 ++-
 .../tag-options-modal/TagOptionsModal.tsx     | 18 ++++++++++++------
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 3bba1a75e..7a8100ad6 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -46,7 +46,7 @@ export function UploadedFiles({
       setFilesToRestrict(files)
       setShowRestrictionModal(true)
     } else {
-      files.forEach((file) => file.restricted = false)
+      files.forEach((file) => (file.restricted = false))
       updateFiles(files)
     }
   }
@@ -54,7 +54,7 @@ export function UploadedFiles({
     if (res.saved) {
       setTerms(res.terms)
       setRequestAccess(res.requestAccess)
-      filesToRestrict.forEach((file) => file.restricted = true)
+      filesToRestrict.forEach((file) => (file.restricted = true))
       updateFiles(filesToRestrict)
     }
     setShowRestrictionModal(false)
@@ -91,8 +91,12 @@ export function UploadedFiles({
   return (
     <>
       <div className={styles.forms}>
-        <TagOptionsModal tags={tags} setTagOptions={setTagOptions}
-          show={showTagOptionsModal} hide={() => setShowTagOptionsModal(false)}/>
+        <TagOptionsModal
+          tags={tags}
+          setTagOptions={setTagOptions}
+          show={showTagOptionsModal}
+          hide={() => setShowTagOptionsModal(false)}
+        />
         <RestrictionModal
           defaultRequestAccess={requestAccess}
           defaultTerms={terms}
@@ -123,7 +127,12 @@ export function UploadedFiles({
                       })}
                       key={file.key}
                       onClick={(event) => clicked(event, file)}>
-                      <FileForm file={file} updateFiles={updateFiles} tags={tags} editTagOptions={() => setShowTagOptionsModal(true)}/>
+                      <FileForm
+                        file={file}
+                        updateFiles={updateFiles}
+                        tags={tags}
+                        editTagOptions={() => setShowTagOptionsModal(true)}
+                      />
                       <div className={styles.file_size}>{file.fileSizeString}</div>
                       <div>
                         <Form.Group.Checkbox
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 274feceb0..9e0e260f8 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -92,7 +92,7 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
               {...{ size: 'sm' }}
               withSpacing
               onClick={editTagOptions}>
-              <Plus className={styles.icon} title={"Add tag options"} />
+              <Plus className={styles.icon} title={'Add tag options'} />
             </Button>
           </Col>
         </Form.Group>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 334feb27b..6c794a768 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -77,8 +77,12 @@ export function FilesHeader({
           icon={<PencilFill className={styles.icon_pencil} />}
           id={'edit-files'}
           title={'Edit files'}>
-          <DropdownButtonItem onClick={() => updateRestriction(true)}>{'Restrict'}</DropdownButtonItem>
-          <DropdownButtonItem onClick={() => updateRestriction(false)}>{'Unrestrict'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={() => updateRestriction(true)}>
+            {'Restrict'}
+          </DropdownButtonItem>
+          <DropdownButtonItem onClick={() => updateRestriction(false)}>
+            {'Unrestrict'}
+          </DropdownButtonItem>
           <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
         </DropdownButton>
       </span>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index 9432b51d6..9b8698121 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -23,7 +23,8 @@ export function RestrictionModal({
 }: RestrictionModalProps) {
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
-  const handleClose = (saved: boolean) => update({saved: saved, terms: terms, requestAccess: requestAccess})
+  const handleClose = (saved: boolean) =>
+    update({ saved: saved, terms: terms, requestAccess: requestAccess })
 
   return (
     <Modal show={show} onHide={() => handleClose(false)} size="lg">
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index c42934726..f15a5a97a 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -1,6 +1,6 @@
 import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './TagOptionsModal.module.scss'
-import { FormEvent, useState } from 'react'
+import { FormEvent, useState, KeyboardEvent } from 'react'
 
 interface TagOptionsModalProps {
   tags: string[]
@@ -12,12 +12,16 @@ interface TagOptionsModalProps {
 export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsModalProps) {
   const [tag, setTag] = useState('')
   const addTagOption = () => {
-    console.log(tag)
     if (tag && !tags.includes(tag)) {
       setTagOptions([...tags, tag])
       setTag('')
     }
-    console.log(tags)
+  }
+  const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      addTagOption()
+      event.preventDefault()
+    }
   }
 
   return (
@@ -26,8 +30,8 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
         <Modal.Title>Edit tag options</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <div className={styles.tag_options}>
-          <Form>
+        <div className={styles.tag_options} onKeyDown={handleEnter}>
+          <Form onSubmit={addTagOption}>
             <Form.Group>
               <Form.Group.Label column sm={3}>
                 Custom file tag
@@ -41,7 +45,9 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
                     type="text"
                     placeholder="Add new file tag..."
                     value={tag}
-                    onChange={(event: FormEvent<HTMLInputElement>) => setTag(event.currentTarget.value)}
+                    onChange={(event: FormEvent<HTMLInputElement>) =>
+                      setTag(event.currentTarget.value)
+                    }
                   />
                   <Button
                     className={styles.apply_button}

From f4351c960d1e9c9425781d17f62dbc4d6f9089be Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 21:28:34 +0200
Subject: [PATCH 39/96] fixed restriction modal

---
 .../restriction-modal/RestrictionModal.tsx            | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index 9b8698121..2d1740b0f 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -21,8 +21,8 @@ export function RestrictionModal({
   show,
   update
 }: RestrictionModalProps) {
-  const [terms, setTerms] = useState('')
-  const [requestAccess, setRequestAccess] = useState(true)
+  const [terms, setTerms] = useState(defaultTerms)
+  const [requestAccess, setRequestAccess] = useState(defaultRequestAccess)
   const handleClose = (saved: boolean) =>
     update({ saved: saved, terms: terms, requestAccess: requestAccess })
 
@@ -50,7 +50,7 @@ export function RestrictionModal({
                 <Form.Group.Checkbox
                   label="Enable access request"
                   id={'requestAccessCB'}
-                  checked={defaultRequestAccess}
+                  checked={requestAccess}
                   onChange={(event: FormEvent<HTMLInputElement>) =>
                     setRequestAccess(event.currentTarget.checked)
                   }
@@ -74,7 +74,10 @@ export function RestrictionModal({
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <Button variant="primary" onClick={() => handleClose(true)}>
+        <Button
+          variant="primary"
+          onClick={() => handleClose(true)}
+          disabled={!requestAccess && !terms}>
           Save Changes
         </Button>
         <Button variant="secondary" onClick={() => handleClose(false)}>

From d6dc078d95f2e4ca3515ae6c55205a279b39a8f8 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 22:32:30 +0200
Subject: [PATCH 40/96] cleanup of the mock file repo upload funcs

---
 .../useCases/{addUploadedFile.ts => addUploadedFiles.ts}   | 7 ++-----
 src/files/domain/useCases/uploadFile.ts                    | 6 +++---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx   | 4 ++--
 src/stories/file/FileMockRepository.ts                     | 6 +++++-
 4 files changed, 12 insertions(+), 11 deletions(-)
 rename src/files/domain/useCases/{addUploadedFile.ts => addUploadedFiles.ts} (81%)

diff --git a/src/files/domain/useCases/addUploadedFile.ts b/src/files/domain/useCases/addUploadedFiles.ts
similarity index 81%
rename from src/files/domain/useCases/addUploadedFile.ts
rename to src/files/domain/useCases/addUploadedFiles.ts
index c8f2114fe..0eb512580 100644
--- a/src/files/domain/useCases/addUploadedFile.ts
+++ b/src/files/domain/useCases/addUploadedFiles.ts
@@ -1,7 +1,7 @@
 import { FileUploadState } from '../models/FileUploadState'
 import { FileRepository } from '../repositories/FileRepository'
 
-export function addUploadedFile(
+export function addUploadedFiles(
   fileRepository: FileRepository,
   datasetId: number | string,
   files: FileUploadState[],
@@ -9,11 +9,8 @@ export function addUploadedFile(
 ): void {
   fileRepository
     .addUploadedFile(datasetId, files)
-    .then(() => {
-      done()
-    })
     .catch((error: Error) => {
-      done()
       throw new Error(error.message)
     })
+    .finally(done)
 }
diff --git a/src/files/domain/useCases/uploadFile.ts b/src/files/domain/useCases/uploadFile.ts
index 309a3e8d3..d7f4d01a1 100644
--- a/src/files/domain/useCases/uploadFile.ts
+++ b/src/files/domain/useCases/uploadFile.ts
@@ -12,7 +12,7 @@ export function uploadFile(
   const controller = new AbortController()
   fileRepository
     .uploadFile(datasetId, { file: file }, progress, controller, storageIdSetter)
-    .then(() => done())
-    .catch(() => failed())
-  return () => controller.abort()
+    .then(done)
+    .catch(failed)
+  return controller.abort
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index 1bce006c9..e8a10be9e 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -9,7 +9,7 @@ import { FileUploader } from './FileUploader'
 import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
 import { uploadFile } from '../../files/domain/useCases/uploadFile'
 import { UploadedFiles } from './uploaded-files-list/UploadedFiles'
-import { addUploadedFile } from '../../files/domain/useCases/addUploadedFile'
+import { addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles'
 
 interface UploadDatasetFilesProps {
   fileRepository: FileRepository
@@ -133,7 +133,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
   const addFiles = (state: FileUploadState[]) => {
     setIsLoading(true)
     const done = () => setIsLoading(false)
-    addUploadedFile(fileRepository, dataset?.persistentId as string, state, done)
+    addUploadedFiles(fileRepository, dataset?.persistentId as string, state, done)
     cleanAllState()
   }
 
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index d35370a5f..eab5cae8d 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -92,6 +92,10 @@ export class FileMockRepository implements FileRepository {
   }
 
   addUploadedFile(_datasetId: number | string, _files: FileUploadState[]): Promise<void[]> {
-    return new Promise(() => {})
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve([])
+      }, FakerHelper.loadingTimout())
+    })
   }
 }

From 211ba8a6a76e7b9c643daf00cc55ec9bbedc967a Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 20 Jun 2024 22:35:06 +0200
Subject: [PATCH 41/96] lint fix

---
 src/files/domain/useCases/uploadFile.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/domain/useCases/uploadFile.ts b/src/files/domain/useCases/uploadFile.ts
index d7f4d01a1..38da23724 100644
--- a/src/files/domain/useCases/uploadFile.ts
+++ b/src/files/domain/useCases/uploadFile.ts
@@ -14,5 +14,5 @@ export function uploadFile(
     .uploadFile(datasetId, { file: file }, progress, controller, storageIdSetter)
     .then(done)
     .catch(failed)
-  return controller.abort
+  return () => controller.abort()
 }

From e5543ce6ef679076a4784f3858b6b502a8341cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Tue, 18 Jun 2024 09:40:19 -0300
Subject: [PATCH 42/96] test: fix test, add new missing property

---
 .../metadata-block-info/MetadataBlockInfoCitationExample.ts      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/e2e-integration/integration/metadata-block-info/MetadataBlockInfoCitationExample.ts b/tests/e2e-integration/integration/metadata-block-info/MetadataBlockInfoCitationExample.ts
index 86ae7db65..4b7f621c9 100644
--- a/tests/e2e-integration/integration/metadata-block-info/MetadataBlockInfoCitationExample.ts
+++ b/tests/e2e-integration/integration/metadata-block-info/MetadataBlockInfoCitationExample.ts
@@ -25,6 +25,7 @@ export const MetadataBlockInfoCitationExample = {
     keywordValue: { displayFormat: '#VALUE' },
     keywordVocabulary: { displayFormat: '(#VALUE)' },
     keywordVocabularyURI: { displayFormat: '[#VALUE](#VALUE)' },
+    keywordTermURI: { displayFormat: '[#VALUE](#VALUE)' },
     topicClassification: { displayFormat: '' },
     topicClassValue: { displayFormat: '#VALUE' },
     topicClassVocab: { displayFormat: '(#VALUE)' },

From 683ede22a665c86ef30a97450569a2fc5c807c8e Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 18:54:41 +0200
Subject: [PATCH 43/96] tests fix

---
 .../upload-dataset-files/UploadDatasetFiles.spec.tsx     | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 9cac026af..2ff3acba0 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -299,8 +299,8 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Save').click()
     cy.findByText('users1.json').should('not.exist')
     cy.findByText('users2.json').should('not.exist')
-    // wait for reload
-    cy.findByText('Temporary Loading until having shape of skeleton').should('not.exist')
+    cy.get('input[value="users1.json"]').should('not.exist')
+    cy.get('input[value="users2.json"]').should('not.exist')
   })
 
   it('cancels saving uploaded files', () => {
@@ -330,6 +330,8 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Cancel').click()
     cy.findByText('users1.json').should('not.exist')
     cy.findByText('users2.json').should('not.exist')
+    cy.get('input[value="users1.json"]').should('not.exist')
+    cy.get('input[value="users2.json"]').should('not.exist')
   })
 
   it('deletes uploaded files', () => {
@@ -358,6 +360,7 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Cancel').should('exist')
     cy.findAllByTitle('Delete').first().parent().click()
     cy.findByText('users1.json').should('not.exist')
-    cy.findByText('users2.json').should('exist')
+    cy.get('input[value="users1.json"]').should('not.exist')
+    cy.get('input[value="users2.json"]').should('exist')
   })
 })

From 74c6f8051f236ede59bd8d078b3b90afce0d1189 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 21:13:30 +0200
Subject: [PATCH 44/96] improved test coverage

---
 .../file-form/FileForm.tsx                    |  5 +-
 .../files-header/FilesHeader.tsx              |  2 +-
 .../restriction-modal/RestrictionModal.tsx    |  2 +-
 .../UploadDatasetFiles.spec.tsx               | 94 +++++++++++++++++++
 4 files changed, 99 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 9e0e260f8..1942072b2 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -80,7 +80,7 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
             Tags
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
-            <div className={styles.tags_select}>
+            <div className={styles.tags_select} title='Select tags'>
               <SelectMultiple
                 options={tags}
                 onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
@@ -91,8 +91,9 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
               type="button"
               {...{ size: 'sm' }}
               withSpacing
+              title='Edit tag options'
               onClick={editTagOptions}>
-              <Plus className={styles.icon} title={'Add tag options'} />
+              <Plus className={styles.icon} title={'Plus'} />
             </Button>
           </Col>
         </Form.Group>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 6c794a768..9cd512a21 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -83,7 +83,7 @@ export function FilesHeader({
           <DropdownButtonItem onClick={() => updateRestriction(false)}>
             {'Unrestrict'}
           </DropdownButtonItem>
-          <DropdownButtonItem onClick={deleteSelected}>{'Delete'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={deleteSelected} title='Delete selected'>{'Delete'}</DropdownButtonItem>
         </DropdownButton>
       </span>
     </Card.Header>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index 2d1740b0f..b573880d3 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -80,7 +80,7 @@ export function RestrictionModal({
           disabled={!requestAccess && !terms}>
           Save Changes
         </Button>
-        <Button variant="secondary" onClick={() => handleClose(false)}>
+        <Button variant="secondary" onClick={() => handleClose(false)} title='Cancel changes'>
           Cancel
         </Button>
       </Modal.Footer>
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 2ff3acba0..9cb455042 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -363,4 +363,98 @@ describe('UploadDatasetFiles', () => {
     cy.get('input[value="users1.json"]').should('not.exist')
     cy.get('input[value="users2.json"]').should('exist')
   })
+
+  it('restrict uploaded file', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    // wait for upload to finish
+    cy.findByText('2 files uploaded').should('exist')
+    cy.get('[type="checkbox"]').first().click()
+    cy.findByText('Save Changes').first().click()
+    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('[type="checkbox"]').first().click()
+    cy.get('[type="checkbox"]').first().should('not.be.checked')
+    cy.findByText('2 files uploaded').first().click()
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Restrict').first().click()
+    cy.findByText('Save Changes').first().click()
+    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('input[value="users1.json"]').first().parent().click()
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Unrestrict').first().click()
+    cy.get('[type="checkbox"]').first().should('not.be.checked')
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Restrict').first().click()
+    cy.findByLabelText('Close').click()
+    cy.get('[type="checkbox"]').first().should('not.be.checked')
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Restrict').first().click()
+    cy.get('[type="checkbox"]').last().click()
+    cy.get('textarea').last().type("Hello, World!")
+    cy.findByText('Save Changes').first().click()
+    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Restrict').first().click()
+    cy.findByTitle('Cancel changes').click()
+    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('input[value="users1.json"]').first().parent().click()
+    cy.findByText('2 files uploaded').first().click()
+    cy.get('input[value="users1.json"]').first().parent().click()
+    cy.get('input[value="users1.json"]').first().parent().click()
+    cy.findByText('2 files uploaded').first().click()
+    cy.findByText('2 files uploaded').first().click()
+    cy.findByText('2 files uploaded').first().click()
+    cy.findByText('Edit files').first().click()
+    cy.findByTitle('Delete selected').click()
+    cy.get('input[value="users1.json"]').should('not.exist')
+    cy.get('input[value="users2.json"]').should('not.exist')
+  })
+  
+  it('edit tags', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    // wait for upload to finish
+    cy.findByText('1 file uploaded').should('exist')
+    cy.findByTitle('Edit tag options').first().click()
+    cy.get('input').last().type("Hello, World!")
+    cy.findByText('Apply').click()
+    cy.findByText('Close').click()
+    cy.findByTitle('Edit tag options').first().click()
+    cy.get('input').last().type("Hello, World, again!")
+    cy.findByText('Apply').click()
+    cy.findByLabelText('Close').click()
+    cy.findByTitle('Edit tag options').first().click()
+    cy.get('input').last().type("Hello, World, yet again!{enter}")
+    cy.findByLabelText('Close').click()
+    cy.findByTitle('Select tags').first().click()
+    cy.findByText('Hello, World!').should('exist')
+    cy.findByText('Hello, World, again!').should('exist')
+    cy.findByText('Hello, World, yet again!').should('exist')
+    cy.findByText('Hello, World!').click()
+    cy.get('input[type=text]').first().type("Hello, World!")
+    cy.get('input[placeholder="File path"]').first().type("Hello, World!")
+    cy.get('textarea').first().type("Hello, World!")
+  })
 })

From fb8b4aae2356c3e5395239df3011d446f0f02bf2 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 21:17:34 +0200
Subject: [PATCH 45/96] lint fix

---
 .../uploaded-files-list/file-form/FileForm.tsx   |  4 ++--
 .../files-header/FilesHeader.tsx                 |  4 +++-
 .../restriction-modal/RestrictionModal.tsx       |  2 +-
 .../UploadDatasetFiles.spec.tsx                  | 16 ++++++++--------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 1942072b2..e8b75d716 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -80,7 +80,7 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
             Tags
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
-            <div className={styles.tags_select} title='Select tags'>
+            <div className={styles.tags_select} title="Select tags">
               <SelectMultiple
                 options={tags}
                 onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
@@ -91,7 +91,7 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
               type="button"
               {...{ size: 'sm' }}
               withSpacing
-              title='Edit tag options'
+              title="Edit tag options"
               onClick={editTagOptions}>
               <Plus className={styles.icon} title={'Plus'} />
             </Button>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 9cd512a21..90cfa2682 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -83,7 +83,9 @@ export function FilesHeader({
           <DropdownButtonItem onClick={() => updateRestriction(false)}>
             {'Unrestrict'}
           </DropdownButtonItem>
-          <DropdownButtonItem onClick={deleteSelected} title='Delete selected'>{'Delete'}</DropdownButtonItem>
+          <DropdownButtonItem onClick={deleteSelected} title="Delete selected">
+            {'Delete'}
+          </DropdownButtonItem>
         </DropdownButton>
       </span>
     </Card.Header>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index b573880d3..344d44ce4 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -80,7 +80,7 @@ export function RestrictionModal({
           disabled={!requestAccess && !terms}>
           Save Changes
         </Button>
-        <Button variant="secondary" onClick={() => handleClose(false)} title='Cancel changes'>
+        <Button variant="secondary" onClick={() => handleClose(false)} title="Cancel changes">
           Cancel
         </Button>
       </Modal.Footer>
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 9cb455042..172f48e1e 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -403,7 +403,7 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
     cy.get('[type="checkbox"]').last().click()
-    cy.get('textarea').last().type("Hello, World!")
+    cy.get('textarea').last().type('Hello, World!')
     cy.findByText('Save Changes').first().click()
     cy.get('[type="checkbox"]').first().should('be.checked')
     cy.findByText('Edit files').first().click()
@@ -422,7 +422,7 @@ describe('UploadDatasetFiles', () => {
     cy.get('input[value="users1.json"]').should('not.exist')
     cy.get('input[value="users2.json"]').should('not.exist')
   })
-  
+
   it('edit tags', () => {
     const testDataset = DatasetMother.create()
 
@@ -438,23 +438,23 @@ describe('UploadDatasetFiles', () => {
     // wait for upload to finish
     cy.findByText('1 file uploaded').should('exist')
     cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type("Hello, World!")
+    cy.get('input').last().type('Hello, World!')
     cy.findByText('Apply').click()
     cy.findByText('Close').click()
     cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type("Hello, World, again!")
+    cy.get('input').last().type('Hello, World, again!')
     cy.findByText('Apply').click()
     cy.findByLabelText('Close').click()
     cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type("Hello, World, yet again!{enter}")
+    cy.get('input').last().type('Hello, World, yet again!{enter}')
     cy.findByLabelText('Close').click()
     cy.findByTitle('Select tags').first().click()
     cy.findByText('Hello, World!').should('exist')
     cy.findByText('Hello, World, again!').should('exist')
     cy.findByText('Hello, World, yet again!').should('exist')
     cy.findByText('Hello, World!').click()
-    cy.get('input[type=text]').first().type("Hello, World!")
-    cy.get('input[placeholder="File path"]').first().type("Hello, World!")
-    cy.get('textarea').first().type("Hello, World!")
+    cy.get('input[type=text]').first().type('Hello, World!')
+    cy.get('input[placeholder="File path"]').first().type('Hello, World!')
+    cy.get('textarea').first().type('Hello, World!')
   })
 })

From 7b8e7270be58684e76dc66a1a7d02d77fdcc9c35 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 22:23:22 +0200
Subject: [PATCH 46/96] improved coverage

---
 .../upload-dataset-files/UploadDatasetFiles.spec.tsx        | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 172f48e1e..3c5fff471 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -392,7 +392,6 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Restrict').first().click()
     cy.findByText('Save Changes').first().click()
     cy.get('[type="checkbox"]').first().should('be.checked')
-    cy.get('input[value="users1.json"]').first().parent().click()
     cy.findByText('Edit files').first().click()
     cy.findByText('Unrestrict').first().click()
     cy.get('[type="checkbox"]').first().should('not.be.checked')
@@ -410,11 +409,6 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Restrict').first().click()
     cy.findByTitle('Cancel changes').click()
     cy.get('[type="checkbox"]').first().should('be.checked')
-    cy.get('input[value="users1.json"]').first().parent().click()
-    cy.findByText('2 files uploaded').first().click()
-    cy.get('input[value="users1.json"]').first().parent().click()
-    cy.get('input[value="users1.json"]').first().parent().click()
-    cy.findByText('2 files uploaded').first().click()
     cy.findByText('2 files uploaded').first().click()
     cy.findByText('2 files uploaded').first().click()
     cy.findByText('Edit files').first().click()

From 0f662a180358e6a8aaf73c68cd733de3580e7868 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 22:42:12 +0200
Subject: [PATCH 47/96] improved coverage even more

---
 .../UploadDatasetFiles.spec.tsx               | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 3c5fff471..01b73037e 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -451,4 +451,26 @@ describe('UploadDatasetFiles', () => {
     cy.get('input[placeholder="File path"]').first().type('Hello, World!')
     cy.get('textarea').first().type('Hello, World!')
   })
+
+  it('click test', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    // wait for upload to finish
+    cy.findByText('2 files uploaded').should('exist')
+    cy.get('label:contains("Tags")').first().click()
+    cy.get('label:contains("Tags")').first().click()
+  })
 })

From b4a5962035260c53ac795fc459cf7f6999ea4bcb Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 23:32:09 +0200
Subject: [PATCH 48/96] better istanbul ignores

---
 .../upload-dataset-files/FileUploader.tsx     | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.tsx b/src/sections/upload-dataset-files/FileUploader.tsx
index b1cde331c..2807722a3 100644
--- a/src/sections/upload-dataset-files/FileUploader.tsx
+++ b/src/sections/upload-dataset-files/FileUploader.tsx
@@ -34,6 +34,7 @@ export function FileUploader({
         const selectedFilesArray = Array.from(selectedFiles)
         const selectedFilesSet = new Set(selectedFilesArray.map((x) => FileUploadTools.key(x)))
         const alreadyAddedFiltered = alreadyAdded.filter(
+          /* istanbul ignore next */
           (x) => !selectedFilesSet.has(FileUploadTools.key(x))
         )
         return [...alreadyAddedFiltered, ...selectedFilesArray]
@@ -48,22 +49,19 @@ export function FileUploader({
   }
 
   // waiting on the possibility to test folder drop: https://github.com/cypress-io/cypress/issues/19696
-  const addFromDir = /* istanbul ignore next */ (dir: FileSystemDirectoryEntry) => {
+  const addFromDir = (dir: FileSystemDirectoryEntry) => {
+    /* istanbul ignore next */
     const reader = dir.createReader()
-    reader.readEntries(
-      /* istanbul ignore next */ (entries) => {
-        entries.forEach(
-          /* istanbul ignore next */ (entry) => {
-            if (entry.isFile) {
-              const fse = entry as FileSystemFileEntry
-              fse.file(/* istanbul ignore next */ (f) => addFile(f))
-            } else if (entry.isDirectory) {
-              addFromDir(entry as FileSystemDirectoryEntry)
-            }
-          }
-        )
-      }
-    )
+    reader.readEntries((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isFile) {
+          const fse = entry as FileSystemFileEntry
+          fse.file((f) => addFile(f))
+        } else if (entry.isDirectory) {
+          addFromDir(entry as FileSystemDirectoryEntry)
+        }
+      })
+    })
   }
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -78,6 +76,7 @@ export function FileUploader({
     setBackgroundColor(theme.color.primaryTextColor)
   }
 
+  /* istanbul ignore next */
   const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {
     event.preventDefault()
     setBackgroundColor(theme.color.infoBoxColor)

From 654e2bc62001180b7a3e431cd7af931ccc0cb30e Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 23:33:01 +0200
Subject: [PATCH 49/96] removed sanity check for better coverage

---
 public/locales/en/uploadDatasetFiles.json              | 10 +++++++++-
 .../upload-dataset-files/UploadDatasetFiles.tsx        |  5 +++--
 .../uploaded-files-list/UploadedFiles.tsx              | 10 +++++++---
 .../tag-options-modal/TagOptionsModal.tsx              |  2 ++
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 451e2e629..3bad09ed3 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -2,5 +2,13 @@
   "breadcrumbActionItem": "Upload files",
   "cancel": "Cancel upload",
   "info": "Drag and drop files and/or directories here.",
-  "select": "Select files to add"
+  "select": "Select files to add",
+  "delete": "Delete",
+  "tags": {
+    "documentation": "Documentation",
+    "data": "Data",
+    "code": "Code"
+  },
+  "restricted": "Restricted",
+  "uploadedFileSize": "Uploaded file size"
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index e8a10be9e..f47a808af 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -58,9 +58,10 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
 
   const uploadOneFile = (file: File) => {
     const key = FileUploadTools.key(file)
-    if (!canUpload(file)) {
+    // sanity check: should not happen
+    /*if (!canUpload(file)) {
       return
-    }
+    }*/
     setState(FileUploadTools.showProgressBar(file, fileUploaderState))
     const cancel = uploadFile(
       fileRepository,
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 7a8100ad6..1b92700ff 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -8,6 +8,7 @@ import { FileForm } from './file-form/FileForm'
 import { TagOptionsModal } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
 import { RestrictionModal, RestrictionModalResult } from './restriction-modal/RestrictionModal'
+import { useTranslation } from 'react-i18next'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -26,9 +27,10 @@ export function UploadedFiles({
   cleanup,
   addFiles
 }: DatasetFilesProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [filesToRestrict, setFilesToRestrict] = useState<FileUploadState[]>([])
-  const [tags, setTagOptions] = useState(['Documentation', 'Data', 'Code'])
+  const [tags, setTagOptions] = useState([t('tags.documentation'), t('tags.data'), t('tags.code')])
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
@@ -133,10 +135,12 @@ export function UploadedFiles({
                         tags={tags}
                         editTagOptions={() => setShowTagOptionsModal(true)}
                       />
-                      <div className={styles.file_size}>{file.fileSizeString}</div>
+                      <div className={styles.file_size} title={t('uploadedFileSize')}>
+                        {file.fileSizeString}
+                      </div>
                       <div>
                         <Form.Group.Checkbox
-                          label="Restricted"
+                          label={t('restricted')}
                           id={'restricted-' + file.key}
                           checked={file.restricted}
                           onChange={(event: FormEvent<HTMLInputElement>) =>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index f15a5a97a..47c29fa94 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -1,6 +1,7 @@
 import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './TagOptionsModal.module.scss'
 import { FormEvent, useState, KeyboardEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface TagOptionsModalProps {
   tags: string[]
@@ -10,6 +11,7 @@ interface TagOptionsModalProps {
 }
 
 export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsModalProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
   const [tag, setTag] = useState('')
   const addTagOption = () => {
     if (tag && !tags.includes(tag)) {

From 9231f2d498be4ac9a9dfc2a7ab42ebad4803835d Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 21 Jun 2024 23:33:31 +0200
Subject: [PATCH 50/96] added translattions

---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index f47a808af..d7a55d2f3 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -172,7 +172,7 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
             />
             <UploadedFiles
               fileUploadState={fileUploaderState.uploaded}
-              cancelTitle={'Delete'}
+              cancelTitle={t('delete')}
               saveDisabled={saveDisabled()}
               updateFiles={updateFiles}
               cleanup={cleanAllState}

From caf1a3e87ee23583a7228e55bc0b3ba5ff861011 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 24 Jun 2024 13:03:50 +0200
Subject: [PATCH 51/96] translations

---
 public/locales/en/uploadDatasetFiles.json     | 40 +++++++++++++++++--
 .../file-form/FileForm.tsx                    | 20 +++++-----
 .../files-header/FilesHeader.tsx              | 19 ++++-----
 .../restriction-modal/RestrictionModal.tsx    | 27 +++++++------
 .../tag-options-modal/TagOptionsModal.tsx     | 19 ++++-----
 5 files changed, 80 insertions(+), 45 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 3bad09ed3..19e2431e4 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -4,11 +4,45 @@
   "info": "Drag and drop files and/or directories here.",
   "select": "Select files to add",
   "delete": "Delete",
+  "uploadedFileSize": "Uploaded file size",
+  "restricted": "Restricted",
   "tags": {
     "documentation": "Documentation",
     "data": "Data",
-    "code": "Code"
+    "code": "Code",
+    "editTagOptions": "Edit tag options",
+    "customFileTag": "Custom file tag",
+    "creatingNewTag": "Creating a new tag will add it as a tag option for all files in this dataset.",
+    "addNewTag": "Add new file tag...",
+    "availableTagOptions": "Available tag options: ",
+    "apply": "Apply",
+    "close": "Close"
   },
-  "restricted": "Restricted",
-  "uploadedFileSize": "Uploaded file size"
+  "restriction": {
+    "restrictAccess": "Restrict Access",
+    "restrictionInfoP1": "Restricting limits access to published files. People who want to use the restricted files can request access by default. If you disable request access, you must add information about access to the Terms of Access field.",
+    "restrictionInfoP2": "Learn about restricting files and dataset access in the User Guide.",
+    "termsOfAccess": "Terms of Access for Restricted Files",
+    "enableAccessRequest": "Enable access request",
+    "saveChanges": "Save Changes",
+    "cancelChanges": "Cancel changes"
+  },
+  "fileForm": {
+    "fileName": "File name",
+    "filePath": "File path",
+    "description": "Description",
+    "tags": "Tags",
+    "selectTags": "Select tags",
+    "editTagOptions": "Edit tag options",
+    "plus": "Add new tag option"
+  },
+  "filesHeader": {
+    "editFiles": "Edit files",
+    "restrict": "Restrict",
+    "unrestrict": "Unrestrict",
+    "filesUploaded_one": "{{count}} file uploaded",
+    "filesUploaded_other": "{{count}} files uploaded",
+    "filesSelected_one": "{{count}} file selected",
+    "filesSelected_other": "{{count}} files selected."
+  }
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index e8b75d716..86593810f 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -3,6 +3,7 @@ import { FileUploadState } from '../../../../files/domain/models/FileUploadState
 import styles from './FileForm.module.scss'
 import { FormEvent } from 'react'
 import { Plus } from 'react-bootstrap-icons'
+import { useTranslation } from 'react-i18next'
 
 interface FileFormProps {
   file: FileUploadState
@@ -12,6 +13,7 @@ interface FileFormProps {
 }
 
 export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
     updateFiles([file])
@@ -34,12 +36,12 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
       <Form>
         <Form.Group>
           <Form.Group.Label column sm={3}>
-            File name
+            {t('fileForm.fileName')}
           </Form.Group.Label>
           <Col sm={9}>
             <Form.Group.Input
               type="text"
-              placeholder="File name"
+              placeholder={t('fileForm.fileName')}
               defaultValue={file.fileName}
               onChange={(event: FormEvent<HTMLInputElement>) =>
                 updateFileName(file, event.currentTarget.value)
@@ -49,12 +51,12 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
         </Form.Group>
         <Form.Group>
           <Form.Group.Label column sm={3}>
-            File path
+            {t('fileForm.filePath')}
           </Form.Group.Label>
           <Col sm={9}>
             <Form.Group.Input
               type="text"
-              placeholder="File path"
+              placeholder={t('fileForm.filePath')}
               defaultValue={file.fileDir}
               onChange={(event: FormEvent<HTMLInputElement>) =>
                 updateFileDir(file, event.currentTarget.value)
@@ -64,7 +66,7 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
         </Form.Group>
         <Form.Group>
           <Form.Group.Label column sm={3}>
-            Description
+            {t('fileForm.description')}
           </Form.Group.Label>
           <Col sm={9}>
             <Form.Group.TextArea
@@ -77,10 +79,10 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
         </Form.Group>
         <Form.Group>
           <Form.Group.Label column sm={3}>
-            Tags
+            {t('fileForm.tags')}
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
-            <div className={styles.tags_select} title="Select tags">
+            <div className={styles.tags_select} title={t('fileForm.selectTags')}>
               <SelectMultiple
                 options={tags}
                 onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
@@ -91,9 +93,9 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
               type="button"
               {...{ size: 'sm' }}
               withSpacing
-              title="Edit tag options"
+              title={t('fileForm.editTagOptions')}
               onClick={editTagOptions}>
-              <Plus className={styles.icon} title={'Plus'} />
+              <Plus className={styles.icon} title={t('fileForm.plus')} />
             </Button>
           </Col>
         </Form.Group>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 90cfa2682..d62413273 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -3,6 +3,7 @@ import { PencilFill } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FilesHeader.module.scss'
 import { Dispatch, SetStateAction, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface FilesHeaderProps {
   fileUploadState: FileUploadState[]
@@ -25,6 +26,7 @@ export function FilesHeader({
   addFiles,
   updateFilesRestricted
 }: FilesHeaderProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
   const [saving, setSaving] = useState(false)
   const save = () => {
     setSaving(true)
@@ -62,29 +64,24 @@ export function FilesHeader({
         Cancel
       </Button>
       <Button withSpacing variant="link" onClick={all} disabled={saving}>
-        {' '}
-        {fileUploadState.length}
-        {fileUploadState.length === 1 ? ' file uploaded' : ' files uploaded'}
+        {t('filesHeader.filesUploaded', { count: fileUploadState.length })}
       </Button>
       <span className={styles.selected_files_info} hidden={selected.size === 0}>
-        <span>
-          {selected.size}
-          {selected.size === 1 ? ' file selected' : ' files selected'}
-        </span>
+        <span>{t('filesHeader.filesSelected', { count: selected.size })}</span>
         <DropdownButton
           variant="secondary"
           withSpacing
           icon={<PencilFill className={styles.icon_pencil} />}
           id={'edit-files'}
-          title={'Edit files'}>
+          title={t('filesHeader.editFiles')}>
           <DropdownButtonItem onClick={() => updateRestriction(true)}>
-            {'Restrict'}
+            {t('filesHeader.restrict')}
           </DropdownButtonItem>
           <DropdownButtonItem onClick={() => updateRestriction(false)}>
-            {'Unrestrict'}
+            {t('filesHeader.unrestrict')}
           </DropdownButtonItem>
           <DropdownButtonItem onClick={deleteSelected} title="Delete selected">
-            {'Delete'}
+            {t('delete')}
           </DropdownButtonItem>
         </DropdownButton>
       </span>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
index 344d44ce4..ea5ebf6c5 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/restriction-modal/RestrictionModal.tsx
@@ -1,6 +1,7 @@
 import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
 import styles from './RestrictionModal.module.scss'
 import { FormEvent, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface RestrictionModalProps {
   defaultRequestAccess: boolean
@@ -21,6 +22,7 @@ export function RestrictionModal({
   show,
   update
 }: RestrictionModalProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
   const [terms, setTerms] = useState(defaultTerms)
   const [requestAccess, setRequestAccess] = useState(defaultRequestAccess)
   const handleClose = (saved: boolean) =>
@@ -29,26 +31,22 @@ export function RestrictionModal({
   return (
     <Modal show={show} onHide={() => handleClose(false)} size="lg">
       <Modal.Header>
-        <Modal.Title>Restrict Access</Modal.Title>
+        <Modal.Title>{t('restriction.restrictAccess')}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className={styles.restriction_form}>
           <div className={styles.restriction_info}>
-            <p>
-              Restricting limits access to published files. People who want to use the restricted
-              files can request access by default. If you disable request access, you must add
-              information about access to the Terms of Access field.
-            </p>
-            <p>Learn about restricting files and dataset access in the User Guide.</p>
+            <p>{t('restriction.restrictionInfoP1')}</p>
+            <p>{t('restriction.restrictionInfoP2')}</p>
           </div>
           <Form>
             <Form.Group>
               <Form.Group.Label column sm={3}>
-                Request Access
+                {t('restriction.restrictAccess')}
               </Form.Group.Label>
               <Col sm={9}>
                 <Form.Group.Checkbox
-                  label="Enable access request"
+                  label={t('restriction.enableAccessRequest')}
                   id={'requestAccessCB'}
                   checked={requestAccess}
                   onChange={(event: FormEvent<HTMLInputElement>) =>
@@ -59,7 +57,7 @@ export function RestrictionModal({
             </Form.Group>
             <Form.Group>
               <Form.Group.Label column sm={3}>
-                Terms of Access for Restricted Files
+                {t('restriction.termsOfAccess')}
               </Form.Group.Label>
               <Col sm={9}>
                 <Form.Group.TextArea
@@ -78,10 +76,13 @@ export function RestrictionModal({
           variant="primary"
           onClick={() => handleClose(true)}
           disabled={!requestAccess && !terms}>
-          Save Changes
+          {t('restriction.saveChanges')}
         </Button>
-        <Button variant="secondary" onClick={() => handleClose(false)} title="Cancel changes">
-          Cancel
+        <Button
+          variant="secondary"
+          onClick={() => handleClose(false)}
+          title={t('restriction.cancelChanges')}>
+          {t('cancel')}
         </Button>
       </Modal.Footer>
     </Modal>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index 47c29fa94..d64e3fc1e 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -29,23 +29,21 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
   return (
     <Modal show={show} onHide={hide} size="lg">
       <Modal.Header>
-        <Modal.Title>Edit tag options</Modal.Title>
+        <Modal.Title>{t('tags.editTagOptions')}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className={styles.tag_options} onKeyDown={handleEnter}>
           <Form onSubmit={addTagOption}>
             <Form.Group>
               <Form.Group.Label column sm={3}>
-                Custom file tag
+                {t('tags.customFileTag')}
               </Form.Group.Label>
               <Col sm={9}>
-                <div className={styles.tag_info}>
-                  Creating a new tag will add it as a tag option for all files in this dataset.
-                </div>
+                <div className={styles.tag_info}>{t('tags.creatingNewTag')}</div>
                 <div className="input-group mb-3">
                   <Form.Group.Input
                     type="text"
-                    placeholder="Add new file tag..."
+                    placeholder={t('tags.addNewTag')}
                     value={tag}
                     onChange={(event: FormEvent<HTMLInputElement>) =>
                       setTag(event.currentTarget.value)
@@ -58,10 +56,13 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
                     {...{ size: 'sm' }}
                     withSpacing
                     onClick={addTagOption}>
-                    Apply
+                    {t('tags.apply')}
                   </Button>
                 </div>
-                <div className={styles.tag_info}>Available tag options: {tags.join(', ')}</div>
+                <div className={styles.tag_info}>
+                  {t('tags.availableTagOptions')}
+                  {tags.join(', ')}
+                </div>
               </Col>
             </Form.Group>
           </Form>
@@ -69,7 +70,7 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
       </Modal.Body>
       <Modal.Footer>
         <Button variant="secondary" onClick={hide}>
-          Close
+          {t('tags.close')}
         </Button>
       </Modal.Footer>
     </Modal>

From 8b87197632e17d34ba6bee7e8f9753f811de65f5 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 24 Jun 2024 16:00:44 +0200
Subject: [PATCH 52/96] calling real API for file uploads put in comment

---
 .../infrastructure/FileJSDataverseRepository.ts  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index d9ea6d1f1..b671f7807 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -14,6 +14,8 @@ import {
   getFileDataTables,
   getFileDownloadCount,
   getFileUserPermissions,
+  //uploadFile as jsUploadFile,
+  //addUploadedFileToDataset,
   ReadError
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
@@ -285,11 +287,11 @@ export class FileJSDataverseRepository implements FileRepository {
   }
 
   uploadFile(
-    _datasetId: number | string,
-    _file: FileHolder,
-    _progress: (now: number) => void,
-    _abortController: AbortController,
-    _storageIdSetter: (storageId: string) => void
+    datasetId: number | string,
+    file: FileHolder,
+    progress: (now: number) => void,
+    abortController: AbortController,
+    storageIdSetter: (storageId: string) => void
   ): Promise<void> {
     /*return jsUploadFile
       .execute(datasetId, file.file, progress, abortController)
@@ -300,7 +302,7 @@ export class FileJSDataverseRepository implements FileRepository {
     return new Promise(() => {})
   }
 
-  addUploadedFile(_datasetId: number | string, files: FileUploadState[]): Promise<void[]> {
+  addUploadedFile(datasetId: number | string, files: FileUploadState[]): Promise<void[]> {
     const all: Promise<void>[] = []
     files.forEach((file) => {
       const f: FileHolder = {
@@ -330,7 +332,7 @@ export class FileJSDataverseRepository implements FileRepository {
       }
       console.log(f.file.name)
       all.push(new Promise(() => {}))
-      //all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string, file.description))
+      //all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string))
     })
     return Promise.all(all)
   }

From a44e4dbfb00247fe4df6ca94924a87f1ed9147b0 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 25 Jun 2024 16:33:01 +0200
Subject: [PATCH 53/96] integration with the upload use case

---
 package-lock.json                             | 27 +++++++++++++------
 package.json                                  |  2 +-
 .../FileJSDataverseRepository.ts              | 12 ++++-----
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 004f5610f..60e03d13a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@faker-js/faker": "7.6.0",
-        "@iqss/dataverse-client-javascript": "2.0.0-pr141.153a56a",
+        "@iqss/dataverse-client-javascript": "2.0.0-pr155.be01a3f",
         "@iqss/dataverse-design-system": "*",
         "@istanbuljs/nyc-config-typescript": "1.0.2",
         "@tanstack/react-table": "8.9.2",
@@ -3610,14 +3610,14 @@
     },
     "node_modules/@iqss/dataverse-client-javascript": {
       "name": "@IQSS/dataverse-client-javascript",
-      "version": "2.0.0-pr141.153a56a",
-      "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-pr141.153a56a/cb16d9477207d284110ca3c348b6540274509cc9",
-      "integrity": "sha512-urN99q1ll1Xiqr2wDsG9wvLcAjrxsOZmLXmCgFp6zTFoFHaVZ8c07k0EqQZk4jUv6CwgQY8j+jhmW+T+ABuj6A==",
+      "version": "2.0.0-pr155.be01a3f",
+      "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-pr155.be01a3f/dea4dac3ef3aab1802b444ccc08326843c530d80",
+      "integrity": "sha512-Q2KhE3JGu3BaTD1TB3l0iQ6yZIvpUOkds8Zk0nezNymm4pL8gjdISomJDUXFFW9tQuAZ0PkXuOEQGmVfzEUKNA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "^18.15.11",
         "@types/turndown": "^5.0.1",
-        "axios": "^1.3.4",
+        "axios": "^1.7.2",
         "turndown": "^7.1.2",
         "typescript": "^4.9.5"
       }
@@ -3627,6 +3627,16 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.19.tgz",
       "integrity": "sha512-+pMhShR3Or5GR0/sp4Da7FnhVmTalWm81M6MkEldbwjETSaPalw138Z4KdpQaistvqQxLB7Cy4xwYdxpbSOs9Q=="
     },
+    "node_modules/@iqss/dataverse-client-javascript/node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/@iqss/dataverse-design-system": {
       "resolved": "packages/design-system",
       "link": true
@@ -17927,6 +17937,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
       "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -23534,9 +23545,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
diff --git a/package.json b/package.json
index 7aece5b0d..5e770a5e7 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr141.153a56a",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr155.be01a3f",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index b671f7807..7d38e1d4b 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -14,8 +14,8 @@ import {
   getFileDataTables,
   getFileDownloadCount,
   getFileUserPermissions,
-  //uploadFile as jsUploadFile,
-  //addUploadedFileToDataset,
+  uploadFile as jsUploadFile,
+  addUploadedFileToDataset,
   ReadError
 } from '@iqss/dataverse-client-javascript'
 import { FileCriteria } from '../domain/models/FileCriteria'
@@ -293,13 +293,12 @@ export class FileJSDataverseRepository implements FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ): Promise<void> {
-    /*return jsUploadFile
+    return jsUploadFile
       .execute(datasetId, file.file, progress, abortController)
       .then(storageIdSetter)
       .catch((error: ReadError) => {
         throw new Error(error.message)
-      })*/
-    return new Promise(() => {})
+      })
   }
 
   addUploadedFile(datasetId: number | string, files: FileUploadState[]): Promise<void[]> {
@@ -331,8 +330,7 @@ export class FileJSDataverseRepository implements FileRepository {
         }
       }
       console.log(f.file.name)
-      all.push(new Promise(() => {}))
-      //all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string))
+      all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string))
     })
     return Promise.all(all)
   }

From 0a99c592ce110f33a03d2c387eedc81c56c3e99b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= <gersaracca@gmail.com>
Date: Tue, 18 Jun 2024 22:12:27 -0300
Subject: [PATCH 54/96] feat: update to new naming of imports and add method to
 mocks repos

---
 src/dataset/infrastructure/mappers/DatasetDTOMapper.ts | 4 ++--
 src/stories/dataset/DatasetErrorMockRepository.ts      | 8 ++++++++
 src/stories/dataset/DatasetMockRepository.ts           | 8 ++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/dataset/infrastructure/mappers/DatasetDTOMapper.ts b/src/dataset/infrastructure/mappers/DatasetDTOMapper.ts
index c8558cf11..57b8bf70a 100644
--- a/src/dataset/infrastructure/mappers/DatasetDTOMapper.ts
+++ b/src/dataset/infrastructure/mappers/DatasetDTOMapper.ts
@@ -1,7 +1,7 @@
 import { DatasetDTO } from '../../domain/useCases/DTOs/DatasetDTO'
 import {
-  NewDataset as JSDatasetDTO,
-  NewDatasetMetadataBlockValues as JSMetadataBlocksDTO
+  DatasetDTO as JSDatasetDTO,
+  DatasetMetadataBlockValuesDTO as JSMetadataBlocksDTO
 } from '@iqss/dataverse-client-javascript'
 
 export class DatasetDTOMapper {
diff --git a/src/stories/dataset/DatasetErrorMockRepository.ts b/src/stories/dataset/DatasetErrorMockRepository.ts
index ec2f1d74f..bdc0f12ac 100644
--- a/src/stories/dataset/DatasetErrorMockRepository.ts
+++ b/src/stories/dataset/DatasetErrorMockRepository.ts
@@ -45,4 +45,12 @@ export class DatasetErrorMockRepository implements DatasetMockRepository {
       }, FakerHelper.loadingTimout())
     })
   }
+
+  updateMetadata(_datasetId: string | number, _updatedDataset: DatasetDTO): Promise<void> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject('Error thrown from mock')
+      }, FakerHelper.loadingTimout())
+    })
+  }
 }
diff --git a/src/stories/dataset/DatasetMockRepository.ts b/src/stories/dataset/DatasetMockRepository.ts
index f6c8b1f0a..3ef6905f2 100644
--- a/src/stories/dataset/DatasetMockRepository.ts
+++ b/src/stories/dataset/DatasetMockRepository.ts
@@ -49,4 +49,12 @@ export class DatasetMockRepository implements DatasetRepository {
       }, FakerHelper.loadingTimout())
     })
   }
+
+  updateMetadata(_datasetId: string | number, _updatedDataset: DatasetDTO): Promise<void> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, FakerHelper.loadingTimout())
+    })
+  }
 }

From 938793407c82a734f8b269f6c3f884fcb54f8509 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 17:21:23 +0200
Subject: [PATCH 55/96] better selection mechanics for the uploaded files

---
 .../FileUploader.module.scss                  | 13 ++++++---
 .../uploaded-files-list/UploadedFiles.tsx     | 27 +++++++++++++------
 .../files-header/FilesHeader.module.scss      | 13 +++++++++
 .../files-header/FilesHeader.tsx              | 27 ++++++++++++++++---
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 542de0c6a..db1ea4681 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -6,19 +6,19 @@
 
 .files {
     display: grid;
-    grid-template-columns: repeat(4, auto);
+    grid-template-columns: 4rem auto auto auto 3.5rem;
 }
 
 .selected_file>div {
-    background-color: #ffc!important;
+    background-color: #ffc !important;
 }
 
-.file:nth-of-type(even)>div{
+.file:nth-of-type(even)>div {
     padding: 0.5rem;
     background-color: #f8f9fc;
 }
 
-.file:nth-of-type(odd)>div{
+.file:nth-of-type(odd)>div {
     padding: 0.5rem;
     background-color: white;
 }
@@ -68,3 +68,8 @@
 .forms {
     padding: 0.5em;
 }
+
+.selected_files_cb {
+    display: inline-flex;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 1b92700ff..38db0af69 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -79,16 +79,19 @@ export function UploadedFiles({
       }
     }
     if (!classList.some((x) => ignoreClasses.has(x))) {
-      setSelected((current) => {
-        if (current.has(file)) {
-          current.delete(file)
-        } else {
-          current.add(file)
-        }
-        return new Set<FileUploadState>(current)
-      })
+      updateSelected(file)
     }
   }
+  const updateSelected = (file: FileUploadState) => {
+    setSelected((current) => {
+      if (current.has(file)) {
+        current.delete(file)
+      } else {
+        current.add(file)
+      }
+      return new Set<FileUploadState>(current)
+    })
+  }
 
   return (
     <>
@@ -129,6 +132,14 @@ export function UploadedFiles({
                       })}
                       key={file.key}
                       onClick={(event) => clicked(event, file)}>
+                      <div className={styles.selected_files_cb}>
+                        <Form.Group.Checkbox
+                          label={''}
+                          id={'select-all'}
+                          checked={selected.has(file)}
+                          onChange={(event) => updateSelected(file)}
+                        />
+                      </div>
                       <FileForm
                         file={file}
                         updateFiles={updateFiles}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
index 4d240e982..d8f0d75c4 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -5,7 +5,20 @@
   margin-bottom: 0.2rem;
 }
 
+.selected_files_cb {
+  display: inline-flex;
+  align-items: center;
+  padding-right: 2rem;
+  padding-left: 0.5rem;
+}
+
 .selected_files_info {
+  display: inline-flex;
+  align-items: center;
+  float: right;
+}
+
+.uploaded_files_info {
   display: inline-flex;
   align-items: center;
   padding-left: 1em;
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index d62413273..1e9edd27b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -1,8 +1,14 @@
-import { Button, Card, DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
+import {
+  Button,
+  Card,
+  DropdownButton,
+  DropdownButtonItem,
+  Form
+} from '@iqss/dataverse-design-system'
 import { PencilFill } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FilesHeader.module.scss'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 interface FilesHeaderProps {
@@ -28,6 +34,7 @@ export function FilesHeader({
 }: FilesHeaderProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [saving, setSaving] = useState(false)
+  const [selectAllChecked, setSelectAllChecked] = useState(false)
   const save = () => {
     setSaving(true)
     addFiles(fileUploadState)
@@ -55,17 +62,29 @@ export function FilesHeader({
     updateFiles(res)
   }
 
+  useEffect(() => {
+    setSelectAllChecked(selected.size === fileUploadState.length)
+  }, [selected, fileUploadState])
+
   return (
     <Card.Header>
+      <span className={styles.selected_files_cb}>
+        <Form.Group.Checkbox
+          label={''}
+          id={'select-all'}
+          checked={selectAllChecked}
+          onChange={all}
+        />
+      </span>
       <Button withSpacing onClick={save} disabled={saveDisabled}>
         Save
       </Button>
       <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
         Cancel
       </Button>
-      <Button withSpacing variant="link" onClick={all} disabled={saving}>
+      <span className={styles.uploaded_files_info}>
         {t('filesHeader.filesUploaded', { count: fileUploadState.length })}
-      </Button>
+      </span>
       <span className={styles.selected_files_info} hidden={selected.size === 0}>
         <span>{t('filesHeader.filesSelected', { count: selected.size })}</span>
         <DropdownButton

From 2860e0de755afda370bf6dd921c8572f41e235a6 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 17:42:04 +0200
Subject: [PATCH 56/96] added save button at the bottom

---
 .../upload-dataset-files/FileUploader.module.scss     | 10 ++++++++++
 .../uploaded-files-list/UploadedFiles.tsx             | 11 ++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index db1ea4681..e595d7412 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -5,6 +5,11 @@
 }
 
 .files {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+}
+
+.uploaded_files {
     display: grid;
     grid-template-columns: 4rem auto auto auto 3.5rem;
 }
@@ -72,4 +77,9 @@
 .selected_files_cb {
     display: inline-flex;
     align-items: center;
+}
+
+.save_btn {
+    padding-top: 1rem;
+    float: right;
 }
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 38db0af69..e65f74e50 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -92,6 +92,10 @@ export function UploadedFiles({
       return new Set<FileUploadState>(current)
     })
   }
+  const save = () => {
+    addFiles(fileUploadState)
+    cleanup()
+  }
 
   return (
     <>
@@ -124,7 +128,7 @@ export function UploadedFiles({
           <Card.Body>
             <div>
               {fileUploadState.length > 0 ? (
-                <div className={styles.files}>
+                <div className={styles.uploaded_files}>
                   {fileUploadState.map((file) => (
                     <div
                       className={cn(styles.file, {
@@ -173,6 +177,11 @@ export function UploadedFiles({
                 </div>
               ) : null}
             </div>
+            <div className={styles.save_btn}>
+              <Button withSpacing onClick={save} disabled={saveDisabled}>
+                Save
+              </Button>
+            </div>
           </Card.Body>
         </Card>
       </div>

From a13cdc25dc9364ea989cfdf3d519afe102ff26a4 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 17:44:27 +0200
Subject: [PATCH 57/96] removed dot

---
 public/locales/en/uploadDatasetFiles.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 19e2431e4..17c189638 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -43,6 +43,6 @@
     "filesUploaded_one": "{{count}} file uploaded",
     "filesUploaded_other": "{{count}} files uploaded",
     "filesSelected_one": "{{count}} file selected",
-    "filesSelected_other": "{{count}} files selected."
+    "filesSelected_other": "{{count}} files selected"
   }
 }

From 146f4f40b826e6a72c3ee19dd071af3c8962cfb2 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 18:23:27 +0200
Subject: [PATCH 58/96] lint fix

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index e595d7412..ab4deb6bd 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -80,6 +80,6 @@
 }
 
 .save_btn {
-    padding-top: 1rem;
     float: right;
+    padding-top: 1rem;
 }
\ No newline at end of file

From e1402b387e7c6e04982fa793648e91c7f670e243 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 18:45:41 +0200
Subject: [PATCH 59/96] fixed tests

---
 public/locales/en/uploadDatasetFiles.json     |  2 ++
 .../uploaded-files-list/UploadedFiles.tsx     |  2 +-
 .../files-header/FilesHeader.tsx              |  6 ++--
 .../UploadDatasetFiles.spec.tsx               | 28 ++++++++-----------
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 17c189638..d9a9a4596 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -37,6 +37,8 @@
     "plus": "Add new tag option"
   },
   "filesHeader": {
+    "save": "Save",
+    "cancel": "Cancel",
     "editFiles": "Edit files",
     "restrict": "Restrict",
     "unrestrict": "Unrestrict",
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index e65f74e50..d3caa07dc 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -141,7 +141,7 @@ export function UploadedFiles({
                           label={''}
                           id={'select-all'}
                           checked={selected.has(file)}
-                          onChange={(event) => updateSelected(file)}
+                          onChange={() => updateSelected(file)}
                         />
                       </div>
                       <FileForm
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 1e9edd27b..449ee9bda 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -76,11 +76,11 @@ export function FilesHeader({
           onChange={all}
         />
       </span>
-      <Button withSpacing onClick={save} disabled={saveDisabled}>
-        Save
+      <Button withSpacing onClick={save} disabled={saveDisabled} title={t('filesHeader.save')}>
+        {t('filesHeader.save')}
       </Button>
       <Button withSpacing variant="secondary" onClick={cleanup} disabled={saving}>
-        Cancel
+        {t('filesHeader.cancel')}
       </Button>
       <span className={styles.uploaded_files_info}>
         {t('filesHeader.filesUploaded', { count: fileUploadState.length })}
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 01b73037e..c00260cbc 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -177,7 +177,6 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 2)
     cy.findByText('Select files to add').should('exist')
     // wait for upload to finish
-    cy.findByText('Save').should('exist')
     cy.findByText('Cancel').should('exist')
     cy.get('@dnd').selectFile(
       { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
@@ -294,9 +293,8 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 2)
     cy.findByText('Select files to add').should('exist')
     // wait for upload to finish
-    cy.findByText('Save').should('exist')
     cy.findByText('Cancel').should('exist')
-    cy.findByText('Save').click()
+    cy.findAllByTitle('Save').click()
     cy.findByText('users1.json').should('not.exist')
     cy.findByText('users2.json').should('not.exist')
     cy.get('input[value="users1.json"]').should('not.exist')
@@ -325,7 +323,6 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 2)
     cy.findByText('Select files to add').should('exist')
     // wait for upload to finish
-    cy.findByText('Save').should('exist')
     cy.findByText('Cancel').should('exist')
     cy.findByText('Cancel').click()
     cy.findByText('users1.json').should('not.exist')
@@ -356,7 +353,6 @@ describe('UploadDatasetFiles', () => {
     cy.findAllByRole('progressbar').should('have.length', 2)
     cy.findByText('Select files to add').should('exist')
     // wait for upload to finish
-    cy.findByText('Save').should('exist')
     cy.findByText('Cancel').should('exist')
     cy.findAllByTitle('Delete').first().parent().click()
     cy.findByText('users1.json').should('not.exist')
@@ -382,35 +378,35 @@ describe('UploadDatasetFiles', () => {
     )
     // wait for upload to finish
     cy.findByText('2 files uploaded').should('exist')
-    cy.get('[type="checkbox"]').first().click()
+    cy.get('[type="checkbox"]').last().click()
     cy.findByText('Save Changes').first().click()
-    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('[type="checkbox"]').last().should('be.checked')
+    cy.get('[type="checkbox"]').last().click()
+    cy.get('[type="checkbox"]').last().should('not.be.checked')
     cy.get('[type="checkbox"]').first().click()
-    cy.get('[type="checkbox"]').first().should('not.be.checked')
-    cy.findByText('2 files uploaded').first().click()
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
     cy.findByText('Save Changes').first().click()
-    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('[type="checkbox"]').last().should('be.checked')
     cy.findByText('Edit files').first().click()
     cy.findByText('Unrestrict').first().click()
-    cy.get('[type="checkbox"]').first().should('not.be.checked')
+    cy.get('[type="checkbox"]').last().should('not.be.checked')
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
     cy.findByLabelText('Close').click()
-    cy.get('[type="checkbox"]').first().should('not.be.checked')
+    cy.get('[type="checkbox"]').last().should('not.be.checked')
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
     cy.get('[type="checkbox"]').last().click()
     cy.get('textarea').last().type('Hello, World!')
     cy.findByText('Save Changes').first().click()
-    cy.get('[type="checkbox"]').first().should('be.checked')
+    cy.get('[type="checkbox"]').last().should('be.checked')
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
     cy.findByTitle('Cancel changes').click()
-    cy.get('[type="checkbox"]').first().should('be.checked')
-    cy.findByText('2 files uploaded').first().click()
-    cy.findByText('2 files uploaded').first().click()
+    cy.get('[type="checkbox"]').last().should('be.checked')
+    cy.get('[type="checkbox"]').first().click()
+    cy.get('[type="checkbox"]').first().click()
     cy.findByText('Edit files').first().click()
     cy.findByTitle('Delete selected').click()
     cy.get('input[value="users1.json"]').should('not.exist')

From 8c0c6cee7e7a5587f540ae196395b5a555b25600 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 18:52:49 +0200
Subject: [PATCH 60/96] small margin between files

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index ab4deb6bd..3758ef99b 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -16,16 +16,19 @@
 
 .selected_file>div {
     background-color: #ffc !important;
+    margin-bottom: 0.5rem;
 }
 
 .file:nth-of-type(even)>div {
     padding: 0.5rem;
     background-color: #f8f9fc;
+    margin-bottom: 0.5rem;
 }
 
 .file:nth-of-type(odd)>div {
     padding: 0.5rem;
     background-color: white;
+    margin-bottom: 0.5rem;
 }
 
 .file {

From 205885150592562273934cb1ee699378aaf02346 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 19:27:02 +0200
Subject: [PATCH 61/96] flaky test

---
 .../sections/upload-dataset-files/UploadDatasetFiles.spec.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index c00260cbc..0729428a4 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -266,8 +266,6 @@ describe('UploadDatasetFiles', () => {
     })
     cy.findByText('users20.json').should('exist')
     cy.findAllByRole('progressbar').should('have.length', 6)
-    cy.findAllByTitle('Cancel upload').should('have.length', 20)
-    cy.findAllByRole('progressbar').should('have.length', 6)
     cy.findByText('Select files to add').should('exist')
   })
 

From 5efb5d25a48659643a6d143a54d1ce2411d39e30 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 22:22:12 +0200
Subject: [PATCH 62/96] added add tags menu action

---
 public/locales/en/uploadDatasetFiles.json     |  10 +-
 .../uploaded-files-list/UploadedFiles.tsx     |  28 ++++-
 .../add-tags-modal/AddTagsModal.module.scss   |  29 +++++
 .../add-tags-modal/AddTagsModal.tsx           | 113 ++++++++++++++++++
 .../file-form/FileForm.tsx                    |  11 +-
 .../files-header/FilesHeader.tsx              |   9 +-
 .../tag-options-modal/TagOptionsModal.tsx     |  10 +-
 7 files changed, 194 insertions(+), 16 deletions(-)
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
 create mode 100644 src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index d9a9a4596..19179a855 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -45,6 +45,14 @@
     "filesUploaded_one": "{{count}} file uploaded",
     "filesUploaded_other": "{{count}} files uploaded",
     "filesSelected_one": "{{count}} file selected",
-    "filesSelected_other": "{{count}} files selected"
+    "filesSelected_other": "{{count}} files selected",
+    "deleteSelected": "Delete selected",
+    "addTagsToSelected": "Add tags to selected",
+    "addTags": "Add tags"
+  },
+  "addTags": {
+    "title": "Add tags to selected files",
+    "saveChanges": "Save Changes",
+    "cancelChanges": "Cancel changes"
   }
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index d3caa07dc..a6bf67f1b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -9,6 +9,7 @@ import { TagOptionsModal } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
 import { RestrictionModal, RestrictionModalResult } from './restriction-modal/RestrictionModal'
 import { useTranslation } from 'react-i18next'
+import { AddTagsModal, AddTagsModalResult } from './add-tags-modal/AddTagsModal'
 
 interface DatasetFilesProps {
   fileUploadState: FileUploadState[]
@@ -30,11 +31,12 @@ export function UploadedFiles({
   const { t } = useTranslation('uploadDatasetFiles')
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [filesToRestrict, setFilesToRestrict] = useState<FileUploadState[]>([])
-  const [tags, setTagOptions] = useState([t('tags.documentation'), t('tags.data'), t('tags.code')])
+  const [tagOptions, setTagOptions] = useState([t('tags.documentation'), t('tags.data'), t('tags.code')])
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
   const [showTagOptionsModal, setShowTagOptionsModal] = useState(false)
+  const [showAddTagsModal, setShowAddTagsModal] = useState(false)
   const ignoreClasses = new Set<string>([
     'form-control',
     'btn',
@@ -61,6 +63,19 @@ export function UploadedFiles({
     }
     setShowRestrictionModal(false)
   }
+  const addTags = (res: AddTagsModalResult) => {
+    if (res.saved) {
+      const filesToAddTagsTo = Array.from(selected).map((file) => {
+        const newTags = [...file.tags]
+        res.tags.forEach((t) => { if (!file.tags.some((x) => x === t)) newTags.push(t) })
+        file.tags = newTags
+        return file
+      })
+      console.log(filesToAddTagsTo)
+      updateFiles(filesToAddTagsTo)
+    }
+    setShowAddTagsModal(false)
+  }
   const deleteFile = (file: FileUploadState) => {
     file.removed = true
     setSelected((x) => {
@@ -101,7 +116,7 @@ export function UploadedFiles({
     <>
       <div className={styles.forms}>
         <TagOptionsModal
-          tags={tags}
+          availableTags={[...tagOptions]}
           setTagOptions={setTagOptions}
           show={showTagOptionsModal}
           hide={() => setShowTagOptionsModal(false)}
@@ -112,6 +127,12 @@ export function UploadedFiles({
           show={showRestrictionModal}
           update={restrict}
         />
+        <AddTagsModal
+          show={showAddTagsModal}
+          availableTags={[...tagOptions]}
+          setTagOptions={setTagOptions}
+          update={addTags}
+        />
       </div>
       <div hidden={fileUploadState.length === 0}>
         <Card>
@@ -124,6 +145,7 @@ export function UploadedFiles({
             selected={selected}
             setSelected={setSelected}
             updateFilesRestricted={updateFilesRestricted}
+            showAddTagsModal={() => setShowAddTagsModal(true)}
           />
           <Card.Body>
             <div>
@@ -147,7 +169,7 @@ export function UploadedFiles({
                       <FileForm
                         file={file}
                         updateFiles={updateFiles}
-                        tags={tags}
+                        availableTags={[...tagOptions]}
                         editTagOptions={() => setShowTagOptionsModal(true)}
                       />
                       <div className={styles.file_size} title={t('uploadedFileSize')}>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
new file mode 100644
index 000000000..0b5875218
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
@@ -0,0 +1,29 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.add_tags_form {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+.tags {
+    display: flex;
+}
+
+.tags_select{
+    width: 100%;
+}
+
+.tag_options {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+.tag_info {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    color: $dv-subtext-color;
+}
+
+.apply_button {
+    height: 2.4rem;
+}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
new file mode 100644
index 000000000..a1c2fd834
--- /dev/null
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -0,0 +1,113 @@
+import { Button, Col, Form, Modal, SelectMultiple } from '@iqss/dataverse-design-system'
+import styles from './AddTagsModal.module.scss'
+import { FormEvent, useState, KeyboardEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface AddTagsModalProps {
+  show: boolean
+  availableTags: string[]
+  setTagOptions: (newTags: string[]) => void
+  update: (res: AddTagsModalResult) => void
+}
+
+export interface AddTagsModalResult {
+  saved: boolean
+  tags: string[]
+}
+
+export function AddTagsModal({
+  show,
+  availableTags,
+  setTagOptions,
+  update
+}: AddTagsModalProps) {
+  const { t } = useTranslation('uploadDatasetFiles')
+  const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
+  const [tag, setTag] = useState('')
+  const handleClose = (saved: boolean) =>
+    update({ saved: saved, tags: tagsToAdd })
+  const addTagOption = () => {
+    if (tag && !availableTags.includes(tag)) {
+      setTagOptions([...availableTags, tag])
+      setTag('')
+    }
+  }
+  const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      addTagOption()
+      event.preventDefault()
+    }
+  }
+
+
+  return (
+    <Modal show={show} onHide={() => handleClose(false)} size="lg">
+      <Modal.Header>
+        <Modal.Title>{t('addTags.title')}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className={styles.add_tags_form}>
+          <Form>
+            <Form.Group>
+              <Form.Group.Label column sm={3}>
+                {t('fileForm.tags')}
+              </Form.Group.Label>
+              <Col sm={9} className={styles.tags}>
+                <div className={styles.tags_select} title={t('fileForm.selectTags')}>
+                  <SelectMultiple
+                    options={availableTags}
+                    onChange={(newTags) => setTagsToAdd(newTags)}></SelectMultiple>
+                </div>
+              </Col>
+            </Form.Group>
+            <Form.Group>
+              <Form.Group.Label column sm={3}>
+                {t('tags.customFileTag')}
+              </Form.Group.Label>
+              <Col sm={9}>
+                <div className={styles.tag_info}>{t('tags.creatingNewTag')}</div>
+                <div className="input-group mb-3" onKeyDown={handleEnter} >
+                  <Form.Group.Input
+                    type="text"
+                    placeholder={t('tags.addNewTag')}
+                    value={tag}
+                    onChange={(event: FormEvent<HTMLInputElement>) =>
+                      setTag(event.currentTarget.value)
+                    }
+                  />
+                  <Button
+                    className={styles.apply_button}
+                    variant="secondary"
+                    type="button"
+                    {...{ size: 'sm' }}
+                    withSpacing
+                    onClick={addTagOption}>
+                    {t('tags.apply')}
+                  </Button>
+                </div>
+                <div className={styles.tag_info}>
+                  {t('tags.availableTagOptions')}
+                  {availableTags.join(', ')}
+                </div>
+              </Col>
+            </Form.Group>
+          </Form>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={() => handleClose(true)}
+          disabled={tagsToAdd.length === 0}>
+          {t('addTags.saveChanges')}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => handleClose(false)}
+          title={t('addTags.cancelChanges')}>
+          {t('cancel')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 86593810f..6616dcfa9 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 interface FileFormProps {
   file: FileUploadState
   updateFiles: (file: FileUploadState[]) => void
-  tags: string[]
+  availableTags: string[]
   editTagOptions: () => void
 }
 
-export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormProps) {
+export function FileForm({ file, updateFiles, availableTags, editTagOptions }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
@@ -26,8 +26,8 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
     file.description = updated
     updateFiles([file])
   }
-  const setTags = (file: FileUploadState, tags: string[]) => {
-    file.tags = tags
+  const setTags = (file: FileUploadState, newTags: string[]) => {
+    file.tags = [...newTags]
     updateFiles([file])
   }
 
@@ -84,7 +84,8 @@ export function FileForm({ file, updateFiles, tags, editTagOptions }: FileFormPr
           <Col sm={9} className={styles.tags}>
             <div className={styles.tags_select} title={t('fileForm.selectTags')}>
               <SelectMultiple
-                options={tags}
+                options={availableTags}
+                defaultValue={file.tags}
                 onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
             </div>
             <Button
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index 449ee9bda..f4805388f 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -20,6 +20,7 @@ interface FilesHeaderProps {
   cleanup: () => void
   addFiles: (fileUploadState: FileUploadState[]) => void
   updateFilesRestricted: (fileUploadState: FileUploadState[], restricted: boolean) => void
+  showAddTagsModal: () => void
 }
 
 export function FilesHeader({
@@ -30,7 +31,8 @@ export function FilesHeader({
   updateFiles,
   cleanup,
   addFiles,
-  updateFilesRestricted
+  updateFilesRestricted,
+  showAddTagsModal
 }: FilesHeaderProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [saving, setSaving] = useState(false)
@@ -93,13 +95,16 @@ export function FilesHeader({
           icon={<PencilFill className={styles.icon_pencil} />}
           id={'edit-files'}
           title={t('filesHeader.editFiles')}>
+          <DropdownButtonItem onClick={showAddTagsModal} title={t('filesHeader.addTagsToSelected')}>
+            {t('filesHeader.addTags')}
+          </DropdownButtonItem>
           <DropdownButtonItem onClick={() => updateRestriction(true)}>
             {t('filesHeader.restrict')}
           </DropdownButtonItem>
           <DropdownButtonItem onClick={() => updateRestriction(false)}>
             {t('filesHeader.unrestrict')}
           </DropdownButtonItem>
-          <DropdownButtonItem onClick={deleteSelected} title="Delete selected">
+          <DropdownButtonItem onClick={deleteSelected} title={t('filesHeader.deleteSelected')}>
             {t('delete')}
           </DropdownButtonItem>
         </DropdownButton>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index d64e3fc1e..68696ac51 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -4,18 +4,18 @@ import { FormEvent, useState, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 
 interface TagOptionsModalProps {
-  tags: string[]
+  availableTags: string[]
   setTagOptions: (newTags: string[]) => void
   show: boolean
   hide: () => void
 }
 
-export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsModalProps) {
+export function TagOptionsModal({ availableTags, setTagOptions, show, hide }: TagOptionsModalProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [tag, setTag] = useState('')
   const addTagOption = () => {
-    if (tag && !tags.includes(tag)) {
-      setTagOptions([...tags, tag])
+    if (tag && !availableTags.includes(tag)) {
+      setTagOptions([...availableTags, tag])
       setTag('')
     }
   }
@@ -61,7 +61,7 @@ export function TagOptionsModal({ tags, setTagOptions, show, hide }: TagOptionsM
                 </div>
                 <div className={styles.tag_info}>
                   {t('tags.availableTagOptions')}
-                  {tags.join(', ')}
+                  {availableTags.join(', ')}
                 </div>
               </Col>
             </Form.Group>

From f458d79f8ee6c1d6c4812ddcb759d96e1ac517cd Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 22:25:47 +0200
Subject: [PATCH 63/96] lint fix

---
 .../upload-dataset-files/FileUploader.module.scss   |  6 +++---
 .../uploaded-files-list/UploadedFiles.tsx           | 10 ++++++++--
 .../add-tags-modal/AddTagsModal.tsx                 | 13 +++----------
 .../tag-options-modal/TagOptionsModal.tsx           |  7 ++++++-
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 3758ef99b..d7e6ebf1f 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -15,20 +15,20 @@
 }
 
 .selected_file>div {
-    background-color: #ffc !important;
     margin-bottom: 0.5rem;
+    background-color: #ffc !important;
 }
 
 .file:nth-of-type(even)>div {
+    margin-bottom: 0.5rem;
     padding: 0.5rem;
     background-color: #f8f9fc;
-    margin-bottom: 0.5rem;
 }
 
 .file:nth-of-type(odd)>div {
+    margin-bottom: 0.5rem;
     padding: 0.5rem;
     background-color: white;
-    margin-bottom: 0.5rem;
 }
 
 .file {
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index a6bf67f1b..97857168b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -31,7 +31,11 @@ export function UploadedFiles({
   const { t } = useTranslation('uploadDatasetFiles')
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [filesToRestrict, setFilesToRestrict] = useState<FileUploadState[]>([])
-  const [tagOptions, setTagOptions] = useState([t('tags.documentation'), t('tags.data'), t('tags.code')])
+  const [tagOptions, setTagOptions] = useState([
+    t('tags.documentation'),
+    t('tags.data'),
+    t('tags.code')
+  ])
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
@@ -67,7 +71,9 @@ export function UploadedFiles({
     if (res.saved) {
       const filesToAddTagsTo = Array.from(selected).map((file) => {
         const newTags = [...file.tags]
-        res.tags.forEach((t) => { if (!file.tags.some((x) => x === t)) newTags.push(t) })
+        res.tags.forEach((t) => {
+          if (!file.tags.some((x) => x === t)) newTags.push(t)
+        })
         file.tags = newTags
         return file
       })
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index a1c2fd834..14e706a36 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -15,17 +15,11 @@ export interface AddTagsModalResult {
   tags: string[]
 }
 
-export function AddTagsModal({
-  show,
-  availableTags,
-  setTagOptions,
-  update
-}: AddTagsModalProps) {
+export function AddTagsModal({ show, availableTags, setTagOptions, update }: AddTagsModalProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
   const [tag, setTag] = useState('')
-  const handleClose = (saved: boolean) =>
-    update({ saved: saved, tags: tagsToAdd })
+  const handleClose = (saved: boolean) => update({ saved: saved, tags: tagsToAdd })
   const addTagOption = () => {
     if (tag && !availableTags.includes(tag)) {
       setTagOptions([...availableTags, tag])
@@ -39,7 +33,6 @@ export function AddTagsModal({
     }
   }
 
-
   return (
     <Modal show={show} onHide={() => handleClose(false)} size="lg">
       <Modal.Header>
@@ -66,7 +59,7 @@ export function AddTagsModal({
               </Form.Group.Label>
               <Col sm={9}>
                 <div className={styles.tag_info}>{t('tags.creatingNewTag')}</div>
-                <div className="input-group mb-3" onKeyDown={handleEnter} >
+                <div className="input-group mb-3" onKeyDown={handleEnter}>
                   <Form.Group.Input
                     type="text"
                     placeholder={t('tags.addNewTag')}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
index 68696ac51..716bed62e 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
@@ -10,7 +10,12 @@ interface TagOptionsModalProps {
   hide: () => void
 }
 
-export function TagOptionsModal({ availableTags, setTagOptions, show, hide }: TagOptionsModalProps) {
+export function TagOptionsModal({
+  availableTags,
+  setTagOptions,
+  show,
+  hide
+}: TagOptionsModalProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [tag, setTag] = useState('')
   const addTagOption = () => {

From d786d9c96df96c7052c9cb3d9855b231407ff5e7 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 22:58:26 +0200
Subject: [PATCH 64/96] improved coverage

---
 public/locales/en/uploadDatasetFiles.json     |  2 ++
 .../uploaded-files-list/UploadedFiles.tsx     |  4 +--
 .../UploadDatasetFiles.spec.tsx               | 30 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 19179a855..f8b424ed0 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -4,6 +4,8 @@
   "info": "Drag and drop files and/or directories here.",
   "select": "Select files to add",
   "delete": "Delete",
+  "save": "Save",
+  "saveUploaded": "Save uploaded files",
   "uploadedFileSize": "Uploaded file size",
   "restricted": "Restricted",
   "tags": {
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 97857168b..d53ad7031 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -206,8 +206,8 @@ export function UploadedFiles({
               ) : null}
             </div>
             <div className={styles.save_btn}>
-              <Button withSpacing onClick={save} disabled={saveDisabled}>
-                Save
+              <Button withSpacing onClick={save} disabled={saveDisabled} title={t('saveUploaded')}>
+                {t('save')}
               </Button>
             </div>
           </Card.Body>
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 0729428a4..139ae3862 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -299,6 +299,36 @@ describe('UploadDatasetFiles', () => {
     cy.get('input[value="users2.json"]').should('not.exist')
   })
 
+  it('saves uploaded files 2', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    cy.get('@dnd').selectFile(
+      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
+      { action: 'drag-drop' }
+    )
+    cy.findByText('users1.json').should('exist')
+    cy.findByText('users2.json').should('exist')
+    cy.findAllByTitle('Cancel upload').should('have.length', 2)
+    cy.findAllByRole('progressbar').should('have.length', 2)
+    cy.findByText('Select files to add').should('exist')
+    // wait for upload to finish
+    cy.findByText('Cancel').should('exist')
+    cy.findAllByTitle('Save uploaded files').click()
+    cy.findByText('users1.json').should('not.exist')
+    cy.findByText('users2.json').should('not.exist')
+    cy.get('input[value="users1.json"]').should('not.exist')
+    cy.get('input[value="users2.json"]').should('not.exist')
+  })
+
   it('cancels saving uploaded files', () => {
     const testDataset = DatasetMother.create()
 

From be645cdf8e2fd02837e54e81a1b56de849e8e694 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Thu, 27 Jun 2024 23:47:06 +0200
Subject: [PATCH 65/96] increased coverage

---
 public/locales/en/uploadDatasetFiles.json     |  6 ++--
 .../add-tags-modal/AddTagsModal.tsx           |  8 +++--
 .../UploadDatasetFiles.spec.tsx               | 33 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index f8b424ed0..b80bfba27 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -27,7 +27,7 @@
     "termsOfAccess": "Terms of Access for Restricted Files",
     "enableAccessRequest": "Enable access request",
     "saveChanges": "Save Changes",
-    "cancelChanges": "Cancel changes"
+    "cancelChanges": "Cancel Changes"
   },
   "fileForm": {
     "fileName": "File name",
@@ -54,7 +54,9 @@
   },
   "addTags": {
     "title": "Add tags to selected files",
+    "customTag": "Custom tag",
+    "selectTags": "Select tags to add",
     "saveChanges": "Save Changes",
-    "cancelChanges": "Cancel changes"
+    "cancelChanges": "Cancel Changes"
   }
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 14e706a36..05f3d85ec 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -46,7 +46,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                 {t('fileForm.tags')}
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
-                <div className={styles.tags_select} title={t('fileForm.selectTags')}>
+                <div className={styles.tags_select} title={t('addTags.selectTags')}>
                   <SelectMultiple
                     options={availableTags}
                     onChange={(newTags) => setTagsToAdd(newTags)}></SelectMultiple>
@@ -64,6 +64,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                     type="text"
                     placeholder={t('tags.addNewTag')}
                     value={tag}
+                    title={t('addTags.customTag')}
                     onChange={(event: FormEvent<HTMLInputElement>) =>
                       setTag(event.currentTarget.value)
                     }
@@ -91,14 +92,15 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
         <Button
           variant="primary"
           onClick={() => handleClose(true)}
-          disabled={tagsToAdd.length === 0}>
+          disabled={tagsToAdd.length === 0}
+          title={t('addTags.saveChanges')}>
           {t('addTags.saveChanges')}
         </Button>
         <Button
           variant="secondary"
           onClick={() => handleClose(false)}
           title={t('addTags.cancelChanges')}>
-          {t('cancel')}
+          {t('addTags.cancelChanges')}
         </Button>
       </Modal.Footer>
     </Modal>
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 139ae3862..91b0e7463 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -431,7 +431,7 @@ describe('UploadDatasetFiles', () => {
     cy.get('[type="checkbox"]').last().should('be.checked')
     cy.findByText('Edit files').first().click()
     cy.findByText('Restrict').first().click()
-    cy.findByTitle('Cancel changes').click()
+    cy.findByTitle('Cancel Changes').click()
     cy.get('[type="checkbox"]').last().should('be.checked')
     cy.get('[type="checkbox"]').first().click()
     cy.get('[type="checkbox"]').first().click()
@@ -497,4 +497,35 @@ describe('UploadDatasetFiles', () => {
     cy.get('label:contains("Tags")').first().click()
     cy.get('label:contains("Tags")').first().click()
   })
+
+  it('add tags', () => {
+    const testDataset = DatasetMother.create()
+
+    mountWithDataset(<UploadDatasetFiles fileRepository={new FileMockRepository()} />, testDataset)
+
+    cy.findByTestId('drag-and-drop').as('dnd')
+    cy.get('@dnd').should('exist')
+
+    cy.get('@dnd').selectFile(
+      { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
+      { action: 'drag-drop' }
+    )
+    // wait for upload to finish
+    cy.findByText('1 file uploaded').should('exist')
+    cy.get('[type="checkbox"]').first().click()
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Add tags').first().click()
+    cy.findByTitle('Custom tag').type('Hello, World!')
+    cy.findByText('Apply').click()
+    cy.findByTitle('Cancel Changes').click()
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Add tags').first().click()
+    cy.findByTitle('Custom tag').type('Hello, World!{enter}')
+    cy.findByLabelText('Close').click()
+    cy.findByText('Edit files').first().click()
+    cy.findByText('Add tags').first().click()
+    cy.findByTitle('Select tags to add').first().click()
+    cy.findByText('Hello, World!').click()
+    cy.findByTitle('Save Changes').click()
+  })
 })

From 404403825cda21c61eb743ef6745fdd1b6ef3d92 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 28 Jun 2024 14:52:37 +0200
Subject: [PATCH 66/96] file form improvements

---
 .../add-tags-modal/AddTagsModal.tsx                  |  8 +++++---
 .../file-form/FileForm.module.scss                   |  2 ++
 .../uploaded-files-list/file-form/FileForm.tsx       | 12 ++++++------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 05f3d85ec..15352d283 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -1,6 +1,6 @@
 import { Button, Col, Form, Modal, SelectMultiple } from '@iqss/dataverse-design-system'
 import styles from './AddTagsModal.module.scss'
-import { FormEvent, useState, KeyboardEvent } from 'react'
+import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
 
 interface AddTagsModalProps {
@@ -20,6 +20,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
   const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
   const [tag, setTag] = useState('')
   const handleClose = (saved: boolean) => update({ saved: saved, tags: tagsToAdd })
+  const tagsSelectId = useId()
   const addTagOption = () => {
     if (tag && !availableTags.includes(tag)) {
       setTagOptions([...availableTags, tag])
@@ -42,14 +43,15 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
         <div className={styles.add_tags_form}>
           <Form>
             <Form.Group>
-              <Form.Group.Label column sm={3}>
+              <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
                 {t('fileForm.tags')}
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
                   <SelectMultiple
                     options={availableTags}
-                    onChange={(newTags) => setTagsToAdd(newTags)}></SelectMultiple>
+                    onChange={(newTags) => setTagsToAdd(newTags)}
+                    inputButtonId={tagsSelectId}></SelectMultiple>
                 </div>
               </Col>
             </Form.Group>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
index dfccc541a..ff4f8399b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
@@ -6,10 +6,12 @@
 
 .tags {
     display: flex;
+    gap: 0.5rem;
 }
 
 .edit_tags_btn {
     margin: 0;
+    padding-inline: 8px;
 }
 
 .tags_select{
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 6616dcfa9..47dca5c34 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,7 +1,7 @@
 import { Button, Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
-import { FormEvent } from 'react'
+import { FormEvent, useId } from 'react'
 import { Plus } from 'react-bootstrap-icons'
 import { useTranslation } from 'react-i18next'
 
@@ -14,6 +14,7 @@ interface FileFormProps {
 
 export function FileForm({ file, updateFiles, availableTags, editTagOptions }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
+  const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
     updateFiles([file])
@@ -78,7 +79,7 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
           </Col>
         </Form.Group>
         <Form.Group>
-          <Form.Group.Label column sm={3}>
+          <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
             {t('fileForm.tags')}
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
@@ -86,17 +87,16 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
               <SelectMultiple
                 options={availableTags}
                 defaultValue={file.tags}
-                onChange={(newTags) => setTags(file, newTags)}></SelectMultiple>
+                onChange={(newTags) => setTags(file, newTags)}
+                inputButtonId={tagsSelectId}></SelectMultiple>
             </div>
             <Button
               className={styles.edit_tags_btn}
               variant="secondary"
               type="button"
-              {...{ size: 'sm' }}
-              withSpacing
               title={t('fileForm.editTagOptions')}
               onClick={editTagOptions}>
-              <Plus className={styles.icon} title={t('fileForm.plus')} />
+              <Plus title={t('fileForm.plus')} size={20} />
             </Button>
           </Col>
         </Form.Group>

From 2ddb63e005ee260571733cd0731ef9e54faf9847 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 28 Jun 2024 15:04:23 +0200
Subject: [PATCH 67/96] removed click listener on the file

---
 .../uploaded-files-list/UploadedFiles.tsx     | 26 ++-----------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index d53ad7031..cbf06776e 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames'
 import { X } from 'react-bootstrap-icons'
 import { FileUploadState } from '../../../files/domain/models/FileUploadState'
 import styles from '../FileUploader.module.scss'
-import { FormEvent, useState, MouseEvent } from 'react'
+import { FormEvent, useState } from 'react'
 import { FileForm } from './file-form/FileForm'
 import { TagOptionsModal } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
@@ -41,14 +41,6 @@ export function UploadedFiles({
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
   const [showTagOptionsModal, setShowTagOptionsModal] = useState(false)
   const [showAddTagsModal, setShowAddTagsModal] = useState(false)
-  const ignoreClasses = new Set<string>([
-    'form-control',
-    'btn',
-    'form-check-input',
-    'form-check-label',
-    'dropdown-item',
-    'dropdown'
-  ])
   const updateFilesRestricted = (files: FileUploadState[], restricted: boolean) => {
     if (restricted) {
       setFilesToRestrict(files)
@@ -90,19 +82,6 @@ export function UploadedFiles({
     })
     updateFiles([file])
   }
-  const clicked = (event: MouseEvent<HTMLDivElement, unknown>, file: FileUploadState) => {
-    const classList = Array.from((event.target as HTMLDivElement).classList)
-    const parent = (event.target as HTMLDivElement).parentElement
-    if (parent) {
-      classList.push(...Array.from(parent.classList))
-      if (parent.parentElement) {
-        classList.push(...Array.from(parent.parentElement.classList))
-      }
-    }
-    if (!classList.some((x) => ignoreClasses.has(x))) {
-      updateSelected(file)
-    }
-  }
   const updateSelected = (file: FileUploadState) => {
     setSelected((current) => {
       if (current.has(file)) {
@@ -162,8 +141,7 @@ export function UploadedFiles({
                       className={cn(styles.file, {
                         [styles.selected_file]: selected.has(file)
                       })}
-                      key={file.key}
-                      onClick={(event) => clicked(event, file)}>
+                      key={file.key}>
                       <div className={styles.selected_files_cb}>
                         <Form.Group.Checkbox
                           label={''}

From 3867fa7893250704b729eaf0e6d79472bf1fed4f Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Fri, 28 Jun 2024 15:49:22 +0200
Subject: [PATCH 68/96] improved coverage

---
 .../uploaded-files-list/UploadedFiles.tsx              |  1 +
 .../upload-dataset-files/UploadDatasetFiles.spec.tsx   | 10 +++-------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index cbf06776e..eb874455b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -144,6 +144,7 @@ export function UploadedFiles({
                       key={file.key}>
                       <div className={styles.selected_files_cb}>
                         <Form.Group.Checkbox
+                          data-testid="select_file_cb"
                           label={''}
                           id={'select-all'}
                           checked={selected.has(file)}
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 91b0e7463..965714ba7 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -488,14 +488,10 @@ describe('UploadDatasetFiles', () => {
       { fileName: 'users1.json', contents: [{ name: 'John Doe the 1st' }] },
       { action: 'drag-drop' }
     )
-    cy.get('@dnd').selectFile(
-      { fileName: 'users2.json', contents: [{ name: 'John Doe the 2nd' }] },
-      { action: 'drag-drop' }
-    )
     // wait for upload to finish
-    cy.findByText('2 files uploaded').should('exist')
-    cy.get('label:contains("Tags")').first().click()
-    cy.get('label:contains("Tags")').first().click()
+    cy.findByText('1 file uploaded').should('exist')
+    cy.findByTestId('select_file_cb').first().click()
+    cy.findByTestId('select_file_cb').first().click()
   })
 
   it('add tags', () => {

From 2dcea45be2e7e20024413ecd5592c2deb9011a8a Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 1 Jul 2024 13:34:03 +0200
Subject: [PATCH 69/96] fixed add tags to selected files from menu action

---
 .../uploaded-files-list/UploadedFiles.tsx                   | 6 +++---
 .../uploaded-files-list/file-form/FileForm.tsx              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index eb874455b..a4e9bfbcc 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -61,16 +61,16 @@ export function UploadedFiles({
   }
   const addTags = (res: AddTagsModalResult) => {
     if (res.saved) {
+      setTagOptions([...tagOptions]) // trigger multiselect on change to set file.tags to selectedOptions
       const filesToAddTagsTo = Array.from(selected).map((file) => {
-        const newTags = [...file.tags]
         res.tags.forEach((t) => {
-          if (!file.tags.some((x) => x === t)) newTags.push(t)
+          if (!file.tags.some((x) => x === t)) file.tags.push(t)
         })
-        file.tags = newTags
         return file
       })
       console.log(filesToAddTagsTo)
       updateFiles(filesToAddTagsTo)
+      setTagOptions([...tagOptions]) // trigger multiselect to redraw
     }
     setShowAddTagsModal(false)
   }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 47dca5c34..d046b2eaa 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -28,7 +28,7 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
     updateFiles([file])
   }
   const setTags = (file: FileUploadState, newTags: string[]) => {
-    file.tags = [...newTags]
+    file.tags = newTags
     updateFiles([file])
   }
 

From 804bbfde94475757cfd99b2684c5f5c8ec6a840a Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 1 Jul 2024 17:15:31 +0200
Subject: [PATCH 70/96] replaced SelectMultiple with a basic select input

---
 packages/design-system/CHANGELOG.md           |  1 +
 .../MultiSelectClassic.tsx                    | 30 +++++++++++++
 packages/design-system/src/lib/index.ts       |  1 +
 .../MultiSelectClassic.stories.tsx            | 42 +++++++++++++++++++
 .../MultiSelectClassic.spec.tsx               | 15 +++++++
 .../add-tags-modal/AddTagsModal.tsx           | 17 +++++---
 .../file-form/FileForm.tsx                    | 16 ++++---
 7 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
 create mode 100644 packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
 create mode 100644 packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx

diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 80b0b57b0..7152f80b4 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -39,6 +39,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **Select Multiple:** add is-invalid classname if isInvalid prop is true.
 - **Card:** NEW card element to show header and body.
 - **ProgressBar:** NEW progress bar element to show progress.
+- **MultiSelectClassic:** NEW simple multi select element.
 
 # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/dataverse-design-system@1.0.1...@iqss/dataverse-design-system@1.1.0) (2024-03-12)
 
diff --git a/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx b/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
new file mode 100644
index 000000000..9c766003e
--- /dev/null
+++ b/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
@@ -0,0 +1,30 @@
+import { Form } from 'react-bootstrap'
+
+/**
+ * ## Description
+ * Simple multi-select component
+ */
+interface MultiSelectProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string[]
+  options: string[]
+  setSelected: (values: string[]) => void
+}
+
+export function MultiSelectClassic({ value, options, setSelected }: MultiSelectProps) {
+  return (
+    <Form.Select
+      value={value}
+      multiple={true}
+      onChange={(e) => {
+        const options = [...e.target.selectedOptions]
+        const values = options.map((option) => option.value)
+        setSelected(values)
+      }}>
+      {options.map((o) => (
+        <option value={o} key={o}>
+          {o}
+        </option>
+      ))}
+    </Form.Select>
+  )
+}
diff --git a/packages/design-system/src/lib/index.ts b/packages/design-system/src/lib/index.ts
index fbac72d65..628d55697 100644
--- a/packages/design-system/src/lib/index.ts
+++ b/packages/design-system/src/lib/index.ts
@@ -27,3 +27,4 @@ export { RequiredInputSymbol } from './components/form/required-input-symbol/Req
 export { SelectMultiple } from './components/select-multiple/SelectMultiple'
 export { Card } from './components/card/Card'
 export { ProgressBar } from './components/progress-bar/ProgressBar'
+export { MultiSelectClassic } from './components/multi-select-classic/MultiSelectClassic'
diff --git a/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx b/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
new file mode 100644
index 000000000..7971d151f
--- /dev/null
+++ b/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MultiSelectClassic } from '../../components/multi-select-classic/MultiSelectClassic'
+
+const meta: Meta<typeof MultiSelectClassic> = {
+  title: 'MultiSelectClassic',
+  component: MultiSelectClassic
+}
+
+export default meta
+type Story = StoryObj<typeof MultiSelectClassic>
+
+const exampleOptions = [
+  'Agricultural Sciences',
+  'Arts and Humanities',
+  'Astronomy and Astrophysics',
+  'Business and Management',
+  'Chemistry',
+  'Computer and Information Science',
+  'Earth and Environmental Sciences',
+  'Engineering',
+  'Law',
+  'Mathematical Sciences',
+  'Medicine, Health and Life Sciences',
+  'Physics',
+  'Social Sciences',
+  'Other'
+]
+
+const selected: string[] = [exampleOptions[0]]
+
+export const Default: Story = {
+  render: () => (
+    <MultiSelectClassic
+      value={selected}
+      options={exampleOptions}
+      setSelected={(values) => {
+        selected.length = 0
+        values.forEach((s) => selected.push(s))
+      }}
+    />
+  )
+}
diff --git a/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx b/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx
new file mode 100644
index 000000000..204fa6eba
--- /dev/null
+++ b/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx
@@ -0,0 +1,15 @@
+import { MultiSelectClassic } from '../../../src/lib/components/multi-select-classic/MultiSelectClassic'
+
+describe('MultiSelectClassic', () => {
+  it('renders the MultiSelectClassic', () => {
+    cy.mount(
+      <MultiSelectClassic
+        value={['a', 'b']}
+        options={['a', 'b', 'c', 'd']}
+        setSelected={() => {}}
+      />
+    )
+
+    cy.findByText('a').should('exist')
+  })
+})
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 15352d283..8b993b0fe 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -1,7 +1,8 @@
-import { Button, Col, Form, Modal, SelectMultiple } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, Modal, MultiSelectClassic } from '@iqss/dataverse-design-system'
 import styles from './AddTagsModal.module.scss'
 import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Badge } from '@iqss/dataverse-design-system'
 
 interface AddTagsModalProps {
   show: boolean
@@ -24,6 +25,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
   const addTagOption = () => {
     if (tag && !availableTags.includes(tag)) {
       setTagOptions([...availableTags, tag])
+      setTagsToAdd((current) => [...current, tag])
       setTag('')
     }
   }
@@ -48,10 +50,11 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
-                  <SelectMultiple
+                  <MultiSelectClassic
+                    value={tagsToAdd}
                     options={availableTags}
-                    onChange={(newTags) => setTagsToAdd(newTags)}
-                    inputButtonId={tagsSelectId}></SelectMultiple>
+                    setSelected={(newTags) => setTagsToAdd(newTags)}
+                  />
                 </div>
               </Col>
             </Form.Group>
@@ -83,7 +86,11 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                 </div>
                 <div className={styles.tag_info}>
                   {t('tags.availableTagOptions')}
-                  {availableTags.join(', ')}
+                  <div>
+                    {tagsToAdd.map((o) => (
+                      <Badge key={o}>{o}</Badge>
+                    ))}
+                  </div>
                 </div>
               </Col>
             </Form.Group>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index d046b2eaa..69e0a2fda 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,9 +1,10 @@
-import { Button, Col, Form, SelectMultiple } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, MultiSelectClassic } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
 import { FormEvent, useId } from 'react'
 import { Plus } from 'react-bootstrap-icons'
 import { useTranslation } from 'react-i18next'
+import { Badge } from '@iqss/dataverse-design-system'
 
 interface FileFormProps {
   file: FileUploadState
@@ -81,14 +82,19 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
         <Form.Group>
           <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
             {t('fileForm.tags')}
+            <div>
+              {file.tags.map((o) => (
+                <Badge key={o}>{o}</Badge>
+              ))}
+            </div>
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
             <div className={styles.tags_select} title={t('fileForm.selectTags')}>
-              <SelectMultiple
+              <MultiSelectClassic
                 options={availableTags}
-                defaultValue={file.tags}
-                onChange={(newTags) => setTags(file, newTags)}
-                inputButtonId={tagsSelectId}></SelectMultiple>
+                value={file.tags}
+                setSelected={(newTags) => setTags(file, newTags)}
+              />
             </div>
             <Button
               className={styles.edit_tags_btn}

From 400cefcaf81033b01cf0b72c99a8fe69b8365c76 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Mon, 1 Jul 2024 17:28:02 +0200
Subject: [PATCH 71/96] cleanup after removal of the tag options modal

---
 .../uploaded-files-list/UploadedFiles.tsx     | 15 +---
 .../add-tags-modal/AddTagsModal.tsx           |  7 +-
 .../file-form/FileForm.tsx                    | 35 ++------
 .../TagOptionsModal.module.scss               | 16 ----
 .../tag-options-modal/TagOptionsModal.tsx     | 83 -------------------
 5 files changed, 14 insertions(+), 142 deletions(-)
 delete mode 100644 src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss
 delete mode 100644 src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index a4e9bfbcc..3ff2bab55 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -5,7 +5,6 @@ import { FileUploadState } from '../../../files/domain/models/FileUploadState'
 import styles from '../FileUploader.module.scss'
 import { FormEvent, useState } from 'react'
 import { FileForm } from './file-form/FileForm'
-import { TagOptionsModal } from './tag-options-modal/TagOptionsModal'
 import { FilesHeader } from './files-header/FilesHeader'
 import { RestrictionModal, RestrictionModalResult } from './restriction-modal/RestrictionModal'
 import { useTranslation } from 'react-i18next'
@@ -39,7 +38,6 @@ export function UploadedFiles({
   const [terms, setTerms] = useState('')
   const [requestAccess, setRequestAccess] = useState(true)
   const [showRestrictionModal, setShowRestrictionModal] = useState(false)
-  const [showTagOptionsModal, setShowTagOptionsModal] = useState(false)
   const [showAddTagsModal, setShowAddTagsModal] = useState(false)
   const updateFilesRestricted = (files: FileUploadState[], restricted: boolean) => {
     if (restricted) {
@@ -100,12 +98,6 @@ export function UploadedFiles({
   return (
     <>
       <div className={styles.forms}>
-        <TagOptionsModal
-          availableTags={[...tagOptions]}
-          setTagOptions={setTagOptions}
-          show={showTagOptionsModal}
-          hide={() => setShowTagOptionsModal(false)}
-        />
         <RestrictionModal
           defaultRequestAccess={requestAccess}
           defaultTerms={terms}
@@ -151,12 +143,7 @@ export function UploadedFiles({
                           onChange={() => updateSelected(file)}
                         />
                       </div>
-                      <FileForm
-                        file={file}
-                        updateFiles={updateFiles}
-                        availableTags={[...tagOptions]}
-                        editTagOptions={() => setShowTagOptionsModal(true)}
-                      />
+                      <FileForm file={file} updateFiles={updateFiles} />
                       <div className={styles.file_size} title={t('uploadedFileSize')}>
                         {file.fileSizeString}
                       </div>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 8b993b0fe..9bd99b392 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -47,6 +47,11 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
             <Form.Group>
               <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
                 {t('fileForm.tags')}
+                <div>
+                  {tagsToAdd.map((o) => (
+                    <Badge key={o}>{o}</Badge>
+                  ))}
+                </div>
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
@@ -87,7 +92,7 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                 <div className={styles.tag_info}>
                   {t('tags.availableTagOptions')}
                   <div>
-                    {tagsToAdd.map((o) => (
+                    {availableTags.map((o) => (
                       <Badge key={o}>{o}</Badge>
                     ))}
                   </div>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 69e0a2fda..afdc3f991 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,19 +1,15 @@
-import { Button, Col, Form, MultiSelectClassic } from '@iqss/dataverse-design-system'
+import { Badge, Col, Form } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
 import { FormEvent, useId } from 'react'
-import { Plus } from 'react-bootstrap-icons'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@iqss/dataverse-design-system'
 
 interface FileFormProps {
   file: FileUploadState
   updateFiles: (file: FileUploadState[]) => void
-  availableTags: string[]
-  editTagOptions: () => void
 }
 
-export function FileForm({ file, updateFiles, availableTags, editTagOptions }: FileFormProps) {
+export function FileForm({ file, updateFiles }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
@@ -28,10 +24,6 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
     file.description = updated
     updateFiles([file])
   }
-  const setTags = (file: FileUploadState, newTags: string[]) => {
-    file.tags = newTags
-    updateFiles([file])
-  }
 
   return (
     <div className={styles.file_form}>
@@ -82,28 +74,15 @@ export function FileForm({ file, updateFiles, availableTags, editTagOptions }: F
         <Form.Group>
           <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
             {t('fileForm.tags')}
-            <div>
-              {file.tags.map((o) => (
-                <Badge key={o}>{o}</Badge>
-              ))}
-            </div>
           </Form.Group.Label>
           <Col sm={9} className={styles.tags}>
             <div className={styles.tags_select} title={t('fileForm.selectTags')}>
-              <MultiSelectClassic
-                options={availableTags}
-                value={file.tags}
-                setSelected={(newTags) => setTags(file, newTags)}
-              />
+              <div>
+                {file.tags.map((o) => (
+                  <Badge key={o}>{o}</Badge>
+                ))}
+              </div>
             </div>
-            <Button
-              className={styles.edit_tags_btn}
-              variant="secondary"
-              type="button"
-              title={t('fileForm.editTagOptions')}
-              onClick={editTagOptions}>
-              <Plus title={t('fileForm.plus')} size={20} />
-            </Button>
           </Col>
         </Form.Group>
       </Form>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss
deleted file mode 100644
index 916d1599e..000000000
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
-
-.tag_options {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-}
-
-.tag_info {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    color: $dv-subtext-color;
-}
-
-.apply_button {
-    height: 2.4rem;
-}
\ No newline at end of file
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
deleted file mode 100644
index 716bed62e..000000000
--- a/src/sections/upload-dataset-files/uploaded-files-list/tag-options-modal/TagOptionsModal.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Button, Col, Form, Modal } from '@iqss/dataverse-design-system'
-import styles from './TagOptionsModal.module.scss'
-import { FormEvent, useState, KeyboardEvent } from 'react'
-import { useTranslation } from 'react-i18next'
-
-interface TagOptionsModalProps {
-  availableTags: string[]
-  setTagOptions: (newTags: string[]) => void
-  show: boolean
-  hide: () => void
-}
-
-export function TagOptionsModal({
-  availableTags,
-  setTagOptions,
-  show,
-  hide
-}: TagOptionsModalProps) {
-  const { t } = useTranslation('uploadDatasetFiles')
-  const [tag, setTag] = useState('')
-  const addTagOption = () => {
-    if (tag && !availableTags.includes(tag)) {
-      setTagOptions([...availableTags, tag])
-      setTag('')
-    }
-  }
-  const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      addTagOption()
-      event.preventDefault()
-    }
-  }
-
-  return (
-    <Modal show={show} onHide={hide} size="lg">
-      <Modal.Header>
-        <Modal.Title>{t('tags.editTagOptions')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <div className={styles.tag_options} onKeyDown={handleEnter}>
-          <Form onSubmit={addTagOption}>
-            <Form.Group>
-              <Form.Group.Label column sm={3}>
-                {t('tags.customFileTag')}
-              </Form.Group.Label>
-              <Col sm={9}>
-                <div className={styles.tag_info}>{t('tags.creatingNewTag')}</div>
-                <div className="input-group mb-3">
-                  <Form.Group.Input
-                    type="text"
-                    placeholder={t('tags.addNewTag')}
-                    value={tag}
-                    onChange={(event: FormEvent<HTMLInputElement>) =>
-                      setTag(event.currentTarget.value)
-                    }
-                  />
-                  <Button
-                    className={styles.apply_button}
-                    variant="secondary"
-                    type="button"
-                    {...{ size: 'sm' }}
-                    withSpacing
-                    onClick={addTagOption}>
-                    {t('tags.apply')}
-                  </Button>
-                </div>
-                <div className={styles.tag_info}>
-                  {t('tags.availableTagOptions')}
-                  {availableTags.join(', ')}
-                </div>
-              </Col>
-            </Form.Group>
-          </Form>
-        </div>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="secondary" onClick={hide}>
-          {t('tags.close')}
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  )
-}

From e5e95ab00d6c148800d181c84f2fc6b630e8b6e0 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Mon, 1 Jul 2024 20:35:40 +0200
Subject: [PATCH 72/96] tag changes

---
 .../uploaded-files-list/UploadedFiles.tsx     | 22 +++++++++++++------
 .../add-tags-modal/AddTagsModal.tsx           |  8 ++++---
 .../file-form/FileForm.tsx                    | 14 ++++++++++--
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 3ff2bab55..9de9a0692 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -30,6 +30,7 @@ export function UploadedFiles({
   const { t } = useTranslation('uploadDatasetFiles')
   const [selected, setSelected] = useState(new Set<FileUploadState>())
   const [filesToRestrict, setFilesToRestrict] = useState<FileUploadState[]>([])
+  const [filesToAddTagsTo, setFilesToAddTagsTo] = useState<FileUploadState[]>([])
   const [tagOptions, setTagOptions] = useState([
     t('tags.documentation'),
     t('tags.data'),
@@ -59,16 +60,13 @@ export function UploadedFiles({
   }
   const addTags = (res: AddTagsModalResult) => {
     if (res.saved) {
-      setTagOptions([...tagOptions]) // trigger multiselect on change to set file.tags to selectedOptions
-      const filesToAddTagsTo = Array.from(selected).map((file) => {
+      const files = filesToAddTagsTo.map((file) => {
         res.tags.forEach((t) => {
           if (!file.tags.some((x) => x === t)) file.tags.push(t)
         })
         return file
       })
-      console.log(filesToAddTagsTo)
-      updateFiles(filesToAddTagsTo)
-      setTagOptions([...tagOptions]) // trigger multiselect to redraw
+      updateFiles(files)
     }
     setShowAddTagsModal(false)
   }
@@ -122,7 +120,10 @@ export function UploadedFiles({
             selected={selected}
             setSelected={setSelected}
             updateFilesRestricted={updateFilesRestricted}
-            showAddTagsModal={() => setShowAddTagsModal(true)}
+            showAddTagsModal={() => {
+              setFilesToAddTagsTo(Array.from(selected))
+              setShowAddTagsModal(true)
+            }}
           />
           <Card.Body>
             <div>
@@ -143,7 +144,14 @@ export function UploadedFiles({
                           onChange={() => updateSelected(file)}
                         />
                       </div>
-                      <FileForm file={file} updateFiles={updateFiles} />
+                      <FileForm
+                        file={file}
+                        updateFiles={updateFiles}
+                        addTagTo={(file) => {
+                          setFilesToAddTagsTo([file])
+                          setShowAddTagsModal(true)
+                        }}
+                      />
                       <div className={styles.file_size} title={t('uploadedFileSize')}>
                         {file.fileSizeString}
                       </div>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 9bd99b392..d1f7924fc 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -1,8 +1,7 @@
-import { Button, Col, Form, Modal, MultiSelectClassic } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, Modal, MultiSelectClassic, Badge } from '@iqss/dataverse-design-system'
 import styles from './AddTagsModal.module.scss'
 import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@iqss/dataverse-design-system'
 
 interface AddTagsModalProps {
   show: boolean
@@ -20,7 +19,10 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
   const { t } = useTranslation('uploadDatasetFiles')
   const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
   const [tag, setTag] = useState('')
-  const handleClose = (saved: boolean) => update({ saved: saved, tags: tagsToAdd })
+  const handleClose = (saved: boolean) => {
+    update({ saved: saved, tags: tagsToAdd })
+    setTagsToAdd([])
+  }
   const tagsSelectId = useId()
   const addTagOption = () => {
     if (tag && !availableTags.includes(tag)) {
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index afdc3f991..982549865 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,15 +1,17 @@
-import { Badge, Col, Form } from '@iqss/dataverse-design-system'
+import { Badge, Button, Col, Form } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
 import { FormEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Plus } from 'react-bootstrap-icons'
 
 interface FileFormProps {
   file: FileUploadState
   updateFiles: (file: FileUploadState[]) => void
+  addTagTo: (file: FileUploadState) => void
 }
 
-export function FileForm({ file, updateFiles }: FileFormProps) {
+export function FileForm({ file, updateFiles, addTagTo }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
@@ -83,6 +85,14 @@ export function FileForm({ file, updateFiles }: FileFormProps) {
                 ))}
               </div>
             </div>
+            <Button
+              className={styles.edit_tags_btn}
+              variant="secondary"
+              type="button"
+              title={t('fileForm.editTagOptions')}
+              onClick={() => addTagTo(file)}>
+              <Plus title={t('fileForm.plus')} size={20} />
+            </Button>
           </Col>
         </Form.Group>
       </Form>

From ecafcbbcc049d2c87a734b225c9dd861c72f057b Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Mon, 1 Jul 2024 22:16:33 +0200
Subject: [PATCH 73/96] updated select tags components

---
 .../uploaded-files-list/UploadedFiles.tsx     |  1 +
 .../add-tags-modal/AddTagsModal.tsx           | 33 +++++++++++--------
 .../file-form/FileForm.tsx                    | 22 ++++++++++---
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 9de9a0692..22bfda731 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -146,6 +146,7 @@ export function UploadedFiles({
                       </div>
                       <FileForm
                         file={file}
+                        availableTags={[...tagOptions]}
                         updateFiles={updateFiles}
                         addTagTo={(file) => {
                           setFilesToAddTagsTo([file])
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index d1f7924fc..d63f84e8b 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -1,7 +1,8 @@
-import { Button, Col, Form, Modal, MultiSelectClassic, Badge } from '@iqss/dataverse-design-system'
+import { Button, Col, Form, Modal, Badge } from '@iqss/dataverse-design-system'
 import styles from './AddTagsModal.module.scss'
 import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Plus, X } from 'react-bootstrap-icons'
 
 interface AddTagsModalProps {
   show: boolean
@@ -37,7 +38,6 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
       event.preventDefault()
     }
   }
-
   return (
     <Modal show={show} onHide={() => handleClose(false)} size="lg">
       <Modal.Header>
@@ -49,19 +49,17 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
             <Form.Group>
               <Form.Group.Label column sm={3} htmlFor={tagsSelectId}>
                 {t('fileForm.tags')}
-                <div>
-                  {tagsToAdd.map((o) => (
-                    <Badge key={o}>{o}</Badge>
-                  ))}
-                </div>
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
-                  <MultiSelectClassic
-                    value={tagsToAdd}
-                    options={availableTags}
-                    setSelected={(newTags) => setTagsToAdd(newTags)}
-                  />
+                  {tagsToAdd.map((o) => (
+                    <span key={o} onClick={() => setTagsToAdd(tagsToAdd.filter((x) => x !== o))}>
+                      <Badge variant="primary">
+                        {o}
+                        <X />
+                      </Badge>
+                    </span>
+                  ))}
                 </div>
               </Col>
             </Form.Group>
@@ -95,7 +93,16 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                   {t('tags.availableTagOptions')}
                   <div>
                     {availableTags.map((o) => (
-                      <Badge key={o}>{o}</Badge>
+                      <span
+                        key={o}
+                        onClick={() => {
+                          if (!tagsToAdd.includes(o)) setTagsToAdd([...tagsToAdd, o])
+                        }}>
+                        <Badge variant="secondary">
+                          {o}
+                          <Plus />
+                        </Badge>
+                      </span>
                     ))}
                   </div>
                 </div>
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index 982549865..bedd3f793 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -3,15 +3,16 @@ import { FileUploadState } from '../../../../files/domain/models/FileUploadState
 import styles from './FileForm.module.scss'
 import { FormEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Plus } from 'react-bootstrap-icons'
+import { Plus, X } from 'react-bootstrap-icons'
 
 interface FileFormProps {
   file: FileUploadState
+  availableTags: string[]
   updateFiles: (file: FileUploadState[]) => void
   addTagTo: (file: FileUploadState) => void
 }
 
-export function FileForm({ file, updateFiles, addTagTo }: FileFormProps) {
+export function FileForm({ file, availableTags, updateFiles, addTagTo }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
@@ -26,6 +27,14 @@ export function FileForm({ file, updateFiles, addTagTo }: FileFormProps) {
     file.description = updated
     updateFiles([file])
   }
+  const toggleTag = (file: FileUploadState, tag: string) => {
+    if (file.tags.includes(tag)) {
+      delete file.tags[file.tags.indexOf(tag)]
+    } else {
+      file.tags.push(tag)
+    }
+    updateFiles([file])
+  }
 
   return (
     <div className={styles.file_form}>
@@ -80,8 +89,13 @@ export function FileForm({ file, updateFiles, addTagTo }: FileFormProps) {
           <Col sm={9} className={styles.tags}>
             <div className={styles.tags_select} title={t('fileForm.selectTags')}>
               <div>
-                {file.tags.map((o) => (
-                  <Badge key={o}>{o}</Badge>
+                {availableTags.map((o) => (
+                  <span key={o} onClick={() => toggleTag(file, o)}>
+                    <Badge variant={file.tags.includes(o) ? 'primary' : 'secondary'}>
+                      {o}
+                      {file.tags.includes(o) ? <X /> : <Plus />}
+                    </Badge>
+                  </span>
                 ))}
               </div>
             </div>

From 84b6e080294717d75a16e0e2d240a217b10dc6b0 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Mon, 1 Jul 2024 23:14:49 +0200
Subject: [PATCH 74/96] adding tags improvements

---
 public/locales/en/uploadDatasetFiles.json     |  3 +-
 .../uploaded-files-list/UploadedFiles.tsx     |  5 +-
 .../file-form/FileForm.tsx                    | 48 ++++++++++++++-----
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index b80bfba27..927bc0abf 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -18,7 +18,8 @@
     "addNewTag": "Add new file tag...",
     "availableTagOptions": "Available tag options: ",
     "apply": "Apply",
-    "close": "Close"
+    "close": "Close",
+    "addCustomTag": "Add new custom file tag..."
   },
   "restriction": {
     "restrictAccess": "Restrict Access",
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 22bfda731..02df8b39a 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -148,10 +148,7 @@ export function UploadedFiles({
                         file={file}
                         availableTags={[...tagOptions]}
                         updateFiles={updateFiles}
-                        addTagTo={(file) => {
-                          setFilesToAddTagsTo([file])
-                          setShowAddTagsModal(true)
-                        }}
+                        setTagOptions={setTagOptions}
                       />
                       <div className={styles.file_size} title={t('uploadedFileSize')}>
                         {file.fileSizeString}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index bedd3f793..c3438dcb7 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -1,7 +1,7 @@
 import { Badge, Button, Col, Form } from '@iqss/dataverse-design-system'
 import { FileUploadState } from '../../../../files/domain/models/FileUploadState'
 import styles from './FileForm.module.scss'
-import { FormEvent, useId } from 'react'
+import { FormEvent, useState, KeyboardEvent, useId } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Plus, X } from 'react-bootstrap-icons'
 
@@ -9,11 +9,12 @@ interface FileFormProps {
   file: FileUploadState
   availableTags: string[]
   updateFiles: (file: FileUploadState[]) => void
-  addTagTo: (file: FileUploadState) => void
+  setTagOptions: (tags: string[]) => void
 }
 
-export function FileForm({ file, availableTags, updateFiles, addTagTo }: FileFormProps) {
+export function FileForm({ file, availableTags, updateFiles, setTagOptions }: FileFormProps) {
   const { t } = useTranslation('uploadDatasetFiles')
+  const [tag, setTag] = useState('')
   const tagsSelectId = useId()
   const updateFileName = (file: FileUploadState, updated: string) => {
     file.fileName = updated
@@ -35,6 +36,20 @@ export function FileForm({ file, availableTags, updateFiles, addTagTo }: FileFor
     }
     updateFiles([file])
   }
+  const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      addTagOption()
+      event.preventDefault()
+    }
+  }
+  const addTagOption = () => {
+    if (tag && !availableTags.includes(tag)) {
+      setTagOptions([...availableTags, tag])
+      file.tags.push(tag)
+      setTag('')
+      updateFiles([file])
+    }
+  }
 
   return (
     <div className={styles.file_form}>
@@ -98,15 +113,26 @@ export function FileForm({ file, availableTags, updateFiles, addTagTo }: FileFor
                   </span>
                 ))}
               </div>
+              <div className={styles.tags} onKeyDown={handleEnter}>
+                <Form.Group.Input
+                  type="text"
+                  placeholder={t('tags.addCustomTag')}
+                  title={t('tags.creatingNewTag')}
+                  value={tag}
+                  onChange={(event: FormEvent<HTMLInputElement>) =>
+                    setTag(event.currentTarget.value)
+                  }
+                />
+                <Button
+                  className={styles.edit_tags_btn}
+                  variant="secondary"
+                  type="button"
+                  title={t('tags.creatingNewTag')}
+                  onClick={addTagOption}>
+                  <Plus size={20} />
+                </Button>
+              </div>
             </div>
-            <Button
-              className={styles.edit_tags_btn}
-              variant="secondary"
-              type="button"
-              title={t('fileForm.editTagOptions')}
-              onClick={() => addTagTo(file)}>
-              <Plus title={t('fileForm.plus')} size={20} />
-            </Button>
           </Col>
         </Form.Group>
       </Form>

From 96d63020a5aa4e5b1bb23cc1d80d9c35c9265c69 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Mon, 1 Jul 2024 23:29:23 +0200
Subject: [PATCH 75/96] removed unused component

---
 packages/design-system/CHANGELOG.md           |  1 -
 .../MultiSelectClassic.tsx                    | 30 -------------
 packages/design-system/src/lib/index.ts       |  1 -
 .../MultiSelectClassic.stories.tsx            | 42 -------------------
 .../MultiSelectClassic.spec.tsx               | 15 -------
 5 files changed, 89 deletions(-)
 delete mode 100644 packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
 delete mode 100644 packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
 delete mode 100644 packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx

diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
index 7152f80b4..80b0b57b0 100644
--- a/packages/design-system/CHANGELOG.md
+++ b/packages/design-system/CHANGELOG.md
@@ -39,7 +39,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 - **Select Multiple:** add is-invalid classname if isInvalid prop is true.
 - **Card:** NEW card element to show header and body.
 - **ProgressBar:** NEW progress bar element to show progress.
-- **MultiSelectClassic:** NEW simple multi select element.
 
 # [1.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/dataverse-design-system@1.0.1...@iqss/dataverse-design-system@1.1.0) (2024-03-12)
 
diff --git a/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx b/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
deleted file mode 100644
index 9c766003e..000000000
--- a/packages/design-system/src/lib/components/multi-select-classic/MultiSelectClassic.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Form } from 'react-bootstrap'
-
-/**
- * ## Description
- * Simple multi-select component
- */
-interface MultiSelectProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: string[]
-  options: string[]
-  setSelected: (values: string[]) => void
-}
-
-export function MultiSelectClassic({ value, options, setSelected }: MultiSelectProps) {
-  return (
-    <Form.Select
-      value={value}
-      multiple={true}
-      onChange={(e) => {
-        const options = [...e.target.selectedOptions]
-        const values = options.map((option) => option.value)
-        setSelected(values)
-      }}>
-      {options.map((o) => (
-        <option value={o} key={o}>
-          {o}
-        </option>
-      ))}
-    </Form.Select>
-  )
-}
diff --git a/packages/design-system/src/lib/index.ts b/packages/design-system/src/lib/index.ts
index 628d55697..fbac72d65 100644
--- a/packages/design-system/src/lib/index.ts
+++ b/packages/design-system/src/lib/index.ts
@@ -27,4 +27,3 @@ export { RequiredInputSymbol } from './components/form/required-input-symbol/Req
 export { SelectMultiple } from './components/select-multiple/SelectMultiple'
 export { Card } from './components/card/Card'
 export { ProgressBar } from './components/progress-bar/ProgressBar'
-export { MultiSelectClassic } from './components/multi-select-classic/MultiSelectClassic'
diff --git a/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx b/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
deleted file mode 100644
index 7971d151f..000000000
--- a/packages/design-system/src/lib/stories/multi-select-classic/MultiSelectClassic.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { MultiSelectClassic } from '../../components/multi-select-classic/MultiSelectClassic'
-
-const meta: Meta<typeof MultiSelectClassic> = {
-  title: 'MultiSelectClassic',
-  component: MultiSelectClassic
-}
-
-export default meta
-type Story = StoryObj<typeof MultiSelectClassic>
-
-const exampleOptions = [
-  'Agricultural Sciences',
-  'Arts and Humanities',
-  'Astronomy and Astrophysics',
-  'Business and Management',
-  'Chemistry',
-  'Computer and Information Science',
-  'Earth and Environmental Sciences',
-  'Engineering',
-  'Law',
-  'Mathematical Sciences',
-  'Medicine, Health and Life Sciences',
-  'Physics',
-  'Social Sciences',
-  'Other'
-]
-
-const selected: string[] = [exampleOptions[0]]
-
-export const Default: Story = {
-  render: () => (
-    <MultiSelectClassic
-      value={selected}
-      options={exampleOptions}
-      setSelected={(values) => {
-        selected.length = 0
-        values.forEach((s) => selected.push(s))
-      }}
-    />
-  )
-}
diff --git a/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx b/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx
deleted file mode 100644
index 204fa6eba..000000000
--- a/packages/design-system/tests/component/multi-select-classic/MultiSelectClassic.spec.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { MultiSelectClassic } from '../../../src/lib/components/multi-select-classic/MultiSelectClassic'
-
-describe('MultiSelectClassic', () => {
-  it('renders the MultiSelectClassic', () => {
-    cy.mount(
-      <MultiSelectClassic
-        value={['a', 'b']}
-        options={['a', 'b', 'c', 'd']}
-        setSelected={() => {}}
-      />
-    )
-
-    cy.findByText('a').should('exist')
-  })
-})

From 429b1ca108468950807a463ec816fc249e861f20 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 2 Jul 2024 10:38:19 +0200
Subject: [PATCH 76/96] tests fix

---
 .../file-form/FileForm.tsx                    |  1 +
 .../UploadDatasetFiles.spec.tsx               | 21 ++++---------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
index c3438dcb7..783743443 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.tsx
@@ -124,6 +124,7 @@ export function FileForm({ file, availableTags, updateFiles, setTagOptions }: Fi
                   }
                 />
                 <Button
+                  data-testid="add-custom-tag"
                   className={styles.edit_tags_btn}
                   variant="secondary"
                   type="button"
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index 965714ba7..c7f3c587a 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -455,21 +455,9 @@ describe('UploadDatasetFiles', () => {
     )
     // wait for upload to finish
     cy.findByText('1 file uploaded').should('exist')
-    cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type('Hello, World!')
-    cy.findByText('Apply').click()
-    cy.findByText('Close').click()
-    cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type('Hello, World, again!')
-    cy.findByText('Apply').click()
-    cy.findByLabelText('Close').click()
-    cy.findByTitle('Edit tag options').first().click()
-    cy.get('input').last().type('Hello, World, yet again!{enter}')
-    cy.findByLabelText('Close').click()
-    cy.findByTitle('Select tags').first().click()
+    cy.get('input[placeholder="Add new custom file tag..."]').first().type('Hello, World!')
+    cy.findByTestId('add-custom-tag').click()
     cy.findByText('Hello, World!').should('exist')
-    cy.findByText('Hello, World, again!').should('exist')
-    cy.findByText('Hello, World, yet again!').should('exist')
     cy.findByText('Hello, World!').click()
     cy.get('input[type=text]').first().type('Hello, World!')
     cy.get('input[placeholder="File path"]').first().type('Hello, World!')
@@ -516,12 +504,11 @@ describe('UploadDatasetFiles', () => {
     cy.findByTitle('Cancel Changes').click()
     cy.findByText('Edit files').first().click()
     cy.findByText('Add tags').first().click()
-    cy.findByTitle('Custom tag').type('Hello, World!{enter}')
+    cy.findByTitle('Custom tag').type('Hello, World 2!{enter}')
     cy.findByLabelText('Close').click()
     cy.findByText('Edit files').first().click()
     cy.findByText('Add tags').first().click()
-    cy.findByTitle('Select tags to add').first().click()
-    cy.findByText('Hello, World!').click()
+    cy.findByTitle('Custom tag').type('Hello, World 3!{enter}')
     cy.findByTitle('Save Changes').click()
   })
 })

From b63bfb827c5696161fba12b0fb69192cdc616797 Mon Sep 17 00:00:00 2001
From: Eryk Kullikowski <eryk.kulikowski@gmail.com>
Date: Tue, 2 Jul 2024 11:35:02 +0200
Subject: [PATCH 77/96] improved coverage

---
 .../uploaded-files-list/UploadedFiles.tsx                 | 2 +-
 .../uploaded-files-list/add-tags-modal/AddTagsModal.tsx   | 8 ++++++--
 .../upload-dataset-files/UploadDatasetFiles.spec.tsx      | 7 +++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 02df8b39a..b6f89ea6a 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -62,7 +62,7 @@ export function UploadedFiles({
     if (res.saved) {
       const files = filesToAddTagsTo.map((file) => {
         res.tags.forEach((t) => {
-          if (!file.tags.some((x) => x === t)) file.tags.push(t)
+          if (!file.tags.includes(t)) file.tags.push(t)
         })
         return file
       })
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index d63f84e8b..45cc7e23d 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -53,7 +53,10 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
                   {tagsToAdd.map((o) => (
-                    <span key={o} onClick={() => setTagsToAdd(tagsToAdd.filter((x) => x !== o))}>
+                    <span
+                      key={o}
+                      onClick={() => setTagsToAdd(tagsToAdd.filter((x) => x !== o))}
+                      data-testid="tag-to-add">
                       <Badge variant="primary">
                         {o}
                         <X />
@@ -97,7 +100,8 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                         key={o}
                         onClick={() => {
                           if (!tagsToAdd.includes(o)) setTagsToAdd([...tagsToAdd, o])
-                        }}>
+                        }}
+                        data-testid={o}>
                         <Badge variant="secondary">
                           {o}
                           <Plus />
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index c7f3c587a..a5ad3c13d 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -459,6 +459,8 @@ describe('UploadDatasetFiles', () => {
     cy.findByTestId('add-custom-tag').click()
     cy.findByText('Hello, World!').should('exist')
     cy.findByText('Hello, World!').click()
+    cy.findByText('Hello, World!').click()
+    cy.get('input[placeholder="Add new custom file tag..."]').first().type('Hello, World 2!{enter}')
     cy.get('input[type=text]').first().type('Hello, World!')
     cy.get('input[placeholder="File path"]').first().type('Hello, World!')
     cy.get('textarea').first().type('Hello, World!')
@@ -509,6 +511,11 @@ describe('UploadDatasetFiles', () => {
     cy.findByText('Edit files').first().click()
     cy.findByText('Add tags').first().click()
     cy.findByTitle('Custom tag').type('Hello, World 3!{enter}')
+    cy.findByTestId('tag-to-add').first().click()
+    cy.findByTestId('Data').click()
+    cy.findByTestId('Data').click()
+    cy.findByTestId('Data').click()
+    cy.findByTestId('Hello, World 3!').click()
     cy.findByTitle('Save Changes').click()
   })
 })

From e3ac62aa053d19503c495b110ec0432dbfc6c330 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:16:31 +0200
Subject: [PATCH 78/96] moved file holder to models

---
 src/files/domain/{repositories/File.ts => models/FileHolder.ts} | 0
 src/files/domain/repositories/FileRepository.ts                 | 2 +-
 src/files/infrastructure/FileJSDataverseRepository.ts           | 2 +-
 src/stories/file/FileMockFailedUploadRepository.ts              | 2 +-
 src/stories/file/FileMockRepository.ts                          | 2 +-
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/files/domain/{repositories/File.ts => models/FileHolder.ts} (100%)

diff --git a/src/files/domain/repositories/File.ts b/src/files/domain/models/FileHolder.ts
similarity index 100%
rename from src/files/domain/repositories/File.ts
rename to src/files/domain/models/FileHolder.ts
diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index f47451ebb..5d29b360b 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -6,7 +6,7 @@ import { DatasetVersion, DatasetVersionNumber } from '../../../dataset/domain/mo
 import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { FilePreview } from '../models/FilePreview'
 import { FilesWithCount } from '../models/FilesWithCount'
-import { FileHolder } from './File'
+import { FileHolder } from '../models/FileHolder'
 import { FileUploadState } from '../models/FileUploadState'
 
 export interface FileRepository {
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 7d38e1d4b..2c3ac7c29 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -31,7 +31,7 @@ import { JSFileMetadataMapper } from './mappers/JSFileMetadataMapper'
 import { FilePermissions } from '../domain/models/FilePermissions'
 import { JSFilePermissionsMapper } from './mappers/JSFilePermissionsMapper'
 import { FilesWithCount } from '../domain/models/FilesWithCount'
-import { FileHolder } from '../domain/repositories/File'
+import { FileHolder } from '../domain/models/FileHolder'
 import { FileUploadState } from '../domain/models/FileUploadState'
 
 const includeDeaccessioned = true
diff --git a/src/stories/file/FileMockFailedUploadRepository.ts b/src/stories/file/FileMockFailedUploadRepository.ts
index b8f3edca0..8b0687d0b 100644
--- a/src/stories/file/FileMockFailedUploadRepository.ts
+++ b/src/stories/file/FileMockFailedUploadRepository.ts
@@ -1,6 +1,6 @@
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { FileMockRepository } from './FileMockRepository'
-import { FileHolder } from '../../files/domain/repositories/File'
+import { FileHolder } from '../../files/domain/models/FileHolder'
 
 export class FileMocFailedRepository extends FileMockRepository implements FileRepository {
   uploadFile(
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 96442546b..9e369dfac 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -12,7 +12,7 @@ import { File } from '../../files/domain/models/File'
 import { FilePreview } from '../../files/domain/models/FilePreview'
 import { FakerHelper } from '../../../tests/component/shared/FakerHelper'
 import { FilesWithCount } from '../../files/domain/models/FilesWithCount'
-import { FileHolder } from '../../files/domain/repositories/File'
+import { FileHolder } from '../../files/domain/models/FileHolder'
 import { FileUploadState } from '../../files/domain/models/FileUploadState'
 
 export class FileMockRepository implements FileRepository {

From fdd9bb607d46a6162e46ba59f36a44da2537fe3b Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:17:10 +0200
Subject: [PATCH 79/96] removed log line

---
 src/files/infrastructure/FileJSDataverseRepository.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 2c3ac7c29..52b0693da 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -329,7 +329,6 @@ export class FileJSDataverseRepository implements FileRepository {
           }
         }
       }
-      console.log(f.file.name)
       all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string))
     })
     return Promise.all(all)

From aa98151e4a428597457c920e0cb187de72ae59c5 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:18:53 +0200
Subject: [PATCH 80/96] improved syntax in css for grid-template-columns

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index d7e6ebf1f..e78ce1078 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -11,7 +11,7 @@
 
 .uploaded_files {
     display: grid;
-    grid-template-columns: 4rem auto auto auto 3.5rem;
+    grid-template-columns: 4rem repeat(3, auto) 3.5rem;
 }
 
 .selected_file>div {

From 43ea8f8825428b4b0004bc4a7b77bdd515d5795f Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:31:19 +0200
Subject: [PATCH 81/96] removed important keyword and renamed vars ending with
 _cb to ending with _checkbox

---
 src/sections/upload-dataset-files/FileUploader.module.scss    | 4 ++--
 .../uploaded-files-list/UploadedFiles.tsx                     | 4 ++--
 .../uploaded-files-list/files-header/FilesHeader.module.scss  | 2 +-
 .../uploaded-files-list/files-header/FilesHeader.tsx          | 2 +-
 .../sections/upload-dataset-files/UploadDatasetFiles.spec.tsx | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index e78ce1078..112924049 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -16,7 +16,7 @@
 
 .selected_file>div {
     margin-bottom: 0.5rem;
-    background-color: #ffc !important;
+    background-color: #ffc;
 }
 
 .file:nth-of-type(even)>div {
@@ -77,7 +77,7 @@
     padding: 0.5em;
 }
 
-.selected_files_cb {
+.selected_files_checkbox {
     display: inline-flex;
     align-items: center;
 }
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index b6f89ea6a..995f2c578 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -135,9 +135,9 @@ export function UploadedFiles({
                         [styles.selected_file]: selected.has(file)
                       })}
                       key={file.key}>
-                      <div className={styles.selected_files_cb}>
+                      <div className={styles.selected_files_checkbox}>
                         <Form.Group.Checkbox
-                          data-testid="select_file_cb"
+                          data-testid="select_file_checkbox"
                           label={''}
                           id={'select-all'}
                           checked={selected.has(file)}
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
index d8f0d75c4..cc910a76d 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -5,7 +5,7 @@
   margin-bottom: 0.2rem;
 }
 
-.selected_files_cb {
+.selected_files_checkbox {
   display: inline-flex;
   align-items: center;
   padding-right: 2rem;
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index f4805388f..e57d16f93 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -70,7 +70,7 @@ export function FilesHeader({
 
   return (
     <Card.Header>
-      <span className={styles.selected_files_cb}>
+      <span className={styles.selected_files_checkbox}>
         <Form.Group.Checkbox
           label={''}
           id={'select-all'}
diff --git a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
index a5ad3c13d..7de43e55a 100644
--- a/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
+++ b/tests/component/sections/upload-dataset-files/UploadDatasetFiles.spec.tsx
@@ -480,8 +480,8 @@ describe('UploadDatasetFiles', () => {
     )
     // wait for upload to finish
     cy.findByText('1 file uploaded').should('exist')
-    cy.findByTestId('select_file_cb').first().click()
-    cy.findByTestId('select_file_cb').first().click()
+    cy.findByTestId('select_file_checkbox').first().click()
+    cy.findByTestId('select_file_checkbox').first().click()
   })
 
   it('add tags', () => {

From 9b5fa4de80a1166c333cd70b9e0bc54205ed0ba6 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:40:35 +0200
Subject: [PATCH 82/96] restored the important key in css

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 112924049..78bbffc7c 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -16,7 +16,8 @@
 
 .selected_file>div {
     margin-bottom: 0.5rem;
-    background-color: #ffc;
+    padding: 0.5rem;
+    background-color: #ffc !important;
 }
 
 .file:nth-of-type(even)>div {

From 6a4e0589c7851d0ce64d58398d6965407c5664b4 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:50:32 +0200
Subject: [PATCH 83/96] padding-block i.s.o. padding-top and padding-bottom

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 78bbffc7c..4a7c366a3 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -55,8 +55,7 @@
 }
 
 .cancel_upload {
-    padding-top: 0.1rem;
-    padding-bottom: 0.1rem;
+    padding-block: 0.1rem;
 }
 
 .upload_progress {

From be16f40bfa994c780d6cb513ddee0464d09320c0 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:52:49 +0200
Subject: [PATCH 84/96] format and empty line at the end of css

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 4a7c366a3..40bc14f92 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -85,4 +85,4 @@
 .save_btn {
     float: right;
     padding-top: 1rem;
-}
\ No newline at end of file
+}

From 9770b276d1a959bcf5c598184a4e1c691d0a8a67 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 15:57:05 +0200
Subject: [PATCH 85/96] replaced float:right with display:flex nad
 justify-content:flex-end

---
 src/sections/upload-dataset-files/FileUploader.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index 40bc14f92..d5b4f570b 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -83,6 +83,7 @@
 }
 
 .save_btn {
-    float: right;
+    display: flex;
+    justify-content: flex-end;
     padding-top: 1rem;
 }

From 245e08dbdbbb90d1e1f781d1ea799c59ef109beb Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:17:23 +0200
Subject: [PATCH 86/96] removed commented-out defensive programming code (if
 not commented out or removed it negatively impacts coverage testing)

---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index d7a55d2f3..cc62d525e 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -58,10 +58,6 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
 
   const uploadOneFile = (file: File) => {
     const key = FileUploadTools.key(file)
-    // sanity check: should not happen
-    /*if (!canUpload(file)) {
-      return
-    }*/
     setState(FileUploadTools.showProgressBar(file, fileUploaderState))
     const cancel = uploadFile(
       fileRepository,

From ddf3cbfd51bf482e7793a5093855c747aded5171 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:19:33 +0200
Subject: [PATCH 87/96] added empty line at the end of css file

---
 .../uploaded-files-list/add-tags-modal/AddTagsModal.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
index 0b5875218..3225fe4f3 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
@@ -26,4 +26,4 @@
 
 .apply_button {
     height: 2.4rem;
-}
\ No newline at end of file
+}

From 022609f9ece6d650825b46f7f50018b40a46f089 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:22:19 +0200
Subject: [PATCH 88/96] padding-block

---
 .../add-tags-modal/AddTagsModal.module.scss              | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
index 3225fe4f3..bbf815fe6 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.module.scss
@@ -1,8 +1,7 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .add_tags_form {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    padding-block: 0.5em;
 }
 
 .tags {
@@ -14,13 +13,11 @@
 }
 
 .tag_options {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    padding-block: 0.5em;
 }
 
 .tag_info {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
+    padding-block: 0.5em;
     color: $dv-subtext-color;
 }
 

From 0098925b786846ef901bf050cc57d96c18f4613f Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:24:53 +0200
Subject: [PATCH 89/96] rename: o -> tagName

---
 .../uploaded-files-list/add-tags-modal/AddTagsModal.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index 45cc7e23d..f3b171d55 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -52,13 +52,13 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
               </Form.Group.Label>
               <Col sm={9} className={styles.tags}>
                 <div className={styles.tags_select} title={t('addTags.selectTags')}>
-                  {tagsToAdd.map((o) => (
+                  {tagsToAdd.map((tagName) => (
                     <span
-                      key={o}
-                      onClick={() => setTagsToAdd(tagsToAdd.filter((x) => x !== o))}
+                      key={tagName}
+                      onClick={() => setTagsToAdd(tagsToAdd.filter((x) => x !== tagName))}
                       data-testid="tag-to-add">
                       <Badge variant="primary">
-                        {o}
+                        {tagName}
                         <X />
                       </Badge>
                     </span>

From 948f2193252d0f8c17bee10f76de36cce5c65c2c Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:25:47 +0200
Subject: [PATCH 90/96] removed unused colors import

---
 .../uploaded-files-list/file-form/FileForm.module.scss          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
index ff4f8399b..952d71834 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/file-form/FileForm.module.scss
@@ -1,5 +1,3 @@
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
-
 .file_form {
     padding: 0.25em;
 }

From 3d2503835b6a99d9926ec376550ad772d0cf1525 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:28:12 +0200
Subject: [PATCH 91/96] rename: tag -> newCustomTag

---
 .../add-tags-modal/AddTagsModal.tsx                | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
index f3b171d55..03df1aca7 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/add-tags-modal/AddTagsModal.tsx
@@ -19,17 +19,17 @@ export interface AddTagsModalResult {
 export function AddTagsModal({ show, availableTags, setTagOptions, update }: AddTagsModalProps) {
   const { t } = useTranslation('uploadDatasetFiles')
   const [tagsToAdd, setTagsToAdd] = useState<string[]>([])
-  const [tag, setTag] = useState('')
+  const [newCustomTag, setNewCustomTag] = useState('')
   const handleClose = (saved: boolean) => {
     update({ saved: saved, tags: tagsToAdd })
     setTagsToAdd([])
   }
   const tagsSelectId = useId()
   const addTagOption = () => {
-    if (tag && !availableTags.includes(tag)) {
-      setTagOptions([...availableTags, tag])
-      setTagsToAdd((current) => [...current, tag])
-      setTag('')
+    if (newCustomTag && !availableTags.includes(newCustomTag)) {
+      setTagOptions([...availableTags, newCustomTag])
+      setTagsToAdd((current) => [...current, newCustomTag])
+      setNewCustomTag('')
     }
   }
   const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -76,10 +76,10 @@ export function AddTagsModal({ show, availableTags, setTagOptions, update }: Add
                   <Form.Group.Input
                     type="text"
                     placeholder={t('tags.addNewTag')}
-                    value={tag}
+                    value={newCustomTag}
                     title={t('addTags.customTag')}
                     onChange={(event: FormEvent<HTMLInputElement>) =>
-                      setTag(event.currentTarget.value)
+                      setNewCustomTag(event.currentTarget.value)
                     }
                   />
                   <Button

From d9cdfb228b6b05c9f7509bfc04521f04e71c51e2 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 16:50:16 +0200
Subject: [PATCH 92/96] removed float:right

---
 .../files-header/FilesHeader.module.scss      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
index cc910a76d..d1df4aab9 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -1,25 +1,25 @@
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
-
 .icon_pencil {
-  margin-right: 0.3rem;
-  margin-bottom: 0.2rem;
+    margin-right: 0.3rem;
+    margin-bottom: 0.2rem;
 }
 
 .selected_files_checkbox {
-  display: inline-flex;
-  align-items: center;
-  padding-right: 2rem;
-  padding-left: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    padding-right: 2rem;
+    padding-left: 0.5rem;
 }
 
 .selected_files_info {
-  display: inline-flex;
-  align-items: center;
-  float: right;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: absolute;
+    right: 0;
 }
 
 .uploaded_files_info {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 1em;
-}
\ No newline at end of file
+    display: inline-flex;
+    align-items: center;
+    padding-left: 1em;
+}

From 8219be4eb809802bf3b90984bc8ddc07c1d74907 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 17:01:56 +0200
Subject: [PATCH 93/96] aria-label select all for checkbox

---
 public/locales/en/uploadDatasetFiles.json                      | 3 ++-
 .../uploaded-files-list/files-header/FilesHeader.tsx           | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/locales/en/uploadDatasetFiles.json b/public/locales/en/uploadDatasetFiles.json
index 927bc0abf..7e4e8d558 100644
--- a/public/locales/en/uploadDatasetFiles.json
+++ b/public/locales/en/uploadDatasetFiles.json
@@ -51,7 +51,8 @@
     "filesSelected_other": "{{count}} files selected",
     "deleteSelected": "Delete selected",
     "addTagsToSelected": "Add tags to selected",
-    "addTags": "Add tags"
+    "addTags": "Add tags",
+    "selectAll": "Select all"
   },
   "addTags": {
     "title": "Add tags to selected files",
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
index e57d16f93..2152a8442 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.tsx
@@ -73,6 +73,7 @@ export function FilesHeader({
       <span className={styles.selected_files_checkbox}>
         <Form.Group.Checkbox
           label={''}
+          aria-label={t('filesHeader.selectAll')}
           id={'select-all'}
           checked={selectAllChecked}
           onChange={all}

From efcb923130d279ef14e3101b7ebbf6cb8ce6fc82 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Tue, 16 Jul 2024 17:12:16 +0200
Subject: [PATCH 94/96] modals no longer in div

---
 .../FileUploader.module.scss                  |  4 ---
 .../uploaded-files-list/UploadedFiles.tsx     | 26 +++++++++----------
 .../files-header/FilesHeader.module.scss      |  4 +--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/sections/upload-dataset-files/FileUploader.module.scss b/src/sections/upload-dataset-files/FileUploader.module.scss
index d5b4f570b..3e76ca70b 100644
--- a/src/sections/upload-dataset-files/FileUploader.module.scss
+++ b/src/sections/upload-dataset-files/FileUploader.module.scss
@@ -73,10 +73,6 @@
     text-align: center;
 }
 
-.forms {
-    padding: 0.5em;
-}
-
 .selected_files_checkbox {
     display: inline-flex;
     align-items: center;
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
index 995f2c578..afd54715d 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
+++ b/src/sections/upload-dataset-files/uploaded-files-list/UploadedFiles.tsx
@@ -95,20 +95,18 @@ export function UploadedFiles({
 
   return (
     <>
-      <div className={styles.forms}>
-        <RestrictionModal
-          defaultRequestAccess={requestAccess}
-          defaultTerms={terms}
-          show={showRestrictionModal}
-          update={restrict}
-        />
-        <AddTagsModal
-          show={showAddTagsModal}
-          availableTags={[...tagOptions]}
-          setTagOptions={setTagOptions}
-          update={addTags}
-        />
-      </div>
+      <RestrictionModal
+        defaultRequestAccess={requestAccess}
+        defaultTerms={terms}
+        show={showRestrictionModal}
+        update={restrict}
+      />
+      <AddTagsModal
+        show={showAddTagsModal}
+        availableTags={[...tagOptions]}
+        setTagOptions={setTagOptions}
+        update={addTags}
+      />
       <div hidden={fileUploadState.length === 0}>
         <Card>
           <FilesHeader
diff --git a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
index d1df4aab9..47760326c 100644
--- a/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
+++ b/src/sections/upload-dataset-files/uploaded-files-list/files-header/FilesHeader.module.scss
@@ -11,11 +11,11 @@
 }
 
 .selected_files_info {
+    position: absolute;
+    right: 0;
     display: inline-flex;
     align-items: center;
     justify-content: flex-end;
-    position: absolute;
-    right: 0;
 }
 
 .uploaded_files_info {

From cd89db2ea513ca135655abd7230facb9ac709b76 Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Wed, 17 Jul 2024 13:00:04 +0200
Subject: [PATCH 95/96] re-added sanity check

---
 src/sections/upload-dataset-files/UploadDatasetFiles.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index cc62d525e..f8e23db07 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -57,6 +57,11 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
     !FileUploadTools.get(file, fileUploaderState).done
 
   const uploadOneFile = (file: File) => {
+    // sanity check: should not happen
+    /* istanbul ignore next */
+    if (!canUpload(file)) {
+      return
+    }
     const key = FileUploadTools.key(file)
     setState(FileUploadTools.showProgressBar(file, fileUploaderState))
     const cancel = uploadFile(

From 7d889e487256e5586c6e76d3413ed4be72eff2bf Mon Sep 17 00:00:00 2001
From: Eryk Kulikowski <eryk.kulikowski@kuleuven.be>
Date: Sat, 20 Jul 2024 16:37:03 +0200
Subject: [PATCH 96/96] add uploaded file workaround until js-dataverse
 implementation is finalized

---
 .../domain/repositories/FileRepository.ts     |  7 +++-
 src/files/domain/useCases/addUploadedFiles.ts | 17 ++++++++-
 .../FileJSDataverseRepository.ts              | 38 ++++---------------
 .../UploadDatasetFiles.tsx                    |  9 ++++-
 src/stories/file/FileMockRepository.ts        | 16 +++++++-
 5 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/files/domain/repositories/FileRepository.ts b/src/files/domain/repositories/FileRepository.ts
index 5d29b360b..9c2c30478 100644
--- a/src/files/domain/repositories/FileRepository.ts
+++ b/src/files/domain/repositories/FileRepository.ts
@@ -42,5 +42,10 @@ export interface FileRepository {
     abortController: AbortController,
     storageIdSetter: (storageId: string) => void
   ) => Promise<void>
-  addUploadedFile: (datasetId: number | string, files: FileUploadState[]) => Promise<void[]>
+  addUploadedFiles: (datasetId: number | string, files: FileUploadState[]) => Promise<void>
+  addUploadedFile: (
+    datasetId: number | string,
+    file: FileHolder,
+    storageId: string
+  ) => Promise<void>
 }
diff --git a/src/files/domain/useCases/addUploadedFiles.ts b/src/files/domain/useCases/addUploadedFiles.ts
index 0eb512580..b1ef42065 100644
--- a/src/files/domain/useCases/addUploadedFiles.ts
+++ b/src/files/domain/useCases/addUploadedFiles.ts
@@ -8,7 +8,22 @@ export function addUploadedFiles(
   done: () => void
 ): void {
   fileRepository
-    .addUploadedFile(datasetId, files)
+    .addUploadedFiles(datasetId, files)
+    .catch((error: Error) => {
+      throw new Error(error.message)
+    })
+    .finally(done)
+}
+
+export function addUploadedFile(
+  fileRepository: FileRepository,
+  datasetId: number | string,
+  file: File,
+  storageId: string,
+  done: () => void
+): void {
+  fileRepository
+    .addUploadedFile(datasetId, { file: file }, storageId)
     .catch((error: Error) => {
       throw new Error(error.message)
     })
diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
index 52b0693da..89d6fea4b 100644
--- a/src/files/infrastructure/FileJSDataverseRepository.ts
+++ b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -301,36 +301,12 @@ export class FileJSDataverseRepository implements FileRepository {
       })
   }
 
-  addUploadedFile(datasetId: number | string, files: FileUploadState[]): Promise<void[]> {
-    const all: Promise<void>[] = []
-    files.forEach((file) => {
-      const f: FileHolder = {
-        file: {
-          lastModified: file.fileLastModified,
-          name: file.fileName,
-          webkitRelativePath: file.fileDir ? file.fileDir + '/' + file.fileName : file.fileName,
-          size: file.fileSize,
-          type: file.fileType,
-          arrayBuffer: function (): Promise<ArrayBuffer> {
-            throw new Error('Function not implemented.')
-          },
-          slice: function (
-            _start?: number | undefined,
-            _end?: number | undefined,
-            _contentType?: string | undefined
-          ): Blob {
-            throw new Error('Function not implemented.')
-          },
-          stream: function (): ReadableStream<Uint8Array> {
-            throw new Error('Function not implemented.')
-          },
-          text: function (): Promise<string> {
-            throw new Error('Function not implemented.')
-          }
-        }
-      }
-      all.push(addUploadedFileToDataset.execute(datasetId, f.file, file.storageId as string))
-    })
-    return Promise.all(all)
+  addUploadedFiles(_datasetId: number | string, _files: FileUploadState[]): Promise<void> {
+    // TODO: not yet implemented
+    return new Promise<void>(() => {})
+  }
+
+  addUploadedFile(datasetId: number | string, file: FileHolder, storageId: string): Promise<void> {
+    return addUploadedFileToDataset.execute(datasetId, file.file, storageId)
   }
 }
diff --git a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
index f8e23db07..7a21e05ed 100644
--- a/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
+++ b/src/sections/upload-dataset-files/UploadDatasetFiles.tsx
@@ -9,7 +9,7 @@ import { FileUploader } from './FileUploader'
 import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
 import { uploadFile } from '../../files/domain/useCases/uploadFile'
 import { UploadedFiles } from './uploaded-files-list/UploadedFiles'
-import { addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles'
+import { addUploadedFile, addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles'
 
 interface UploadDatasetFilesProps {
   fileRepository: FileRepository
@@ -71,6 +71,13 @@ export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDat
       () => {
         setState(FileUploadTools.done(file, fileUploaderState))
         fileUploadFinished(file)
+        addUploadedFile(
+          fileRepository,
+          dataset?.persistentId as string,
+          file,
+          FileUploadTools.get(file, fileUploaderState).storageId as string,
+          () => {}
+        )
       },
       () => {
         setState(FileUploadTools.failed(file, fileUploaderState))
diff --git a/src/stories/file/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts
index 9e369dfac..48e7064b9 100644
--- a/src/stories/file/FileMockRepository.ts
+++ b/src/stories/file/FileMockRepository.ts
@@ -107,10 +107,22 @@ export class FileMockRepository implements FileRepository {
     return res()
   }
 
-  addUploadedFile(_datasetId: number | string, _files: FileUploadState[]): Promise<void[]> {
+  addUploadedFiles(_datasetId: number | string, _files: FileUploadState[]): Promise<void> {
     return new Promise((resolve) => {
       setTimeout(() => {
-        resolve([])
+        resolve()
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  addUploadedFile(
+    _datasetId: number | string,
+    _file: FileHolder,
+    _storageId: string
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
       }, FakerHelper.loadingTimout())
     })
   }