feat: config & image approval support added in notification

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.23.0",
+        "@devtron-labs/devtron-fe-common-lib": "1.23.1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/notifications/AddNotificationButton.tsx

@@ -0,0 +1,38 @@
+import { useHistory } from 'react-router-dom'
+
+import {
+    Button,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    TOAST_ACCESS_DENIED,
+    ToastManager,
+    ToastVariantType,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { URLS } from '@Config/routes'
+
+export const AddNotificationButton = ({ disableEdit }: { disableEdit: boolean }) => {
+    const history = useHistory()
+    const createNewNotification = () => {
+        if (disableEdit) {
+            ToastManager.showToast({
+                variant: ToastVariantType.notAuthorized,
+                description: TOAST_ACCESS_DENIED.SUBTITLE,
+            })
+        } else {
+            history.push(URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS_ADD_NEW)
+        }
+    }
+
+    return (
+        <Button
+            text="Add Notification"
+            variant={ButtonVariantType.primary}
+            size={ComponentSizeType.medium}
+            onClick={createNewNotification}
+            dataTestId="add-notification-button"
+            startIcon={<Icon name="ic-add" color={null} />}
+        />
+    )
+}

src/components/notifications/BulkMultiSelectWidget.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    DraggableButton,
+    DraggablePositionVariant,
+    DraggableWrapper,
+    Icon,
+    PopupMenu,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ModifyRecipientPopUp } from './ModifyRecipientPopUp'
+import { BulkMultiSelectTagWidgetType } from './types'
+
+export const BulkMultiSelectTagWidget = ({
+    parentRef,
+    selectedIdentifiersCount,
+    showDeleteModal,
+    events,
+    applyModifyEvents,
+    onChangeCheckboxHandler,
+    selectedNotificationList,
+    onOpenEditNotificationMenu,
+    showModifyModal,
+    toggleAllNotification,
+}: BulkMultiSelectTagWidgetType) => {
+    const renderModifyEventPopUpBody = () => (
+        <PopupMenu.Body>
+            <ModifyRecipientPopUp
+                events={events}
+                applyModifyEvents={applyModifyEvents}
+                onChangeCheckboxHandler={onChangeCheckboxHandler}
+                selectedNotificationList={selectedNotificationList}
+            />
+        </PopupMenu.Body>
+    )
+    return (
+        <DraggableWrapper
+            dragSelector=".drag-selector"
+            positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
+            parentRef={parentRef}
+            zIndex="calc(var(--modal-index) - 1)"
+        >
+            <div className="flex dc__gap-8 pt-12 pb-12 pr-12 pl-8 bulk-selection-widget br-8">
+                <DraggableButton dragClassName="drag-selector" />
+                <div className="fs-13 lh-20 fw-6 flex dc__gap-12">
+                    <span className="flex dc__gap-2 bcb-5 cn-0 br-4 pr-6 pl-6">{selectedIdentifiersCount}</span>
+                    <span className="cn-9">Selected</span>
+                </div>
+                <div className="dc__divider h-16" />
+                <div className="flex left dc__gap-4">
+                    <PopupMenu
+                        onToggleCallback={(isOpen) => {
+                            if (isOpen) {
+                                onOpenEditNotificationMenu()
+                            }
+                        }}
+                    >
+                        <PopupMenu.Button rootClassName="popup-button--notification-tab">
+                            <Icon
+                                name="ic-bell"
+                                color={null}
+                                size={20}
+                                tooltipProps={{ content: 'Modify events', alwaysShowTippyOnHover: true }}
+                            />
+                        </PopupMenu.Button>
+                        {renderModifyEventPopUpBody()}
+                    </PopupMenu>
+
+                    <Button
+                        dataTestId="button__modify-recipients"
+                        icon={<Icon name="ic-users" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        ariaLabel="Modify Recipients"
+                        onClick={showModifyModal}
+                        showAriaLabelInTippy
+                    />
+
+                    <Button
+                        dataTestId="notification-delete-button"
+                        icon={<Icon name="ic-delete" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        ariaLabel="Delete Notifications"
+                        onClick={showDeleteModal}
+                        showAriaLabelInTippy
+                    />
+
+                    <div className="dc__divider h-16" />
+
+                    <Button
+                        dataTestId="notification-delete-button"
+                        icon={<Icon name="ic-close-large" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        ariaLabel="Clear"
+                        onClick={toggleAllNotification}
+                        showAriaLabelInTippy
+                    />
+                </div>
+            </div>
+        </DraggableWrapper>
+    )
+}

src/components/notifications/ModifyRecipientPopUp.tsx

@@ -0,0 +1,86 @@
+import {
+    Button,
+    ButtonVariantType,
+    Checkbox,
+    ComponentSizeType,
+    Icon,
+    IconName,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { EVENT_ICONS, EVENT_LABEL, EVENTS } from './constants'
+import { ModifyRecipientPopUpType, NotificationPipelineType } from './types'
+
+export const ModifyRecipientPopUp = ({
+    events,
+    applyModifyEvents,
+    onChangeCheckboxHandler,
+    selectedNotificationList,
+}: ModifyRecipientPopUpType) => {
+    const getDisabledLabel = (value) => {
+        // If BASE type is present among all, only CONFIG_APPROVAL should be enabled
+        if (selectedNotificationList.some((row) => row.pipelineType === NotificationPipelineType.BASE)) {
+            return value !== EVENTS.CONFIG_APPROVAL
+        }
+
+        // If CI is available, disable CONFIG_APPROVAL and IMAGE_APPROVAL
+        if (selectedNotificationList.some((row) => row.pipelineType === NotificationPipelineType.CI)) {
+            return value === EVENTS.CONFIG_APPROVAL || value === EVENTS.IMAGE_APPROVAL
+        }
+
+        return false
+    }
+
+    const options = Object.values(EVENTS).map((value) => ({
+        label: EVENT_LABEL[value],
+        value,
+        icon: EVENT_ICONS[value],
+        isDisabled: getDisabledLabel(value),
+    }))
+
+    return (
+        <div>
+            <ul className="dc__kebab-menu__list kebab-menu__list--notification-tab ">
+                {options.map((option) => (
+                    <Tooltip
+                        content={option.isDisabled ? 'Cannot edit for the selected resource types.' : ''}
+                        placement="top"
+                        className="mxh-210 dc__overflow-auto dc__word-break"
+                        alwaysShowTippyOnHover={option.isDisabled}
+                    >
+                        <li
+                            key={option.value}
+                            className={`dc__kebab-menu__list-item flex-justify flex ${option.isDisabled ? 'dc__disabled' : ''}`}
+                        >
+                            <div className="flex left dc__gap-8">
+                                <Icon name={option.icon as IconName} color={null} />
+                                <span>{option.label}</span>
+                            </div>
+
+                            <Checkbox
+                                rootClassName="mb-0"
+                                isChecked={events[option.value].isChecked}
+                                value={events[option.value].value}
+                                onChange={(e) => onChangeCheckboxHandler(e, option.value)()}
+                                disabled={option.isDisabled}
+                            >
+                                <span />
+                            </Checkbox>
+                        </li>
+                    </Tooltip>
+                ))}
+            </ul>
+
+            <div className="p-8">
+                <Button
+                    dataTestId="apply-recipient"
+                    text="Apply"
+                    variant={ButtonVariantType.primary}
+                    size={ComponentSizeType.medium}
+                    onClick={applyModifyEvents}
+                    fullWidth
+                />
+            </div>
+        </div>
+    )
+}

src/components/notifications/ModifyRecipientsModal.tsx

@@ -15,7 +15,18 @@
  */
 
 import { Component } from 'react'
-import { showError, Progressing, VisibleModal, RadioGroup, RadioGroupItem, ToastVariantType, ToastManager } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    showError,
+    VisibleModal,
+    RadioGroup,
+    RadioGroupItem,
+    ToastVariantType,
+    ToastManager,
+    preventDefault,
+    Button,
+    ButtonVariantType,
+    ButtonStyleType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import CreatableSelect from 'react-select/creatable'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as Slack } from '../../assets/icons/slack-logo.svg'
@@ -25,40 +36,7 @@ import { ReactComponent as Webhook } from '../../assets/icons/ic-CIWebhook.svg'
 import { updateNotificationRecipients } from './notifications.service'
 import { multiSelectStyles, DropdownIndicator, MultiValueLabel, Option } from './notifications.util'
 import './notifications.scss'
-import { EMAIL_AGENT } from './types'
-
-interface ModifyRecipientsModalProps {
-    channelList: SelectedRecipientType[]
-    onSaveSuccess: () => void
-    closeModifyRecipientsModal: () => void
-    notificationListFromParent: {
-        id: number
-        providers: { dest: string; configId: number; recipient: string; name?: string }[]
-    }[]
-}
-
-interface RecipientType {
-    configId: number
-    recipient: string
-    dest: string
-    name?: string
-}
-
-interface SelectedRecipientType {
-    __isNew__?: boolean
-    label: string
-    value: string
-    data: RecipientType
-}
-
-interface ModifyRecipientsModalState {
-    isLoading: boolean
-    savedRecipients: RecipientType[]
-    selectedRecipient: SelectedRecipientType[]
-    showEmailAgents: boolean
-    selectedEmailAgent: string
-    recipientWithoutEmailAgent: boolean
-}
+import { EMAIL_AGENT, ModifyRecipientsModalProps, ModifyRecipientsModalState } from './types'
 
 export class ModifyRecipientsModal extends Component<ModifyRecipientsModalProps, ModifyRecipientsModalState> {
     constructor(props) {
@@ -71,8 +49,6 @@ export class ModifyRecipientsModal extends Component<ModifyRecipientsModalProps,
             selectedEmailAgent: null,
             recipientWithoutEmailAgent: false,
         }
-        this.saveRecipients = this.saveRecipients.bind(this)
-        this.changeEmailAgent = this.changeEmailAgent.bind(this)
     }
 
     componentDidMount() {
@@ -130,8 +106,8 @@ export class ModifyRecipientsModal extends Component<ModifyRecipientsModalProps,
         this.setState(state)
     }
 
-    saveRecipients(e) {
-        e.preventDefault()
+    saveRecipients = (e) => {
+        preventDefault(e)
         if (
             this.state.selectedRecipient.length > 0 &&
             this.state.recipientWithoutEmailAgent &&
@@ -164,13 +140,13 @@ export class ModifyRecipientsModal extends Component<ModifyRecipientsModalProps,
             })
     }
 
-    changeEmailAgent(event: any): void {
+    changeEmailAgent = (event: any): void => {
         const state = { ...this.state }
         state.selectedEmailAgent = event.target.value
         this.setState(state)
     }
 
-    renderEmailAgentSelector() {
+    renderEmailAgentSelector = () => {
         if (this.state.selectedRecipient.length > 0 && this.state.recipientWithoutEmailAgent) {
             return (
                 <div className="form__row">
@@ -285,26 +261,23 @@ export class ModifyRecipientsModal extends Component<ModifyRecipientsModalProps,
                             <div style={{ marginBottom: '60px' }} />
                         )}
                     </div>
-                    <div>{this.renderEmailAgentSelector()}</div>
+                    {this.renderEmailAgentSelector()}
                 </div>
-                <div className="form__button-group-bottom flex right">
-                    <button
-                        type="button"
-                        className="cta cancel mr-16"
-                        tabIndex={3}
+                <div className="form__button-group-bottom flex right dc__gap-16">
+                    <Button
+                        dataTestId="button__cancel"
+                        text="Cancel"
                         onClick={this.props.closeModifyRecipientsModal}
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="submit"
-                        className="cta"
-                        tabIndex={4}
-                        disabled={this.state.isLoading}
+                        variant={ButtonVariantType.secondary}
+                        style={ButtonStyleType.neutral}
+                    />
+                    <Button
+                        dataTestId="button__save-changes"
+                        text="Save Changes"
                         onClick={this.saveRecipients}
-                    >
-                        {this.state.isLoading ? <Progressing /> : 'Save Changes'}
-                    </button>
+                        variant={ButtonVariantType.primary}
+                        disabled={this.state.isLoading}
+                    />
                 </div>
             </>
         )