Add button to go to top of build page

As a frequent user of the Zuul web UI, I have often wished there were
a way to jump to the top of the build page after scrolling down a
large log file.

This adds a button in the bottom right corner that jumps to the top of
the page when clicked.

Change-Id: I7782055d64255844b682e282fcd1d74cf88f4ced

1 files changed, 23 insertions, 0 deletions

diff --git a/web/src/pages/Build.jsx b/web/src/pages/Build.jsx
index 1c089b21c..0386f8eef 100644
--- a/web/src/pages/Build.jsx
+++ b/web/src/pages/Build.jsx
@@ -18,6 +18,7 @@ import { withRouter } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { parse } from 'query-string'
 import {
+  Button,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
@@ -30,6 +31,7 @@ import {
   Title,
 } from '@patternfly/react-core'
 import {
+  ArrowUpIcon,
   BuildIcon,
   FileArchiveIcon,
   FileCodeIcon,
@@ -65,6 +67,10 @@ class BuildPage extends React.Component {
     history: PropTypes.object.isRequired,
   }
 
+  state = {
+    topOfPageVisible: true,
+  }
+
   updateData = () => {
     // The related fetchBuild...() methods won't do anything if the data is
     // already available in the local state, so just call them.
@@ -75,11 +81,16 @@ class BuildPage extends React.Component {
     )
   }
 
+  onScroll = () => {
+    this.setState({topOfPageVisible: window.scrollY === 0})
+  }
+
   componentDidMount() {
     document.title = 'Zuul Build'
     if (this.props.tenant.name) {
       this.updateData()
     }
+    window.addEventListener('scroll', this.onScroll)
   }
 
   componentDidUpdate(prevProps) {
@@ -302,11 +313,23 @@ class BuildPage extends React.Component {
             </Tab>
           </Tabs>
         </PageSection>
+        {!this.state.topOfPageVisible && (
+          <PageSection variant={PageSectionVariants.light}>
+            <Button onClick={scrollToTop} variant="primary" style={{position: 'fixed', bottom: 20, right: 20, zIndex: 1}}>
+              Go to top of page <ArrowUpIcon/>
+            </Button>
+          </PageSection>
+        )}
       </>
     )
   }
 }
 
+function scrollToTop() {
+  window.scrollTo(0,0)
+  document.activeElement.blur()
+}
+
 function mapStateToProps(state, ownProps) {
   const buildId = ownProps.match.params.buildId
   // JavaScript will return undefined in case the key is missing in the