Skip to content

Commit 7d4f6bc

Browse files
Kristiyan IvanovCopilotpd-redis
authored
RI-7209 - Replace EuiFieldText with Input (#4775)
* RI-7209 - Replace EuiFieldText with Input * Update redisinsight/ui/src/pages/home/components/database-manage-tags-modal/TagInputField.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * redisinsight/ui/src/components/multi-search/MultiSearch.tsx * RI-7209 - Replace EuiFieldText with Input - fixed tests (some?), added tooltip provider for the tooltip * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * RI-7209 - Replace EuiFieldText with Input - fixed tests * Update redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * Update redisinsight/ui/src/components/multi-search/MultiSearch.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * Update redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * Update redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * Update redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * Update redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx Co-authored-by: pd-redis <petar.dzhambazov@redis.com> * RI-7209 - Replace EuiFieldText with Input - fixed tests --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: pd-redis <petar.dzhambazov@redis.com>
1 parent 16e5768 commit 7d4f6bc

File tree

43 files changed

+400
-439
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+400
-439
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { ComponentProps } from 'react'
2+
3+
import { Input as RedisInput, TooltipProvider } from '@redis-ui/components'
4+
5+
export type RedisInputProps = ComponentProps<typeof RedisInput>
6+
7+
export default function TextInput(props: RedisInputProps) {
8+
// eslint-disable-next-line react/destructuring-assignment
9+
if (props.error) {
10+
return <TooltipProvider>
11+
<RedisInput {...props} />
12+
</TooltipProvider>
13+
}
14+
return <RedisInput {...props} />
15+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export { default as SearchInput } from './SearchInput'
33
export { default as NumericInput } from './NumericInput'
44
export { default as SwitchInput } from './SwitchInput'
55
export { default as TextArea } from './TextArea'
6+
export { default as TextInput } from './TextInput'

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
22
import { capitalize } from 'lodash'
33
import cx from 'classnames'
4-
import { EuiFieldText } from '@elastic/eui'
54

65
import * as keys from 'uiSrc/constants/keys'
76
import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -15,6 +14,7 @@ import {
1514
IconButton,
1615
} from 'uiSrc/components/base/forms/buttons'
1716
import { Text } from 'uiSrc/components/base/text'
17+
import { TextInput } from 'uiSrc/components/base/inputs'
1818

1919
import styles from './styles.module.scss'
2020

@@ -110,8 +110,8 @@ const InlineItemEditor = (props: Props) => {
110110
}, 100)
111111
}, [])
112112

113-
const handleChangeValue = (e: ChangeEvent<HTMLInputElement>) => {
114-
let newValue = e.target.value
113+
const handleChangeValue = (value: string) => {
114+
let newValue = value
115115

116116
if (validation) {
117117
newValue = validation(newValue)
@@ -207,21 +207,19 @@ const InlineItemEditor = (props: Props) => {
207207
<FlexItem grow>
208208
{children || (
209209
<>
210-
<EuiFieldText
210+
<TextInput
211211
name={fieldName}
212212
id={fieldName}
213213
className={cx(styles.field, textFiledClassName)}
214214
maxLength={maxLength || undefined}
215215
placeholder={placeholder}
216216
value={value}
217-
fullWidth={false}
218-
compressed
219217
onChange={handleChangeValue}
220-
isLoading={isLoading}
221-
isInvalid={isInvalid}
218+
loading={isLoading}
219+
valid={!isInvalid}
222220
data-testid="inline-item-editor"
223221
autoComplete={autoComplete}
224-
inputRef={inputRef}
222+
ref={inputRef}
225223
/>
226224
{expandable && (
227225
<p className={styles.keyHiddenText}>{value}</p>

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { EuiFieldText } from '@elastic/eui'
21
import { omit } from 'lodash'
32
import React, { useState } from 'react'
43
import cx from 'classnames'
54
import { useDebouncedEffect } from 'uiSrc/services'
6-
import { NumericInput, PasswordInput } from 'uiSrc/components/base/inputs'
5+
import { NumericInput, PasswordInput, TextInput } from 'uiSrc/components/base/inputs'
76

87
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
98
import styles from './styles.module.scss'
@@ -55,11 +54,10 @@ const InputFieldSentinel = (props: Props) => {
5554
return (
5655
<>
5756
{inputType === SentinelInputFieldType.Text && (
58-
<EuiFieldText
57+
<TextInput
5958
{...clearProp}
60-
compressed
6159
value={value}
62-
onChange={(e) => handleChange(e.target?.value)}
60+
onChange={handleChange}
6361
data-testid="sentinel-input"
6462
/>
6563
)}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { ChangeEvent, useEffect, useState, useMemo } from 'react'
2-
import { EuiFieldText } from '@elastic/eui'
1+
import React, { useEffect, useState, useMemo } from 'react'
32
import { useSelector } from 'react-redux'
43
import { useHistory, useParams } from 'react-router-dom'
54
import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
65
import { instancesSelector as dbInstancesSelector } from 'uiSrc/slices/instances/instances'
6+
import { TextInput } from 'uiSrc/components/base/inputs'
77
import Divider from 'uiSrc/components/divider/Divider'
88
import { BrowserStorageItem, DEFAULT_SORT, Pages } from 'uiSrc/constants'
99
import Search from 'uiSrc/assets/img/Search.svg'
@@ -64,8 +64,7 @@ const InstancesNavigationPopover = ({ name }: Props) => {
6464
setFilteredRdiInstances(rdiFiltered)
6565
}, [dbInstances, rdiInstances, searchFilter])
6666

67-
const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
68-
const { value } = e.target
67+
const handleSearch = (value: string) => {
6968
setSearchFilter(value)
7069
}
7170

@@ -132,12 +131,11 @@ const InstancesNavigationPopover = ({ name }: Props) => {
132131
>
133132
<div className={styles.wrapper}>
134133
<div className={styles.searchInputContainer}>
135-
<EuiFieldText
136-
fullWidth
134+
<TextInput
137135
className={styles.searchInput}
138136
icon={Search}
139137
value={searchFilter}
140-
onChange={(e) => handleSearch(e)}
138+
onChange={handleSearch}
141139
data-testid="instances-nav-popover-search"
142140
/>
143141
</div>

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
1+
import React, { useEffect, useRef, useState } from 'react'
22
import cx from 'classnames'
3-
import { EuiFieldText } from '@elastic/eui'
43

54
import * as keys from 'uiSrc/constants/keys'
5+
import { TextInput } from 'uiSrc/components/base/inputs'
66
import { GroupBadge, RiTooltip } from 'uiSrc/components'
77
import { OutsideClickDetector } from 'uiSrc/components/base/utils'
88
import { Nullable } from 'uiSrc/utils'
@@ -186,18 +186,16 @@ const MultiSearch = (props: Props) => {
186186
/>
187187
))}
188188
</div>
189-
<EuiFieldText
189+
<TextInput
190190
className={styles.multiSearchInput}
191191
placeholder={placeholder}
192192
value={value}
193193
onKeyDown={handleKeyDown}
194-
onChange={(e: ChangeEvent<HTMLInputElement>) =>
195-
onChange(e.target.value)
194+
onChange={onChange
196195
}
197196
onFocus={() => setIsInputFocus(true)}
198197
onBlur={() => setIsInputFocus(false)}
199-
controlOnly
200-
inputRef={inputRef}
198+
ref={inputRef}
201199
{...rest}
202200
/>
203201
{showAutoSuggestions && !!suggestionOptions?.length && (

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { isEmpty } from 'lodash'
2-
import React, { ChangeEvent, useState } from 'react'
3-
import { EuiFieldText } from '@elastic/eui'
2+
import React, { useState } from 'react'
43
import { FormikErrors, useFormik } from 'formik'
54
import { validateEmail, validateField } from 'uiSrc/utils'
65

@@ -12,6 +11,7 @@ import {
1211
SecondaryButton,
1312
} from 'uiSrc/components/base/forms/buttons'
1413
import { InfoIcon } from 'uiSrc/components/base/icons'
14+
import { TextInput } from 'uiSrc/components/base/inputs'
1515
import { Title } from 'uiSrc/components/base/text/Title'
1616
import { FormField } from 'uiSrc/components/base/forms/FormField'
1717
import styles from './styles.module.scss'
@@ -93,17 +93,17 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
9393
<Row>
9494
<FlexItem>
9595
<FormField className={styles.formRaw} label="Email">
96-
<EuiFieldText
96+
<TextInput
9797
name="email"
9898
id="sso-email"
9999
data-testid="sso-email"
100100
maxLength={200}
101101
value={formik.values.email}
102102
autoComplete="off"
103-
onChange={(e: ChangeEvent<HTMLInputElement>) => {
103+
onChange={(value) => {
104104
formik.setFieldValue(
105-
e.target.name,
106-
validateField(e.target.value.trim()),
105+
'email',
106+
validateField(value.trim()),
107107
)
108108
}}
109109
/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState } from 'react'
2-
import { EuiFieldText } from '@elastic/eui'
32
import { useFormik } from 'formik'
43
import { FormikErrors } from 'formik/dist/types'
54
import { isEmpty } from 'lodash'
65

6+
import { TextInput } from 'uiSrc/components/base/inputs'
77
import { Nullable } from 'uiSrc/utils'
88
import validationErrors from 'uiSrc/constants/validationErrors'
99
import { RiFilePicker, RiTooltip } from 'uiSrc/components'
@@ -93,10 +93,10 @@ const UploadTutorialForm = (props: Props) => {
9393
/>
9494
</div>
9595
<div className={styles.hr}>OR</div>
96-
<EuiFieldText
96+
<TextInput
9797
placeholder="GitHub link to tutorials"
9898
value={formik.values.link}
99-
onChange={(e) => formik.setFieldValue('link', e.target.value)}
99+
onChange={(value) => formik.setFieldValue('link', value)}
100100
className={styles.input}
101101
data-testid="tutorial-link-field"
102102
/>

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

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React, { useState } from 'react'
2-
import {
3-
EuiFieldText,
4-
EuiButtonGroup,
5-
EuiAccordion,
6-
EuiButtonGroupProps,
7-
} from '@elastic/eui'
8-
import { SwitchInput } from 'uiSrc/components/base/inputs'
2+
import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui'
3+
import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
4+
95
import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
106
import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
117
import {
@@ -72,19 +68,19 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
7268
<div className="more-options">
7369
<section>
7470
<FormFieldset legend={{ children: 'Title' }}>
75-
<EuiFieldText
71+
<TextInput
7672
placeholder="Title"
7773
value={value.title}
78-
onChange={(e) => onChange('title', e.target.value)}
74+
onChange={value => onChange('title', value)}
7975
aria-label="Title"
8076
maxLength={parseInt(TITLE_MAX_LENGTH)}
8177
/>
8278
</FormFieldset>
8379
<FormFieldset legend={{ children: 'X axis Label' }}>
84-
<EuiFieldText
80+
<TextInput
8581
placeholder="X axis label"
8682
value={value.xlabel}
87-
onChange={(e) => onChange('xlabel', e.target.value)}
83+
onChange={value => onChange('xlabel', value)}
8884
aria-label="X Label"
8985
maxLength={parseInt(X_LABEL_MAX_LENGTH)}
9086
/>
@@ -152,10 +148,10 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
152148
const YAxisConfigForm = ({ value, onChange, label }: any) => (
153149
<div>
154150
<FormFieldset legend={{ children: `${label} Label` }}>
155-
<EuiFieldText
151+
<TextInput
156152
placeholder="Label"
157153
value={value.label}
158-
onChange={(e) => onChange({ ...value, label: e.target.value })}
154+
onChange={(value) => onChange({ ...value, label: value })}
159155
aria-label="label"
160156
maxLength={parseInt(Y_LABEL_MAX_LENGTH)}
161157
/>

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

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { ChangeEvent } from 'react'
1+
import React from 'react'
22
import { toNumber } from 'lodash'
3-
import { EuiFieldText } from '@elastic/eui'
43
import { MAX_TTL_NUMBER, Maybe, validateTTLNumberForAddKey } from 'uiSrc/utils'
54

65
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
76
import { FormField } from 'uiSrc/components/base/forms/FormField'
87
import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
98
import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
109
import { Spacer } from 'uiSrc/components/base/layout/spacer'
10+
import { TextInput } from 'uiSrc/components/base/inputs'
1111
import { AddCommonFieldsFormConfig as config } from '../constants/fields-config'
1212

1313
import styles from './styles.module.scss'
@@ -35,12 +35,10 @@ const AddKeyCommonFields = (props: Props) => {
3535
setKeyTTL,
3636
} = props
3737

38-
const handleTTLChange = (event: ChangeEvent<HTMLInputElement>) => {
39-
event.preventDefault()
40-
const target = event.currentTarget
41-
const value = validateTTLNumberForAddKey(target.value)
42-
if (value.toString().length) {
43-
setKeyTTL(toNumber(value))
38+
const handleTTLChange = (value: string) => {
39+
const validatedValue = validateTTLNumberForAddKey(value)
40+
if (validatedValue.toString().length) {
41+
setKeyTTL(toNumber(validatedValue))
4442
} else {
4543
setKeyTTL(undefined)
4644
}
@@ -69,8 +67,7 @@ const AddKeyCommonFields = (props: Props) => {
6967
</FlexItem>
7068
<FlexItem grow>
7169
<FormField label={config.keyTTL.label}>
72-
<EuiFieldText
73-
fullWidth
70+
<TextInput
7471
name={config.keyTTL.name}
7572
id={config.keyTTL.name}
7673
maxLength={200}
@@ -88,15 +85,12 @@ const AddKeyCommonFields = (props: Props) => {
8885
</Row>
8986
<Spacer size="m" />
9087
<FormField label={config.keyName.label}>
91-
<EuiFieldText
92-
fullWidth
88+
<TextInput
9389
name={config.keyName.name}
9490
id={config.keyName.name}
9591
value={keyName}
9692
placeholder={config.keyName.placeholder}
97-
onChange={(e: ChangeEvent<HTMLInputElement>) =>
98-
setKeyName(e.target.value)
99-
}
93+
onChange={setKeyName}
10094
disabled={loading}
10195
autoComplete="off"
10296
data-testid="key"

0 commit comments

Comments
 (0)