Replace File integration

[g-saracca]

What this PR does / why we need it:

Replicate the replace file feature from JSF, both from the Edit File options in File Page and Dataset Page file item in files list.
The Replace File button was added only on the File Page, I will add it in the Dataset Files table in another iteration to avoid too many merge conflicts right now.

Which issue(s) this PR closes:

• Closes Replace File Feature in Files Tab and Files Page #614

Special notes for your reviewer:

This is inspired in the existing File Uploader. It was refactored to work for both adding files to a dataset and replacing a file.
We have removed the restrict and tags functionalities, we will do that in a future iteration and discuss about different approaches before.
Some TODO's are analyse duplicate file contents and remove files from the S3 by their storage id(API endpoint required)

New features:

• Replace File mode.
• Gets Fixity Algorithm from API endpoint and generates the files checksum using that specific algorithm (MD5, SHA-1, SHA-256 and SHA-512)
• Enhanced stylings like files dropzone, uploading files items, uploaded files table, etc.
• Confirm Leave Page modal.
• File Type Different confirmation modal. (only replace mode)
• Toast notification for .DS_Store files (skips uploading)
• Toast notification for duplicate file (skips uploading)
• Toast notification when already one file uploaded and trying to drop a new file. (only replace mode - skips uploading)
• Toast notification when trying to drop multiple files. (only replace mode - skips uploading)
• Form fields validations for File Name, File Path and Description. (invalid formats, duplicate combination, etc)

Suggestions on how to test this:

Suggestions on how to test this:

Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && npm i && npm run build.
3. Return with cd ../../.
4. Ensure you have a .env file similar to .env.example, with the variable VITE_DATAVERSE_BACKEND_URL=http://localhost:8000.
5. Navigate with cd dev-env.
6. Start the environment using ./run-env.sh unstable.
7. To verify the environment, visit http://localhost:8000 and check your local Dataverse installation.

Step 2: Test the feature

Upload files to a dataset:

*should work same way as in SPA beta environment, but we removed restrict and tags functionality for now as mentioned above.

1. Create a dataset and click the upload files button, drop some files y and they should be uploaded.
2. Try cancelling a file while uploading it, it should not be addd to the uploaded files list at the bottom.
3. Remove a file from the uploaded files list at the bottom, it should be removed. Remove files also by selecting them with the checkboxes.
4. On mac, try creating an empty folder and dropping it on the drop zone, if it has a hidden .DS_Store file you will see a toast saying the upload of that file was skipped.
5. Try to upload some same file you already have in the uploaded files list at the bottom, a toast notification should appear saying the upload of that file was skipped.
6. Now remove that file from the uploaded files list and you should be able to upload it again.
7. Edit files metadata:

• File name has a validation, enter for example "file.txt:" you should see an error, and if trying to submit you will be scrolled to that field with error if it is the first error.
• File path has a validation, enter for example "some:path" you should see an error, and if trying to submit you will be scrolled to that field with error if it is the first error.
• File name + File path combination should be unique: try add the same file name to a file from another and you will se an error. Lets say you have two files, a.txt and b.txt, no paths, add the same path to both files 'foo', it will be ok as they have different combination, but now change b.txt to a.txt, an error should appear again.
• File name, File path and Description they all have a max chars limit validation of 255 characters.

8. Save Changes and you should be redirected to the dataset page and see the files there.

Replace File functionality:

1. Should show original file info at the top (file to be replaced)
2. Should only let you pick one file or drop one file, if you drop more than one file you should receive a toast notification about that.
3. If you select a file that has different file type you will receive a confirmation dialog to continue or not (e.g: original is .txt and replacement is .png)
4. Validations are the same in the Uploaded Files List also.
5. Save Changes and you should be redirected to the new file.

Leave page confirmation modal:
This works for both modes (add files to dataset and replace file), when you have uploaded some files already or you are uploading them, if you try to leave the page without saving changes a leave page confirmation modal will appear.
You can leave the page by clicking on a in app link or by just clicking the browser back button.

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Yes.

Replace File mode.

Add Files to dataset mode.

Field validations

Different File Type modal, on replace file mode.

Leave page confirmation modal, when you try to leave the page but you already uploaded some files.

[ofahimIQSS]

Hello! Some merge conflicts in this PR - can you please update 🙏 Thanks!

[g-saracca]

@ofahimIQSS, I solved merge conflicts locally but I can still see them here, weird. I will wait, maybe is a github sincronization thing.

[g-saracca]

@ofahimIQSS merge conflicts solved and all tests are passing 👍🏼

[ofahimIQSS]

Thanks ,Just need a review now 😃

[g-saracca]

@ekraffmiller could you please review again? I just solved some merge conflicts

[ChengShi-1]

Good. Approving

[g-saracca]

@ofahimIQSS ready again 👍🏼

[g-saracca]

Merge conflicts solved again, @ChengShi-1 could you reapprove? thanks and sorry 🙏🏼

[ChengShi-1]

Approving

[ofahimIQSS]

Functionality looks great. Thank you for the PR. Merging