fix: DropdownContainer resize algorithm

[michael-s-molina]

SUMMARY

Fixes a bug in the DropdownContainer resize algorithm. Previously, the algorithm did not consider moving more than one element simultaneously when there was enough width available.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2022-12-02.at.11.07.38.AM.mov

Screen.Recording.2022-12-02.at.10.57.36.AM.mov

TESTING INSTRUCTIONS

• Open the Storybook or horizontal filter bar
• Resize the screen and check the elements are correctly rendered

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

[geido]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[geido]

Hey @michael-s-molina I think there is still might be an issue. I added a 4th filter and the "more filters" is showing up even though there would be space for it

[michael-s-molina]

Hey @michael-s-molina I think there is still might be an issue. I added a 4th filter and the "more filters" is showing up even though there would be space for it

If you refresh the page, it shows? If not, then is because it doesn't fit.

[kgabryje]

LGTM

[geido]

If you refresh the page, it shows? If not, then is because it doesn't fit.

Yes it does

[michael-s-molina]

Yes it does

@geido I pushed another change. Let me see if you find anything. I'll wait for your review before merging the PR.

[codecov]

Codecov Report

Merging #22318 (0c9d162) into master (df91664) will decrease coverage by 0.01%.
The diff coverage is 53.57%.

@@            Coverage Diff             @@
##           master   #22318      +/-   ##
==========================================
- Coverage   66.87%   66.86%   -0.02%     
==========================================
  Files        1847     1847              
  Lines       70365    70395      +30     
  Branches     7718     7722       +4     
==========================================
+ Hits        47057    47070      +13     
- Misses      21309    21324      +15     
- Partials     1999     2001       +2     

Flag	Coverage Δ
javascript	53.77% <53.57%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...rontend/src/components/DropdownContainer/index.tsx	72.83% <53.57%> (-2.17%)	⬇️
...eModal/DatabaseConnectionForm/CommonParameters.tsx	76.92% <0.00%> (-8.80%)	⬇️
...c/views/CRUD/data/database/DatabaseModal/index.tsx	41.27% <0.00%> (-0.72%)	⬇️
...nd/src/dashboard/components/nativeFilters/state.ts	64.28% <0.00%> (ø)
...ages/superset-ui-core/src/query/types/Dashboard.ts	100.00% <0.00%> (ø)
...ativeFilters/FilterBar/useFilterControlFactory.tsx	81.81% <0.00%> (ø)
...ase/DatabaseModal/DatabaseConnectionForm/index.tsx	92.30% <0.00%> (+1.39%)	⬆️

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

[codyml]

This fixes whatever weird thing was happening on my browser – resizing works great now! Thanks!

[geido]

/testenv up FEATURE_HORIZONTAL_FILTER_BAR=true

[github-actions]

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

[github-actions]

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

[geido]

Works great now!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.