Skip to content

Commit a54287e

Browse files
dantovskadantovska
committed
adjust spacings and required fields in ssh and tls details
1 parent 497d9b9 commit a54287e

File tree

2 files changed

+171
-161
lines changed

2 files changed

+171
-161
lines changed

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

Lines changed: 144 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ 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'
2021
import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
2122

2223
export interface Props {
@@ -63,166 +64,172 @@ const SSHDetails = (props: Props) => {
6364
</Row>
6465

6566
{formik.values.ssh && (
66-
<Col gap="l">
67-
<Row gap="m" responsive className={flexGroupClassName}>
68-
<FlexItem grow className={flexItemClassName}>
69-
<FormField label="Host*">
70-
<TextInput
71-
name="sshHost"
72-
id="sshHost"
73-
data-testid="sshHost"
74-
color="secondary"
75-
maxLength={200}
76-
placeholder="Enter SSH Host"
77-
value={formik.values.sshHost ?? ''}
78-
onChange={value => {
79-
formik.setFieldValue(
80-
'sshHost',
81-
validateField(value.trim()),
82-
)
83-
}}
84-
/>
85-
</FormField>
86-
</FlexItem>
87-
<FlexItem grow className={flexItemClassName}>
88-
<FormField
89-
label="Port*"
90-
additionalText="Should not exceed 65535."
91-
>
92-
<NumericInput
93-
autoValidate
94-
min={0}
95-
max={MAX_PORT_NUMBER}
96-
name="sshPort"
97-
id="sshPort"
98-
data-testid="sshPort"
99-
placeholder="Enter SSH Port"
100-
value={Number(formik.values.sshPort)}
101-
onChange={(value) => formik.setFieldValue('sshPort', value)}
102-
onFocus={selectOnFocus}
103-
/>
104-
</FormField>
105-
</FlexItem>
106-
</Row>
107-
<Row responsive className={flexGroupClassName}>
108-
<FlexItem grow className={flexItemClassName}>
109-
<FormField label="Username*">
110-
<TextInput
111-
name="sshUsername"
112-
id="sshUsername"
113-
data-testid="sshUsername"
114-
color="secondary"
115-
maxLength={200}
116-
placeholder="Enter SSH Username"
117-
value={formik.values.sshUsername ?? ''}
118-
onChange={value => {
119-
formik.setFieldValue(
120-
'sshUsername',
121-
validateField(value.trim()),
122-
)
123-
}}
124-
/>
125-
</FormField>
126-
</FlexItem>
127-
</Row>
128-
<Row responsive className={flexGroupClassName}>
129-
<FlexItem grow className={flexItemClassName}>
130-
<RiRadioGroup
131-
id="sshPassType"
132-
items={sshPassTypeOptions}
133-
layout="horizontal"
134-
value={formik.values.sshPassType}
135-
onChange={(id) => formik.setFieldValue('sshPassType', id)}
136-
data-testid="ssh-pass-type"
137-
/>
138-
</FlexItem>
139-
</Row>
140-
141-
{formik.values.sshPassType === SshPassType.Password && (
67+
<>
68+
<Spacer size="xs" />
69+
<Col gap="m">
70+
<Row gap="m" responsive className={flexGroupClassName}>
71+
<FlexItem grow className={flexItemClassName}>
72+
<FormField label="Host" required>
73+
<TextInput
74+
name="sshHost"
75+
id="sshHost"
76+
data-testid="sshHost"
77+
color="secondary"
78+
maxLength={200}
79+
placeholder="Enter SSH Host"
80+
value={formik.values.sshHost ?? ''}
81+
onChange={(value) => {
82+
formik.setFieldValue(
83+
'sshHost',
84+
validateField(value.trim()),
85+
)
86+
}}
87+
/>
88+
</FormField>
89+
</FlexItem>
90+
<FlexItem grow className={flexItemClassName}>
91+
<FormField
92+
label="Port"
93+
required
94+
additionalText="Should not exceed 65535."
95+
>
96+
<NumericInput
97+
autoValidate
98+
min={0}
99+
max={MAX_PORT_NUMBER}
100+
name="sshPort"
101+
id="sshPort"
102+
data-testid="sshPort"
103+
placeholder="Enter SSH Port"
104+
value={Number(formik.values.sshPort)}
105+
onChange={(value) => formik.setFieldValue('sshPort', value)}
106+
onFocus={selectOnFocus}
107+
/>
108+
</FormField>
109+
</FlexItem>
110+
</Row>
142111
<Row responsive className={flexGroupClassName}>
143112
<FlexItem grow className={flexItemClassName}>
144-
<FormField label="Password">
145-
<PasswordInput
146-
name="sshPassword"
147-
id="sshPassword"
148-
data-testid="sshPassword"
149-
maxLength={10_000}
150-
placeholder="Enter SSH Password"
151-
value={
152-
formik.values.sshPassword === true
153-
? SECURITY_FIELD
154-
: (formik.values.sshPassword ?? '')
155-
}
156-
onChangeCapture={formik.handleChange}
157-
onFocus={() => {
158-
if (formik.values.sshPassword === true) {
159-
formik.setFieldValue('sshPassword', '')
160-
}
113+
<FormField label="Username" required>
114+
<TextInput
115+
name="sshUsername"
116+
id="sshUsername"
117+
data-testid="sshUsername"
118+
color="secondary"
119+
maxLength={200}
120+
placeholder="Enter SSH Username"
121+
value={formik.values.sshUsername ?? ''}
122+
onChange={(value) => {
123+
formik.setFieldValue(
124+
'sshUsername',
125+
validateField(value.trim()),
126+
)
161127
}}
162-
autoComplete="new-password"
163128
/>
164129
</FormField>
165130
</FlexItem>
166131
</Row>
167-
)}
132+
<Row responsive className={flexGroupClassName}>
133+
<FlexItem grow className={flexItemClassName}>
134+
<Spacer size="m" />
135+
<RiRadioGroup
136+
id="sshPassType"
137+
items={sshPassTypeOptions}
138+
layout="horizontal"
139+
value={formik.values.sshPassType}
140+
onChange={(id) => formik.setFieldValue('sshPassType', id)}
141+
data-testid="ssh-pass-type"
142+
/>
168143

169-
{formik.values.sshPassType === SshPassType.PrivateKey && (
170-
<Col gap="m">
171-
<Row responsive className={flexGroupClassName}>
172-
<FlexItem grow className={flexItemClassName}>
173-
<FormField label="Private Key*">
174-
<TextArea
175-
name="sshPrivateKey"
176-
id="sshPrivateKey"
177-
data-testid="sshPrivateKey"
178-
maxLength={50_000}
179-
placeholder="Enter SSH Private Key in PEM format"
180-
value={
181-
formik.values.sshPrivateKey === true
182-
? SECURITY_FIELD
183-
: (formik?.values?.sshPrivateKey?.replace(
184-
/./g,
185-
'•',
186-
) ?? '')
187-
}
188-
onChangeCapture={formik.handleChange}
189-
onFocus={() => {
190-
if (formik.values.sshPrivateKey === true) {
191-
formik.setFieldValue('sshPrivateKey', '')
192-
}
193-
}}
194-
/>
195-
</FormField>
196-
</FlexItem>
197-
</Row>
144+
<Spacer size="m" />
145+
</FlexItem>
146+
</Row>
147+
{formik.values.sshPassType === SshPassType.Password && (
198148
<Row responsive className={flexGroupClassName}>
199149
<FlexItem grow className={flexItemClassName}>
200-
<FormField label="Passphrase">
150+
<FormField label="Password">
201151
<PasswordInput
202-
name="sshPassphrase"
203-
id="sshPassphrase"
204-
data-testid="sshPassphrase"
205-
maxLength={50_000}
206-
placeholder="Enter Passphrase for Private Key"
152+
name="sshPassword"
153+
id="sshPassword"
154+
data-testid="sshPassword"
155+
maxLength={10_000}
156+
placeholder="Enter SSH Password"
207157
value={
208-
formik.values.sshPassphrase === true
158+
formik.values.sshPassword === true
209159
? SECURITY_FIELD
210-
: (formik.values.sshPassphrase ?? '')
160+
: (formik.values.sshPassword ?? '')
211161
}
212162
onChangeCapture={formik.handleChange}
213163
onFocus={() => {
214-
if (formik.values.sshPassphrase === true) {
215-
formik.setFieldValue('sshPassphrase', '')
164+
if (formik.values.sshPassword === true) {
165+
formik.setFieldValue('sshPassword', '')
216166
}
217167
}}
218168
autoComplete="new-password"
219169
/>
220170
</FormField>
221171
</FlexItem>
222172
</Row>
223-
</Col>
224-
)}
225-
</Col>
173+
)}
174+
175+
{formik.values.sshPassType === SshPassType.PrivateKey && (
176+
<Col gap="l">
177+
<Row responsive className={flexGroupClassName}>
178+
<FlexItem grow className={flexItemClassName}>
179+
<FormField label="Private Key" required>
180+
<TextArea
181+
name="sshPrivateKey"
182+
id="sshPrivateKey"
183+
data-testid="sshPrivateKey"
184+
maxLength={50_000}
185+
placeholder="Enter SSH Private Key in PEM format"
186+
value={
187+
formik.values.sshPrivateKey === true
188+
? SECURITY_FIELD
189+
: (formik?.values?.sshPrivateKey?.replace(
190+
/./g,
191+
'•',
192+
) ?? '')
193+
}
194+
onChangeCapture={formik.handleChange}
195+
onFocus={() => {
196+
if (formik.values.sshPrivateKey === true) {
197+
formik.setFieldValue('sshPrivateKey', '')
198+
}
199+
}}
200+
/>
201+
</FormField>
202+
</FlexItem>
203+
</Row>
204+
<Row responsive className={flexGroupClassName}>
205+
<FlexItem grow className={flexItemClassName}>
206+
<FormField label="Passphrase">
207+
<PasswordInput
208+
name="sshPassphrase"
209+
id="sshPassphrase"
210+
data-testid="sshPassphrase"
211+
maxLength={50_000}
212+
placeholder="Enter Passphrase for Private Key"
213+
value={
214+
formik.values.sshPassphrase === true
215+
? SECURITY_FIELD
216+
: (formik.values.sshPassphrase ?? '')
217+
}
218+
onChangeCapture={formik.handleChange}
219+
onFocus={() => {
220+
if (formik.values.sshPassphrase === true) {
221+
formik.setFieldValue('sshPassphrase', '')
222+
}
223+
}}
224+
autoComplete="new-password"
225+
/>
226+
</FormField>
227+
</FlexItem>
228+
</Row>
229+
</Col>
230+
)}
231+
</Col>
232+
</>
226233
)}
227234
</Col>
228235
)

0 commit comments

Comments
 (0)