feat(ui): indicate valid role name

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

@@ -1,5 +1,6 @@
 import React, {useCallback, useState} from 'react'
 import {
+  ComponentStatus,
   Form,
   Input,
   OverlayBody,
@@ -8,6 +9,11 @@ import {
   OverlayTechnology,
 } from 'src/reusable_ui'
 
+const minLen = 3
+export function validateRoleName(name: string): boolean {
+  return name?.length >= minLen
+}
+
 interface Props {
   create: (role: {name: string}) => void
   setVisible: (visible: boolean) => void
@@ -30,6 +36,11 @@ const CreateRoleDialog = ({visible, setVisible, create}: Props) => {
                 value={name}
                 autoFocus={true}
                 onChange={e => setName(e.target.value)}
+                status={
+                  validateRoleName(name)
+                    ? ComponentStatus.Valid
+                    : ComponentStatus.Default
+                }
               />
             </Form.Element>
             <Form.Footer>

ui/src/admin/containers/influxdb/RolesPage.tsx

@@ -26,14 +26,15 @@ import computeEffectiveDBPermissions from './util/computeEffectiveDBPermissions'
 import useDebounce from 'src/utils/useDebounce'
 import useChangeEffect from 'src/utils/useChangeEffect'
 import {ComponentSize, MultiSelectDropdown, SlideToggle} from 'src/reusable_ui'
-import CreateRoleDialog from 'src/admin/components/influxdb/CreateRoleDialog'
+import CreateRoleDialog, {
+  validateRoleName,
+} from 'src/admin/components/influxdb/CreateRoleDialog'
 
-const minLen = 3
 const validateRole = (
-  user: Pick<UserRole, 'name'>,
+  role: Pick<UserRole, 'name'>,
   notify: NotificationAction
 ) => {
-  if (user.name.length < minLen) {
+  if (!validateRoleName(role.name)) {
     notify(notifyRoleNameInvalid())
     return false
   }