feat(filters): adding filter type icons in filter config modal.

[rusackas]

SUMMARY

Adds filter/divider icons in the Filter config modal, so that you can finally tell what these darn things are.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• 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

[michael-s-molina]

@rusackas It looks like the icons are vertically misaligned in the screenshot.

[justinpark]

I think having the divider designed similarly to the filter can cause confusion.
How about changing it to make the divider block easily recognizable, rather than using an icon like this?

[michael-s-molina]

@justinpark Are you suggesting a horizontal line? If yes, I don't think it would work given the different title lengths.

[mistercrunch]

Approving as net positive as it addresses the main issue. Can follow up with another PR if/when we get a design improvement

[michael-s-molina]

@rusackas Can you check this comment?

[rusackas]

@rusackas Can you check this comment?

This is because the (custom) icons themselves are goofy, with different SVG bounding boxes. I can add custom CSS overrides to bump things up or down a pixel, but that seems like the wrong fix. I'd rather go fiddle with the sizing/alignment of the icons themselves in a subsequent PR.

[michael-s-molina]

I'd rather go fiddle with the sizing/alignment of the icons themselves in a subsequent PR.

I would argue that the whole point of this PR is to add icons and that their alignment seems to be essential for what you're doing. In other words, it looks weird that in one PR you add misaligned icons and in another PR you fix the alignment.

[rusackas]

The fix for misaligned icons is exponentially more complex, with cleanup of overrides throughout the product and arguably contingent upon completing the migration to AntD 5. I suppose the options are:

1. Add some ugly CSS overrides to shift a pixel here and there.
2. Close this PR, and have no indication as to which items are dividers or filters.

I lean toward option 2 if you're worried about it.

[mistercrunch]

Just noting that there are no icon currently. You could remove the icons and that would make this PR focussed on the trigger.

In terms of design, one option could be to border-bottom the container div, looking like an underline going across the panel. I would look similar to what it looks like in the dashboard (text with a horizontal bar underneat)

[michael-s-molina]

I'm ok with option 1 with a TODO to review the CSS after the Ant Design upgrade. From a user's perspective the icons will be aligned.

[mistercrunch]

for reference ->

[rusackas]

Ok, seems I've stepped in it again...

Pinging Dr. @kasiazjc for good measure.

The options continue to proliferate...

1. Icons to differentiate dividers/filters (i.e. this PR)
2. No icons, and treat the divider differently (underline, or some other treatment)
3. Skip all this and consider a revamp, wherein:

• Filters in the filter bar get drag/drop reordering and "edit" buttons (on hover)
• "Add/edit filters" becomes "Add filter" and "Add divider" in the filter bar ⚙️ menu.
• Filter config modal now only needs to support a single filter... so just ditch its left panel entirely.