From 13770e31cb0260404ea2d707f42d3cbca9018945 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 27 Feb 2018 13:45:56 -0800
Subject: [PATCH] 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 |  5 +++++
 ui/src/dashboards/components/DisplayOptions.js    | 12 +++++++++---
 ui/src/dashboards/components/GaugeOptions.js      |  8 ++++++--
 ui/src/dashboards/components/SingleStatOptions.js |  6 +++++-
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index e53d362ab..f3ed18ce0 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/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()}
diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index adf54b1f0..3761b4942 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/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}}}) => ({
diff --git a/ui/src/dashboards/components/GaugeOptions.js b/ui/src/dashboards/components/GaugeOptions.js
index 10de6d7cc..9b5598ae9 100644
--- a/ui/src/dashboards/components/GaugeOptions.js
+++ b/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}}}) => ({
diff --git a/ui/src/dashboards/components/SingleStatOptions.js b/ui/src/dashboards/components/SingleStatOptions.js
index 01a38bffa..364795d45 100644
--- a/ui/src/dashboards/components/SingleStatOptions.js
+++ b/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 = ({