RI-7209 - Replace EuiFieldText with Input

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

@@ -0,0 +1,15 @@
+import React, { ComponentProps } from 'react'
+
+import { Input as RedisInput, TooltipProvider } from '@redis-ui/components'
+
+export type RedisInputProps = ComponentProps<typeof RedisInput>
+
+export default function TextInput(props: RedisInputProps) {
+  // eslint-disable-next-line react/destructuring-assignment
+  if (props.error) {
+    return <TooltipProvider>
+      <RedisInput {...props} />
+    </TooltipProvider>
+  }
+  return <RedisInput {...props} />
+} 

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

@@ -3,3 +3,4 @@ export { default as SearchInput } from './SearchInput'
 export { default as NumericInput } from './NumericInput'
 export { default as SwitchInput } from './SwitchInput'
 export { default as TextArea } from './TextArea'
+export { default as TextInput } from './TextInput'  

redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
 import { capitalize } from 'lodash'
 import cx from 'classnames'
-import { EuiFieldText } from '@elastic/eui'
 
 import * as keys from 'uiSrc/constants/keys'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -15,6 +14,7 @@ import {
   IconButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
+import { TextInput } from 'uiSrc/components/base/inputs'
 
 import styles from './styles.module.scss'
 
@@ -110,8 +110,8 @@ const InlineItemEditor = (props: Props) => {
     }, 100)
   }, [])
 
-  const handleChangeValue = (e: ChangeEvent<HTMLInputElement>) => {
-    let newValue = e.target.value
+  const handleChangeValue = (value: string) => {
+    let newValue = value
 
     if (validation) {
       newValue = validation(newValue)
@@ -207,21 +207,19 @@ const InlineItemEditor = (props: Props) => {
                 <FlexItem grow>
                   {children || (
                     <>
-                      <EuiFieldText
+                      <TextInput
                         name={fieldName}
                         id={fieldName}
                         className={cx(styles.field, textFiledClassName)}
                         maxLength={maxLength || undefined}
                         placeholder={placeholder}
                         value={value}
-                        fullWidth={false}
-                        compressed
                         onChange={handleChangeValue}
-                        isLoading={isLoading}
-                        isInvalid={isInvalid}
+                        loading={isLoading}
+                        valid={!isInvalid}
                         data-testid="inline-item-editor"
                         autoComplete={autoComplete}
-                        inputRef={inputRef}
+                        ref={inputRef}
                       />
                       {expandable && (
                         <p className={styles.keyHiddenText}>{value}</p>

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

@@ -1,9 +1,8 @@
-import { EuiFieldText } from '@elastic/eui'
 import { omit } from 'lodash'
 import React, { useState } from 'react'
 import cx from 'classnames'
 import { useDebouncedEffect } from 'uiSrc/services'
-import { NumericInput, PasswordInput } from 'uiSrc/components/base/inputs'
+import { NumericInput, PasswordInput, TextInput } from 'uiSrc/components/base/inputs'
 
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
@@ -55,11 +54,10 @@ const InputFieldSentinel = (props: Props) => {
   return (
     <>
       {inputType === SentinelInputFieldType.Text && (
-        <EuiFieldText
+        <TextInput
           {...clearProp}
-          compressed
           value={value}
-          onChange={(e) => handleChange(e.target?.value)}
+          onChange={handleChange}
           data-testid="sentinel-input"
         />
       )}

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx

@@ -1,9 +1,9 @@
-import React, { ChangeEvent, useEffect, useState, useMemo } from 'react'
-import { EuiFieldText } from '@elastic/eui'
+import React, { useEffect, useState, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
 import { instancesSelector as dbInstancesSelector } from 'uiSrc/slices/instances/instances'
+import { TextInput } from 'uiSrc/components/base/inputs'
 import Divider from 'uiSrc/components/divider/Divider'
 import { BrowserStorageItem, DEFAULT_SORT, Pages } from 'uiSrc/constants'
 import Search from 'uiSrc/assets/img/Search.svg'
@@ -64,8 +64,7 @@ const InstancesNavigationPopover = ({ name }: Props) => {
     setFilteredRdiInstances(rdiFiltered)
   }, [dbInstances, rdiInstances, searchFilter])
 
-  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target
+  const handleSearch = (value: string) => {
     setSearchFilter(value)
   }
 
@@ -132,12 +131,11 @@ const InstancesNavigationPopover = ({ name }: Props) => {
     >
       <div className={styles.wrapper}>
         <div className={styles.searchInputContainer}>
-          <EuiFieldText
-            fullWidth
+          <TextInput
             className={styles.searchInput}
             icon={Search}
             value={searchFilter}
-            onChange={(e) => handleSearch(e)}
+            onChange={handleSearch}
             data-testid="instances-nav-popover-search"
           />
         </div>

redisinsight/ui/src/components/multi-search/MultiSearch.tsx

@@ -1,8 +1,8 @@
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
-import { EuiFieldText } from '@elastic/eui'
 
 import * as keys from 'uiSrc/constants/keys'
+import { TextInput } from 'uiSrc/components/base/inputs'
 import { GroupBadge, RiTooltip } from 'uiSrc/components'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
 import { Nullable } from 'uiSrc/utils'
@@ -186,18 +186,16 @@ const MultiSearch = (props: Props) => {
               />
             ))}
           </div>
-          <EuiFieldText
+          <TextInput
             className={styles.multiSearchInput}
             placeholder={placeholder}
             value={value}
             onKeyDown={handleKeyDown}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              onChange(e.target.value)
+            onChange={onChange
             }
             onFocus={() => setIsInputFocus(true)}
             onBlur={() => setIsInputFocus(false)}
-            controlOnly
-            inputRef={inputRef}
+            ref={inputRef}
             {...rest}
           />
           {showAutoSuggestions && !!suggestionOptions?.length && (

redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx

@@ -1,6 +1,5 @@
 import { isEmpty } from 'lodash'
-import React, { ChangeEvent, useState } from 'react'
-import { EuiFieldText } from '@elastic/eui'
+import React, { useState } from 'react'
 import { FormikErrors, useFormik } from 'formik'
 import { validateEmail, validateField } from 'uiSrc/utils'
 
@@ -12,6 +11,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { InfoIcon } from 'uiSrc/components/base/icons'
+import { TextInput } from 'uiSrc/components/base/inputs'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import styles from './styles.module.scss'
@@ -93,17 +93,17 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
         <Row>
           <FlexItem>
             <FormField className={styles.formRaw} label="Email">
-              <EuiFieldText
+              <TextInput
                 name="email"
                 id="sso-email"
                 data-testid="sso-email"
                 maxLength={200}
                 value={formik.values.email}
                 autoComplete="off"
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                onChange={(value) => {
                   formik.setFieldValue(
-                    e.target.name,
-                    validateField(e.target.value.trim()),
+                    'email',
+                    validateField(value.trim()),
                   )
                 }}
               />

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import { EuiFieldText } from '@elastic/eui'
 import { useFormik } from 'formik'
 import { FormikErrors } from 'formik/dist/types'
 import { isEmpty } from 'lodash'
 
+import { TextInput } from 'uiSrc/components/base/inputs'
 import { Nullable } from 'uiSrc/utils'
 import validationErrors from 'uiSrc/constants/validationErrors'
 import { RiFilePicker, RiTooltip } from 'uiSrc/components'
@@ -93,10 +93,10 @@ const UploadTutorialForm = (props: Props) => {
             />
           </div>
           <div className={styles.hr}>OR</div>
-          <EuiFieldText
+          <TextInput
             placeholder="GitHub link to tutorials"
             value={formik.values.link}
-            onChange={(e) => formik.setFieldValue('link', e.target.value)}
+            onChange={(value) => formik.setFieldValue('link', value)}
             className={styles.input}
             data-testid="tutorial-link-field"
           />

redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
-import {
-  EuiFieldText,
-  EuiButtonGroup,
-  EuiAccordion,
-  EuiButtonGroupProps,
-} from '@elastic/eui'
-import { SwitchInput } from 'uiSrc/components/base/inputs'
+import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui'
+import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
+
 import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
 import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
 import {
@@ -72,19 +68,19 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
         <div className="more-options">
           <section>
             <FormFieldset legend={{ children: 'Title' }}>
-              <EuiFieldText
+              <TextInput
                 placeholder="Title"
                 value={value.title}
-                onChange={(e) => onChange('title', e.target.value)}
+                onChange={value => onChange('title', value)}
                 aria-label="Title"
                 maxLength={parseInt(TITLE_MAX_LENGTH)}
               />
             </FormFieldset>
             <FormFieldset legend={{ children: 'X axis Label' }}>
-              <EuiFieldText
+              <TextInput
                 placeholder="X axis label"
                 value={value.xlabel}
-                onChange={(e) => onChange('xlabel', e.target.value)}
+                onChange={value => onChange('xlabel', value)}
                 aria-label="X Label"
                 maxLength={parseInt(X_LABEL_MAX_LENGTH)}
               />
@@ -152,10 +148,10 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
 const YAxisConfigForm = ({ value, onChange, label }: any) => (
   <div>
     <FormFieldset legend={{ children: `${label} Label` }}>
-      <EuiFieldText
+      <TextInput
         placeholder="Label"
         value={value.label}
-        onChange={(e) => onChange({ ...value, label: e.target.value })}
+        onChange={(value) => onChange({ ...value, label: value })}
         aria-label="label"
         maxLength={parseInt(Y_LABEL_MAX_LENGTH)}
       />

redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx

@@ -1,13 +1,13 @@
-import React, { ChangeEvent } from 'react'
+import React from 'react'
 import { toNumber } from 'lodash'
-import { EuiFieldText } from '@elastic/eui'
 import { MAX_TTL_NUMBER, Maybe, validateTTLNumberForAddKey } from 'uiSrc/utils'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { TextInput } from 'uiSrc/components/base/inputs'
 import { AddCommonFieldsFormConfig as config } from '../constants/fields-config'
 
 import styles from './styles.module.scss'
@@ -35,12 +35,10 @@ const AddKeyCommonFields = (props: Props) => {
     setKeyTTL,
   } = props
 
-  const handleTTLChange = (event: ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault()
-    const target = event.currentTarget
-    const value = validateTTLNumberForAddKey(target.value)
-    if (value.toString().length) {
-      setKeyTTL(toNumber(value))
+  const handleTTLChange = (value: string) => {
+    const validatedValue = validateTTLNumberForAddKey(value)
+    if (validatedValue.toString().length) {
+      setKeyTTL(toNumber(validatedValue))
     } else {
       setKeyTTL(undefined)
     }
@@ -69,8 +67,7 @@ const AddKeyCommonFields = (props: Props) => {
         </FlexItem>
         <FlexItem grow>
           <FormField label={config.keyTTL.label}>
-            <EuiFieldText
-              fullWidth
+            <TextInput
               name={config.keyTTL.name}
               id={config.keyTTL.name}
               maxLength={200}
@@ -88,15 +85,12 @@ const AddKeyCommonFields = (props: Props) => {
       </Row>
       <Spacer size="m" />
       <FormField label={config.keyName.label}>
-        <EuiFieldText
-          fullWidth
+        <TextInput
           name={config.keyName.name}
           id={config.keyName.name}
           value={keyName}
           placeholder={config.keyName.placeholder}
-          onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setKeyName(e.target.value)
-          }
+          onChange={setKeyName}
           disabled={loading}
           autoComplete="off"
           data-testid="key"