[Search-by-TFM] New Framework Filter Options UI

[advay26]

Addresses https://github.com/NuGet/Engineering/issues/5171

This change adds 2 new framework filter options to the search page:

• Include Computed Frameworks Checkbox that sets a boolean true/false value (default is true). When this is set to false, we filter packages only by their asset frameworks, and only show asset framework badges. When this is set to true, we filter packages by asset frameworks + computed frameworks, and we show both types of badges as well.
• Framework Filter Mode Toggle that chooses between All and Any (default is All). This affects cases when multiple framework or TFM filters are selected. When this is set to All, we will show packages matching all the framework and TFM filters. If it is set to Any, we will show packages matching any one of the selected filters.

The changes are behind a feature flag.

I ran Accessibility FastPass, and it didn't throw up any issues. I also checked color contrast for the new UI elements.

NOTE: I made an additional bug fix for the TFM badges in this PR. The TFM badges link to the frameworks tab on the package details page, but we weren't providing a package version, so the links sometimes took us to the wrong version's page. I've now fixed that.

Screenshots/Demos

Before vs. after

 vs. (see top of the Frameworks filter section on the left) 

Include computed frameworks demo

https://github.com/NuGet/NuGetGallery/assets/82980589/285752c9-eb6a-4609-ba9e-e225bbd18039

Framework filter mode demo

https://github.com/NuGet/NuGetGallery/assets/82980589/08d0f892-ae5b-42f7-8917-92a9024bc0bb Info tooltip: 

Narrow/mobile screens


[zhhyu]

I am still looking into this PR and trying to understand the change compared to the documented one: https://learn.microsoft.com/en-us/nuget/consume-packages/finding-and-choosing-packages#advanced-filtering-and-sorting.

Let's say that if I select "ALL" and then select the framework generation checkbox ".NET", will it filter the result that target all net7.0, net6.0 and net5.0?

If it only cares and calculates based on what specific TFMs have been selected. When the framework generation checkbox is selected, should we mark the checkbox as selected to all TFMs under it?

[zhhyu]

When we apply the new selection, the panel on the left blinks. Is it possible that the panel keeps stable when clicking that "Apply" button?

[zhhyu]

Personally, I feel that the height of the switch button "ALL/ANY" is too high. Maybe a little higher than the left words is better or align with badges on the right side.

[advay26]

Let's say that if I select "ALL" and then select the framework generation checkbox ".NET", will it filter the result that target all net7.0, net6.0 and net5.0?

If it only cares and calculates based on what specific TFMs have been selected. When the framework generation checkbox is selected, should we mark the checkbox as selected to all TFMs under it?

The ALL/ANY option only matters when multiple different checkboxes are selected (framework generation or TFM checkboxes). It does not affect how a single framework generation filter behaves. Regardless of whether the customer selects ALL or ANY for the Framework Filter Mode, selecting the .NET checkbox will always imply that we show packages matching ANY of the TFMs within .NET (i.e. net5.0 or net6.0 or net7.0, etc.).

If someone selects ALL + .NET + net472 (also the current behavior before FrameworkFilterMode is added), we will show packages matching ('net5.0' or 'net6.0' or 'net7.0') AND 'net472' If someone selects ANY + .NET + net472, we will show packages matching ('net5.0' or 'net6.0' or 'net7.0') OR 'net472'

You're right that this could be confusing for customers seeing the new filters, so I'll look to call this out in the search docs before this feature goes live, and we'll address it in the blog for the feature too.