Skip to content

Commit 723a5b4

Browse files
ArtemHoruzhenkoArtemHoruzhenko
authored
RI-7687: adjust RDI form (#5156)
1 parent 38e6570 commit 723a5b4

File tree

4 files changed

+126
-193
lines changed

4 files changed

+126
-193
lines changed

‎redisinsight/ui/src/components/form-dialog/FormDialog.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ const FormDialog = (props: Props) => {
3030
onCancel={onClose}
3131
>
3232
<Modal.Content.Close icon={CancelIcon} onClick={onClose} />
33-
<Modal.Content.Header.Title>{header}</Modal.Content.Header.Title>
33+
<Modal.Content.Header.Compose>
34+
<Modal.Content.Header.Title>{header}</Modal.Content.Header.Title>
35+
</Modal.Content.Header.Compose>
3436
<StyledFormDialogContentBody content={children} />
3537
<Modal.Content.Footer.Compose>{footer}</Modal.Content.Footer.Compose>
3638
</StyledFormDialogContent>

‎redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionForm.tsx‎

Lines changed: 120 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@ import {
88
FormikHelpers,
99
} from 'formik'
1010
import React, { useEffect, useState } from 'react'
11-
import cx from 'classnames'
1211
import { isNull } from 'lodash'
1312

1413
import ReactDOM from 'react-dom'
1514
import { SECURITY_FIELD } from 'uiSrc/constants'
16-
import { RiTooltip, RiTooltipProps } from 'uiSrc/components'
15+
import { RiTooltipProps } from 'uiSrc/components'
1716
import { RdiInstance } from 'uiSrc/slices/interfaces'
1817
import { getFormUpdates, Nullable } from 'uiSrc/utils'
1918
import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
20-
import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
19+
import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
2120
import {
2221
PrimaryButton,
2322
SecondaryButton,
@@ -26,12 +25,8 @@ import { InfoIcon } from 'uiSrc/components/base/icons'
2625
import { FormField } from 'uiSrc/components/base/forms/FormField'
2726
import { PasswordInput, TextInput } from 'uiSrc/components/base/inputs'
2827
import { Title } from 'uiSrc/components/base/text/Title'
29-
import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
30-
import { Spacer } from 'uiSrc/components/base/layout'
3128
import ValidationTooltip from './components/ValidationTooltip'
3229

33-
import styles from './styles.module.scss'
34-
3530
export interface AppendInfoProps
3631
extends Omit<RiTooltipProps, 'children' | 'delay' | 'position'> {
3732
position?: RiTooltipProps['position']
@@ -60,18 +55,6 @@ const getInitialValues = (
6055
password: values ? null : '',
6156
})
6257

63-
const AppendInfo = ({ title, content, ...rest }: AppendInfoProps) => (
64-
<RiTooltip
65-
anchorClassName="inputAppendIcon"
66-
position="right"
67-
title={title}
68-
content={content}
69-
{...rest}
70-
>
71-
<RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
72-
</RiTooltip>
73-
)
74-
7558
const ConnectionForm = (props: Props) => {
7659
const { onSubmit, onCancel, editInstance, isLoading } = props
7760

@@ -121,13 +104,11 @@ const ConnectionForm = (props: Props) => {
121104
if (!footerEl) return null
122105

123106
return ReactDOM.createPortal(
124-
<Row className="footerAddDatabase" justify="between">
125-
<FlexItem />
107+
<Row justify="end">
126108
<FlexItem>
127109
<Row gap="m">
128110
<FlexItem>
129111
<SecondaryButton
130-
size="s"
131112
data-testid="connection-form-cancel-button"
132113
onClick={onCancel}
133114
>
@@ -139,7 +120,6 @@ const ConnectionForm = (props: Props) => {
139120
<PrimaryButton
140121
data-testid="connection-form-add-button"
141122
type="submit"
142-
size="s"
143123
icon={!isValid ? InfoIcon : undefined}
144124
loading={isLoading}
145125
disabled={!isValid}
@@ -165,112 +145,124 @@ const ConnectionForm = (props: Props) => {
165145
onSubmit={handleSubmit}
166146
>
167147
{({ isValid, errors, values }) => (
168-
<Form className={styles.form}>
169-
<div className="databasePanelWrapper" data-testid="connection-form">
170-
<div className={cx('container relative')}>
171-
<FormField label="RDI Alias*" className={styles.withoutPadding}>
172-
<Field name="name">
173-
{({ field }: { field: FieldInputProps<string> }) => (
174-
<TextInput
175-
data-testid="connection-form-name-input"
176-
placeholder="Enter RDI Alias"
177-
maxLength={500}
178-
name={field.name}
179-
value={field.value}
180-
onChange={(value) => field.onChange({ target: { name: field.name, value } })}
181-
/>
182-
)}
183-
</Field>
184-
</FormField>
185-
<Spacer size='s' />
186-
<FormField
187-
label="URL*"
188-
infoIconProps={{
189-
content: "The RDI machine servers REST API via port 443. Ensure that Redis Insight can access the RDI host over port 443."
190-
}}
191-
>
192-
<Field name="url">
193-
{({ field }: { field: FieldInputProps<string> }) => (
194-
<TextInput
195-
data-testid="connection-form-url-input"
196-
placeholder="Enter the RDI host IP as: https://[IP-Address]"
197-
disabled={!!editInstance}
198-
name={field.name}
199-
value={field.value}
200-
onChange={(value) => field.onChange({ target: { name: field.name, value } })}
201-
/>
202-
)}
203-
</Field>
204-
</FormField>
205-
<Spacer size='s' />
206-
<FormField>
207-
<Row gap="m">
208-
<FlexItem grow={1}>
209-
<FormField
210-
label="Username"
211-
infoIconProps={{
212-
content: "The RDI REST API authentication is using the RDI Redis username and password."
213-
}}
214-
>
215-
<Field name="username">
216-
{({ field }: { field: FieldInputProps<string> }) => (
217-
<TextInput
218-
data-testid="connection-form-username-input"
219-
placeholder="Enter the RDI Redis username"
220-
maxLength={500}
221-
name={field.name}
222-
value={field.value}
223-
onChange={(value) => field.onChange({ target: { name: field.name, value } })}
224-
/>
225-
)}
226-
</Field>
227-
</FormField>
228-
</FlexItem>
229-
<FlexItem grow={1}>
230-
<FormField
231-
infoIconProps={{
232-
content: "The RDI REST API authentication is using the RDI Redis username and password."
233-
}}
234-
label="Password"
235-
>
236-
<Field name="password">
237-
{({
238-
field,
239-
form,
240-
meta,
241-
}: {
242-
field: FieldInputProps<string>
243-
form: FormikHelpers<string>
244-
meta: FieldMetaProps<string>
245-
}) => (
246-
<PasswordInput
247-
data-testid="connection-form-password-input"
248-
placeholder="Enter the RDI Redis password"
249-
maxLength={500}
250-
{...field}
251-
onChangeCapture={field.onChange}
252-
value={
253-
isNull(field.value) ? SECURITY_FIELD : field.value
148+
<Form>
149+
<Col data-testid="connection-form" gap="l">
150+
<FormField label="RDI Alias" required>
151+
<Field name="name">
152+
{({ field }: { field: FieldInputProps<string> }) => (
153+
<TextInput
154+
data-testid="connection-form-name-input"
155+
placeholder="Enter RDI Alias"
156+
maxLength={500}
157+
name={field.name}
158+
value={field.value}
159+
onChange={(value) =>
160+
field.onChange({ target: { name: field.name, value } })
161+
}
162+
/>
163+
)}
164+
</Field>
165+
</FormField>
166+
<FormField
167+
label="URL"
168+
required
169+
infoIconProps={{
170+
content:
171+
'The RDI machine servers REST API via port 443. Ensure that Redis Insight can access the RDI host over port 443.',
172+
}}
173+
>
174+
<Field name="url">
175+
{({ field }: { field: FieldInputProps<string> }) => (
176+
<TextInput
177+
data-testid="connection-form-url-input"
178+
placeholder="Enter the RDI host IP as: https://[IP-Address]"
179+
disabled={!!editInstance}
180+
name={field.name}
181+
value={field.value}
182+
onChange={(value) =>
183+
field.onChange({ target: { name: field.name, value } })
184+
}
185+
/>
186+
)}
187+
</Field>
188+
</FormField>
189+
<FormField>
190+
<Row gap="xxl">
191+
<FlexItem grow={2}>
192+
<FormField
193+
label="Username"
194+
infoIconProps={{
195+
content:
196+
'The RDI REST API authentication is using the RDI Redis username and password.',
197+
}}
198+
>
199+
<Field name="username">
200+
{({ field }: { field: FieldInputProps<string> }) => (
201+
<TextInput
202+
data-testid="connection-form-username-input"
203+
placeholder="Enter the RDI Redis username"
204+
maxLength={500}
205+
name={field.name}
206+
value={field.value}
207+
onChange={(value) =>
208+
field.onChange({
209+
target: { name: field.name, value },
210+
})
211+
}
212+
/>
213+
)}
214+
</Field>
215+
</FormField>
216+
</FlexItem>
217+
<FlexItem grow={1}>
218+
<FormField
219+
infoIconProps={{
220+
content:
221+
'The RDI REST API authentication is using the RDI Redis username and password.',
222+
}}
223+
label="Password"
224+
>
225+
<Field name="password">
226+
{({
227+
field,
228+
form,
229+
meta,
230+
}: {
231+
field: FieldInputProps<string>
232+
form: FormikHelpers<string>
233+
meta: FieldMetaProps<string>
234+
}) => (
235+
<PasswordInput
236+
data-testid="connection-form-password-input"
237+
placeholder="Enter the RDI Redis password"
238+
maxLength={500}
239+
{...field}
240+
onChangeCapture={field.onChange}
241+
value={
242+
isNull(field.value) ? SECURITY_FIELD : field.value
243+
}
244+
onFocus={() => {
245+
if (isNull(field.value) && !meta.touched) {
246+
form.setFieldValue('password', '')
254247
}
255-
onFocus={() => {
256-
if (isNull(field.value) && !meta.touched) {
257-
form.setFieldValue('password', '')
258-
}
259-
}}
260-
/>
261-
)}
262-
</Field>
263-
</FormField>
264-
</FlexItem>
265-
</Row>
266-
</FormField>
267-
</div>
268-
<Footer
269-
isValid={isValid}
270-
errors={errors}
271-
onSubmit={() => handleSubmit(values)}
272-
/>
273-
</div>
248+
}}
249+
/>
250+
)}
251+
</Field>
252+
</FormField>
253+
</FlexItem>
254+
</Row>
255+
</FormField>
256+
<FlexItem grow>
257+
<Col justify="end">
258+
<Footer
259+
isValid={isValid}
260+
errors={errors}
261+
onSubmit={() => handleSubmit(values)}
262+
/>
263+
</Col>
264+
</FlexItem>
265+
</Col>
274266
</Form>
275267
)}
276268
</Formik>

‎redisinsight/ui/src/pages/rdi/home/connection-form/ConnectionFormWrapper.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Nullable } from 'uiSrc/utils'
55
import { ModalHeaderProvider } from 'uiSrc/contexts/ModalTitleProvider'
66
import ConnectionForm, { Props as ConnectionFormProps } from './ConnectionForm'
77

8-
import styles from './styles.module.scss'
98
import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
109

1110
export interface Props extends ConnectionFormProps {
@@ -24,11 +23,9 @@ const ConnectionFormWrapper = (props: Props) => {
2423
header={modalHeader ?? <Title size="M">Add endpoint</Title>}
2524
footer={<FooterDatabaseForm />}
2625
>
27-
<div className={styles.bodyWrapper}>
28-
<ModalHeaderProvider value={{ modalHeader, setModalHeader }}>
29-
<ConnectionForm {...props} />
30-
</ModalHeaderProvider>
31-
</div>
26+
<ModalHeaderProvider value={{ modalHeader, setModalHeader }}>
27+
<ConnectionForm {...props} />
28+
</ModalHeaderProvider>
3229
</FormDialog>
3330
)
3431
}

‎redisinsight/ui/src/pages/rdi/home/connection-form/styles.module.scss‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

0 commit comments

Comments
 (0)