Skip to content

Commit 5393a94

Browse files
shivani170shivani170
committed
notification
1 parent ea5e2ad commit 5393a94

File tree

3 files changed

+74
-144
lines changed

3 files changed

+74
-144
lines changed

‎src/components/notifications/SESConfigModal.tsx

Lines changed: 21 additions & 54 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,75 +257,50 @@ 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">
307291
<span className="form__label">Secret Access Key*</span>
308-
<input
292+
<CustomInput
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">
330306
<label htmlFor="" className="form__label">
@@ -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: 26 additions & 70 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,64 @@ 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 "
180181
data-testid="add-smtp-configuration-name"
181182
ref={(node) => (this._configName = node)}
182-
className="form__input"
183-
type="text"
184-
name="configName"
185183
value={this.state.form.configName}
186184
onChange={this.handleInputChange}
187-
onBlur={this.handleBlur}
185+
handleOnBlur={this.handleBlur}
188186
placeholder="Configuration name"
189187
autoFocus={true}
190188
tabIndex={1}
191-
required
189+
isRequiredField={true}
190+
error={!this.state.isValid.configName && REQUIRED_FIELD_MSG}
192191
/>
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>
201192
</label>
202193
<label className="form__row">
203-
<span className="form__label">SMTP Host*</span>
204-
<input
194+
<CustomInput
205195
data-testid="add-smtp-host"
206-
className="form__input"
207-
type="text"
196+
label="SMTP Host"
208197
name="host"
209198
value={this.state.form.host}
210199
onChange={this.handleInputChange}
211-
onBlur={this.handleBlur}
200+
handleOnBlur={this.handleBlur}
212201
placeholder="Eg. smtp.gmail.com"
213202
tabIndex={2}
214-
required
203+
isRequiredField={true}
204+
error={!this.state.isValid.host && REQUIRED_FIELD_MSG}
215205
/>
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>
224206
</label>
225207
<label className="form__row">
226-
<span className="form__label">SMTP Port*</span>
227-
<input
208+
< CustomInput
209+
label="SMTP Port"
228210
data-testid="add-smtp-port"
229-
className="form__input"
230-
type="text"
231211
name="port"
232212
value={this.state.form.port}
233213
onChange={this.handleInputChange}
234-
onBlur={this.handleBlur}
214+
handleOnBlur={this.handleBlur}
235215
placeholder="Enter SMTP port"
236216
tabIndex={3}
237-
required
217+
isRequiredField={true}
218+
error={!this.state.isValid.port && REQUIRED_FIELD_MSG}
238219
/>
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>
247220
</label>
248221
<div className="form__row">
249222
<label htmlFor="" className="form__label">
250223
SMTP Username*
251224
</label>
252-
<input
225+
< CustomInput
226+
label="SMTP Username"
253227
data-testid="add-smtp-username"
254-
className="form__input"
255-
type="text"
256228
name="authUser"
257229
value={this.state.form.authUser}
258230
onChange={this.handleInputChange}
259-
onBlur={this.handleBlur}
231+
handleOnBlur={this.handleBlur}
260232
placeholder="Enter SMTP username"
261233
tabIndex={3}
262-
required
234+
isRequiredField={true}
235+
error={!this.state.isValid.authUser && REQUIRED_FIELD_MSG}
263236
/>
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>
272237
</div>
273238
<div className="form__row smtp-protected-input">
274239
<ProtectedInput
@@ -284,27 +249,18 @@ export class SMTPConfigModal extends Component<SMTPConfigModalProps, SMTPConfigM
284249
</div>
285250
<label className="form__row">
286251
<span className="form__label">Send email from*</span>
287-
<input
252+
< CustomInput
288253
data-testid="add-smtp-send-email"
289-
className="form__input"
290254
type="email"
291255
name="fromEmail"
292256
value={this.state.form.fromEmail}
293257
onChange={this.handleInputChange}
294-
onBlur={this.handleBlur}
258+
handleOnBlur={this.handleBlur}
295259
placeholder="Email"
296260
tabIndex={5}
297-
required
261+
isRequiredField={true}
262+
error={!this.state.isValid.fromEmail && REQUIRED_FIELD_MSG}
298263
/>
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>
308264
</label>
309265
</div>
310266
<div className="form__button-group-bottom flexbox flex-justify">

0 commit comments

Comments
 (0)