chore(native filters): Expandable filter config modal

[justinpark]

SUMMARY

The native filters modal width is unnecessarily narrow which results in a suboptimal UX—excessive scrolling—especially when either the filter names and/or datasets/column names are long.
This commit adds an option to make the 'Add and edit filters' modal wider.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

after-expandable-filter-modal.mov

Before:

before--expandable-filter-modal.mov

TESTING INSTRUCTIONS

Go to dashboard and choose a dataset contains a long name column name

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

[john-bodley]

@justinpark in addition to the scroll bars, is there merit in making the default modal size wider?

[justinpark]

in addition to the scroll bars, is there merit in making the default modal size wider?

Sure. I can adjust the default width from 50% to 70% instead of making the expanded mode as default because 70% width modal can be suitable in most case.

[codecov]

Codecov Report

Merging #24559 (d94860d) into master (1473d97) will increase coverage by 0.00%.
The diff coverage is 78.57%.

❗ Current head d94860d differs from pull request most recent head 6516328. Consider uploading reports for the commit 6516328 to get more accurate results

@@           Coverage Diff           @@
##           master   #24559   +/-   ##
=======================================
  Coverage   69.03%   69.03%           
=======================================
  Files        1908     1908           
  Lines       74197    74221   +24     
  Branches     8186     8188    +2     
=======================================
+ Hits        51219    51238   +19     
- Misses      20857    20858    +1     
- Partials     2121     2125    +4     

Flag	Coverage Δ
javascript	55.71% <57.14%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...ilters/FiltersConfigModal/FilterTitleContainer.tsx	79.41% <ø> (ø)
superset/views/database/forms.py	93.67% <ø> (ø)
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	63.33% <57.14%> (-0.49%)	⬇️
superset/config.py	92.17% <100.00%> (+0.02%)	⬆️
superset/forms.py	97.72% <100.00%> (+0.85%)	⬆️

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

[michael-s-molina]

Given that StyleModalWrapper is already receiving the expanded property, could you deal with width and height there and remove these two lines?

[justinpark]

@michael-s-molina could you review the update?

[michael-s-molina]

LGTM

[kasiazjc]

Thanks for the change @justinpark! I am worried that because the icons are so similar and close to each other, people might confuse them. I think in other places we use this icon (below) and using this one would probably help. Would it be ok to swap?

I think in general we have to bump the width of the modal in the default mode to ~880px (and resize just after it not longer fits in the screen), so that everything is more visible. Do you think you could include it in the PR or should it be included in a new one?

[justinpark]

Thanks for the change justinpark! I am worried that because the icons are so similar and close to each other, people might confuse them. I think in other places we use this icon (below) and using this one would probably help. Would it be ok to swap?

I think in general we have to bump the width of the modal in the default mode to ~880px (and resize just after it not longer fits in the screen), so that everything is more visible. Do you think you could include it in the PR or should it be included in a new one?

Sounds good. I updated the location of the button to the next of the footer buttons.

I also updated the default width to 880px as well.

[kasiazjc]

Thanks for the change justinpark! I am worried that because the icons are so similar and close to each other, people might confuse them. I think in other places we use this icon (below) and using this one would probably help. Would it be ok to swap?
I think in general we have to bump the width of the modal in the default mode to ~880px (and resize just after it not longer fits in the screen), so that everything is more visible. Do you think you could include it in the PR or should it be included in a new one?

Sounds good. I updated the location of the button to the next of the footer buttons.

I also updated the default width to 880px as well.

Amazing, thank you!