Skip to content

Commit 3aa005b

Browse files
shivani170shivani170
committed
Merge branch 'common-custom-input' into custom-input-v2
2 parents 3eecfe2 + 5d2fb84 commit 3aa005b

File tree

6 files changed

+108
-174
lines changed

6 files changed

+108
-174
lines changed

‎src/components/notifications/CreateHeaderDetails.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function CreateHeaderDetails({
2323

2424
return (
2525
<div className="flexbox mb-8">
26-
<CustomInput
26+
<CustomInput
2727
rootClassName="tag-input pt-4-imp pb-4-imp fs-13 dc__no-right-radius"
2828
value={headerData?.["key"]}
2929
name="key"

‎src/components/notifications/SESConfigModal.tsx

Lines changed: 24 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react'
22
import { validateEmail } from '../common'
3-
import { showError, Progressing, Checkbox, Drawer } from '@devtron-labs/devtron-fe-common-lib'
3+
import { showError, Progressing, Checkbox, Drawer, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
44
import { saveEmailConfiguration, getSESConfiguration } from './notifications.service'
55
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
66
import { ReactComponent as Error } from '../../assets/icons/ic-warning.svg'
@@ -11,6 +11,7 @@ import { multiSelectStyles, DropdownIndicator } from './notifications.util'
1111
import { Option } from '../v2/common/ReactSelect.utils'
1212
import awsRegionList from '../common/awsRegionList.json'
1313
import ReactSelect from 'react-select'
14+
import { REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
1415

1516
export interface SESConfigModalProps {
1617
sesConfigId: number
@@ -256,79 +257,54 @@ export class SESConfigModal extends Component<SESConfigModalProps, SESConfigModa
256257
<>
257258
<div className="m-20" style={{ height: 'calc(100vh - 160px'}}>
258259
<label className="form__row">
259-
<span className="form__label">Configuration Name*</span>
260-
<input
260+
<CustomInput
261+
label="Configuration Name"
261262
data-testid="add-ses-configuration-name"
262263
ref={(node) => (this._configName = node)}
263-
className="form__input"
264-
type="text"
265264
name="configname"
266265
value={this.state.form.configName}
267266
onChange={this.handleConfigNameChange}
268-
onBlur={(event) => this.handleBlur(event, 'configName')}
267+
handleOnBlur={(event) => this.handleBlur(event, 'configName')}
269268
placeholder="Configuration name"
270269
autoFocus={true}
271270
tabIndex={1}
272-
required
271+
isRequiredField={true}
272+
error={!this.state.isValid.configName && REQUIRED_FIELD_MSG}
273273
/>
274-
<span className="form__error">
275-
{!this.state.isValid.configName ? (
276-
<>
277-
<Error className="form__icon form__icon--error" />
278-
This is a required field <br />
279-
</>
280-
) : null}
281-
</span>
282274
</label>
283275
<label className="form__row">
284-
<span className="form__label">Access Key ID*</span>
285-
<input
276+
<CustomInput
286277
data-testid="add-ses-access-key"
287-
className="form__input"
278+
label="Access Key ID"
288279
type="text"
289280
name="app-name"
290281
value={this.state.form.accessKey}
291282
onChange={this.handleAccessKeyIDChange}
292-
onBlur={(event) => this.handleBlur(event, 'accessKey')}
283+
handleOnBlur={(event) => this.handleBlur(event, 'accessKey')}
293284
placeholder="Access Key ID"
294285
tabIndex={2}
295-
required
286+
isRequiredField={true}
287+
error={!this.state.isValid.accessKey && REQUIRED_FIELD_MSG}
296288
/>
297-
<span className="form__error">
298-
{!this.state.isValid.accessKey ? (
299-
<>
300-
<Error className="form__icon form__icon--error" />
301-
This is a required field <br />
302-
</>
303-
) : null}
304-
</span>
305289
</label>
306290
<label className="form__row">
307-
<span className="form__label">Secret Access Key*</span>
308-
<input
291+
<CustomInput
292+
label="Secret Access Key"
309293
data-testid="add-ses-secret-access-key"
310-
className="form__input"
311294
type="text"
312295
name="app-name"
313296
value={this.state.form.secretKey}
314297
onChange={this.handleSecretAccessKeyChange}
315-
onBlur={(event) => this.handleBlur(event, 'secretKey')}
298+
handleOnBlur={(event) => this.handleBlur(event, 'secretKey')}
316299
placeholder="Secret Access Key"
317300
tabIndex={3}
318-
required
301+
isRequiredField={true}
302+
error={!this.state.isValid.secretKey && REQUIRED_FIELD_MSG}
319303
/>
320-
<span className="form__error">
321-
{!this.state.isValid.secretKey ? (
322-
<>
323-
<Error className="form__icon form__icon--error" />
324-
This is a required field <br />
325-
</>
326-
) : null}
327-
</span>
328304
</label>
329305
<div className="form__row">
330-
<label htmlFor="" className="form__label">
331-
AWS Region*
306+
<label htmlFor="" className="form__label dc__reuired-field">
307+
AWS Region
332308
</label>
333309
<ReactSelect
334310
classNamePrefix="add-ses-aws-region"
@@ -365,28 +341,19 @@ export class SESConfigModal extends Component<SESConfigModalProps, SESConfigModa
365341
</span>
366342
</div>
367343
<label className="form__row">
368-
<span className="form__label">Send email from*</span>
369-
<input
344+
<CustomInput
345+
label="Send email from"
370346
data-testid="add-ses-send-email"
371-
className="form__input"
372347
type="email"
373348
name="app-name"
374349
value={this.state.form.fromEmail}
375-
onBlur={(event) => this.handleBlur(event, 'fromEmail')}
350+
handleOnBlur={(event) => this.handleBlur(event, 'fromEmail')}
376351
placeholder="Email"
377352
tabIndex={5}
378353
onChange={this.handleEmailChange}
379-
required
354+
isRequiredField={true}
355+
error={!this.state.isValid.fromEmail && REQUIRED_FIELD_MSG}
380356
/>
381-
<span className="form__error">
382-
{!this.state.isValid.fromEmail ? (
383-
<>
384-
<Error className="form__icon form__icon--error" />
385-
This is a required field
386-
<br />
387-
</>
388-
) : null}
389-
</span>
390357
<span className="form__text-field-info">
391358
<Info className="form__icon form__icon--info" />
392359
This email must be verified with SES.

‎src/components/notifications/SMTPConfigModal.tsx

Lines changed: 28 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { Component } from 'react'
22
import { validateEmail } from '../common'
3-
import { showError, Progressing, Checkbox, Drawer } from '@devtron-labs/devtron-fe-common-lib'
3+
import { showError, Progressing, Checkbox, Drawer, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
44
import { getSMTPConfiguration, saveEmailConfiguration } from './notifications.service'
55
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
66
import { ReactComponent as Error } from '../../assets/icons/ic-warning.svg'
77
import { toast } from 'react-toastify'
88
import { ViewType } from '../../config/constants'
99
import { ProtectedInput } from '../globalConfigurations/GlobalConfiguration'
1010
import { SMTPConfigModalProps, SMTPConfigModalState } from './types'
11+
import { REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
1112

1213
export class SMTPConfigModal extends Component<SMTPConfigModalProps, SMTPConfigModalState> {
1314
_configName
@@ -175,100 +176,62 @@ export class SMTPConfigModal extends Component<SMTPConfigModalProps, SMTPConfigM
175176
<>
176177
<div className="m-20" style={{ height: 'calc(100vh - 160px'}}>
177178
<label className="form__row">
178-
<span className="form__label">Configuration Name*</span>
179-
<input
179+
<CustomInput
180+
name="configName "
181+
label="Configuration name"
180182
data-testid="add-smtp-configuration-name"
181183
ref={(node) => (this._configName = node)}
182-
className="form__input"
183-
type="text"
184-
name="configName"
185184
value={this.state.form.configName}
186185
onChange={this.handleInputChange}
187-
onBlur={this.handleBlur}
186+
handleOnBlur={this.handleBlur}
188187
placeholder="Configuration name"
189188
autoFocus={true}
190189
tabIndex={1}
191-
required
190+
isRequiredField={true}
191+
error={!this.state.isValid.configName && REQUIRED_FIELD_MSG}
192192
/>
193-
<span className="form__error">
194-
{!this.state.isValid.configName ? (
195-
<>
196-
<Error className="form__icon form__icon--error" />
197-
This is a required field <br />
198-
</>
199-
) : null}
200-
</span>
201193
</label>
202194
<label className="form__row">
203-
<span className="form__label">SMTP Host*</span>
204-
<input
195+
<CustomInput
205196
data-testid="add-smtp-host"
206-
className="form__input"
207-
type="text"
197+
label="SMTP Host"
208198
name="host"
209199
value={this.state.form.host}
210200
onChange={this.handleInputChange}
211-
onBlur={this.handleBlur}
201+
handleOnBlur={this.handleBlur}
212202
placeholder="Eg. smtp.gmail.com"
213203
tabIndex={2}
214-
required
204+
isRequiredField={true}
205+
error={!this.state.isValid.host && REQUIRED_FIELD_MSG}
215206
/>
216-
<span className="form__error">
217-
{!this.state.isValid.host ? (
218-
<>
219-
<Error className="form__icon form__icon--error" />
220-
This is a required field <br />
221-
</>
222-
) : null}
223-
</span>
224207
</label>
225208
<label className="form__row">
226-
<span className="form__label">SMTP Port*</span>
227-
<input
209+
<CustomInput
210+
label="SMTP Port"
228211
data-testid="add-smtp-port"
229-
className="form__input"
230-
type="text"
231212
name="port"
232213
value={this.state.form.port}
233214
onChange={this.handleInputChange}
234-
onBlur={this.handleBlur}
215+
handleOnBlur={this.handleBlur}
235216
placeholder="Enter SMTP port"
236217
tabIndex={3}
237-
required
218+
isRequiredField={true}
219+
error={!this.state.isValid.port && REQUIRED_FIELD_MSG}
238220
/>
239-
<span className="form__error">
240-
{!this.state.isValid.port ? (
241-
<>
242-
<Error className="form__icon form__icon--error" />
243-
This is a required field <br />
244-
</>
245-
) : null}
246-
</span>
247221
</label>
248222
<div className="form__row">
249-
<label htmlFor="" className="form__label">
250-
SMTP Username*
251-
</label>
252-
<input
223+
<CustomInput
224+
label="SMTP Username"
253225
data-testid="add-smtp-username"
254-
className="form__input"
255-
type="text"
256226
name="authUser"
257227
value={this.state.form.authUser}
258228
onChange={this.handleInputChange}
259-
onBlur={this.handleBlur}
229+
handleOnBlur={this.handleBlur}
260230
placeholder="Enter SMTP username"
261231
tabIndex={3}
262-
required
232+
isRequiredField={true}
233+
error={!this.state.isValid.authUser && REQUIRED_FIELD_MSG}
263234
/>
264-
<span className="form__error">
265-
{!this.state.isValid.authUser ? (
266-
<>
267-
<Error className="form__icon form__icon--error" />
268-
This is a required field <br />
269-
</>
270-
) : null}
271-
</span>
272235
</div>
273236
<div className="form__row smtp-protected-input">
274237
<ProtectedInput
@@ -283,28 +246,19 @@ export class SMTPConfigModal extends Component<SMTPConfigModalProps, SMTPConfigM
283246
/>
284247
</div>
285248
<label className="form__row">
286-
<span className="form__label">Send email from*</span>
287-
<input
249+
<CustomInput
250+
label="Send email from"
288251
data-testid="add-smtp-send-email"
289-
className="form__input"
290252
type="email"
291253
name="fromEmail"
292254
value={this.state.form.fromEmail}
293255
onChange={this.handleInputChange}
294-
onBlur={this.handleBlur}
256+
handleOnBlur={this.handleBlur}
295257
placeholder="Email"
296258
tabIndex={5}
297-
required
259+
isRequiredField={true}
260+
error={!this.state.isValid.fromEmail && REQUIRED_FIELD_MSG}
298261
/>
299-
<span className="form__error">
300-
{!this.state.isValid.fromEmail ? (
301-
<>
302-
<Error className="form__icon form__icon--error" />
303-
This is a required field
304-
<br />
305-
</>
306-
) : null}
307-
</span>
308262
</label>
309263
</div>
310264
<div className="form__button-group-bottom flexbox flex-justify">

0 commit comments

Comments
 (0)