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

[michael-s-molina]

SUMMARY

Improves the native filters UI/UX - iteration 5.

• Adds a scroll bar to the left panel
• Fixes left panel layout when the scroll is active
• Adjusts the fonts and colors to match the design
• Makes the tabs stick to the top while scrolling
• Moves the required icon to the right side of the text
• Changes “Adhoc filters” to “Pre-filter”
• Moves the collapses arrow to the right
• Changes the title to "Filter configuration"
• Adds the "Filters" header
• Changes the filter types names

This work is part of the Native dashboard filter project

The items below will be handled in the next iterations:

• Remove horizontal scroll when the column select is too wide
• Unify the select components to use the AntD one. Currently, we have different selects with different themes and interactions.

The iterations below are optional but recommended:

• Split the FiltersConfigForm into smaller components to make it easier to read

@villebro @rusackas @junlincc

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

20210527160830684.mp4

20210527155818663.mp4

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 #14882 (0986b4f) into master (a6d54b6) will decrease coverage by 0.00%.
The diff coverage is 63.33%.

@@            Coverage Diff             @@
##           master   #14882      +/-   ##
==========================================
- Coverage   77.52%   77.51%   -0.01%     
==========================================
  Files         963      963              
  Lines       49284    49297      +13     
  Branches     6203     6207       +4     
==========================================
+ Hits        38206    38214       +8     
- Misses      10877    10882       +5     
  Partials      201      201              

Flag	Coverage Δ
javascript	72.44% <63.33%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Form/FormItem.tsx	100.00% <ø> (ø)
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	95.18% <ø> (ø)
...mponents/nativeFilters/FiltersConfigModal/utils.ts	67.94% <ø> (ø)
...onfigModal/FiltersConfigForm/FiltersConfigForm.tsx	69.16% <61.17%> (+0.79%)	⬆️
...ts/nativeFilters/FiltersConfigModal/FilterTabs.tsx	84.61% <100.00%> (+0.40%)	⬆️
...nd/src/explore/components/DataTablesPane/index.tsx	83.90% <0.00%> (-4.99%)	⬇️
...ntend/src/explore/components/ExploreChartPanel.jsx	16.66% <0.00%> (ø)
...c/views/CRUD/data/database/DatabaseModal/styles.ts	97.36% <0.00%> (ø)

---

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 a6d54b6...0986b4f. Read the comment docs.

[villebro]

LGTM. Some (mostly unrelated) random observations:

• Numeric range offers the option to sort values, despite them not really being relevant (the query always only returns one single row):
• The "Add filter" button triggers an action that seems to be pretty expensive and freezes the UI for a while. I believe it freezes while the filter config is populated. This could potentially be done async (didn't look at the specifics of what goes on)
• when the filter list is full, adding a new filter that falls outside the current view gets selected but isn't shown (we should probably scroll to the bottom when adding a new filter completes):
  

[villebro]

In a subsequent pass we should probably add a TODO: here for moving these names to the plugins.

[michael-s-molina]

@villebro Thanks for the review. Let's tackle each item!