Skip to content

Commit ffda0f7

Browse files
KrumTyKrumTy
authored
RI-7054: replace EuiFormRow with FormField (#4585)
1 parent 6553188 commit ffda0f7

File tree

51 files changed

+252
-441
lines changed

Some content is hidden

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

51 files changed

+252
-441
lines changed

‎redisinsight/ui/src/components/base/forms/FormField.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { FormField } from '@redis-ui/components'
2+
3+
export { FormField }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
border-color: var(--separatorColor) !important;
7171
}
7272

73-
.euiFormRow, .euiFormControlLayout {
73+
.euiFormControlLayout {
7474
max-width: none;
7575

7676
.euiFormControlLayout:not(.euiFormControlLayout--compressed) {

‎redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState } from 'react'
22
import {
33
EuiCheckbox,
4-
EuiFormRow,
54
EuiIcon,
65
EuiPopover,
76
EuiText,
87
} from '@elastic/eui'
8+
import { FormField } from '@redis-ui/components'
99
import { formatLongName } from 'uiSrc/utils'
1010

1111
import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
@@ -63,7 +63,7 @@ const ExportAction = <T extends { id: string; name?: string }>(
6363
</Row>
6464
))}
6565
</div>
66-
<EuiFormRow style={{ marginTop: 16 }}>
66+
<FormField style={{ marginTop: 16 }}>
6767
<EuiCheckbox
6868
id="export-passwords"
6969
name="export-passwords"
@@ -72,7 +72,7 @@ const ExportAction = <T extends { id: string; name?: string }>(
7272
onChange={(e) => setWithSecrets(e.target.checked)}
7373
data-testid="export-passwords"
7474
/>
75-
</EuiFormRow>
75+
</FormField>
7676
<div className={styles.popoverFooter}>
7777
<PrimaryButton
7878
size="small"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import React, { ChangeEvent, useState } from 'react'
33
import {
44
EuiFieldText,
55
EuiForm,
6-
EuiFormRow,
76
EuiTitle,
87
EuiToolTip,
98
} from '@elastic/eui'
9+
import { FormField } from '@redis-ui/components'
1010
import { FormikErrors, useFormik } from 'formik'
1111
import { validateEmail, validateField } from 'uiSrc/utils'
1212

@@ -95,7 +95,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
9595
<EuiForm component="form" onSubmit={formik.handleSubmit}>
9696
<Row>
9797
<FlexItem>
98-
<EuiFormRow className={styles.formRaw} label="Email">
98+
<FormField className={styles.formRaw} label="Email">
9999
<EuiFieldText
100100
name="email"
101101
id="sso-email"
@@ -110,7 +110,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
110110
)
111111
}}
112112
/>
113-
</EuiFormRow>
113+
</FormField>
114114
</FlexItem>
115115
</Row>
116116
<Spacer />

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
EuiText,
88
EuiTitle,
99
EuiFieldSearch,
10-
EuiFormRow,
1110
} from '@elastic/eui'
11+
import { FormField } from '@redis-ui/components'
1212
import {
1313
InstanceRedisCloud,
1414
AddRedisDatabaseStatus,
@@ -100,7 +100,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
100100
</MessageBar>
101101
</FlexItem>
102102
<FlexItem>
103-
<EuiFormRow className={styles.searchForm}>
103+
<FormField className={styles.searchForm}>
104104
<EuiFieldSearch
105105
placeholder="Search..."
106106
className={styles.search}
@@ -109,7 +109,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
109109
aria-label="Search"
110110
data-testid="search"
111111
/>
112-
</EuiFormRow>
112+
</FormField>
113113
</FlexItem>
114114
</Flex>
115115
<br />

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {
88
EuiText,
99
EuiTitle,
1010
EuiFieldSearch,
11-
EuiFormRow,
1211
EuiToolTip,
1312
} from '@elastic/eui'
1413
import { map, pick } from 'lodash'
1514
import { useSelector } from 'react-redux'
1615
import { useHistory } from 'react-router-dom'
16+
import { FormField } from '@redis-ui/components'
1717

1818
import { cloudSelector } from 'uiSrc/slices/instances/cloud'
1919
import { InstanceRedisCloud } from 'uiSrc/slices/interfaces'
@@ -214,7 +214,7 @@ const RedisCloudDatabasesPage = ({
214214
</FlexItem>
215215
</Row>
216216
<FlexItem>
217-
<EuiFormRow className={styles.searchForm}>
217+
<FormField className={styles.searchForm}>
218218
<EuiFieldSearch
219219
placeholder="Search..."
220220
className={styles.search}
@@ -223,7 +223,7 @@ const RedisCloudDatabasesPage = ({
223223
aria-label="Search"
224224
data-testid="search"
225225
/>
226-
</EuiFormRow>
226+
</FormField>
227227
</FlexItem>
228228
<br />
229229

‎redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import {
99
EuiText,
1010
EuiTitle,
1111
EuiFieldSearch,
12-
EuiFormRow,
1312
EuiToolTip,
1413
} from '@elastic/eui'
1514
import cx from 'classnames'
15+
import { FormField } from '@redis-ui/components'
1616
import {
1717
InstanceRedisCloud,
1818
RedisCloudAccount,
@@ -266,7 +266,7 @@ const RedisCloudSubscriptions = ({
266266
</MessageBar>
267267
</FlexItem>
268268
<FlexItem>
269-
<EuiFormRow className={styles.searchForm}>
269+
<FormField className={styles.searchForm}>
270270
<EuiFieldSearch
271271
placeholder="Search..."
272272
className={styles.search}
@@ -275,7 +275,7 @@ const RedisCloudSubscriptions = ({
275275
aria-label="Search"
276276
data-testid="search"
277277
/>
278-
</EuiFormRow>
278+
</FormField>
279279
</FlexItem>
280280
</Row>
281281
<br />

‎redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
EuiText,
77
EuiTitle,
88
EuiFieldSearch,
9-
EuiFormRow,
109
} from '@elastic/eui'
1110
import { useSelector } from 'react-redux'
1211

12+
import { FormField } from '@redis-ui/components'
1313
import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
1414
import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
1515
import MessageBar from 'uiSrc/components/message-bar/MessageBar'
@@ -115,7 +115,7 @@ const SentinelDatabasesResult = ({
115115
</FlexItem>
116116
</Row>
117117
<FlexItem>
118-
<EuiFormRow className={styles.searchForm}>
118+
<FormField className={styles.searchForm}>
119119
<EuiFieldSearch
120120
placeholder="Search..."
121121
className={styles.search}
@@ -124,7 +124,7 @@ const SentinelDatabasesResult = ({
124124
aria-label="Search"
125125
data-testid="search"
126126
/>
127-
</EuiFormRow>
127+
</FormField>
128128
</FlexItem>
129129
<br />
130130
<div className="itemList databaseList sentinelDatabaseListResult">

‎redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
EuiText,
1010
EuiTitle,
1111
EuiFieldSearch,
12-
EuiFormRow,
1312
EuiToolTip,
1413
} from '@elastic/eui'
1514
import { useSelector } from 'react-redux'
1615

16+
import { FormField } from '@redis-ui/components'
1717
import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
1818
import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
1919
import validationErrors from 'uiSrc/constants/validationErrors'
@@ -219,7 +219,7 @@ const SentinelDatabases = ({
219219
</EuiText>
220220
</FlexItem>
221221
<FlexItem>
222-
<EuiFormRow className={styles.searchForm}>
222+
<FormField className={styles.searchForm}>
223223
<EuiFieldSearch
224224
placeholder="Search..."
225225
className={styles.search}
@@ -228,7 +228,7 @@ const SentinelDatabases = ({
228228
aria-label="Search"
229229
data-testid="search"
230230
/>
231-
</EuiFormRow>
231+
</FormField>
232232
</FlexItem>
233233
</Row>
234234
<br />

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { toNumber } from 'lodash'
33
import {
44
EuiFieldText,
55
EuiFormFieldset,
6-
EuiFormRow,
76
EuiSuperSelect,
87
} from '@elastic/eui'
8+
import { FormField } from '@redis-ui/components'
99
import { MAX_TTL_NUMBER, Maybe, validateTTLNumberForAddKey } from 'uiSrc/utils'
1010

1111
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
@@ -54,7 +54,7 @@ const AddKeyCommonFields = (props: Props) => {
5454
<EuiFormFieldset
5555
legend={{ children: 'Select key type', display: 'hidden' }}
5656
>
57-
<EuiFormRow label="Key Type*" fullWidth>
57+
<FormField label="Key Type*">
5858
<EuiSuperSelect
5959
itemClassName="withColorDefinition"
6060
fullWidth
@@ -64,11 +64,11 @@ const AddKeyCommonFields = (props: Props) => {
6464
onChange={(value: string) => onChangeType(value)}
6565
data-testid="select-key-type"
6666
/>
67-
</EuiFormRow>
67+
</FormField>
6868
</EuiFormFieldset>
6969
</FlexItem>
7070
<FlexItem grow>
71-
<EuiFormRow label={config.keyTTL.label} fullWidth>
71+
<FormField label={config.keyTTL.label}>
7272
<EuiFieldText
7373
fullWidth
7474
name={config.keyTTL.name}
@@ -83,10 +83,10 @@ const AddKeyCommonFields = (props: Props) => {
8383
autoComplete="off"
8484
data-testid="ttl"
8585
/>
86-
</EuiFormRow>
86+
</FormField>
8787
</FlexItem>
8888
</Row>
89-
<EuiFormRow label={config.keyName.label} fullWidth>
89+
<FormField label={config.keyName.label}>
9090
<EuiFieldText
9191
fullWidth
9292
name={config.keyName.name}
@@ -100,7 +100,7 @@ const AddKeyCommonFields = (props: Props) => {
100100
autoComplete="off"
101101
data-testid="key"
102102
/>
103-
</EuiFormRow>
103+
</FormField>
104104
</div>
105105
)
106106
}

0 commit comments

Comments
 (0)