Merge pull request #5955 from influxdata/5952/keyboard_navigation

Allow keyboard-only user/role creation

ui/src/admin/components/influxdb/CreateRoleDialog.tsx

@@ -25,6 +25,15 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => {
     setName('')
     setVisible(false)
   }, [])
+  const onEnterPressed = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && name) {
+        e.stopPropagation()
+        create({name})
+      }
+    },
+    [name, create]
+  )
   return (
     <OverlayTechnology visible={visible}>
       <OverlayContainer maxWidth={650}>
@@ -38,6 +47,7 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => {
                   autoFocus={true}
                   autoComplete="off"
                   onChange={e => setName(e.target.value)}
+                  onKeyPress={onEnterPressed}
                   status={
                     validateRoleName(name)
                       ? ComponentStatus.Valid

ui/src/admin/components/influxdb/CreateUserDialog.tsx

@@ -29,6 +29,15 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => {
     setPassword('')
     setVisible(false)
   }, [])
+  const onEnterPressed = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && name && password) {
+        e.stopPropagation()
+        create({name, password})
+      }
+    },
+    [name, password, create]
+  )
   return (
     <OverlayTechnology visible={visible}>
       <OverlayContainer maxWidth={650}>
@@ -42,6 +51,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => {
                   onChange={e => setName(e.target.value)}
                   autoFocus={true}
                   autoComplete="off"
+                  onKeyPress={onEnterPressed}
                   status={
                     validateUserName(name)
                       ? ComponentStatus.Valid
@@ -60,6 +70,7 @@ const CreateUserDialog = ({visible, setVisible, create}: Props) => {
                       : ComponentStatus.Default
                   }
                   onChange={e => setPassword(e.target.value)}
+                  onKeyPress={onEnterPressed}
                   autoComplete="off"
                   testId="password--input"
                 />

ui/src/style/theme/_buttons.scss

@@ -146,15 +146,8 @@ a.btn {
   text-shadow: none;
   border-width: 0;
 
-  // Focus State
-  &:focus {
-    background-color: $bg-color;
-    color: $text-color;
-  }
-
   // Hover State
-  &:hover,
-  &:focus:hover {
+  &:hover,&:focus{
     background-color: $bg-color-hover;
     color: $text-color-hover;
     cursor: pointer;