search-select: refactor to use React hooks

devtools/runjson/localdev.json

@@ -28,7 +28,7 @@
     "Command": [
       "./node_modules/.bin/webpack-dev-server",
       "--inline",
-      "--devtool=cheap-module-source-map",
+      "--devtool=inline-source-map",
       "--allowed-hosts=docker.for.mac.host.internal",
       "--port=3035",
       "--progress=false",

web/src/app/alerts/components/AlertsListDataWrapper.js

@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography'
 import moment from 'moment'
 import withStyles from '@material-ui/core/styles/withStyles'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { setCheckedAlerts } from '../../actions'
 import { bindActionCreators } from 'redux'
 import statusStyles from '../../util/statusStyles'
@@ -47,7 +47,6 @@ const mapDispatchToProps = dispatch =>
   mapStateToProps,
   mapDispatchToProps,
 )
-@withRouter
 export default class AlertsListDataWrapper extends Component {
   static propTypes = {
     alert: p.object.isRequired,
@@ -98,7 +97,7 @@ export default class AlertsListDataWrapper extends Component {
   }
 
   render() {
-    const { alert, checkedAlerts, classes, history, onServicePage } = this.props
+    const { alert, checkedAlerts, classes, onServicePage } = this.props
 
     const checkbox = (
       <Checkbox
@@ -114,6 +113,7 @@ export default class AlertsListDataWrapper extends Component {
         disableRipple
         tabIndex={-1}
         onChange={() => this.toggleChecked(alert.number)}
+        onClick={e => e.stopPropagation()}
       />
     )
 
@@ -131,34 +131,35 @@ export default class AlertsListDataWrapper extends Component {
     }
 
     return (
-      <ListItem button className={statusClass}>
+      <ListItem
+        button
+        className={statusClass}
+        component={Link}
+        to={`/alerts/${alert.number}`}
+      >
         {checkbox}
-        <div
-          className={classes.listItem}
-          onClick={() => history.push(`/alerts/${alert.number}`)}
-        >
-          <ListItemText disableTypography style={{ paddingRight: '2.75em' }}>
-            <Typography>
-              <b>{alert.number}: </b>
-              {alert.status.toUpperCase()}
-            </Typography>
-            {onServicePage ? null : (
-              <Typography variant='caption'>{alert.service.name}</Typography>
-            )}
-            <Typography variant='caption' noWrap>
-              {alert.summary}
+
+        <ListItemText disableTypography style={{ paddingRight: '2.75em' }}>
+          <Typography>
+            <b>{alert.number}: </b>
+            {alert.status.toUpperCase()}
+          </Typography>
+          {onServicePage ? null : (
+            <Typography variant='caption'>{alert.service.name}</Typography>
+          )}
+          <Typography variant='caption' noWrap>
+            {alert.summary}
+          </Typography>
+        </ListItemText>
+        <ListItemSecondaryAction>
+          <ListItemText disableTypography>
+            <Typography variant='caption'>
+              {moment(alert.created_at)
+                .local()
+                .fromNow()}
             </Typography>
           </ListItemText>
-          <ListItemSecondaryAction>
-            <ListItemText disableTypography>
-              <Typography variant='caption'>
-                {moment(alert.created_at)
-                  .local()
-                  .fromNow()}
-              </Typography>
-            </ListItemText>
-          </ListItemSecondaryAction>
-        </div>
+        </ListItemSecondaryAction>
       </ListItem>
     )
   }

web/src/app/dialogs/FormDialog.js

@@ -15,6 +15,7 @@ import DialogContentError from './components/DialogContentError'
 import { styles as globalStyles } from '../styles/materialStyles'
 import gracefulUnmount from '../util/gracefulUnmount'
 import { Form } from '../forms'
+import ErrorBoundary from '../main/ErrorBoundary'
 
 const styles = theme => {
   const { cancelButton, dialogWidth } = globalStyles(theme)
@@ -131,10 +132,12 @@ export default class FormDialog extends React.PureComponent {
             if (valid) onSubmit()
           }}
         >
-          {this.renderForm()}
-          {this.renderCaption()}
-          {this.renderErrors()}
-          {this.renderActions()}
+          <ErrorBoundary>
+            {this.renderForm()}
+            {this.renderCaption()}
+            {this.renderErrors()}
+            {this.renderActions()}
+          </ErrorBoundary>
         </Form>
       </Dialog>
     )

web/src/app/selection/EscalationPolicySelect.js

@@ -1,7 +1,5 @@
-import React from 'react'
-
 import gql from 'graphql-tag'
-import QuerySelect from './QuerySelect'
+import { makeQuerySelect } from './QuerySelect'
 
 const query = gql`
   query($input: EscalationPolicySearchOptions) {
@@ -22,8 +20,8 @@ const valueQuery = gql`
     }
   }
 `
-export class EscalationPolicySelect extends React.PureComponent {
-  render() {
-    return <QuerySelect {...this.props} query={query} valueQuery={valueQuery} />
-  }
-}
+
+export const EscalationPolicySelect = makeQuerySelect(
+  'EscalationPolicySelect',
+  { query, valueQuery },
+)

web/src/app/selection/LabelKeySelect.js

@@ -1,5 +1,4 @@
-import React from 'react'
-import QuerySelect from './QuerySelect'
+import { makeQuerySelect } from './QuerySelect'
 import gql from 'graphql-tag'
 
 const query = gql`
@@ -12,19 +11,9 @@ const query = gql`
   }
 `
 
-export class LabelKeySelect extends React.PureComponent {
-  render() {
-    return (
-      <QuerySelect
-        {...this.props}
-        variables={{ input: { uniqueKeys: true } }}
-        defaultQueryVariables={{ input: { uniqueKeys: true } }}
-        mapDataNode={node => ({
-          label: node.key,
-          value: node.key,
-        })}
-        query={query}
-      />
-    )
-  }
-}
+export const LabelKeySelect = makeQuerySelect('LabelKeySelect', {
+  variables: { uniqueKeys: true },
+  defaultQueryVariables: { uniqueKeys: true },
+  query,
+  mapDataNode: ({ key }) => ({ label: key, value: key }),
+})