fix: Button resizing in horizontal filter bar

[michael-s-molina]

SUMMARY

Previously, the DropdownContainer only showed the badge count when the value was greater than zero. When the badge count was updated, the button would change its width to incorporate the badge count. That behavior could really impact user experience because the position of the button can totally change if that needed extra space ends up pushing another element to the popover. To resolve that, this PR always displays the badge count even if the value is zero.

@kasiazjc Another possible solution would be to have more spacing between the button elements when there's no badge and less spacing when there's a badge. The important part would be to keep a constant button width. Let me know if you prefer that approach.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-12-07.at.4.52.58.PM.mov

TESTING INSTRUCTIONS

Check the video for 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

[codecov]

Codecov Report

Merging #22365 (4b8a0d1) into master (de4f509) will not change coverage.
The diff coverage is 50.00%.

❗ Current head 4b8a0d1 differs from pull request most recent head 072929b. Consider uploading reports for the commit 072929b to get more accurate results

@@           Coverage Diff           @@
##           master   #22365   +/-   ##
=======================================
  Coverage   66.86%   66.86%           
=======================================
  Files        1847     1847           
  Lines       70562    70562           
  Branches     7741     7742    +1     
=======================================
  Hits        47179    47179           
  Misses      21382    21382           
  Partials     2001     2001           

Flag	Coverage Δ
javascript	53.82% <50.00%> (ø)

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

Impacted Files	Coverage Δ
...rontend/src/components/DropdownContainer/index.tsx	65.00% <0.00%> (ø)
superset-frontend/src/components/Badge/index.tsx	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[kgabryje]

Works great!

wrong pr

[kgabryje]

Can't we add a resize listener to the button and have the DropdownContainer recalculate its width?

[kasiazjc]

Thanks @michael-s-molina!

Colorful badge was added as a visual cue to explicitly show that that some filters are currently applied and "0" count could be super confusing (we will use similar pattern in cross-filtering).

If there is no better way to fix it (or if Kamil's suggestion won't work) we could add "disabled" 0 state of the badge with tool tip that no filters are currently applied (for now/until we find a better solution). The increased width and empty space does not look good unfortunately :(

[michael-s-molina]

@kasiazjc I added the disabled state and Kamil added the tooltip here.

[kgabryje]

LGTM