Add enter and escape key behavior to Chronograf admin users page

ui/src/admin/components/chronograf/AdminTabs.js

@@ -23,6 +23,7 @@ const AdminTabs = ({
   onUpdateUserSuperAdmin,
   onDeleteUser,
   meID,
+  notify,
 }) => {
   const tabs = [
     {
@@ -42,6 +43,7 @@ const AdminTabs = ({
           onUpdateUserSuperAdmin={onUpdateUserSuperAdmin}
           onDeleteUser={onDeleteUser}
           meID={meID}
+          notify={notify}
         />
       ),
     },
@@ -99,6 +101,7 @@ AdminTabs.propTypes = {
   onUpdateUserRole: func.isRequired,
   onUpdateUserSuperAdmin: func.isRequired,
   onDeleteUser: func.isRequired,
+  notify: func.isRequired,
 }
 
 export default AdminTabs

ui/src/admin/components/chronograf/UsersTable.js

@@ -40,7 +40,7 @@ class UsersTable extends Component {
   }
 
   render() {
-    const {organization, users, onCreateUser, meID} = this.props
+    const {organization, users, onCreateUser, meID, notify} = this.props
 
     const {isCreatingUser} = this.state
     const {
@@ -83,6 +83,7 @@ class UsersTable extends Component {
                     organization={organization}
                     onBlur={this.handleBlurCreateUserRow}
                     onCreateUser={onCreateUser}
+                    notify={notify}
                   />
                 : null}
               {users.length || !isCreatingUser
@@ -132,5 +133,6 @@ UsersTable.propTypes = {
   onUpdateUserSuperAdmin: func.isRequired,
   onDeleteUser: func.isRequired,
   meID: string.isRequired,
+  notify: func.isRequired,
 }
 export default UsersTable

ui/src/admin/components/chronograf/UsersTableRowNew.js

@@ -59,6 +59,25 @@ class UsersTableRowNew extends Component {
     this.setState({superAdmin})
   }
 
+  handleKeyDown = e => {
+    const {name, provider} = this.state
+    const preventCreate = !name || !provider
+
+    if (e.key === 'Escape') {
+      this.props.onBlur()
+    }
+
+    if (e.key === 'Enter') {
+      if (preventCreate) {
+        return this.props.notify(
+          'warning',
+          'Users must have a name and auth provider.'
+        )
+      }
+      this.handleConfirmCreateUser()
+    }
+  }
+
   render() {
     const {
       colRole,
@@ -83,6 +102,7 @@ class UsersTableRowNew extends Component {
             autoFocus={true}
             value={name}
             onChange={this.handleInputChange('name')}
+            onKeyDown={this.handleKeyDown}
           />
         </td>
         <td style={{width: colRole}}>
@@ -111,6 +131,7 @@ class UsersTableRowNew extends Component {
             placeholder="OAuth Provider..."
             value={provider}
             onChange={this.handleInputChange('provider')}
+            onKeyDown={this.handleKeyDown}
           />
         </td>
         <td style={{width: colScheme}}>
@@ -148,6 +169,7 @@ UsersTableRowNew.propTypes = {
   }),
   onBlur: func.isRequired,
   onCreateUser: func.isRequired,
+  notify: func.isRequired,
 }
 
 export default UsersTableRowNew

ui/src/admin/containers/AdminChronografPage.js

@@ -64,7 +64,7 @@ class AdminChronografPage extends Component {
   }
 
   render() {
-    const {users, meCurrentOrganization, meRole, meID} = this.props
+    const {users, meCurrentOrganization, meRole, meID, notify} = this.props
 
     return (
       <div className="page">
@@ -89,6 +89,7 @@ class AdminChronografPage extends Component {
                     onUpdateUserRole={this.handleUpdateUserRole}
                     onUpdateUserSuperAdmin={this.handleUpdateUserSuperAdmin}
                     onDeleteUser={this.handleDeleteUser}
+                    notify={notify}
                   />
                 </div>
               </div>