replace numeric input for instance header

Author: dantovska

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

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
-import { EuiFieldNumber, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
+import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
 
 import { FeatureFlags, Pages } from 'uiSrc/constants'
-import { selectOnFocus, validateNumber } from 'uiSrc/utils'
+import { selectOnFocus } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { BuildType } from 'uiSrc/constants/env'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
@@ -37,6 +37,7 @@ import UserProfile from 'uiSrc/components/instance-header/components/user-profil
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { EditIcon } from 'uiSrc/components/base/icons'
+import { NumericInput } from 'uiSrc/components/base/inputs'
 import InstancesNavigationPopover from './components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -220,20 +221,15 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                               viewChildrenMode={false}
                               controlsClassName={styles.controls}
                             >
-                              <EuiFieldNumber
+                              <NumericInput
+                                autoSize
                                 onFocus={selectOnFocus}
-                                onChange={(e) =>
-                                  setDbIndex(
-                                    validateNumber(e.target.value.trim()),
-                                  )
+                                onChange={(value) =>
+                                  setDbIndex(value ? value.toString() : '')
                                 }
-                                value={dbIndex}
+                                value={Number(dbIndex)}
                                 placeholder="Database Index"
-                                className={styles.input}
-                                fullWidth={false}
-                                compressed
-                                autoComplete="off"
-                                type="text"
+                                className={styles.dbIndexInput}
                                 data-testid="change-index-input"
                               />
                             </InlineItemEditor>

redisinsight/ui/src/components/instance-header/styles.module.scss

@@ -67,7 +67,7 @@
   height: 32px !important;
 }
 
-.input {
+.dbIndexInput {
   width: 60px !important;
 }