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

[michael-s-molina]

SUMMARY

Improves the native filters UI/UX - iteration 2.

• Adds the Basic and Advanced collapse panels
• Moves the column field alongside the dataset field
• Sets min-width to the modal to deal with resizing
• Adjusts the borders, padding and margins to the new layout

This work is part of the Native dashboard filter project

The items below will be handled in the next iterations:

• Split the controllers and organize them in the Basic and Advanced sections
• Expand the Basic section by default
• Add the ability to render a controller dynamically using checkboxes
• Handle the correct tab selection when validating

The iterations below are optional but recommended:

• Split the FiltersConfigForm into smaller components to make it easier to read
• Unify the select components to use the AntD one. Currently, we have different selects with different themes and interactions.

@villebro @rusackas @junlincc

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

118834020-4c534f00-b898-11eb-900f-aeb15c8dafba.mov

screen-recording-2021-05-21-at-115540-am_n8FbvGGi.mov

TESTING INSTRUCTIONS

1 - Enable native filters feature flag
2 - Enter in a dashboard
3 - Add a native filter
4 - Check the screen

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

[codecov]

Codecov Report

Merging #14753 (8f58a43) into master (d71b8b3) will decrease coverage by 0.41%.
The diff coverage is 64.15%.

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

@@            Coverage Diff             @@
##           master   #14753      +/-   ##
==========================================
- Coverage   77.62%   77.21%   -0.42%     
==========================================
  Files         962      960       -2     
  Lines       49017    48827     -190     
  Branches     6155     6122      -33     
==========================================
- Hits        38050    37702     -348     
- Misses      10763    10922     +159     
+ Partials      204      203       -1     

Flag	Coverage Δ
hive	?
javascript	72.32% <64.15%> (-0.10%)	⬇️
presto	?

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

Impacted Files	Coverage Δ
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	71.12% <62.74%> (+0.43%)	⬆️
...ts/nativeFilters/FiltersConfigModal/FilterTabs.tsx	84.21% <100.00%> (-2.16%)	⬇️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	94.87% <100.00%> (+0.06%)	⬆️
superset/db_engines/hive.py	0.00% <0.00%> (-82.15%)	⬇️
...tersConfigModal/FiltersConfigForm/DefaultValue.tsx	27.77% <0.00%> (-61.12%)	⬇️
...tend/src/filters/components/Time/transformProps.ts	66.66% <0.00%> (-22.23%)	⬇️
...ters/FiltersConfigModal/FiltersConfigForm/utils.ts	73.33% <0.00%> (-20.00%)	⬇️
superset/db_engine_specs/hive.py	70.32% <0.00%> (-17.08%)	⬇️
superset/connectors/druid/views.py	69.79% <0.00%> (-10.08%)	⬇️
...tersConfigModal/FiltersConfigForm/ControlItems.tsx	90.62% <0.00%> (-9.38%)	⬇️
... and 48 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 d71b8b3...e52c804. Read the comment docs.

[rusackas]

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true

[github-actions]

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

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[villebro]

LGTM - Tested locally and everything works as expected, looking forward to iteration 3!