405 Infinite Scrolling on Dataset Files

[g-saracca]

What this PR does / why we need it:
Adds infinite scrolling to the files list in the files tab from a dataset.

Which issue(s) this PR closes:

Closes #405

Special notes for your reviewer:
I have created a configuration file to choose between normal pagination with buttons or infinite scroll.
Many components were reused and adapted with some new prop, others I preferred to make an alternative version specifically for this feature.
Many changes were necessary for the file selection but everything still maintains the same flows.
I also took the opportunity to improve the styles of the criteria form, some elements were collapsing or overflowing in mobile.

Suggestions on how to test this:
Step 1: Run the Development Environment

1. Execute npm i.
2. Navigate with cd packages/design-system && 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 Files scrollable Table

• Upload multiple files to a dataset in the JSF UI version.
• Scroll to the bottom of the table to load more files.
• Scroll to the bottom and then change any filter, you will be automatically scrolled to the top.
• Load first 10 files, select 10 files and then click the Select All button, after that scroll to the bottom to load more files, these files should be checked as you have selected them before loading them.

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

How sticky positioning of all elements works with the infinite scrolling 👇🏼

Criteria Form layout fixes & table header action buttons only icons for mobile 👇🏼 :
Old:

New:

Is there a release notes update needed for this change?:
No.

Additional documentation:
No.

[coveralls]

coverage: 97.91% (+0.1%) from 97.809%
when pulling 0bcc951 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling 51c2675 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling 51c2675 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling 2fdb8d6 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 97.818% (+0.009%) from 97.809%
when pulling 2fdb8d6 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling f8fc984 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 97.821% (+0.01%) from 97.809%
when pulling f8fc984 on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling 292d97d on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 97.821% (+0.01%) from 97.809%
when pulling 292d97d on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 98.403% (+0.6%) from 97.809%
when pulling bf03d5f on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 97.821% (+0.01%) from 97.809%
when pulling bf03d5f on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[ekraffmiller]

Looks good! Thanks for going over the code with me, just small comment below. Also it is not in the list of changed files, but in the pagination text, I think the word "viewed" sounds better than "seen".

[coveralls]

coverage: 97.821% (+0.01%) from 97.809%
when pulling fd787cf on feature/405-files-tab-content-infinite-scrolling
into 2ec048c on develop.

[coveralls]

coverage: 97.581% (+0.03%) from 97.547%
when pulling 821e5e7 on feature/405-files-tab-content-infinite-scrolling
into fa7497a on develop.

[ekraffmiller]

Looks good, approved! (FYI about the failing Github action - I ran the component test a second time because I think there was a glitch in the first run of the github action. The component test succeeded on the second run, but then the coverage report failed, but that is only because there was already a coverage report from the first test run. So I think it is all good.)

[GPortas]

This is awesome. Congratulations for the great work on this! @GermanSaracca

I only found this detail about the scroll controller bar. The bar starts above the content of the files tab, instead of starting with the first file. Do you think this is a correct behavior?

I am wondering if the bar should start with the first file instead.

scrolltest.mov

[g-saracca]

I only found this detail about the scroll controller bar. The bar starts above the content of the files tab, instead of starting with the first file. Do you think this is a correct behavior?
I am wondering if the bar should start with the first file instead.

That is indeed the expected behaviour as the scrollable container wraps the criteria form , the table and the rest of elements that may appear (as file selection count info, and download size info).
Everything sticks to the top as described here.