fix: Explore scrolled down when navigating from dashboard

[kgabryje]

SUMMARY

Sometimes when user entered Explore from Dashboard, Explore was scrolled down and user was stuck in that position. That's because Explore is sometimes mounted with initial scroll set to some value above 0. We are stuck in this position, because of overflow: hidden on body. It’s related to how react-router mounts components on navigation, but I haven’t been able to find an answer why this bug is so non-deterministic.
We fix it by programmatically scrolling to top when SPA route pathname changes.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

The bug shown in the video shows up only from time to time. After this fix, Explore should always open normally.

Screen.Recording.2022-08-03.at.12.48.39.PM.mov

TESTING INSTRUCTIONS

1. Open a dashboard
2. Scroll down and open some chart in Explore.
3. Go back to dashboard and repeat step 2.
4. Repeat step 3 multiple times. Bug occurs very randomly.

ADDITIONAL INFORMATION

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

CC @andrey-zayats

[codecov]

Codecov Report

Merging #20962 (c4a6034) into master (34ad80c) will decrease coverage by 0.01%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master   #20962      +/-   ##
==========================================
- Coverage   66.35%   66.34%   -0.02%     
==========================================
  Files        1766     1767       +1     
  Lines       67124    67144      +20     
  Branches     7129     7137       +8     
==========================================
+ Hits        44541    44546       +5     
- Misses      20759    20772      +13     
- Partials     1824     1826       +2     

Flag	Coverage Δ
javascript	52.10% <0.00%> (-0.02%)	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/views/App.tsx	0.00% <ø> (ø)
superset-frontend/src/views/ScrollToTop.tsx	0.00% <0.00%> (ø)
...charts/src/Timeseries/Regular/Bar/controlPanel.tsx	31.25% <0.00%> (-4.47%)	⬇️
...dashboard/components/AddSliceCard/AddSliceCard.tsx	65.90% <0.00%> (-1.54%)	⬇️
...BigNumber/BigNumberWithTrendline/transformProps.ts	45.45% <0.00%> (-1.52%)	⬇️
...gin-chart-echarts/src/Timeseries/transformProps.ts	54.65% <0.00%> (-1.31%)	⬇️
...mponents/controls/AnnotationLayerControl/index.jsx	9.67% <0.00%> (-0.50%)	⬇️
...frontend/src/SqlLab/components/ResultSet/index.tsx	50.69% <0.00%> (-0.35%)	⬇️
...perset-frontend/src/views/CRUD/chart/ChartList.tsx	59.13% <0.00%> (ø)
...end/src/components/Datasource/DatasourceEditor.jsx	65.87% <0.00%> (+0.13%)	⬆️
... and 3 more

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

[kgabryje]

/testenv up

[github-actions]

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

[michael-s-molina]

LGTM. I was not able to reproduce the bug anymore. I also tested the navigation flows and didn't find anything. Thanks for the fix @kgabryje!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.