RI-7050 replace EUI field number with NumericInput (#4607)

* export redis ui numeric input
* replace eui field number with numeric input
* remove no longer used validators
* add better test names and some more tests for the numeric input behavior when strings are provided

Author: dantovska

redisinsight/ui/src/components/base/inputs/NumericInput.tsx

@@ -0,0 +1,3 @@
+import { NumericInput } from '@redis-ui/components'
+
+export default NumericInput

redisinsight/ui/src/components/base/inputs/index.ts

@@ -1,2 +1,3 @@
 export { default as PasswordInput } from './PasswordInput'
 export { default as SearchInput } from './SearchInput'
+export { default as NumericInput } from './NumericInput'

redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.spec.tsx

@@ -65,7 +65,7 @@ describe('InputFieldSentinel', () => {
     expect(screen.getByTestId(inputNumberTestId)).toBeInTheDocument()
   })
 
-  it('should change Number field properly', () => {
+  it('should default to 0 when Number field properly is set to string with letters and Number field was not previously set', () => {
     render(
       <InputFieldSentinel
         {...instance(mockedProps)}
@@ -75,6 +75,37 @@ describe('InputFieldSentinel', () => {
     fireEvent.change(screen.getByTestId(inputNumberTestId), {
       target: { value: 'val13' },
     })
+    expect(screen.getByTestId(inputNumberTestId)).toHaveValue('0')
+  })
+
+  it('should default to previous value when Number field properly is set to string with letters', () => {
+    render(
+      <InputFieldSentinel
+        {...instance(mockedProps)}
+        inputType={SentinelInputFieldType.Number}
+      />,
+    )
+    fireEvent.change(screen.getByTestId(inputNumberTestId), {
+      target: { value: '1' },
+    })
+    expect(screen.getByTestId(inputNumberTestId)).toHaveValue('1')
+
+    fireEvent.change(screen.getByTestId(inputNumberTestId), {
+      target: { value: 'val13' },
+    })
+    expect(screen.getByTestId(inputNumberTestId)).toHaveValue('1')
+  })
+
+  it('should set Number field properly when is set to string with numbers only', () => {
+    render(
+      <InputFieldSentinel
+        {...instance(mockedProps)}
+        inputType={SentinelInputFieldType.Number}
+      />,
+    )
+    fireEvent.change(screen.getByTestId(inputNumberTestId), {
+      target: { value: '13' },
+    })
     expect(screen.getByTestId(inputNumberTestId)).toHaveValue('13')
   })
 })

redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx

@@ -1,14 +1,12 @@
 import {
   EuiFieldText,
   EuiIcon,
-  EuiFieldNumber,
 } from '@elastic/eui'
 import { omit } from 'lodash'
 import React, { useState } from 'react'
 import cx from 'classnames'
 import { useDebouncedEffect } from 'uiSrc/services'
-import { validateNumber } from 'uiSrc/utils'
-import { PasswordInput } from 'uiSrc/components/base/inputs'
+import { NumericInput, PasswordInput } from 'uiSrc/components/base/inputs'
 
 import styles from './styles.module.scss'
 
@@ -76,12 +74,11 @@ const InputFieldSentinel = (props: Props) => {
         />
       )}
       {inputType === SentinelInputFieldType.Number && (
-        <EuiFieldNumber
+        <NumericInput
           {...clearProp}
-          compressed
-          type="text"
-          value={value}
-          onChange={(e) => handleChange(validateNumber(e.target?.value))}
+          autoValidate
+          value={Number(value)}
+          onChange={(value) => handleChange(value ? value.toString() : '')}
           data-testid="sentinel-input-number"
         />
       )}

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, EuiToolTip } from '@elastic/eui'
+import { EuiIcon, 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'
@@ -38,6 +38,7 @@ 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 { Text } from 'uiSrc/components/base/text'
+import { NumericInput } from 'uiSrc/components/base/inputs'
 import InstancesNavigationPopover from './components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -221,20 +222,17 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                               viewChildrenMode={false}
                               controlsClassName={styles.controls}
                             >
-                              <EuiFieldNumber
+                              <NumericInput
+                                autoSize
+                                autoValidate
+                                min={0}
                                 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;
 }
 

redisinsight/ui/src/components/settings-item/SettingItem.tsx

@@ -1,12 +1,14 @@
-import React, { ChangeEvent, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { EuiFieldNumber, EuiIcon, EuiTitle } from '@elastic/eui'
+import { EuiTitle } from '@elastic/eui'
 
 import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Text } from 'uiSrc/components/base/text'
+import { NumericInput } from 'uiSrc/components/base/inputs'
+import { EditIcon } from 'uiSrc/components/base/icons'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -54,28 +56,19 @@ const SettingItem = (props: Props) => {
     setHovering(false)
   }
 
-  const onChange = ({
-    currentTarget: { value },
-  }: ChangeEvent<HTMLInputElement>) => {
-    isEditing && setValue(validation(value))
-  }
-
-  const appendEditing = () =>
-    !isEditing ? <EuiIcon type="pencil" color="subdued" /> : ''
-
   return (
     <>
       <EuiTitle className={styles.title} size="xxs">
         <span>{title}</span>
       </EuiTitle>
       <Spacer size="s" />
-      <Text className={styles.smallText} size="s" color="subdued">
+      <Text className={styles.smallText} size="s">
         {summary}
       </Text>
       <Spacer size="m" />
       <Row align="center" className={styles.container}>
         <FlexItem style={{ marginRight: '4px' }}>
-          <Text size="xs" color="subdued" className={styles.inputLabel}>
+          <Text size="xs" className={styles.inputLabel}>
             {label}
           </Text>
         </FlexItem>
@@ -84,7 +77,7 @@ const SettingItem = (props: Props) => {
           onMouseEnter={() => setHovering(true)}
           onMouseLeave={() => setHovering(false)}
           onClick={() => setEditing(true)}
-          style={{ paddingBottom: '1px' }}
+          style={{ width: '200px' }}
         >
           {isEditing || isHovering ? (
             <InlineItemEditor
@@ -94,22 +87,29 @@ const SettingItem = (props: Props) => {
               onDecline={handleDeclineChanges}
               declineOnUnmount={false}
             >
-              <EuiFieldNumber
-                onChange={onChange}
-                value={value}
-                placeholder={placeholder}
-                aria-label={testid?.replaceAll?.('-', ' ')}
-                className={cx(styles.input, {
-                  [styles.inputEditing]: isEditing,
+              <div
+                className={cx({
+                  [styles.inputHover]: isHovering,
                 })}
-                append={appendEditing()}
-                fullWidth={false}
-                compressed
-                autoComplete="off"
-                type="text"
-                readOnly={!isEditing}
-                data-testid={`${testid}-input`}
-              />
+              >
+                <NumericInput
+                  autoValidate
+                  onChange={(value) =>
+                    isEditing &&
+                    setValue(validation(value ? value.toString() : ''))
+                  }
+                  value={Number(value)}
+                  placeholder={placeholder}
+                  aria-label={testid?.replaceAll?.('-', ' ')}
+                  className={cx(styles.input, {
+                    [styles.inputEditing]: isEditing,
+                  })}
+                  readOnly={!isEditing}
+                  data-testid={`${testid}-input`}
+                  style={{ width: '100%' }}
+                />
+                {!isEditing && <EditIcon />}
+              </div>
             </InlineItemEditor>
           ) : (
             <Text className={styles.value} data-testid={`${testid}-value`}>

redisinsight/ui/src/components/settings-item/styles.module.scss

@@ -7,6 +7,19 @@
   height: 32px !important;
 }
 
+.inputHover {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 10px;
+  padding-bottom: 5px;
+  
+  & > * {
+    line-height: 3.1rem !important;
+  }
+}
+
 .container {
   height: 40px;