scroll to top when the route pathname changes (#8056)

frontend/src/metabase/App.jsx

@@ -2,7 +2,7 @@
 
 import React, { Component } from "react";
 import { connect } from "react-redux";
-
+import ScrollToTop from "metabase/hoc/ScrollToTop";
 import Navbar from "metabase/nav/containers/Navbar.jsx";
 
 import UndoListing from "metabase/containers/UndoListing";
@@ -57,11 +57,13 @@ export default class App extends Component {
     }
 
     return (
-      <div className="relative">
-        <Navbar location={location} />
-        {errorPage ? getErrorComponent(errorPage) : children}
-        <UndoListing />
-      </div>
+      <ScrollToTop>
+        <div className="relative">
+          <Navbar location={location} />
+          {errorPage ? getErrorComponent(errorPage) : children}
+          <UndoListing />
+        </div>
+      </ScrollToTop>
     );
   }
 }

frontend/src/metabase/hoc/ScrollToTop.js

+import React from "react";
+import { withRouter } from "react-router";
+
+@withRouter
+class ScrollToTop extends React.Component {
+  componentDidUpdate(prevProps) {
+    // Compare location.pathame to see if we're on a different URL. Do this to ensure
+    // that query strings don't cause a scroll to the top
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      window.scrollTo(0, 0);
+    }
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+export default ScrollToTop;