Bug 1399566 - Worker Types Keep settings when refreshed

src/views/WorkerTypes/WorkerManager.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, ButtonToolbar, DropdownButton, MenuItem, ToggleButtonGroup, ToggleButton, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import Icon from 'react-fontawesome';
+import { parse, stringify } from 'qs';
 import Error from '../../components/Error';
 import HelmetTitle from '../../components/HelmetTitle';
 import SearchForm from './SearchForm';
@@ -13,18 +14,21 @@ export default class WorkerManager extends React.PureComponent {
     super(props);
 
     this.state = {
-      workerTypeContains: '',
+      search: '',
       provisioners: [],
       orderableProperties: [],
       lastActive: true,
-      gridLayout: true,
+      layout: 'grid',
       orderBy: null,
       error: null
     };
   }
 
   componentWillMount() {
+    const settings = this.getSettingsFromProps(this.props);
+
     this.loadProvisioners();
+    this.setState(settings);
   }
 
   async loadProvisioners(token) {
@@ -50,19 +54,48 @@ export default class WorkerManager extends React.PureComponent {
   }
 
   onProvisionerSelect = ({ provisionerId }) => {
-    this.setState({ lastActive: true, orderBy: null });
+    this.setQuery({ orderBy: 'None' });
     this.props.history.replace(
-      `/worker-types/${provisionerId ? encodeURIComponent(provisionerId) : ''}`
+      `/worker-types/${provisionerId || ''}${this.props.location.search}`
     );
   };
 
-  handleLayoutChange = () => this.setState({ gridLayout: !this.state.gridLayout });
+  handleLayoutChange = () => this.setQuery({ layout: this.state.layout === 'grid' ? 'table' : 'grid' });
+
+  handleLastActiveClick = () => this.setQuery({ lastActive: !this.state.lastActive, orderBy: null });
+
+  handleOrderBySelect = orderBy => this.setQuery({ orderBy, lastActive: false });
+
+  getSettingsFromProps = (props) => {
+    const settings = parse(props.location.search.slice(1));
+
+    if (Object.prototype.hasOwnProperty.call(settings, 'lastActive') && settings.lastActive !== 'false' && settings.lastActive !== 'true') {
+      settings.lastActive = true;
+    }
+
+    return settings;
+  };
+
+  constructQuery = (q) => {
+    const query = { ...q };
+    const oldQuery = parse(this.props.location.search.slice(1));
 
-  handleLastActiveClick = () => this.setState({ lastActive: !this.state.lastActive, orderBy: null });
+    Object.entries({ ...query }).forEach(([key, value]) => {
+      if (typeof value !== 'boolean' && !value) {
+        delete oldQuery[key];
+        delete query[key];
+      }
+    });
 
-  handleOrderBySelect = orderBy => this.setState({ orderBy, lastActive: false });
+    return stringify({ ...oldQuery, ...query });
+  };
+
+  setQuery = (queryObj) => {
+    this.setState(queryObj);
+    this.props.history.replace(`${this.props.location.pathname}?${this.constructQuery(queryObj)}`);
+  };
 
-  setWorkerType = value => this.setState({ workerTypeContains: value });
+  setWorkerType = value => this.setQuery({ search: value });
 
   setOrderableProperties = (sample = {}) => {
     this.setState({
@@ -113,9 +146,14 @@ export default class WorkerManager extends React.PureComponent {
                 onSelect={this.handleOrderBySelect}
                 orderBy={this.state.orderBy}
                 orderableProperties={this.state.orderableProperties} />
-              <ToggleButtonGroup bsSize="sm" onChange={this.handleLayoutChange} type="radio" name="options" defaultValue={1}>
-                <ToggleButton value={1}><Icon name="table" />&nbsp;&nbsp;Grid</ToggleButton>
-                <ToggleButton value={2}><Icon name="th" />&nbsp;&nbsp;Table</ToggleButton>
+              <ToggleButtonGroup
+                bsSize="sm"
+                onChange={this.handleLayoutChange}
+                type="radio"
+                name="options"
+                defaultValue={this.state.layout}>
+                <ToggleButton value="grid"><Icon name="table" />&nbsp;&nbsp;Grid</ToggleButton>
+                <ToggleButton value="table"><Icon name="th" />&nbsp;&nbsp;Table</ToggleButton>
               </ToggleButtonGroup>
             </ButtonToolbar>
           </div>
@@ -125,11 +163,11 @@ export default class WorkerManager extends React.PureComponent {
             queue={this.props.queue}
             awsProvisioner={this.props.awsProvisioner}
             provisionerId={this.props.provisionerId}
-            lastActive={this.state.lastActive}
+            lastActive={JSON.parse(this.state.lastActive)}
             setOrderableProperties={this.setOrderableProperties}
             orderBy={this.state.orderBy}
-            gridLayout={this.state.gridLayout}
-            searchTerm={this.state.workerTypeContains} />
+            layout={this.state.layout}
+            searchTerm={this.state.search} />
         }
       </div>
     );

src/views/WorkerTypes/WorkerTypeTable.js

@@ -211,7 +211,7 @@ export default class WorkerTypeTable extends React.PureComponent {
     </div>
   );
 
-  renderWorkerType = workerTypes => (this.props.gridLayout ?
+  renderWorkerType = workerTypes => (this.props.layout === 'grid' ?
     workerTypes.map(this.renderGridWorkerType) :
     this.renderTabularWorkerType(workerTypes));
 

src/views/WorkerTypes/index.js

@@ -2,13 +2,14 @@ import React from 'react';
 import Clients from '../../components/Clients';
 import WorkerManager from './WorkerManager';
 
-const View = ({ credentials, history, match }) => (
+const View = ({ credentials, history, match, location }) => (
   <Clients credentials={credentials} Queue AwsProvisioner={{ baseUrl: 'https://aws-provisioner.taskcluster.net/v1' }}>
     {clients => (
       <WorkerManager
         {...clients}
         history={history}
-        provisionerId={match.params.provisionerId ? decodeURIComponent(match.params.provisionerId) : ''} />
+        location={location}
+        provisionerId={match.params.provisionerId ? match.params.provisionerId : ''} />
     )}
   </Clients>
 );