fix(explore): Scroll only table in Change Dataset and Edit Dataset Modals

[geido]

SUMMARY

Closes #12488

Makes the table in the modal scrollable while keeping all the other elements sticky.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE Change Dataset Modal:

Change-dataset-BEFORE.mp4

AFTER Change Dataset Modal:

Change-dataset-AFTER.mp4

BEFORE Edit Dataset Modal:

Edit-dataset-BEFORE.mp4

AFTER Edit Dataset Modal:

Edit-dataset-AFTER.mp4

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue: [modal]scroll only on table body with sticky warning msg, tabs, header and buttons  #12488
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[geido]

@junlincc @rusackas

[codecov-io]

Codecov Report

Merging #12598 (dd2824b) into master (a422c76) will decrease coverage by 3.11%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12598      +/-   ##
==========================================
- Coverage   66.79%   63.68%   -3.12%     
==========================================
  Files        1015      486     -529     
  Lines       49676    29984   -19692     
  Branches     4847        0    -4847     
==========================================
- Hits        33183    19095   -14088     
+ Misses      16371    10889    -5482     
+ Partials      122        0     -122     

Flag	Coverage Δ
cypress	?
javascript	?
python	63.68% <ø> (-0.32%)	⬇️

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

Impacted Files	Coverage Δ
superset/sql_validators/postgres.py	50.00% <0.00%> (-50.00%)	⬇️
superset/db_engine_specs/sqlite.py	65.62% <0.00%> (-9.38%)	⬇️
superset/databases/commands/create.py	83.67% <0.00%> (-8.17%)	⬇️
superset/databases/commands/update.py	85.71% <0.00%> (-8.17%)	⬇️
superset/databases/commands/test_connection.py	84.78% <0.00%> (-4.35%)	⬇️
superset/utils/celery.py	96.42% <0.00%> (-3.58%)	⬇️
superset/models/core.py	85.86% <0.00%> (-2.99%)	⬇️
superset/views/core.py	72.82% <0.00%> (-2.48%)	⬇️
superset/db_engine_specs/mysql.py	89.79% <0.00%> (-2.05%)	⬇️
superset/datasets/api.py	89.49% <0.00%> (-1.83%)	⬇️
... and 525 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 2463215...dd2824b. Read the comment docs.

[adam-stasiak]

Tested manually across safari,chrome,firefox 🟢

[junlincc]

LGTM! thanks for the PR, much better UX! @geido @ktmud @rusackas will leave it to you guys how the code should look, I would love to get this in v1.0.1 🙏

Screen.Recording.2021-01-19.at.11.01.43.PM.mov

Screen.Recording.2021-01-19.at.11.02.35.PM.mov

[ktmud]

LGTM with one small comment.

[ktmud]

Should we make this height configurable, or use something like 40vh (40% of viewport height)?

[geido]

That's a good idea. However, there is some calculation to do to make sure the height is just right for the modal to avoid showing its own scrollbar. I'll keep this in mind for an enhancement and provide a separate PR for the sake of getting this improvement in asap