From 368ed615f5b7bad7a7c71809f334827e2a138bc9 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 07:35:11 +0200
Subject: [PATCH 1/3] fix(ui): highlight focused buttons

---
 ui/src/style/theme/_buttons.scss | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/ui/src/style/theme/_buttons.scss b/ui/src/style/theme/_buttons.scss
index 90aac026b..805a6759e 100644
--- a/ui/src/style/theme/_buttons.scss
+++ b/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;

From 60cdebff5b42a104707e396b9175f16f428045c2 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 07:36:37 +0200
Subject: [PATCH 2/3] feat(ui): react upon enter key to create role

---
 ui/src/admin/components/influxdb/CreateRoleDialog.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/src/admin/components/influxdb/CreateRoleDialog.tsx b/ui/src/admin/components/influxdb/CreateRoleDialog.tsx
index 6ed6312fe..ecf1da2c4 100644
--- a/ui/src/admin/components/influxdb/CreateRoleDialog.tsx
+++ b/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

From a168e7e3b50f61899c1350d001829e3502b23bcf Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 23 Jun 2022 07:36:46 +0200
Subject: [PATCH 3/3] feat(ui): react upon enter key to create user

---
 ui/src/admin/components/influxdb/CreateUserDialog.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/src/admin/components/influxdb/CreateUserDialog.tsx b/ui/src/admin/components/influxdb/CreateUserDialog.tsx
index 068233bb9..b7312bc82 100644
--- a/ui/src/admin/components/influxdb/CreateUserDialog.tsx
+++ b/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"
                 />