chore: Improves the native filters bar layout

[michael-s-molina]

SUMMARY

Improves the native filters bar layout.

• Makes the filter bar header stick to the top while scrolling
• Fixes the filter bar rendering when closing the filters after scrolling
• Moves the filter bar scroll from the panel to each tab
• Adjusts the padding of the header and filters
• Increases the padding and spacing of Filter Sets elements
• Replace react-sticky with CSS to increase performance
• Adjusts the tests
• Renames the modal

Fixes #14973
Fixes #15002

@villebro @rusackas @kgabryje @junlincc

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

screen-recording-2021-06-11-at-72640-am_ifDlD0KH.mov

screen-recording-2021-06-11-at-73023-am_KxzcQ29x.mov

TESTING INSTRUCTIONS

See before/after videos for instructions.

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 #15115 (574a801) into master (9ba2983) will decrease coverage by 0.07%.
The diff coverage is 88.63%.

@@            Coverage Diff             @@
##           master   #15115      +/-   ##
==========================================
- Coverage   77.25%   77.18%   -0.08%     
==========================================
  Files         969      969              
  Lines       49999    50042      +43     
  Branches     6424     6438      +14     
==========================================
- Hits        38629    38625       -4     
- Misses      11167    11214      +47     
  Partials      203      203              

Flag	Coverage Δ
javascript	72.08% <88.63%> (-0.15%)	⬇️

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

Impacted Files	Coverage Δ
...veFilters/FilterBar/FilterControls/FilterValue.tsx	68.81% <ø> (-1.08%)	⬇️
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	95.29% <ø> (ø)
...ntend/src/common/hooks/useElementOnScreen/index.ts	76.47% <76.47%> (ø)
...d/components/DashboardBuilder/DashboardBuilder.tsx	89.47% <82.85%> (-1.56%)	⬇️
...tiveFilters/FilterBar/FilterSets/FiltersHeader.tsx	93.02% <100.00%> (+1.35%)	⬆️
...nents/nativeFilters/FilterBar/FilterSets/index.tsx	46.46% <100.00%> (-0.54%)	⬇️
...omponents/nativeFilters/FilterBar/Header/index.tsx	91.89% <100.00%> (+0.98%)	⬆️
...board/components/nativeFilters/FilterBar/index.tsx	82.65% <100.00%> (-8.07%)	⬇️
...d/src/filters/components/Time/TimeFilterPlugin.tsx	0.00% <0.00%> (-94.45%)	⬇️
...tend/src/filters/components/Time/transformProps.ts	22.22% <0.00%> (-44.45%)	⬇️
... and 13 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 9ba2983...574a801. Read the comment docs.

[villebro]

The expand arrow here looks slightly lonely after the "Superset" header has scrolled out of view:

1. unscrolled (looks ok):
   

"Superset" header out of sight (looks lonely):

It might look better if it scrolled together with the nearby chart, and only got stuck after the whole "Superset" header has scrolled out of view.

[kgabryje]

Wow, that looks SO much better than before! Thanks for that change. Could we move the "expand" icon up when filters are collapsed? I don't think it should change it's position that much compared to when the filter bar is expanded
EDIT: Ah, I see that Ville commented the same thing 😄

[villebro]

When the "Superset" header has scrolled out of view, a grey area is exposed on the bottom. This grey space could potentially show additional native filters that are now hidden (we should be able to show "p" (partly exposed) and even "q" (fully hidden) here:

[villebro]

LGTM - what an incredible improvement to the native filter experience! 🎉