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] 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