From e296fa46564ff62e80d8eefe694ce6ea265be256 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 26 Sep 2017 10:37:49 -0700
Subject: [PATCH] Use enter and escape to stage changes to the cell name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sort of confusing if you look at the implementation, but produces the
desired user experience. There’s a two-step saving process with cell
names now. The user has to change the cell name and hit Enter (or
manually blur) and the name is committed to CEO workingCellName state.
If they hit Escape it reverts to its name when the cell was initially
edited.
---
 .../components/VisualizationName.js           | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/ui/src/dashboards/components/VisualizationName.js b/ui/src/dashboards/components/VisualizationName.js
index 5cc7c4acb..904bd677f 100644
--- a/ui/src/dashboards/components/VisualizationName.js
+++ b/ui/src/dashboards/components/VisualizationName.js
@@ -3,14 +3,31 @@ import React, {Component, PropTypes} from 'react'
 class VisualizationName extends Component {
   constructor(props) {
     super(props)
+
+    this.state = {
+      reset: false,
+    }
   }
 
-  handleInputBlur = e => {
-    this.props.onCellRename(e.target.value)
+  handleInputBlur = reset => e => {
+    console.log(reset, this.props.defaultName)
+    this.props.onCellRename(reset ? this.props.defaultName : e.target.value)
+    this.setState({reset: false})
+  }
+
+  handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      this.inputRef.blur()
+    }
+    if (e.key === 'Escape') {
+      this.inputRef.value = this.props.defaultName
+      this.setState({reset: true}, () => this.inputRef.blur())
+    }
   }
 
   render() {
     const {defaultName} = this.props
+    const {reset} = this.state
 
     return (
       <div className="graph-heading">
@@ -18,8 +35,10 @@ class VisualizationName extends Component {
           type="text"
           className="form-control input-md"
           defaultValue={defaultName}
-          onBlur={this.handleInputBlur}
+          onBlur={this.handleInputBlur(reset)}
+          onKeyDown={this.handleKeyDown}
           placeholder="Name this Cell..."
+          ref={r => (this.inputRef = r)}
         />
       </div>
     )