Allow to select connection profile with arrow keys

app/src/components/ConnectionSetup/ProfileList/index.tsx

@@ -8,28 +8,45 @@ import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { List, ListSubheader } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
+import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
+import { KeyCodes } from '../../../utils/KeyCodes'
 
 interface Props {
   classes: any
   selected?: string
   connections: { [s: string]: ConnectionOptions }
-  actions: any
+  actions: typeof connectionManagerActions
 }
 
 function ProfileList(props: Props) {
   const { actions, classes, connections, selected } = props
 
+  const selectConnection = (dir: 'next' | 'previous') => (event: KeyboardEvent) => {
+    if (!selected) {
+      return
+    }
+    const indexDirection = dir === 'next' ? 1 : -1
+    const connectionArray = Object.values(connections)
+    const selectedIndex = connectionArray.map(connection => connection.id).indexOf(selected)
+    const nextConnection = connectionArray[selectedIndex + indexDirection]
+    if (nextConnection) {
+      actions.selectConnection(nextConnection.id)
+    }
+    event.preventDefault()
+  }
+
+  useGlobalKeyEventHandler(KeyCodes.arrow_down, selectConnection('next'))
+  useGlobalKeyEventHandler(KeyCodes.arrow_up, selectConnection('previous'))
+
+  const createConectionButton = (
+    <ListSubheader component="div">
+      <AddButton action={actions.createConnection} />
+      Connections
+    </ListSubheader>
+  )
+
   return (
-    <List
+    <List style={{ height: '100%' }} component="nav" subheader={createConectionButton}>
-      style={{ height: '100%' }}
-      component="nav"
-      subheader={
-        <ListSubheader component="div">
-          <AddButton action={actions.createConnection} />
-          Connections
-        </ListSubheader>
-      }
-    >
       <div className={classes.list}>
         {Object.values(connections).map(connection => (
           <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />

app/src/utils/KeyCodes.ts

@@ -1,6 +1,11 @@
 export enum KeyCodes {
   backspace = 8,
+  tab = 9,
   enter = 13,
   escape = 27,
+  arrow_left = 37,
+  arrow_up = 38,
+  arrow_right = 39,
+  arrow_down = 40,
   delete = 46,
 }