update numeric input in db index component; make index fields consistent

Author: dantovska

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -224,6 +224,8 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                             >
                               <NumericInput
                                 autoSize
+                                autoValidate
+                                min={0}
                                 onFocus={selectOnFocus}
                                 onChange={(value) =>
                                   setDbIndex(value ? value.toString() : '')

redisinsight/ui/src/pages/home/components/form/DbIndex.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react'
-import { EuiFieldNumber,  htmlIdGenerator } from '@elastic/eui'
+import { EuiFieldNumber, htmlIdGenerator } from '@elastic/eui'
 import { FormikProps } from 'formik'
 
 import { validateNumber } from 'uiSrc/utils'
@@ -10,6 +10,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import styles from '../styles.module.scss'
+import { NumericInput } from '@redis-ui/components'
 
 export interface Props {
   formik: FormikProps<DbConnectionInfo>
@@ -53,21 +54,15 @@ const DbIndex = (props: Props) => {
           <Row gap="m" responsive>
             <FlexItem grow className={styles.dbInput}>
               <FormField label="Database Index">
-                <EuiFieldNumber
+                <NumericInput
+                  autoValidate
+                  min={0}
                   name="db"
                   id="db"
                   data-testid="db"
                   placeholder="Enter Database Index"
-                  value={formik.values.db ?? '0'}
-                  maxLength={6}
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                    formik.setFieldValue(
-                      e.target.name,
-                      validateNumber(e.target.value.trim()),
-                    )
-                  }}
-                  type="text"
-                  min={0}
+                  value={Number(formik.values.db)}
+                  onChange={(value) => formik.setFieldValue('db', value)}
                 />
               </FormField>
             </FlexItem>