Skip to content

Commit 5ceda14

Browse files
dantovskadantovska
committed
remove spacers and apply cols with gaps on ssh details
1 parent 4dc74c4 commit 5ceda14

File tree

1 file changed

+131
-140
lines changed

1 file changed

+131
-140
lines changed

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

Lines changed: 131 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ 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

@@ -67,167 +66,159 @@ const SSHDetails = (props: Props) => {
6766
</Row>
6867

6968
{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>
69+
<Col gap="l">
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('sshHost', validateField(value.trim()))
83+
}}
84+
/>
85+
</FormField>
86+
</FlexItem>
87+
<FlexItem grow className={flexItemClassName}>
88+
<FormField label="Port" required>
89+
<NumericInput
90+
autoValidate
91+
min={0}
92+
max={MAX_PORT_NUMBER}
93+
name="sshPort"
94+
id="sshPort"
95+
data-testid="sshPort"
96+
placeholder="Enter SSH Port"
97+
value={Number(formik.values.sshPort)}
98+
onChange={(value) => formik.setFieldValue('sshPort', value)}
99+
onFocus={selectOnFocus}
100+
/>
101+
</FormField>
102+
</FlexItem>
103+
</Row>
104+
<Row responsive className={flexGroupClassName}>
105+
<FlexItem grow className={flexItemClassName}>
106+
<FormField label="Username" required>
107+
<TextInput
108+
name="sshUsername"
109+
id="sshUsername"
110+
data-testid="sshUsername"
111+
color="secondary"
112+
maxLength={200}
113+
placeholder="Enter SSH Username"
114+
value={formik.values.sshUsername ?? ''}
115+
onChange={(value) => {
116+
formik.setFieldValue(
117+
'sshUsername',
118+
validateField(value.trim()),
119+
)
120+
}}
121+
/>
122+
</FormField>
123+
</FlexItem>
124+
</Row>
125+
<Row responsive className={flexGroupClassName}>
126+
<FlexItem grow className={flexItemClassName}>
127+
<RiRadioGroup
128+
id="sshPassType"
129+
items={sshPassTypeOptions}
130+
layout="horizontal"
131+
value={formik.values.sshPassType}
132+
onChange={(id) => formik.setFieldValue('sshPassType', id)}
133+
data-testid="ssh-pass-type"
134+
/>
135+
</FlexItem>
136+
</Row>
137+
{formik.values.sshPassType === SshPassType.Password && (
110138
<Row responsive className={flexGroupClassName}>
111139
<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-
)
140+
<FormField label="Password">
141+
<PasswordInput
142+
name="sshPassword"
143+
id="sshPassword"
144+
data-testid="sshPassword"
145+
maxLength={10_000}
146+
placeholder="Enter SSH Password"
147+
value={
148+
formik.values.sshPassword === true
149+
? SECURITY_FIELD
150+
: (formik.values.sshPassword ?? '')
151+
}
152+
onChangeCapture={formik.handleChange}
153+
onFocus={() => {
154+
if (formik.values.sshPassword === true) {
155+
formik.setFieldValue('sshPassword', '')
156+
}
126157
}}
158+
autoComplete="new-password"
127159
/>
128160
</FormField>
129161
</FlexItem>
130162
</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 && (
163+
)}
164+
165+
{formik.values.sshPassType === SshPassType.PrivateKey && (
166+
<Col gap="l">
167+
<Row responsive className={flexGroupClassName}>
168+
<FlexItem grow className={flexItemClassName}>
169+
<FormField label="Private Key" required>
170+
<TextArea
171+
name="sshPrivateKey"
172+
id="sshPrivateKey"
173+
data-testid="sshPrivateKey"
174+
maxLength={50_000}
175+
placeholder="Enter SSH Private Key in PEM format"
176+
value={
177+
formik.values.sshPrivateKey === true
178+
? SECURITY_FIELD
179+
: (formik?.values?.sshPrivateKey?.replace(
180+
/./g,
181+
'•',
182+
) ?? '')
183+
}
184+
onChangeCapture={formik.handleChange}
185+
onFocus={() => {
186+
if (formik.values.sshPrivateKey === true) {
187+
formik.setFieldValue('sshPrivateKey', '')
188+
}
189+
}}
190+
/>
191+
</FormField>
192+
</FlexItem>
193+
</Row>
146194
<Row responsive className={flexGroupClassName}>
147195
<FlexItem grow className={flexItemClassName}>
148-
<FormField label="Password">
196+
<FormField label="Passphrase">
149197
<PasswordInput
150-
name="sshPassword"
151-
id="sshPassword"
152-
data-testid="sshPassword"
153-
maxLength={10_000}
154-
placeholder="Enter SSH Password"
198+
name="sshPassphrase"
199+
id="sshPassphrase"
200+
data-testid="sshPassphrase"
201+
maxLength={50_000}
202+
placeholder="Enter Passphrase for Private Key"
155203
value={
156-
formik.values.sshPassword === true
204+
formik.values.sshPassphrase === true
157205
? SECURITY_FIELD
158-
: (formik.values.sshPassword ?? '')
206+
: (formik.values.sshPassphrase ?? '')
159207
}
160208
onChangeCapture={formik.handleChange}
161209
onFocus={() => {
162-
if (formik.values.sshPassword === true) {
163-
formik.setFieldValue('sshPassword', '')
210+
if (formik.values.sshPassphrase === true) {
211+
formik.setFieldValue('sshPassphrase', '')
164212
}
165213
}}
166214
autoComplete="new-password"
167215
/>
168216
</FormField>
169217
</FlexItem>
170218
</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-
</>
219+
</Col>
220+
)}
221+
</Col>
231222
)}
232223
</Col>
233224
)

0 commit comments

Comments
 (0)