feat(dashboard): Refactor FiltersBadge

[kgabryje]

SUMMARY

Functional changes:

• Filters badge won't be displayed if cross-filter isn't actually applied to given chart (before the filters badge would display all cross filters, even those incompatible)
• Unset and incompatible native filters are not displayed in the filters badge anymore
• The filters badge popover opens on hover instead of on click

Visual changes:

• Restyled the filters badge popover

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

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

[kgabryje]

/testenv up FEATURE_DASHBOARD_CROSS_FILTERS=true

[github-actions]

@kgabryje Ephemeral environment spinning up at http://35.86.111.101:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[codecov]

Codecov Report

Merging #23286 (14bba3e) into master (eb3d560) will decrease coverage by 1.70%.
The diff coverage is 60.95%.

❗ Current head 14bba3e differs from pull request most recent head 04a2825. Consider uploading reports for the commit 04a2825 to get more accurate results

@@            Coverage Diff             @@
##           master   #23286      +/-   ##
==========================================
- Coverage   67.50%   65.81%   -1.70%     
==========================================
  Files        1909     1909              
  Lines       73491    73465      -26     
  Branches     7988     7975      -13     
==========================================
- Hits        49612    48350    -1262     
- Misses      21829    23067    +1238     
+ Partials     2050     2048       -2     

Flag	Coverage Δ
javascript	53.74% <46.55%> (-0.05%)	⬇️
presto	?
unit	?

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

Impacted Files	Coverage Δ
...end/src/dashboard/components/SliceHeader/index.tsx	87.50% <0.00%> (-1.98%)	⬇️
.../nativeFilters/FilterBar/CrossFilters/Vertical.tsx	11.11% <0.00%> (ø)
.../nativeFilters/FilterBar/CrossFilters/selectors.ts	10.00% <0.00%> (+0.90%)	⬆️
superset/config.py	91.78% <ø> (ø)
...rc/dashboard/components/nativeFilters/selectors.ts	58.26% <14.28%> (-3.34%)	⬇️
superset/utils/webdriver.py	75.78% <47.36%> (-5.26%)	⬇️
...ard/components/FiltersBadge/DetailsPanel/index.tsx	86.36% <85.71%> (+4.14%)	⬆️
...d/src/dashboard/components/FiltersBadge/Styles.tsx	93.33% <91.66%> (+6.96%)	⬆️
.../components/FiltersBadge/FilterIndicator/index.tsx	100.00% <100.00%> (+12.50%)	⬆️
...nd/src/dashboard/components/FiltersBadge/index.tsx	85.00% <100.00%> (-1.12%)	⬇️
... and 4 more

... and 91 files with indirect coverage changes

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

[geido]

Alignment here looks weird. Should the lens icon be displayed in a non-hover color instead of being fully invisible? In that way the alignment would look better. CC @kasiazjc

I think the divider should be 1px. It's too thick

Rest looks good!

[eschutho]

I mostly focused on the cypress test for the code ownership portion. Didn't see anything else that looked like it needed anything. I did notice the styling change on the popover text in the screenshot. Is that expected?

[kgabryje]

@eschutho Thanks for testing. Different styling of the tooltip is intentional - the original version would look ugly if chart's name was very long. It's going to be redesigned in the near future

[villebro]

LGTM and tested to work as expected. I feel slightly sad seeing the color go away, but it's probably better in the long run to have a low sugar version than full color explosion 💥🌈 😄

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[kasiazjc]

Alignment here looks weird. Should the lens icon be displayed in a non-hover color instead of being fully invisible? In that way the alignment would look better. CC @kasiazjc

I think the divider should be 1px. It's too thick

Rest looks good!

Thanks Diego, that definitely makes sense! I'm going to test the non-hover state with Kamil.