Reset focus to CEO after deleting a threshold or hitting max thresholds

Previously the UI would lose focus and keyboard events no longer fire

ui/src/dashboards/components/CellEditorOverlay.js

@@ -249,6 +249,10 @@ class CellEditorOverlay extends Component {
     }
   }
 
+  handleResetFocus = () => {
+    this.overlayRef.focus()
+  }
+
   render() {
     const {
       onCancel,
@@ -313,6 +317,7 @@ class CellEditorOverlay extends Component {
                   queryConfigs={queriesWorkingDraft}
                   onToggleStaticLegend={this.handleToggleStaticLegend}
                   staticLegend={staticLegend}
+                  onResetFocus={this.handleResetFocus}
                 />
               : <QueryMaker
                   source={this.getSource()}

ui/src/dashboards/components/DisplayOptions.js

@@ -35,12 +35,17 @@ class DisplayOptions extends Component {
   }
 
   renderOptions = () => {
-    const {cell: {type}, staticLegend, onToggleStaticLegend} = this.props
+    const {
+      cell: {type},
+      staticLegend,
+      onToggleStaticLegend,
+      onResetFocus,
+    } = this.props
     switch (type) {
       case 'gauge':
-        return <GaugeOptions />
+        return <GaugeOptions onResetFocus={onResetFocus} />
       case 'single-stat':
-        return <SingleStatOptions />
+        return <SingleStatOptions onResetFocus={onResetFocus} />
       default:
         return (
           <AxesOptions
@@ -77,6 +82,7 @@ DisplayOptions.propTypes = {
   queryConfigs: arrayOf(shape()).isRequired,
   onToggleStaticLegend: func.isRequired,
   staticLegend: bool,
+  onResetFocus: func.isRequired,
 }
 
 const mapStateToProps = ({cellEditorOverlay: {cell, cell: {axes}}}) => ({

ui/src/dashboards/components/GaugeOptions.js

@@ -22,7 +22,7 @@ import {
 
 class GaugeOptions extends Component {
   handleAddThreshold = () => {
-    const {gaugeColors, handleUpdateGaugeColors} = this.props
+    const {gaugeColors, handleUpdateGaugeColors, onResetFocus} = this.props
     const sortedColors = _.sortBy(gaugeColors, color => color.value)
 
     if (sortedColors.length <= MAX_THRESHOLDS) {
@@ -47,16 +47,19 @@ class GaugeOptions extends Component {
       }
 
       handleUpdateGaugeColors([...gaugeColors, newThreshold])
+    } else {
+      onResetFocus()
     }
   }
 
   handleDeleteThreshold = threshold => () => {
-    const {handleUpdateGaugeColors} = this.props
+    const {handleUpdateGaugeColors, onResetFocus} = this.props
     const gaugeColors = this.props.gaugeColors.filter(
       color => color.id !== threshold.id
     )
 
     handleUpdateGaugeColors(gaugeColors)
+    onResetFocus()
   }
 
   handleChooseColor = threshold => chosenColor => {
@@ -217,6 +220,7 @@ GaugeOptions.propTypes = {
   handleUpdateGaugeColors: func.isRequired,
   handleUpdateAxes: func.isRequired,
   axes: shape({}).isRequired,
+  onResetFocus: func.isRequired,
 }
 
 const mapStateToProps = ({cellEditorOverlay: {gaugeColors, cell: {axes}}}) => ({

ui/src/dashboards/components/SingleStatOptions.js

@@ -42,6 +42,7 @@ class SingleStatOptions extends Component {
       singleStatColors,
       singleStatType,
       handleUpdateSingleStatColors,
+      onResetFocus,
     } = this.props
 
     const randomColor = _.random(0, GAUGE_COLORS.length - 1)
@@ -67,16 +68,18 @@ class SingleStatOptions extends Component {
     }
 
     handleUpdateSingleStatColors([...singleStatColors, newThreshold])
+    onResetFocus()
   }
 
   handleDeleteThreshold = threshold => () => {
-    const {handleUpdateSingleStatColors} = this.props
+    const {handleUpdateSingleStatColors, onResetFocus} = this.props
 
     const singleStatColors = this.props.singleStatColors.filter(
       color => color.id !== threshold.id
     )
 
     handleUpdateSingleStatColors(singleStatColors)
+    onResetFocus()
   }
 
   handleChooseColor = threshold => chosenColor => {
@@ -242,6 +245,7 @@ SingleStatOptions.propTypes = {
   handleUpdateSingleStatColors: func.isRequired,
   handleUpdateAxes: func.isRequired,
   axes: shape({}).isRequired,
+  onResetFocus: func.isRequired,
 }
 
 const mapStateToProps = ({