chore: Improves the native filters UI/UX - iteration 1

[michael-s-molina]

SUMMARY

Improves the native filters UI/UX - iteration 1.

• Sets a fixed height for the modal
• Splits the configuration and scoping into different tabs
• Inverts the order of the buttons of the confirmation message
• Removes the x icon of the confirmation message
• Fixes the tests to account for the async nature of the screen

PS: A future PR will handle the case of automatically selecting a tab/collapse when an error occurs.

@villebro @rusackas @junlincc

This work is part of the Native dashboard filter project

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

screen-recording-2021-05-19-at-114310-am_ooerR66l.mov

screen-recording-2021-05-19-at-113916-am_rc8CRINA.mov

TEST PLAN

1 - Execute all tests
2 - All tests should pass

ADDITIONAL INFORMATION

• Has associated issue:
• 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

[villebro]

Great work @michael-s-molina; Going to review shortly!

[codecov]

Codecov Report

Merging #14714 (1847112) into master (be8c176) will decrease coverage by 0.07%.
The diff coverage is 67.56%.

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

@@            Coverage Diff             @@
##           master   #14714      +/-   ##
==========================================
- Coverage   77.53%   77.45%   -0.08%     
==========================================
  Files         959      959              
  Lines       48648    48663      +15     
  Branches     5734     5734              
==========================================
- Hits        37718    37691      -27     
- Misses      10729    10771      +42     
  Partials      201      201              

Flag	Coverage Δ
javascript	72.49% <61.66%> (+<0.01%)	⬆️
presto	?

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

Impacted Files	Coverage Δ
...odal/FiltersConfigForm/FilterScope/FilterScope.tsx	86.20% <ø> (ø)
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	94.80% <ø> (ø)
...tersConfigModal/Footer/CancelConfirmationAlert.tsx	100.00% <ø> (ø)
superset/databases/api.py	92.41% <ø> (ø)
superset/db_engine_specs/base.py	88.30% <50.00%> (-0.16%)	⬇️
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	70.68% <61.66%> (+0.51%)	⬆️
superset/db_engine_specs/mysql.py	94.28% <100.00%> (+0.25%)	⬆️
superset/models/core.py	89.70% <100.00%> (-0.08%)	⬇️
superset/db_engine_specs/presto.py	84.42% <0.00%> (-5.90%)	⬇️
superset/connectors/sqla/models.py	88.70% <0.00%> (-1.45%)	⬇️
... and 1 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update be8c176...9613d79. Read the comment docs.

[junlincc]

Thanks for the first step. @michael-s-molina how many iteration we need to get to the progressive reveal action?

[michael-s-molina]

Thanks for the first step. @michael-s-molina how many iteration we need to get to the progressive reveal action?

@junlincc I'm planning to work on it in iteration 3. Iteration 2 is to create the collapse panels.

[villebro]

Thanks for the touch-ups, already looking much better 👍 Code LGTM + tested to work well without any noticeable side-effects.

[junlincc]

LGTM!! Let's go team ♥️