Use enter and escape to stage changes to the cell name

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.

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 => {
+  handleInputBlur = reset => e => {
-    this.props.onCellRename(e.target.value)
+    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>
     )