Continuing improve download files page layout

[cofiem]

Continuing #18741

Additions:

Update url based on the selected filters.

Limit the filters based on what the user has already selected.

Provide quick option to reset the filters ("Show all files" link).

Show "No files match your selection" message when user filters by a combination which returns no results.

The File column does not show the full file name.
I changed this to save space, and because the useful information is now available in the other columns of the table.

The filters now use the display tags for the labels, and the actual tags for the values.

The bdist table uses the display tags.

The dropdown filters are now exact matches.
For example: the files that match by 'includes' using the search:

And the files that match by exact match using the ABI dropdown:

[nlhkabu]

Hi @cofiem

This is great! Thank you again.

A few design / usability thoughts:

1. If we remove the file name, I'm not sure if the search by file name is relevant any more? I think we either need to remove the search input or reimplement the file names.

I would lean towards reimplementing the file names as I think the file names as easy to visually scan in the table, and the search feature is pretty useful

3. I don't think we need the link to copy the filters any more, as the user can now copy the URL directly
4. I think we can move the reset link to next to the filters label:

Thoughts? I'm happy to update the relevant HTML / CSS on this :) We will need to figure out how to better wrap some of the content in the table :)

[cofiem]

Thanks @nlhkabu! I appreciate you having a look at this.

1. Filename & search: That's true. I agree the filename is useful to be able to scan. Perhaps the filename can be in slightly smaller text in a row that spans the whole table? I'll have a go at this.

2. (... there is no 2?)

3. Link to copy filters: I think the link is still useful - not everyone will be aware that they can copy the url. Having the link there gives a visual hint that there's a link that can be copied. However, I'm not too concerned either way here.

4. Reset link: Moving the reset link makes sense. Perhaps if we keep the link to copy filters, it can be text instead of an icon? e.g. Filters Copy link Reset

My suggestion for division of remaining tasks:

• update PR to resolve conflict: @cofiem
• investigate options for showing file name: @cofiem
• html / css for copy link and reset: @nlhkabu

I'm not sure on the best way to split up the work here - are you able to edit this PR?

[cofiem]

Oh yes, and I agree that the table wrapping & layout needs to be improved.

The filters also sometimes have very odd widths, which I didn't notice before.

[nlhkabu]

Playing with it some more - one thing that I've noticed is that when I change the values in each select, then all of the other options disappear, meaning that I cannot easily switch between values.

For example, if I select CPython 3.5 I cannot easily switch to CPython 3.6. Instead I have to choose Interpreter to restore the full list of choices. Video below:

https://www.loom.com/share/d7560e8fa47e44cdac2101c120fafd23

[nlhkabu]

Thanks @cofiem - I agree with your plan and that breakdown of tasks works for me. I'll wait for your progress and then I can make any final design changes :)

[cofiem]

I'm running into this jsdom bug which is blocking my progress. The bug causes the wrong select element options to be considered selected.

The bug was introduced in version v20.0.1, and resolved in v21.0.0.

The current version used by warehouse is v20.0.3.

Could a maintainer look into this, please?
It looks like resolving this might require bumping jest-environment-jsdom to v30.0.0.

[miketheman]

Could a maintainer look into this, please?
It looks like resolving this might require bumping jest-environment-jsdom to v30.0.0.

Hey @cofiem ! I just did a round of JS updates including jsdom stuff in #19203. If you rebase on main, are you still blocked?