chore: Uses mixed case for native filters headers

[michael-s-molina]

SUMMARY

Uses mixed case for native filters headers.
Follow up of #15390.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

@pkdotson

TESTING INSTRUCTIONS

Check screenshots.

ADDITIONAL INFORMATION

• Has associated issue:
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API
• Changes UI

[pkdotson]

looks good to me.

[codecov]

Codecov Report

Merging #15433 (6f738de) into master (0b7e524) will not change coverage.
The diff coverage is n/a.

❗ Current head 6f738de differs from pull request most recent head a7fcf6f. Consider uploading reports for the commit a7fcf6f to get more accurate results

@@           Coverage Diff           @@
##           master   #15433   +/-   ##
=======================================
  Coverage   76.99%   76.99%           
=======================================
  Files         975      975           
  Lines       50657    50657           
  Branches     6228     6228           
=======================================
  Hits        39001    39001           
  Misses      11445    11445           
  Partials      211      211           

Flag	Coverage Δ
javascript	71.70% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...Filters/FilterBar/FilterControls/FilterControl.tsx	100.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b7e524...a7fcf6f. Read the comment docs.

[junlincc]

@kicaak Kasia, we need some help on redesigning the cascading filter. a recent change removed the indentation that represents parent and children relationship to preserve horizontal space of the modal. All layers of parent-children filters are stack vertically. Would love to hear your input🙏

cc @kgabryje

[kasiazjc]

@junlincc Sure! I have an initial idea, it's quite hard to do it without using the visual representation of the parent - children relationship, but I hope I will be able to help 🤞 I have a few questions/comments about how it works now too.

Current behaviour

I have one parent and one child filter. When I open the popover and select one value in the parent filter not only I am not able to go back to the initial popover state (I need to close it and reopen it), but also on the left the field where before was "parent" filter got switched to child filter which is empty. So I kind of had no idea which filter I was editing. This was super confusing to me, is it the expected behaviour?

Initial exploration
I tried out a few things and for now I am thinking about adding labels with the name of the parent filter (designs and copy are quite rough now, but wanted to share the concept). This would at least a little bit indicate what this filter is related to, also added a little indentation of the children's children filters etc, not sure about it yet.

I added collapsing/expanding of the children. It can be used in the popover, but I thought it could be more intuitive to add it in the left navigation with all of the filters. You can play the prototype here. Here is figma file.

Here is the prototype of the popover. I added a tooltip as I think it makes it more clear what this pill refers to.

Let me know what you think 😌

Improvement
I thought that the filers and filter groups can take a long time to create by the user, so maybe it would be nice to let them set some filters/groups to active/not active when applying them?

Use case: I have four group of filters which are quite extensive. All of them work at the same time well, but for some reason I would like to see results only from two groups and right now to do it, I think I would have to remove other two.

Solution: I set two groups to not active and run the filters with "Apply" button. When it comes to the design - I was thinking about the visual indicator of the active/inactive group or filter. Icon could be placed next to the main parent (single filter, master parent) and that would be enough. This could be for example the icon that now triggers the popover.

[michael-s-molina]

@kicaak Thank you for your examples. I like the idea of opening the filter hierarchy in the filter bar. After all, the user is just setting filter values just like he does when interacting with non-hierarchical filters. The modal approach has problems especially when we have the scroll bar enabled and the filter that the user is currently editing disappears from the viewport. I also think that it's way easier for the user to edit some value in the middle of the hierarchy because currently, only one level is present in the filter bar. If we are going this way, I think we need a more clear distinction of the hierarchy group when it's expanded. Maybe a blue background color or a highlight border or other fancy way.

One problem that we need to figure out is about the value that represents the hierarchy when collapsed. Currently, it changes depending on which levels are already filled and this brings the confusion that you mentioned.

@junlincc I think it would be nice to move this discussion to a separate issue also so that we can refer to it when coding.

[kasiazjc]

@michael-s-molina thanks for the feedback! 😌

One problem that we need to figure out is about the value that represents the hierarchy when collapsed. Currently, it changes depending on which levels are already filled and this brings the confusion that you mentioned.

Regarding this one - I think that parent filter should always be displayed when the hierarchy is collapsed, because otherwise it is hard to follow what happens. We can add a label or other indicator so the user knows that there are fields that are empty. cc: @junlincc what do you think?

I think we need a more clear distinction of the hierarchy group when it's expanded. Maybe a blue background color or a highlight border or other fancy way.

Agreed, for now I added a divider, but I think it won't work in the long run. The only reasonable solution here is background colour when hierarchy is expanded, but I would not like to use the blueish preset's colour (even if ligter version) as this one should be for special actions/components. Grey may blend with the dashboard, but I will see what else I can do. Also additional thing would be setting up a rule that only one group can be expanded at a time which would help I think.