feat: Adds overflow to the DropdownContainer popover

[michael-s-molina]

SUMMARY

Adds overflow to the DropdownContainer popover.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-11-28.at.6.08.23.PM.mov

TESTING INSTRUCTIONS

• Check that no overflow is set if the popover height is less than MAX_HEIGHT
• Check that an overflow is set if the popover height is greater than MAX_HEIGHT

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_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[kgabryje]

It's not related to this PR, but while testing I crashed the dashboard :(

The error points to this piece of code in FilterControls.tsx

@codyml I think you modified that recently, do you know why dataMask might be undefined here? Should we just add a null check or can it be a deeper issue?

[kgabryje]

@michael-s-molina I'm wondering if we should set the scrollbar to be always visible when the overflow is present. Without it users might not notice that the dropdown is scrollable

[codyml]

It's not related to this PR, but while testing I crashed the dashboard :(

@codyml I think you modified that recently, do you know why dataMask might be undefined here? Should we just add a null check or can it be a deeper issue?

Oops yes! I made a typing mistake; the DataMaskStateWithId type should have dataMask as optional. Fix here: #22260

[michael-s-molina]

@kgabryje I added some CSS configurations to make the scroll visible.

[codecov]

Codecov Report

Merging #22250 (716f12a) into master (435926b) will increase coverage by 11.36%.
The diff coverage is 58.66%.

❗ Current head 716f12a differs from pull request most recent head 244d5e8. Consider uploading reports for the commit 244d5e8 to get more accurate results

@@             Coverage Diff             @@
##           master   #22250       +/-   ##
===========================================
+ Coverage   55.46%   66.82%   +11.36%     
===========================================
  Files        1841     1842        +1     
  Lines       70220    70259       +39     
  Branches     7670     7675        +5     
===========================================
+ Hits        38947    46953     +8006     
+ Misses      29291    21321     -7970     
- Partials     1982     1985        +3     

Flag	Coverage Δ
javascript	53.66% <63.88%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...ages/superset-ui-core/src/query/types/Dashboard.ts	100.00% <ø> (ø)
...packages/superset-ui-core/src/query/types/Query.ts	100.00% <ø> (ø)
...ugins/plugin-chart-echarts/src/Radar/buildQuery.ts	0.00% <0.00%> (ø)
...rontend/src/components/MetadataBar/MetadataBar.tsx	98.21% <ø> (ø)
...d/components/DashboardBuilder/DashboardBuilder.tsx	74.28% <0.00%> (-0.96%)	⬇️
...Filters/FilterBar/FilterControls/FilterDivider.tsx	84.00% <0.00%> (+2.51%)	⬆️
...rontend/src/filters/components/Range/buildQuery.ts	0.00% <ø> (ø)
...ontend/src/filters/components/Select/buildQuery.ts	90.00% <ø> (ø)
superset/views/database/views.py	31.27% <33.33%> (+0.82%)	⬆️
...ilters/FilterBar/FilterControls/FilterControls.tsx	70.21% <50.00%> (-2.13%)	⬇️
... and 299 more

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

[kgabryje]

/testenv up HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[kgabryje]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[geido]

LGTM.
One thing to consider for the future is that when scrolling the hover action should be disabled to avoid a little bit of disturbance caused by the popovers opening and closing while the scroll action is still happening.

USA.Births.Names.mp4

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.