feat: Display active table filter count #1689

[dbranley]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

Closes #1689

As requested in the ticket, I have updated the table component so that it will display a count of selected options just to the top right of the chevron down icon. As suggested, I used onRenderHeader to accomplish this - this means the custom renderer for the column now displays the name, sort icon, chevron icon and count. The code changes are in ui/src/table.tsx and here is a screen shot of what it looks like:

And here is a short video demonstrating the filtering after this change:

issue1689_ui-test.mov

Question for you: The count is being rendered in red with a red border to match how the requirement is defined in the ticket. I wasn't sure if that was done in red make it stand-out in the screen shot or if this is how it was supposed to be implemented. Can you confirm if red text with red border is what you expect?

I added 3 new unit tests to ui/src/table.test.tsx that check for the new filter counts. These pass along with all the other unit tests. Here is a screen shot of the results from running all the regression tests:

I also ran the visual regression tool at tools/showcase. This was fine except for 3 mismatches found with time_picker-2.png, time_picker-3.png, and time_picker-4.png. I looked at the before and after images and they looked identical to me, so I could not figure out why these were flagged. I suspect these were just false positives?

Let me know how this looks and if you have any questions or suggested changes. Thanks!

[mturoci]

Thanks @dbranley! You are doing a superb job lately :)

The count is being rendered in red with a red border to match how the requirement is defined in the ticket. I wasn't sure if that was done in red make it stand-out in the screen shot or if this is how it was supposed to be implemented. Can you confirm if red text with red border is what you expect?

The red was just for illustration. The implementation needs to respect theme colors like the rest of the Wave components. As for the UI design, I would go for badge/chip design, something along the lines of

But more subtle. You can give it a a first go if you want and I can adjust afterwards.

[dbranley]

@mturoci - Thanks for all the great feedback! I'll get to all this after I'm done with the background image issue. Thanks!

[dbranley]

@mturoci - Thanks for clarifying the requirement for the UI design of the filter count. I removed the border and the red. I also tried to make it have more of a badge design, using a slightly darker background than what is used for the header. Here's a couple screen shots of what this looks like now:

Let me know if this is what you had in mind.

I also re-ran all the unit tests and everything still passes:

I think I've addressed all the review comments. If there's something else you need, let me know. Thanks!

[mturoci]

Thanks @dbranley! Will try to look into this by the end of the week as I am pretty busy.

[mturoci]

The code looks good, also tested across multiple color themes and all is fine. However, I found 1 bug:

Screen.Recording.2024-08-19.at.11.15.51.AM.mov

Having a table with 2 filterable columns, selecting filter in 1st, then trying to select all in 2nd filter and the rendering doesn't show checked checkboxes. Also make sure this is covered by unit test once fixed.

[dbranley]

@mturoci Thanks for catching this! FYI that it does not appear to be a regression, since I was able to replicate the bug even with the original version table.tsx, before changes in this PR. But I can still try to fix the bug as part of this PR.

From the debugging I've done so far, I can see that the menuFilters state variable within the ContextualMenu component is getting updated correctly when selectAll is clicked and I have confirmed that the list of <Fluent.Checkbox> components contained in ContextualMenu are created correctly with the right state for checked. But for some reason that I haven't figured out yet, the component is not getting re-rendered consistently, even though the props are getting updated correctly. So far the code in table.tsx seems to be doing all the right things, which might mean there is an underlying bug in Fluent. But I've really just started debugging, so it's possible the bug is there in table.tsx - I will continue debugging.

Note that since this seems unrelated to this PR, would it make sense to open a new bug for this issue so we can let the PR go through? If so, then I can focus on the bug without holding this PR up. Regardless, I'll keep plugging away at this! Thanks!

[mturoci]

If it's not a regression, this PR is good to be merged, thanks!