Merge pull request #1508 from influxdata/feature/dashboard-rename-improvements

Enable expected Enter/Escape keys on Dashboard rename

CHANGELOG.md

@@ -1,3 +1,12 @@
+## v1.3.2 [unreleased]
+
+### Bug Fixes
+
+### Features
+
+### UI Improvements
+  1. [#1508](https://github.com/influxdata/chronograf/pull/1508): The enter and escape keys now perform as expected when renaming dashboard headers.
+
 ## v1.3.1 [unreleased]
 
 ### Bug Fixes

ui/src/dashboards/components/DashboardHeaderEdit.js

@@ -8,12 +8,27 @@ class DashboardEditHeader extends Component {
     const {dashboard: {name}} = props
     this.state = {name}
     this.handleChange = ::this.handleChange
+    this.handleFormSubmit = ::this.handleFormSubmit
+    this.handleKeyUp = ::this.handleKeyUp
   }
 
   handleChange(name) {
     this.setState({name})
   }
 
+  handleFormSubmit(e) {
+    e.preventDefault()
+    const name = e.target.name.value
+    this.props.onSave(name)
+  }
+
+  handleKeyUp(e) {
+    const {onCancel} = this.props
+    if (e.key === 'Escape') {
+      onCancel()
+    }
+  }
+
   render() {
     const {onSave, onCancel} = this.props
     const {name} = this.state
@@ -21,15 +36,18 @@ class DashboardEditHeader extends Component {
     return (
       <div className="page-header full-width">
         <div className="page-header__container">
-          <div className="page-header__left">
+          <form className="page-header__left" onSubmit={this.handleFormSubmit}>
             <input
               className="page-header--editing"
+              name="name"
               autoFocus={true}
               value={name}
               placeholder="Name this Dashboard"
               onChange={e => this.handleChange(e.target.value)}
+              onKeyUp={this.handleKeyUp}
+              autoComplete="off"
             />
-          </div>
+          </form>
           <ConfirmButtons item={name} onConfirm={onSave} onCancel={onCancel} />
         </div>
       </div>