Skip to content

Commit c439b3a

Browse files
dantovskadantovska
authored
Merge branch 'fe/feature/RI-7039-replace-eui' into fe/feature/RI-7207-button-group
2 parents 8b80d79 + 7d4f6bc commit c439b3a

File tree

43 files changed

+404
-438
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

+404
-438
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: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
2-
import { EuiFieldText } from '@elastic/eui'
3-
import { SwitchInput } from 'uiSrc/components/base/inputs'
2+
3+
import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
44
import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
55
import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
66
import {
@@ -15,11 +15,11 @@ import {
1515
} from 'uiSrc/components/base/forms/button-group/ButtonGroup'
1616

1717
const NewEnumSelect = ({
18-
select,
18+
selected,
1919
values,
2020
onClick,
2121
}: {
22-
select: string
22+
selected: string
2323
values: string[]
2424
onClick: (v: string) => void
2525
}) => (
@@ -28,7 +28,7 @@ const NewEnumSelect = ({
2828
<div
2929
title={v.charAt(0).toUpperCase() + v.slice(1)}
3030
onClick={() => onClick(v)}
31-
className={`button-point ${select === v ? 'button-selected' : null}`}
31+
className={`button-point ${selected === v ? 'button-selected' : null}`}
3232
>
3333
{v}
3434
</div>
@@ -57,7 +57,7 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
5757
<div className="chart-form-top">
5858
<NewEnumSelect
5959
values={Object.keys(GraphMode)}
60-
select={value.mode}
60+
selected={value.mode}
6161
onClick={(v) => onChange('mode', v)}
6262
/>
6363
<SwitchInput
@@ -81,19 +81,20 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
8181
<div className="more-options">
8282
<section>
8383
<FormFieldset legend={{ children: 'Title' }}>
84-
<EuiFieldText
84+
<TextInput
8585
placeholder="Title"
8686
value={value.title}
87-
onChange={(e) => onChange('title', e.target.value)}
87+
onChange={(value) => onChange('title', value)}
8888
aria-label="Title"
8989
maxLength={parseInt(TITLE_MAX_LENGTH)}
90+
9091
/>
9192
</FormFieldset>
9293
<FormFieldset legend={{ children: 'X axis Label' }}>
93-
<EuiFieldText
94+
<TextInput
9495
placeholder="X axis label"
9596
value={value.xlabel}
96-
onChange={(e) => onChange('xlabel', e.target.value)}
97+
onChange={(value) => onChange('xlabel', value)}
9798
aria-label="X Label"
9899
maxLength={parseInt(X_LABEL_MAX_LENGTH)}
99100
/>
@@ -160,10 +161,10 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
160161
const YAxisConfigForm = ({ value, onChange, label }: any) => (
161162
<div>
162163
<FormFieldset legend={{ children: `${label} Label` }}>
163-
<EuiFieldText
164+
<TextInput
164165
placeholder="Label"
165166
value={value.label}
166-
onChange={(e) => onChange({ ...value, label: e.target.value })}
167+
onChange={(value) => onChange({ ...value, label: value })}
167168
aria-label="label"
168169
maxLength={parseInt(Y_LABEL_MAX_LENGTH)}
169170
/>

‎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)