Skip to content

Commit 9c45fec

Browse files
shivani170shivani170
committed
fix: approval event icons on notification table
1 parent dcfec36 commit 9c45fec

File tree

3 files changed

+42
-162
lines changed

3 files changed

+42
-162
lines changed

‎src/components/notifications/AddNotification.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ import {
4242
IconsProps,
4343
ButtonComponentType,
4444
} from '@devtron-labs/devtron-fe-common-lib'
45-
import { RouteComponentProps, Link } from 'react-router-dom'
4645
import { components } from 'react-select'
47-
import Tippy from '@tippyjs/react'
4846
import CreatableSelect from 'react-select/creatable'
4947
import SESConfigModal from './SESConfigModal'
5048
import { SlackConfigModal } from './SlackConfigModal'
@@ -71,7 +69,6 @@ import {
7169
AddNotificationState,
7270
EMAIL_AGENT,
7371
FilterOptions,
74-
NotificationEventsType,
7572
} from './types'
7673
import { WebhookConfigModal } from './WebhookConfigModal'
7774
import { getClusterListMin } from '@Components/ClusterNodes/clusterNodes.service'
@@ -350,7 +347,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
350347
this.props.history.push(`${URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS}/channels`)
351348
}
352349

353-
saveNotification(): void {
350+
saveNotification = (): void => {
354351
const selectedPipelines = this.state.pipelineList.filter((p) => p.checkbox.isChecked)
355352
if (!selectedPipelines.length) {
356353
ToastManager.showToast({
@@ -780,7 +777,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
780777
this.handlePipelineEventType(rowIndex, event)
781778
}}
782779
ariaLabel={event}
783-
showAriaLabelInTippy={false}
780+
showAriaLabelInTippy={true}
784781
dataTestId={`${event}-notification-checkbox-${rowIndex}`}
785782
/>
786783
)

‎src/components/notifications/NotificationTab.tsx‎

Lines changed: 32 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ import {
5656
} from './notifications.service'
5757
import { getRecipientChipStartIcon, renderPipelineTypeIcon } from './notifications.util'
5858
import { NotificationTabState } from './types'
59+
import { ModifyRecipientPopUp } from './ModifyRecipientPopUp'
60+
import { EVENT_ID } from './constants'
5961

6062
export class NotificationTab extends Component<any, NotificationTabState> {
6163
constructor(props) {
@@ -72,15 +74,15 @@ export class NotificationTab extends Component<any, NotificationTabState> {
7274
value: CHECKBOX_VALUE.INTERMEDIATE,
7375
},
7476
events: {
75-
triggerCheckbox: {
77+
trigger: {
7678
isChecked: false,
7779
value: CHECKBOX_VALUE.INTERMEDIATE,
7880
},
79-
successCheckbox: {
81+
success: {
8082
isChecked: false,
8183
value: CHECKBOX_VALUE.INTERMEDIATE,
8284
},
83-
failureCheckbox: {
85+
failure: {
8486
isChecked: false,
8587
value: CHECKBOX_VALUE.INTERMEDIATE,
8688
},
@@ -124,7 +126,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
124126
.then((response) => {
125127
this.setState({ hostURLConfig: response.result })
126128
})
127-
.catch((error) => {})
129+
.catch(() => {})
128130
}
129131

130132
getAllNotifications = () => {
@@ -265,15 +267,15 @@ export class NotificationTab extends Component<any, NotificationTabState> {
265267
}
266268
this.setState({
267269
events: {
268-
triggerCheckbox: {
270+
trigger: {
269271
isChecked: isAnyTriggerEventSelected,
270272
value: areAllTriggerEventSelected ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE,
271273
},
272-
successCheckbox: {
274+
success: {
273275
isChecked: isAnySuccessEventSelected,
274276
value: areAllSuccessEventSelected ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE,
275277
},
276-
failureCheckbox: {
278+
failure: {
277279
isChecked: isAnyFailureEventSelected,
278280
value: areAllFailureEventSelected ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE,
279281
},
@@ -290,90 +292,18 @@ export class NotificationTab extends Component<any, NotificationTabState> {
290292
})
291293
}
292294

293-
triggerCheckboxHandler = (e): void => {
295+
onChangeCheckboxHandler = (e, value) => () => {
294296
stopPropagation(e)
295297
const state = { ...this.state }
296-
state.events.triggerCheckbox = {
297-
isChecked: !state.events.triggerCheckbox.isChecked,
298-
value: !state.events.triggerCheckbox.isChecked ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE,
298+
state.events[value] = {
299+
isChecked: !state.events[value].isChecked,
300+
value: !state.events[value].isChecked ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE,
299301
}
300302
state.payloadUpdateEvents = state.payloadUpdateEvents.map((row) => {
301-
if (state.events.triggerCheckbox.isChecked) {
302-
row.eventTypeIds.push(1)
303+
if (state.events[value].isChecked) {
304+
row.eventTypeIds.push(EVENT_ID[value])
303305
} else {
304-
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== 1)
305-
}
306-
return row
307-
})
308-
this.setState(state)
309-
}
310-
311-
successCheckboxHandler = (e): void => {
312-
stopPropagation(e)
313-
const state = { ...this.state }
314-
state.events.successCheckbox.isChecked = !state.events.successCheckbox.isChecked
315-
state.events.successCheckbox.value = state.events.successCheckbox.isChecked
316-
? CHECKBOX_VALUE.CHECKED
317-
: CHECKBOX_VALUE.INTERMEDIATE
318-
state.payloadUpdateEvents = state.payloadUpdateEvents.map((row) => {
319-
if (state.events.successCheckbox.isChecked) {
320-
row.eventTypeIds.push(2)
321-
} else {
322-
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== 2)
323-
}
324-
return row
325-
})
326-
this.setState(state)
327-
}
328-
329-
failureCheckboxHandler = (e): void => {
330-
stopPropagation(e)
331-
const state = { ...this.state }
332-
state.events.failureCheckbox.isChecked = !state.events.failureCheckbox.isChecked
333-
state.events.failureCheckbox.value = state.events.failureCheckbox.isChecked
334-
? CHECKBOX_VALUE.CHECKED
335-
: CHECKBOX_VALUE.INTERMEDIATE
336-
state.payloadUpdateEvents = state.payloadUpdateEvents.map((row) => {
337-
if (state.events.failureCheckbox.isChecked) {
338-
row.eventTypeIds.push(3)
339-
} else {
340-
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== 3)
341-
}
342-
return row
343-
})
344-
this.setState(state)
345-
}
346-
347-
configApprovalCheckboxHandler = (e): void => {
348-
stopPropagation(e)
349-
const state = { ...this.state }
350-
state.events.configApproval.isChecked = !state.events.configApproval.isChecked
351-
state.events.configApproval.value = state.events.configApproval.isChecked
352-
? CHECKBOX_VALUE.CHECKED
353-
: CHECKBOX_VALUE.INTERMEDIATE
354-
state.payloadUpdateEvents = state.payloadUpdateEvents.map((row) => {
355-
if (state.events.configApproval.isChecked) {
356-
row.eventTypeIds.push(4)
357-
} else {
358-
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== 4)
359-
}
360-
return row
361-
})
362-
this.setState(state)
363-
}
364-
365-
imageApprovalCheckboxHandler = (e): void => {
366-
stopPropagation(e)
367-
const state = { ...this.state }
368-
state.events.imageApproval.isChecked = !state.events.imageApproval.isChecked
369-
state.events.imageApproval.value = state.events.imageApproval.isChecked
370-
? CHECKBOX_VALUE.CHECKED
371-
: CHECKBOX_VALUE.INTERMEDIATE
372-
state.payloadUpdateEvents = state.payloadUpdateEvents.map((row) => {
373-
if (state.events.imageApproval.isChecked) {
374-
row.eventTypeIds.push(7)
375-
} else {
376-
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== 7)
306+
row.eventTypeIds = row.eventTypeIds.filter((id) => id !== EVENT_ID[value])
377307
}
378308
return row
379309
})
@@ -507,72 +437,15 @@ export class NotificationTab extends Component<any, NotificationTabState> {
507437

508438
renderModifyEventPopUpBody = () => (
509439
<PopupMenu.Body>
510-
<ul className="dc__kebab-menu__list kebab-menu__list--notification-tab ">
511-
<li key="edit" className="dc__kebab-menu__list-item flex-justify">
512-
<span>Trigger</span>
513-
<Checkbox
514-
rootClassName=""
515-
isChecked={this.state.events.triggerCheckbox.isChecked}
516-
value={this.state.events.triggerCheckbox.value}
517-
onChange={this.triggerCheckboxHandler}
518-
>
519-
<span />
520-
</Checkbox>
521-
</li>
522-
<li key="success" className="dc__kebab-menu__list-item flex-justify">
523-
<span>Success</span>
524-
<Checkbox
525-
rootClassName=""
526-
isChecked={this.state.events.successCheckbox.isChecked}
527-
value={this.state.events.successCheckbox.value}
528-
onChange={this.successCheckboxHandler}
529-
>
530-
<span />
531-
</Checkbox>
532-
</li>
533-
<li key="failure" className="dc__kebab-menu__list-item flex-justify">
534-
<span>Failure</span>
535-
<Checkbox
536-
rootClassName=""
537-
isChecked={this.state.events.failureCheckbox.isChecked}
538-
value={this.state.events.failureCheckbox.value}
539-
onChange={this.failureCheckboxHandler}
540-
>
541-
<span />
542-
</Checkbox>
543-
</li>
544-
<li key="failure" className="dc__kebab-menu__list-item flex-justify">
545-
<span>Config Approval</span>
546-
<Checkbox
547-
rootClassName=""
548-
isChecked={this.state.events.configApproval.isChecked}
549-
value={this.state.events.configApproval.value}
550-
onChange={this.configApprovalCheckboxHandler}
551-
>
552-
<span />
553-
</Checkbox>
554-
</li>
555-
<li key="failure" className="dc__kebab-menu__list-item flex-justify">
556-
<span>Image Approval</span>
557-
<Checkbox
558-
rootClassName=""
559-
isChecked={this.state.events.imageApproval.isChecked}
560-
value={this.state.events.imageApproval.value}
561-
onChange={this.imageApprovalCheckboxHandler}
562-
>
563-
<span />
564-
</Checkbox>
565-
</li>
566-
</ul>
567-
<div className="kebab-menu__sticky-bottom">
568-
<button type="button" className="cta w-100" onClick={this.applyModifyEvents}>
569-
Apply
570-
</button>
571-
</div>
440+
<ModifyRecipientPopUp
441+
events={this.state.events}
442+
applyModifyEvents={this.applyModifyEvents}
443+
onChangeCheckboxHandler={this.onChangeCheckboxHandler}
444+
/>
572445
</PopupMenu.Body>
573446
)
574447

575-
renderOptions = () => {
448+
renderBulkOptions = () => {
576449
if (this.state.headerCheckbox.isChecked) {
577450
return (
578451
<div className="flex left dc__gap-16">
@@ -629,6 +502,11 @@ export class NotificationTab extends Component<any, NotificationTabState> {
629502
})
630503
}
631504

505+
onClickToggleNotification = (id) => (e) => {
506+
stopPropagation(e)
507+
this.toggleNotification(id)
508+
}
509+
632510
renderPipelineList = () => (
633511
<table className="flexbox-col flex-grow-1">
634512
<tbody>
@@ -645,7 +523,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
645523
</Checkbox>
646524
</th>
647525
<th className="pipeline-list__pipeline-name fw-6">Pipeline Name</th>
648-
<th className="pipeline-list__pipeline-name fw-6">Application Name</th>
526+
<th className="pipeline-list__app-name fw-6">Application Name</th>
649527
<th className="pipeline-list__type fw-6">Type</th>
650528
<th className="pipeline-list__environment fw-6">Env/Branch</th>
651529
<th className="pipeline-list__stages fw-6">Events</th>
@@ -676,11 +554,8 @@ export class NotificationTab extends Component<any, NotificationTabState> {
676554
<Checkbox
677555
rootClassName=""
678556
isChecked={row.isSelected}
679-
value="CHECKED"
680-
onChange={(e) => {
681-
e.stopPropagation()
682-
this.toggleNotification(row.id)
683-
}}
557+
value={row.isSelected ? CHECKBOX_VALUE.CHECKED : CHECKBOX_VALUE.INTERMEDIATE}
558+
onChange={this.onClickToggleNotification(row.id)}
684559
>
685560
<span />
686561
</Checkbox>
@@ -726,7 +601,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
726601
</>
727602
) : null}
728603
</td>
729-
<td className="pipeline-list__pipeline-name">{row?.appName}</td>
604+
<td className="pipeline-list__app-name">{row?.appName}</td>
730605
<td className="pipeline-list__type">{renderPipelineTypeIcon(row)}</td>
731606
<td className="pipeline-list__environment">
732607
{_isCi && (
@@ -862,7 +737,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
862737
dataTestId="delete-notification-button"
863738
startIcon={<Icon name="ic-add" color={null} />}
864739
/>
865-
{this.renderOptions()}
740+
{this.renderBulkOptions()}
866741
{this.renderPipelineList()}
867742
{this.renderPagination()}
868743
</div>

‎src/components/notifications/notifications.service.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,12 @@ function createSaveNotificationPayload(selectedPipelines, providers): SaveNotifi
9393
if (config.failure) {
9494
eventTypeIds.push(3)
9595
}
96+
if (config.configApproval) {
97+
eventTypeIds.push(4)
98+
}
99+
if (config.imageApproval) {
100+
eventTypeIds.push(7)
101+
}
96102

97103
const teamId = config.appliedFilters
98104
.filter((filter) => filter.type === FilterOptions.PROJECT)
@@ -233,6 +239,8 @@ export function getNotificationConfigurations(offset: number, pageSize: number):
233239
trigger: config.eventTypes.includes(1),
234240
success: config.eventTypes.includes(2),
235241
failure: config.eventTypes.includes(3),
242+
configApproval: config.eventTypes.includes(4) || config.eventTypes.includes(5),
243+
imageApproval: config.eventTypes.includes(7),
236244
isSelected: false,
237245
providers,
238246
appliedFilters: {

0 commit comments

Comments
 (0)