Skip to content

Commit 1f13bb9

Browse files
dantovskadantovska
authored
RI-7681: Polish forms overall (#5212)
* remove spacer on db index * remove spacers and apply cols with gaps on ssh details * remove spacers and apply cols with gaps on tls details * remove unused custom classes from ssh details props and usages * remove the same classes implement but not used in other components
1 parent 0fbe1be commit 1f13bb9

File tree

5 files changed

+235
-283
lines changed

5 files changed

+235
-283
lines changed

‎redisinsight/ui/src/pages/home/components/form/DbIndex.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,23 @@ const DbIndex = (props: Props) => {
4949
</Row>
5050

5151
{formik.values.showDb && (
52-
<>
53-
<Spacer />
54-
<Row gap="m" responsive>
55-
<FlexItem grow className={styles.dbInput}>
56-
<FormField label="Database Index">
57-
<NumericInput
58-
autoValidate
59-
min={0}
60-
name="db"
61-
id="db"
62-
data-testid="db"
63-
placeholder="Enter Database Index"
64-
value={Number(formik.values.db)}
65-
onChange={(value) => formik.setFieldValue('db', value)}
66-
/>
67-
</FormField>
68-
</FlexItem>
69-
<FlexItem grow />
70-
</Row>
71-
</>
52+
<Row gap="m" responsive>
53+
<FlexItem grow className={styles.dbInput}>
54+
<FormField label="Database Index">
55+
<NumericInput
56+
autoValidate
57+
min={0}
58+
name="db"
59+
id="db"
60+
data-testid="db"
61+
placeholder="Enter Database Index"
62+
value={Number(formik.values.db)}
63+
onChange={(value) => formik.setFieldValue('db', value)}
64+
/>
65+
</FormField>
66+
</FlexItem>
67+
<FlexItem grow />
68+
</Row>
7269
)}
7370
</>
7471
)

‎redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx‎

Lines changed: 147 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,10 @@ import {
1717
} from 'uiSrc/components/base/inputs'
1818
import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
1919
import { RiRadioGroup } from 'uiSrc/components/base/forms/radio-group/RadioGroup'
20-
import { Spacer } from 'uiSrc/components/base/layout'
2120
import { Text } from 'uiSrc/components/base/text/Text'
2221
import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
2322

2423
export interface Props {
25-
flexGroupClassName?: string
26-
flexItemClassName?: string
2724
formik: FormikProps<DbConnectionInfo>
2825
}
2926

@@ -43,191 +40,178 @@ const sshPassTypeOptions = [
4340
]
4441

4542
const SSHDetails = (props: Props) => {
46-
const { flexGroupClassName = '', flexItemClassName = '', formik } = props
43+
const { formik } = props
4744
const id = useGenerateId('', ' ssh')
4845

4946
return (
5047
<Col gap="m">
51-
<Row
52-
className={flexGroupClassName}
53-
align={!flexGroupClassName ? 'end' : undefined}
54-
>
55-
<FlexItem style={{ width: '230px' }} className={flexItemClassName}>
56-
<FormField>
57-
<Checkbox
58-
id={id}
59-
name="ssh"
60-
label={<Text>Use SSH Tunnel</Text>}
61-
checked={!!formik.values.ssh}
62-
onChange={formik.handleChange}
63-
data-testid="use-ssh"
64-
/>
65-
</FormField>
66-
</FlexItem>
48+
<Row>
49+
<FormField>
50+
<Checkbox
51+
id={id}
52+
name="ssh"
53+
label={<Text>Use SSH Tunnel</Text>}
54+
checked={!!formik.values.ssh}
55+
onChange={formik.handleChange}
56+
data-testid="use-ssh"
57+
/>
58+
</FormField>
6759
</Row>
6860

6961
{formik.values.ssh && (
70-
<>
71-
<Spacer size="xs" />
72-
<Col gap="m">
73-
<Row gap="m" responsive className={flexGroupClassName}>
74-
<FlexItem grow className={flexItemClassName}>
75-
<FormField label="Host" required>
76-
<TextInput
77-
name="sshHost"
78-
id="sshHost"
79-
data-testid="sshHost"
80-
color="secondary"
81-
maxLength={200}
82-
placeholder="Enter SSH Host"
83-
value={formik.values.sshHost ?? ''}
84-
onChange={(value) => {
85-
formik.setFieldValue(
86-
'sshHost',
87-
validateField(value.trim()),
88-
)
89-
}}
90-
/>
91-
</FormField>
92-
</FlexItem>
93-
<FlexItem grow className={flexItemClassName}>
94-
<FormField label="Port" required>
95-
<NumericInput
96-
autoValidate
97-
min={0}
98-
max={MAX_PORT_NUMBER}
99-
name="sshPort"
100-
id="sshPort"
101-
data-testid="sshPort"
102-
placeholder="Enter SSH Port"
103-
value={Number(formik.values.sshPort)}
104-
onChange={(value) => formik.setFieldValue('sshPort', value)}
105-
onFocus={selectOnFocus}
106-
/>
107-
</FormField>
108-
</FlexItem>
109-
</Row>
110-
<Row responsive className={flexGroupClassName}>
111-
<FlexItem grow className={flexItemClassName}>
112-
<FormField label="Username" required>
113-
<TextInput
114-
name="sshUsername"
115-
id="sshUsername"
116-
data-testid="sshUsername"
117-
color="secondary"
118-
maxLength={200}
119-
placeholder="Enter SSH Username"
120-
value={formik.values.sshUsername ?? ''}
121-
onChange={(value) => {
122-
formik.setFieldValue(
123-
'sshUsername',
124-
validateField(value.trim()),
125-
)
62+
<Col gap="l">
63+
<Row gap="m" responsive>
64+
<FlexItem grow>
65+
<FormField label="Host" required>
66+
<TextInput
67+
name="sshHost"
68+
id="sshHost"
69+
data-testid="sshHost"
70+
color="secondary"
71+
maxLength={200}
72+
placeholder="Enter SSH Host"
73+
value={formik.values.sshHost ?? ''}
74+
onChange={(value) => {
75+
formik.setFieldValue('sshHost', validateField(value.trim()))
76+
}}
77+
/>
78+
</FormField>
79+
</FlexItem>
80+
<FlexItem grow>
81+
<FormField label="Port" required>
82+
<NumericInput
83+
autoValidate
84+
min={0}
85+
max={MAX_PORT_NUMBER}
86+
name="sshPort"
87+
id="sshPort"
88+
data-testid="sshPort"
89+
placeholder="Enter SSH Port"
90+
value={Number(formik.values.sshPort)}
91+
onChange={(value) => formik.setFieldValue('sshPort', value)}
92+
onFocus={selectOnFocus}
93+
/>
94+
</FormField>
95+
</FlexItem>
96+
</Row>
97+
<Row responsive>
98+
<FlexItem grow>
99+
<FormField label="Username" required>
100+
<TextInput
101+
name="sshUsername"
102+
id="sshUsername"
103+
data-testid="sshUsername"
104+
color="secondary"
105+
maxLength={200}
106+
placeholder="Enter SSH Username"
107+
value={formik.values.sshUsername ?? ''}
108+
onChange={(value) => {
109+
formik.setFieldValue(
110+
'sshUsername',
111+
validateField(value.trim()),
112+
)
113+
}}
114+
/>
115+
</FormField>
116+
</FlexItem>
117+
</Row>
118+
<Row responsive>
119+
<FlexItem grow>
120+
<RiRadioGroup
121+
id="sshPassType"
122+
items={sshPassTypeOptions}
123+
layout="horizontal"
124+
value={formik.values.sshPassType}
125+
onChange={(id) => formik.setFieldValue('sshPassType', id)}
126+
data-testid="ssh-pass-type"
127+
/>
128+
</FlexItem>
129+
</Row>
130+
{formik.values.sshPassType === SshPassType.Password && (
131+
<Row responsive>
132+
<FlexItem grow>
133+
<FormField label="Password">
134+
<PasswordInput
135+
name="sshPassword"
136+
id="sshPassword"
137+
data-testid="sshPassword"
138+
maxLength={10_000}
139+
placeholder="Enter SSH Password"
140+
value={
141+
formik.values.sshPassword === true
142+
? SECURITY_FIELD
143+
: (formik.values.sshPassword ?? '')
144+
}
145+
onChangeCapture={formik.handleChange}
146+
onFocus={() => {
147+
if (formik.values.sshPassword === true) {
148+
formik.setFieldValue('sshPassword', '')
149+
}
126150
}}
151+
autoComplete="new-password"
127152
/>
128153
</FormField>
129154
</FlexItem>
130155
</Row>
131-
<Row responsive className={flexGroupClassName}>
132-
<FlexItem grow className={flexItemClassName}>
133-
<Spacer size="m" />
134-
<RiRadioGroup
135-
id="sshPassType"
136-
items={sshPassTypeOptions}
137-
layout="horizontal"
138-
value={formik.values.sshPassType}
139-
onChange={(id) => formik.setFieldValue('sshPassType', id)}
140-
data-testid="ssh-pass-type"
141-
/>
142-
<Spacer size="s" />
143-
</FlexItem>
144-
</Row>
145-
{formik.values.sshPassType === SshPassType.Password && (
146-
<Row responsive className={flexGroupClassName}>
147-
<FlexItem grow className={flexItemClassName}>
148-
<FormField label="Password">
156+
)}
157+
158+
{formik.values.sshPassType === SshPassType.PrivateKey && (
159+
<Col gap="l">
160+
<Row responsive>
161+
<FlexItem grow>
162+
<FormField label="Private Key" required>
163+
<TextArea
164+
name="sshPrivateKey"
165+
id="sshPrivateKey"
166+
data-testid="sshPrivateKey"
167+
maxLength={50_000}
168+
placeholder="Enter SSH Private Key in PEM format"
169+
value={
170+
formik.values.sshPrivateKey === true
171+
? SECURITY_FIELD
172+
: (formik?.values?.sshPrivateKey?.replace(
173+
/./g,
174+
'•',
175+
) ?? '')
176+
}
177+
onChangeCapture={formik.handleChange}
178+
onFocus={() => {
179+
if (formik.values.sshPrivateKey === true) {
180+
formik.setFieldValue('sshPrivateKey', '')
181+
}
182+
}}
183+
/>
184+
</FormField>
185+
</FlexItem>
186+
</Row>
187+
<Row responsive>
188+
<FlexItem grow>
189+
<FormField label="Passphrase">
149190
<PasswordInput
150-
name="sshPassword"
151-
id="sshPassword"
152-
data-testid="sshPassword"
153-
maxLength={10_000}
154-
placeholder="Enter SSH Password"
191+
name="sshPassphrase"
192+
id="sshPassphrase"
193+
data-testid="sshPassphrase"
194+
maxLength={50_000}
195+
placeholder="Enter Passphrase for Private Key"
155196
value={
156-
formik.values.sshPassword === true
197+
formik.values.sshPassphrase === true
157198
? SECURITY_FIELD
158-
: (formik.values.sshPassword ?? '')
199+
: (formik.values.sshPassphrase ?? '')
159200
}
160201
onChangeCapture={formik.handleChange}
161202
onFocus={() => {
162-
if (formik.values.sshPassword === true) {
163-
formik.setFieldValue('sshPassword', '')
203+
if (formik.values.sshPassphrase === true) {
204+
formik.setFieldValue('sshPassphrase', '')
164205
}
165206
}}
166207
autoComplete="new-password"
167208
/>
168209
</FormField>
169210
</FlexItem>
170211
</Row>
171-
)}
172-
173-
{formik.values.sshPassType === SshPassType.PrivateKey && (
174-
<Col gap="l">
175-
<Row responsive className={flexGroupClassName}>
176-
<FlexItem grow className={flexItemClassName}>
177-
<FormField label="Private Key" required>
178-
<TextArea
179-
name="sshPrivateKey"
180-
id="sshPrivateKey"
181-
data-testid="sshPrivateKey"
182-
maxLength={50_000}
183-
placeholder="Enter SSH Private Key in PEM format"
184-
value={
185-
formik.values.sshPrivateKey === true
186-
? SECURITY_FIELD
187-
: (formik?.values?.sshPrivateKey?.replace(
188-
/./g,
189-
'•',
190-
) ?? '')
191-
}
192-
onChangeCapture={formik.handleChange}
193-
onFocus={() => {
194-
if (formik.values.sshPrivateKey === true) {
195-
formik.setFieldValue('sshPrivateKey', '')
196-
}
197-
}}
198-
/>
199-
</FormField>
200-
</FlexItem>
201-
</Row>
202-
<Row responsive className={flexGroupClassName}>
203-
<FlexItem grow className={flexItemClassName}>
204-
<FormField label="Passphrase">
205-
<PasswordInput
206-
name="sshPassphrase"
207-
id="sshPassphrase"
208-
data-testid="sshPassphrase"
209-
maxLength={50_000}
210-
placeholder="Enter Passphrase for Private Key"
211-
value={
212-
formik.values.sshPassphrase === true
213-
? SECURITY_FIELD
214-
: (formik.values.sshPassphrase ?? '')
215-
}
216-
onChangeCapture={formik.handleChange}
217-
onFocus={() => {
218-
if (formik.values.sshPassphrase === true) {
219-
formik.setFieldValue('sshPassphrase', '')
220-
}
221-
}}
222-
autoComplete="new-password"
223-
/>
224-
</FormField>
225-
</FlexItem>
226-
</Row>
227-
</Col>
228-
)}
229-
</Col>
230-
</>
212+
</Col>
213+
)}
214+
</Col>
231215
)}
232216
</Col>
233217
)

0 commit comments

Comments
 (0)