RI-7071: Replace EuiTextArea with TextArea (#4619)

* RI-7071: Replace EuiTextArea with TextArea

* RI-7071: remove .euiTextArea class styles

* fix label

Author: KrumTy

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

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

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

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

redisinsight/ui/src/components/form-dialog/styles.module.scss

@@ -54,17 +54,12 @@
     .euiFieldNumber,
     .euiSelect,
     .euiSuperSelectControl,
-    .euiComboBox .euiComboBox__inputWrap,
-    .euiTextArea {
+    .euiComboBox .euiComboBox__inputWrap {
       background-color: var(--browserTableRowEven) !important;
       padding: 12px;
       border-color: var(--separatorColor) !important;
     }
 
-    .euiTextArea {
-      min-height: 80px;
-    }
-
     .euiFormControlLayout--group {
       border-color: var(--separatorColor) !important;
     }

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx

@@ -2,7 +2,6 @@ import React, { Ref, useRef, useState } from 'react'
 import {
   EuiForm,
   EuiPopover,
-  EuiTextArea,
   EuiTitle,
   EuiToolTip,
   keys,
@@ -15,6 +14,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { SendIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
+import { TextArea } from 'uiSrc/components/base/inputs'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -64,8 +64,8 @@ const ChatForm = (props: Props) => {
     }
   }
 
-  const handleChange = ({ target }: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(target.value)
+  const handleChange = (value: string) => {
+    setValue(value)
     updateTextAreaHeight()
   }
 
@@ -128,10 +128,9 @@ const ChatForm = (props: Props) => {
           onSubmit={handleSubmitForm}
           onKeyDown={handleKeyDown}
         >
-          <EuiTextArea
-            inputRef={textAreaRef}
+          <TextArea
+            ref={textAreaRef}
             placeholder={placeholder || 'Ask me about Redis'}
-            className={styles.textarea}
             value={value}
             onChange={handleChange}
             disabled={!!validation}

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/styles.module.scss

@@ -6,40 +6,6 @@
     pointer-events: none;
   }
 
-  .textarea {
-    height: 0;
-    resize: none !important;
-    background-color: var(--browserTableRowEven) !important;
-    border: 1px solid var(--separatorColor) !important;
-
-    padding: 8px 40px 8px 10px;
-    scroll-padding-bottom: 8px;
-    border-radius: 8px;
-
-    min-height: 42px;
-    max-height: 200px;
-    background-image: none !important;
-
-    font-size: 12px;
-
-    transition: border-color ease .3s;
-
-    &::placeholder {
-      font-size: 12px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &:placeholder-shown {
-      text-overflow: ellipsis;
-    }
-
-    &:focus {
-      border-color: var(--euiColorPrimary) !important;
-    }
-  }
-
   .submitBtn {
     width: 24px !important;
     height: 24px !important;

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

@@ -1,7 +1,7 @@
-import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import React, { FormEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { EuiForm, EuiPanel, EuiTextArea } from '@elastic/eui'
+import { EuiForm, EuiPanel } from '@elastic/eui'
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 
 import { addKeyStateSelector, addStringKey } from 'uiSrc/slices/browser/keys'
@@ -12,6 +12,7 @@ import {
 } from 'uiSrc/components/base/forms/buttons'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
+import { TextArea } from 'uiSrc/components/base/inputs'
 import { SetStringWithExpireDto } from 'apiSrc/modules/browser/string/dto'
 import AddKeyFooter from '../AddKeyFooter/AddKeyFooter'
 import { AddStringFormConfig as config } from '../constants/fields-config'
@@ -55,16 +56,12 @@ const AddKeyString = (props: Props) => {
   return (
     <EuiForm component="form" onSubmit={onFormSubmit}>
       <FormField label={config.value.label}>
-        <EuiTextArea
-          fullWidth
+        <TextArea
           name="value"
           id="value"
-          resize="vertical"
           placeholder={config.value.placeholder}
           value={value}
-          onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
-            setValue(e.target.value)
-          }
+          onChange={setValue}
           disabled={loading}
           data-testid="string-value"
         />

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx

@@ -1,7 +1,6 @@
-import React, { ChangeEvent, useState } from 'react'
+import React, { useState } from 'react'
 import {
   EuiForm,
-  EuiTextArea,
   keys,
 } from '@elastic/eui'
 import cx from 'classnames'
@@ -14,6 +13,7 @@ import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent'
 import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { TextArea } from 'uiSrc/components/base/inputs'
 import { isValidJSON } from '../../utils'
 import { JSONErrors } from '../../constants'
 
@@ -63,14 +63,12 @@ const EditEntireItemAction = (props: Props) => {
                 noValidate
               >
                 <FlexItem grow inline>
-                  <EuiTextArea
-                    isInvalid={!!error}
+                  <TextArea
+                    valid={!error}
                     className={styles.fullWidthTextArea}
                     value={value}
                     placeholder="Enter JSON value"
-                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
-                      setValue(e.target.value)
-                    }
+                    onChange={setValue}
                     data-testid="json-value"
                   />
                 </FlexItem>

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/StringDetailsValue.tsx

@@ -1,5 +1,4 @@
 import React, {
-  ChangeEvent,
   Ref,
   useCallback,
   useEffect,
@@ -8,8 +7,7 @@ import React, {
   useState,
 } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
-import { EuiProgress, EuiTextArea, EuiToolTip } from '@elastic/eui'
+import { EuiProgress, EuiToolTip } from '@elastic/eui'
 
 import {
   bufferToSerializedFormat,
@@ -60,6 +58,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { DownloadIcon } from 'uiSrc/components/base/icons'
 import { SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
+import { TextArea } from 'uiSrc/components/base/inputs'
 import styles from './styles.module.scss'
 
 const MIN_ROWS = 8
@@ -293,22 +292,15 @@ const StringDetailsValue = (props: Props) => {
               )?.isValid
             }
           >
-            <EuiTextArea
-              fullWidth
+            <TextArea
               name="value"
               id="value"
               rows={rows}
-              resize="vertical"
               placeholder={config.value.placeholder}
               value={areaValue}
-              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
-                setAreaValue(e.target.value)
-              }}
+              onChange={setAreaValue}
               disabled={loading}
-              inputRef={textAreaRef}
-              className={cx(styles.stringTextArea, {
-                [styles.areaWarning]: isDisabled,
-              })}
+              ref={textAreaRef}
               style={{
                 maxHeight: containerRef.current
                   ? containerRef.current?.clientHeight - 80

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-value/styles.module.scss

@@ -34,13 +34,6 @@ $outer-height-mobile: 340px;
   }
 }
 
-.stringTextArea {
-  &.areaWarning {
-    border-color: var(--euiColorWarningLight) !important;
-    background-image: none !important;
-  }
-}
-
 .tooltipAnchor {
   display: inline-flex !important;
   height: auto;

redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-textarea/EditableTextArea.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import { EuiTextArea, EuiToolTip } from '@elastic/eui'
+import { EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 
 import { StopPropagation } from 'uiSrc/components/virtual-table'
@@ -9,6 +9,7 @@ import InlineItemEditor from 'uiSrc/components/inline-item-editor'
 import { Text } from 'uiSrc/components/base/text'
 import { EditIcon } from 'uiSrc/components/base/icons'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { TextArea } from 'uiSrc/components/base/inputs'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -159,19 +160,14 @@ const EditableTextArea = (props: Props) => {
               approveText={approveText}
               approveByValidation={() => approveByValidation?.(value)}
             >
-              <EuiTextArea
-                fullWidth
+              <TextArea
                 name="value"
                 id="value"
-                resize="none"
                 placeholder="Enter Value"
                 value={value}
-                onChange={handleOnChange}
+                onChangeCapture={handleOnChange}
                 disabled={isLoading}
-                inputRef={textAreaRef}
-                className={cx(styles.textArea, {
-                  [styles.areaWarning]: isDisabled,
-                })}
+                ref={textAreaRef}
                 spellCheck={false}
                 style={{
                   height: textAreaRef.current?.scrollHeight || 0,