167 - Files table UI [1/2] - Integration filters and search

[MellyGray]

What this PR does / why we need it:

This PR adds the integration of the js-dataverse use cases to get the files with filters and search text, including the files count info use case.

Which issue(s) this PR closes:

• Closes [Spike - Integration] [2/2] Create the File Tab of the Dataset page - Filters #167
• Closes [Spike - Integration] Add actual file counts to the files tab UI #168

Special notes for your reviewer:

Changes

1. Integration of js-dataverse getDatasetFiles with filters (FileCriteria argument)
2. Integration of js-dataverse getDatasetFileCounts
3. Some bug fixes on the react components

Notes

During the integration I realised that the getDatasetFileCounts needs an additional argument to take into account the filtered files. So we'll address that in this new issue

• [Spike - Integration/Front] Add FileCriteria to the getFilesCountInfo use case #172

The e2e tests are failing in the Github Action because the dataverse branch haven't been merged yet. But they should work locally npm run test:e2e

Suggestions on how to test this:

Step 1: Run the development environment

1. Run npm I
2. cd packages/design-system && npm run build
3. cd ../../
4. Check that you have a .env file such as the .env.example, with the VITE_DATAVERSE_BACKEND_URL=http://localhost:8000 variable
5. cd dev-env
6. ./run-env.sh 9834-files-api-extension-file-counts
7. To check the environment go to http://localhost:8000 and check your local dataverse installation

Step 2: Test Dataset View mode with the implemented changes for the getDatasetFiles

1. Go to http://localhost:8000
2. Login as admin using username: dataverseAdmin and password: admin1
3. Create a new Dataset
4. Upload some files
5. From the dataset view mode copy the search parameters from the url. Ex.: ?persistentId=doi:10.5072/FK2/LHGRHP&version=DRAFT
6. Go to http://localhost:8000/spa/datasets and paste the search parameters. Ex.: http://localhost:8000/spa/datasets?persistentId=doi:10.5072/FK2/LHGRHP&version=DRAFT
7. You are seeing now the same Dataset in the SPA, check that the number of files is correct and the pagination is working correctly. Also the filters should work but they'll show a wrong number of coincidences for the filters since getDatasetFileCounts is not taking into account the applied filters. The search and the sort options should work as expected.

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?:

Files Table filters and search integrated with the backend

Additional documentation:

[GPortas]

@MellyGray Can you please resolve the conflicts in this PR?

[MellyGray]

Can you please resolve the conflicts in this PR?

@GPortas conflicts resolved!

[coveralls]

coverage: 97.942% (+0.01%) from 97.93% when pulling 36318d8 on feature/167-integration-dataset-page-filters into ec7e914 on feature/134-integration-files-table-display-data.

[GPortas]

I have tested the search bar and I have found the following issues.

1) The search works correctly when pressing enter but not when clicking on the search button

Pressing enter:

Clicking search button:

1) The search resets when choosing a sort option after the search results have been filtered

SPA behavior:

See how the search criteria is preserved in JSF:

I think it would be good to check that similar "reset" errors don't occur in the filters as well (File type, access, file tags). For detecting this kind of issues, it is useful to compare both SPA-JSF applications by doing the same sequence of actions on each one.

[MellyGray]

I have tested the search bar and I have found the following issues.

1) The search works correctly when pressing enter but not when clicking on the search button

Yeah! I know, I have a test for this, but it's in the files count info PR, sorry, I only realised that when I was working on the other PR https://github.com/IQSS/dataverse-frontend/pull/173/files#diff-7c286c2739f2de315501ef53b6f4c9d699055fcf4c5d6389c216ccba7771c362

 it('does not reload the page when the search button is clicked', () => {
     const onCriteriaChange = cy.stub().as('onCriteriaChange')
     const criteria = new FileCriteria()
       .withFilterByTag('document')
       .withFilterByAccess(FileAccessOption.PUBLIC)
       .withFilterByType('image')

     cy.customMount(
       <FileCriteriaForm
         criteria={criteria}
         onCriteriaChange={onCriteriaChange}
         filesCountInfo={filesCountInfo}
       />
     )

     cy.findByLabelText('Search').type('test')
     cy.findByRole('button', { name: 'Submit search' }).click()

     cy.wrap(onCriteriaChange).should('be.calledWith', criteria.withSearchText('test'))

     cy.findByLabelText('Search').should('have.value', 'test')
   })

2) The search resets when choosing a sort option after the search results have been filtered

I think it would be good to check that similar "reset" errors don't occur in the filters as well (File type, access, file tags). For detecting this kind of issues, it is useful to compare both SPA-JSF applications by doing the same sequence of actions on each one.

Yep, sorry, I tried to explain this in the PR description if you go to the Special notes for your reviewer, so the Filters do not work correctly without files count info, if you look at the e2e tests, there is a long test that I skipped to test all the filter sequentially to ensure that one filter does not erase another. This test is skipped because of fileCountInfo but it's working in the files count info PR

   it.skip('applies filters to the Files Table in the correct order', () => {
       // TODO - Integrate fileCountInfo

I was thinking what if I merge filescountinfo PR here? Because this PR doesn't provide value by its own, the filters don't work in the UI without the files count info integration @GPortas

[MellyGray]

I merged feature/168-integration-file-counts here and updated the PR description @GPortas

[GPortas]

I just tested it now and it works great. Thanks @MellyGray!

I only left a minor comment related to the code.

[GPortas]

Looks good to me!