149 - Configure manual pagination in the Files Table UI

[MellyGray]

What this PR does / why we need it:

This PR changes the configuration of the Files Table UI to use manual pagination instead of the automatic pagination provided by react-table. We need this change because we decided to apply server-side pagination to the Files Table so the API will retrieve the data by pages instead of retrieving the whole list of files at once.

Which issue(s) this PR closes:

• Closes [Spike - Frontend] [1/2] React table manual pagination setup #149

Special notes for your reviewer:

Changes applied:

1. getFilesByDatasetPersistentId use case modified to accept a paginationInfo argument that indicated the number of the requested page and the size of the page
2. TablePagination component now is FilesPagination component and instead of using the react table methods provided for the pagination now is using some custom methods.
3. useFilesTable hook modified to use manualPagination
4. useRowSelection hook added to manage the row selection for the is server-side pagination. There is a bug in the react-table library when manualPagination is selected and you try to use the row selection so I had to create an hybrid between a customized row selection feature and the row selection provided by react table.
5. RowSelectionMessage refactored to take out the logic of ClearSelection and SelectAll and move it to the useRowSelection hook

Suggestions on how to test this:

1. npm i
2. cd packages/design-system && npm run build
3. cd ../../
4. npm run storybook
5. Check the files table at localhost:6006 storybook in the Dataset page
6. Test the pagination is working as usual going from 1 page to another.
7. Test the row selection going through the pages selecting different rows
8. Select a few rows and check that a message appears informing about the selection with 2 buttons to select All or to clear selection, ensure this 2 buttons work
9. Select a few rows with a total file size greater than 500 bytes (mocked value) to see the message about the zip download limit

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

No

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

Applied manual pagination to the Files Table UI

Additional documentation:

[coveralls]

coverage: 98.443% (-0.09%) from 98.531% when pulling f026545 on feature/149-react-table-manual-pagination-setup into b44205d on develop.

[GPortas]

@MellyGray

I still have to review the code, but I have already tested Storybook and I have found this unexpected behavior:

In file selection. The zip limit is not shown when selecting two files from different pages (their sum exceeds the limit):

[GPortas]

By reading this model without much context I don't understand what this "total" property refers to and why it can be 0. Maybe renaming it can help?

[MellyGray]

I see 🤔 This total refers to the total number of files, the total number of elements to be paginated, maybe rename it to totalFiles? filesTotal?

The total number of pages is called here totalPages so I guess we can call this totalFiles

[GPortas]

totalFiles makes sense!

[GPortas]

Why this kind of double casting here? just curious

[MellyGray]

Typescript doesn't allow conversion of type number to string, so the unknown is an intermediate step to convert the number to string. I'm forcing the type conversion because I think it's a controlled situation, but it would be best if I do the proper casting String(i). Yep, I can change this for better readability and proper casting

[GPortas]

Code looks good! Just a couple of comments. Also, please take a look at my comment about the Storybook test.

[GPortas]

I have created this issue: IQSS/dataverse-client-javascript#86

We need a use case to get the total space consumed by the files of a particular dataset version. This use case will allow the SPA to know the total space consumed by the files when the user selects "select all" in the files tab, without needing to retrieve all the files (without pagination, could be an expensive operation) and apply client side logic to calculate the size.

Once the use case is ready, we will integrate it into the UI logic of the files tab.

[MellyGray]

@GPortas I added some commits with the requested changes

[GPortas]

Why do you consider undefined now and not before?

[MellyGray]

because before your review I wasn't counting with the selectAll for manual pagination, which means that I need to select all files which I don't know because the pagination only retrieves 10 files, so those files that I cannot know are saving their place in the fileSelection list with an undefined

then the fileSelection object can have File | undefined, so this function getFilesTotalSizeInBytes that is reading the fileSelection now needs to accept some undefined files, to get the totalSizeInBytes it just ignores the undefined files

in the future we'll get the totalFileSize using a different endpoint but for the moment it can only read the size of the files of the current page

[GPortas]

Zip limit message now works on multiple page selection!

[kcondon]

@MellyGray This works well, thanks. I did find one difference from the current UI which is unintuitive and was an issue we'd encountered before, why we added that select all link: selecting the global checkbox on a page in the existing ui selects all rows in the current page only. In this pr it selects all files in the dataset.

[MellyGray]

@MellyGray This works well, thanks. I did find one difference from the current UI which is unintuitive and was an issue we'd encountered before, why we added that select all link: selecting the global checkbox on a page in the existing ui selects all rows in the current page only. In this pr it selects all files in the dataset.

@kcondon
Ok, so if I understood you well there are 2 different behaviors:

Global checkbox: selects all rows in the current page -> This is wrong in this PR
Select All: selects all files in the dataset

I can fix that, should we move this back to in progress to work on that fix? Or do we leave this in QA while I work on the fix? Sorry, I get lost in the workflow

[kcondon]

@MellyGray Yes, that is correct. This part of the workflow is a bit informal -if you are able to work on it and it is relatively small, just leave it in QA. If it will stay for a while or very large, move back to In Progress. My motto is whatever works.

[MellyGray]

@kcondon ok, I committed the fix! It was a small change after all