Merge "web: store status filter in the location hash"

web/src/Misc.jsx

@@ -16,6 +16,11 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import { ExternalLinkAltIcon } from '@patternfly/react-icons'
 
+function removeHash() {
+  // Remove location hash from url
+  window.history.pushState('', document.title, window.location.pathname)
+}
+
 function ExternalLink(props) {
   const { target } = props
 
@@ -87,4 +92,4 @@ function buildExternalTableLink(buildish) {
   return null
 }
 
-export { ExternalLink, buildExternalLink, buildExternalTableLink }
+export { removeHash, ExternalLink, buildExternalLink, buildExternalTableLink }

web/src/pages/Status.jsx

@@ -28,6 +28,7 @@ import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 import { fetchStatusIfNeeded } from '../actions/status'
 import Pipeline from '../containers/status/Pipeline'
 import { Fetchable } from '../containers/Fetching'
+import { removeHash } from '../Misc'
 
 
 class StatusPage extends React.Component {
@@ -57,7 +58,6 @@ class StatusPage extends React.Component {
   constructor () {
     super()
 
-    this.filterLoaded = false
     this.timer = null
     this.visible = true
 
@@ -125,9 +125,15 @@ class StatusPage extends React.Component {
   }
 
   setFilter = (filter) => {
+    // Update form ref value
     this.filter.value = filter
+    // Store value in location
+    if (filter) {
+      window.location.hash = '#' + filter
+    } else {
+      removeHash()
+    }
     this.setState({filter: filter})
-    localStorage.setItem('zuul_filter_string', filter)
   }
 
   handleKeyPress = (e) => {
@@ -144,15 +150,11 @@ class StatusPage extends React.Component {
   }
 
   loadState = () => {
-    let filter = localStorage.getItem('zuul_filter_string') || ''
+    const filter = this.props.location.hash ? this.props.location.hash.slice(1) : null
     let expanded = localStorage.getItem('zuul_expand_by_default') || false
     if (typeof expanded === 'string') {
       expanded = (expanded === 'true')
     }
-
-    if (this.props.location.hash) {
-      filter = this.props.location.hash.slice(1)
-    }
     if (filter || expanded) {
       this.setState({
         filter: filter,
@@ -193,10 +195,6 @@ class StatusPage extends React.Component {
     const { remoteData } = this.props
     const { filter, expanded } = this.state
     const status = remoteData.status
-    if (this.filter && !this.filterLoaded && filter) {
-      this.filterLoaded = true
-      this.filter.value = filter
-    }
     const statusControl = (
       <Form inline>
         <FormGroup controlId='status'>