From e68c5e216a1362af9f02e8bea07b49432752af52 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Thu, 5 Feb 2026 15:18:49 +0530
Subject: [PATCH 1/4] chore: add notification position fix

---
 .../notifications/NotificationTab.tsx         | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/notifications/NotificationTab.tsx b/src/components/notifications/NotificationTab.tsx
index 4cb21582c3..42802662c9 100644
--- a/src/components/notifications/NotificationTab.tsx
+++ b/src/components/notifications/NotificationTab.tsx
@@ -571,8 +571,12 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                                 row.appliedFilters.project?.length ||
                                 row.appliedFilters.cluster?.length ? (
                                     <>
-                                        <i>{row.pipelineType === NotificationPipelineType.BASE ? 'Base configuration matching:' : 'All existing and future deployment pipelines matching:'}</i>
-                                        <div className='flex left dc__gap-6'>
+                                        <i>
+                                            {row.pipelineType === NotificationPipelineType.BASE
+                                                ? 'Base configuration matching:'
+                                                : 'All existing and future deployment pipelines matching:'}
+                                        </i>
+                                        <div className="flex left dc__gap-6">
                                             {row.appliedFilters.project.map((element) => (
                                                 <Chip
                                                     data-testid={`${row.pipelineType}-${element.name}`}
@@ -735,17 +739,21 @@ export class NotificationTab extends Component<any, NotificationTabState> {
 
     renderBody = () => (
         <div className="flexbox-col flex-grow-1 dc__gap-16">
-            <Button
-                variant={ButtonVariantType.primary}
-                text="Add New"
-                size={ComponentSizeType.medium}
-                onClick={this.createNewNotification}
-                dataTestId="delete-notification-button"
-                startIcon={<Icon name="ic-add" color={null} />}
-            />
-            {this.renderBulkOptions()}
-            {this.renderPipelineList()}
-            {this.renderPagination()}
+            <div className="flex right">
+                <Button
+                    variant={ButtonVariantType.primary}
+                    text="Add New"
+                    size={ComponentSizeType.medium}
+                    onClick={this.createNewNotification}
+                    dataTestId="delete-notification-button"
+                    startIcon={<Icon name="ic-add" color={null} />}
+                />
+            </div>
+            <div>
+                {this.renderBulkOptions()}
+                {this.renderPipelineList()}
+                {this.renderPagination()}
+            </div>
         </div>
     )
 

From d4415e322fdd9e9431585a86b3ef970b3dcc3da0 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Mon, 16 Feb 2026 18:21:28 +0530
Subject: [PATCH 2/4] feat: notification ui fixes

---
 .../notifications/AddNotification.tsx         |  17 +-
 .../notifications/BulkMultiSelectWidget.tsx   |  96 +++++++++++
 .../notifications/NotificationTab.tsx         | 152 +++++++-----------
 .../notifications/Notifications.tsx           |  79 +++++++--
 .../notifications/notifications.scss          |  20 ++-
 .../notifications/notifications.util.tsx      |   4 +-
 src/components/notifications/types.tsx        |  21 ++-
 7 files changed, 266 insertions(+), 123 deletions(-)
 create mode 100644 src/components/notifications/BulkMultiSelectWidget.tsx

diff --git a/src/components/notifications/AddNotification.tsx b/src/components/notifications/AddNotification.tsx
index 8f6602279a..363fcd92a5 100644
--- a/src/components/notifications/AddNotification.tsx
+++ b/src/components/notifications/AddNotification.tsx
@@ -278,11 +278,17 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
         } else {
             const baseEvents = pipeline.success && pipeline.trigger && pipeline.failure
             const approvalEvents = pipeline.configApproval && pipeline.imageApproval
-            const anyEvent = pipeline.success || pipeline.trigger || pipeline.failure || pipeline.configApproval || pipeline.imageApproval
+            const anyEvent =
+                pipeline.success ||
+                pipeline.trigger ||
+                pipeline.failure ||
+                pipeline.configApproval ||
+                pipeline.imageApproval
 
-            const isFullySelected = rowType === NotificationPipelineType.CI 
-                ? baseEvents && !pipeline.configApproval && !pipeline.imageApproval
-                : baseEvents && approvalEvents
+            const isFullySelected =
+                rowType === NotificationPipelineType.CI
+                    ? baseEvents && !pipeline.configApproval && !pipeline.imageApproval
+                    : baseEvents && approvalEvents
 
             if (isFullySelected) {
                 pipeline.checkbox = {
@@ -696,7 +702,6 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                         <th className="pipeline-list__checkbox fw-6" />
                         <th className="pipeline-list__pipeline-name fw-6">Resource</th>
                         <th className="pipeline-list__pipeline-name fw-6">Application Name</th>
-                        <th className="pipeline-list__type fw-6">Type</th>
                         <th className="pipeline-list__environment fw-6">Env/Branch</th>
                         <th className="pipeline-list__stages dc__block fw-6">Events</th>
                     </tr>
@@ -731,6 +736,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                         </Checkbox>
                                     </td>
                                     <td className="pipeline-list__pipeline-name">
+                                        <span className="pipeline-list__type">{renderPipelineTypeIcon(row, 20)}</span>
                                         {row.appliedFilters.length ? (
                                             <>
                                                 <i>
@@ -753,7 +759,6 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                         )}
                                     </td>
                                     <th className="pipeline-list__pipeline-name fw-6">{row?.appName}</th>
-                                    <td className="pipeline-list__type">{renderPipelineTypeIcon(row)}</td>
                                     <td className="pipeline-list__environment">
                                         {_isCi && (
                                             <span className="flex left">
diff --git a/src/components/notifications/BulkMultiSelectWidget.tsx b/src/components/notifications/BulkMultiSelectWidget.tsx
new file mode 100644
index 0000000000..3d4b524ff8
--- /dev/null
+++ b/src/components/notifications/BulkMultiSelectWidget.tsx
@@ -0,0 +1,96 @@
+/*
+ * 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,
+}: 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" />
+                <div className="flex left dc__gap-4">
+                    <Button
+                        dataTestId="notification-delete-button"
+                        icon={<Icon name="ic-delete" color={null} />}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                        ariaLabel="Delete Notifications"
+                        onClick={showDeleteModal}
+                        showAriaLabelInTippy
+                    />
+                    <PopupMenu
+                        onToggleCallback={(isOpen) => {
+                            if (isOpen) {
+                                onOpenEditNotificationMenu()
+                            }
+                        }}
+                    >
+                        <PopupMenu.Button rootClassName="popup-button--notification-tab">
+                            <Icon
+                                name="ic-error"
+                                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
+                    />
+                </div>
+            </div>
+        </DraggableWrapper>
+    )
+}
diff --git a/src/components/notifications/NotificationTab.tsx b/src/components/notifications/NotificationTab.tsx
index 42802662c9..ad042090e3 100644
--- a/src/components/notifications/NotificationTab.tsx
+++ b/src/components/notifications/NotificationTab.tsx
@@ -58,8 +58,12 @@ import { getRecipientChipStartIcon, renderPipelineTypeIcon } from './notificatio
 import { NotificationPipelineType, NotificationTabState } from './types'
 import { ModifyRecipientPopUp } from './ModifyRecipientPopUp'
 import { EVENT_ID } from './constants'
+import { BulkMultiSelectTagWidget } from './BulkMultiSelectWidget'
+import React from 'react'
 
 export class NotificationTab extends Component<any, NotificationTabState> {
+    bulkMultiSelectWidgetRef = React.createRef<HTMLDivElement>()
+
     constructor(props) {
         super(props)
         this.state = {
@@ -105,7 +109,6 @@ export class NotificationTab extends Component<any, NotificationTabState> {
             deleting: false,
             confirmation: false,
             singleDeletedId: 0,
-            disableEdit: false,
             selectedNotificationList: [],
         }
     }
@@ -164,8 +167,8 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                 }))
                 this.setState({ channelList: list })
             })
-            .catch((error) => {
-                this.setState({ disableEdit: true })
+            .catch(() => {
+                this.props.toggleDisableEdit(true)
             })
     }
 
@@ -376,7 +379,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
     }
 
     createNewNotification = () => {
-        if (this.state.disableEdit) {
+        if (this.props.disableEdit) {
             ToastManager.showToast({
                 variant: ToastVariantType.notAuthorized,
                 description: TOAST_ACCESS_DENIED.SUBTITLE,
@@ -408,7 +411,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
     )
 
     validateAccess = (updateState): void => {
-        if (this.state.disableEdit) {
+        if (this.props.disableEdit) {
             ToastManager.showToast({
                 variant: ToastVariantType.notAuthorized,
                 description: TOAST_ACCESS_DENIED.SUBTITLE,
@@ -423,7 +426,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
     }
 
     applyModifyEvents = () => {
-        if (this.state.disableEdit) {
+        if (this.props.disableEdit) {
             ToastManager.showToast({
                 variant: ToastVariantType.notAuthorized,
                 description: TOAST_ACCESS_DENIED.SUBTITLE,
@@ -437,62 +440,6 @@ export class NotificationTab extends Component<any, NotificationTabState> {
         this.validateAccess({ showModifyRecipientsModal: !this.state.showModifyRecipientsModal })
     }
 
-    renderModifyEventPopUpBody = () => (
-        <PopupMenu.Body>
-            <ModifyRecipientPopUp
-                events={this.state.events}
-                applyModifyEvents={this.applyModifyEvents}
-                onChangeCheckboxHandler={this.onChangeCheckboxHandler}
-                selectedNotificationList={this.state.selectedNotificationList}
-            />
-        </PopupMenu.Body>
-    )
-
-    renderBulkOptions = () => {
-        if (this.state.headerCheckbox.isChecked) {
-            return (
-                <div className="flex left dc__gap-16">
-                    <Button
-                        dataTestId="notification-delete-button"
-                        icon={<Icon name="ic-delete" color={null} />}
-                        variant={ButtonVariantType.borderLess}
-                        style={ButtonStyleType.neutral}
-                        ariaLabel="Delete Notifications"
-                        onClick={this.showDeleteModal}
-                        showAriaLabelInTippy
-                    />
-                    <PopupMenu
-                        onToggleCallback={(isOpen) => {
-                            if (isOpen) {
-                                this.onOpenEditNotificationMenu()
-                            }
-                        }}
-                    >
-                        <PopupMenu.Button rootClassName="popup-button--notification-tab">
-                            <Icon
-                                name="ic-bell"
-                                color={null}
-                                size={20}
-                                tooltipProps={{ content: 'Modify events', alwaysShowTippyOnHover: true }}
-                            />
-                        </PopupMenu.Button>
-                        {this.renderModifyEventPopUpBody()}
-                    </PopupMenu>
-
-                    <Button
-                        dataTestId="button__modify-recipients"
-                        icon={<Icon name="ic-users" color={null} />}
-                        variant={ButtonVariantType.borderLess}
-                        style={ButtonStyleType.neutral}
-                        ariaLabel="Modify Recipients"
-                        onClick={this.showModifyModal}
-                        showAriaLabelInTippy
-                    />
-                </div>
-            )
-        }
-    }
-
     onChangePipelineCheckbox = (e) => {
         stopPropagation(e)
         this.toggleAllNotification()
@@ -512,12 +459,12 @@ export class NotificationTab extends Component<any, NotificationTabState> {
     }
 
     renderPipelineList = () => (
-        <table className="flexbox-col flex-grow-1">
-            <tbody>
+        <table className="flexbox-col">
+            <thead>
                 <tr className="pipeline-list__header">
-                    <th className="pipeline-list__checkbox">
+                    <th className="pipeline-list__checkbox flex-grow-1">
                         <Checkbox
-                            rootClassName=""
+                            rootClassName="mb-0 flex"
                             isChecked={this.state.headerCheckbox.isChecked}
                             value={this.state.headerCheckbox.value}
                             onChange={this.onChangePipelineCheckbox}
@@ -526,14 +473,18 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                             <span />
                         </Checkbox>
                     </th>
-                    <th className="pipeline-list__pipeline-name fw-6">Resource</th>
+                    <th className="pipeline-list__pipeline-name fw-6 flex left dc__gap-8">
+                        <span className="icon-dim-16" />
+                        Resource
+                    </th>
                     <th className="pipeline-list__app-name fw-6">Application Name</th>
-                    <th className="pipeline-list__type fw-6">Type</th>
                     <th className="pipeline-list__environment fw-6">Env/Branch</th>
                     <th className="pipeline-list__stages fw-6">Events</th>
                     <th className="pipeline-list__recipients fw-6">Recipients</th>
                     <th className="pipeline-list__hover " />
                 </tr>
+            </thead>
+            <tbody>
                 {this.state.notificationList.map((row) => {
                     const _isCi = row.branch && row.pipelineType === NotificationPipelineType.CI
                     let _isWebhookCi
@@ -545,6 +496,11 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                             _isWebhookCi = false
                         }
                     }
+                    const isBaseConfig =
+                        row.appliedFilters.environment?.length ||
+                        row.appliedFilters.application.length ||
+                        row.appliedFilters.project?.length ||
+                        row.appliedFilters.cluster?.length
                     return (
                         <tr
                             key={row.id}
@@ -564,18 +520,23 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                                     <span />
                                 </Checkbox>
                             </td>
-                            <td className="pipeline-list__pipeline-name">
-                                {row.pipelineName ? row.pipelineName : ''}
-                                {row.appliedFilters.environment?.length ||
-                                row.appliedFilters.application.length ||
-                                row.appliedFilters.project?.length ||
-                                row.appliedFilters.cluster?.length ? (
-                                    <>
-                                        <i>
-                                            {row.pipelineType === NotificationPipelineType.BASE
-                                                ? 'Base configuration matching:'
-                                                : 'All existing and future deployment pipelines matching:'}
-                                        </i>
+                            <td className="pipeline-list__pipeline-name ">
+                                <div className="flex left dc__gap-8">
+                                    {!isBaseConfig && renderPipelineTypeIcon(row)}
+                                    {row.pipelineName ? row.pipelineName : ''}
+                                </div>
+
+                                {isBaseConfig ? (
+                                    <div className="flexbox-col dc__gap-4">
+                                        <div className="flex left dc__gap-8">
+                                            {renderPipelineTypeIcon(row)}
+
+                                            <i>
+                                                {row.pipelineType === NotificationPipelineType.BASE
+                                                    ? 'Base configuration matching:'
+                                                    : `All existing and future ${row.pipelineType === NotificationPipelineType.CI ? 'build' : 'deployment'}  pipelines matching:`}
+                                            </i>
+                                        </div>
                                         <div className="flex left dc__gap-6">
                                             {row.appliedFilters.project.map((element) => (
                                                 <Chip
@@ -606,11 +567,10 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                                                 />
                                             ))}
                                         </div>
-                                    </>
+                                    </div>
                                 ) : null}
                             </td>
                             <td className="pipeline-list__app-name">{row?.appName}</td>
-                            <td className="pipeline-list__type">{renderPipelineTypeIcon(row)}</td>
                             <td className="pipeline-list__environment">
                                 {_isCi && (
                                     <span className="flex left">
@@ -691,7 +651,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
                                 </div>
                             </td>
                             <td className="pipeline-list__recipients">
-                                <div className="dc__devtron-tag__container">
+                                <div className="dc__devtron-tag__container flex left dc__gap-4 flex-wrap">
                                     {row.providers.map((p) => (
                                         <Chip
                                             data-testid={`recipient-${p.configId}`}
@@ -739,18 +699,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
 
     renderBody = () => (
         <div className="flexbox-col flex-grow-1 dc__gap-16">
-            <div className="flex right">
-                <Button
-                    variant={ButtonVariantType.primary}
-                    text="Add New"
-                    size={ComponentSizeType.medium}
-                    onClick={this.createNewNotification}
-                    dataTestId="delete-notification-button"
-                    startIcon={<Icon name="ic-add" color={null} />}
-                />
-            </div>
             <div>
-                {this.renderBulkOptions()}
                 {this.renderPipelineList()}
                 {this.renderPagination()}
             </div>
@@ -800,11 +749,24 @@ export class NotificationTab extends Component<any, NotificationTabState> {
             )
         }
         return (
-            <div className="flexbox-col flex-grow-1 p-16 dc__gap-16 bg__primary">
+            <div className="flexbox-col flex-grow-1 p-16 dc__gap-16 bg__primary" ref={this.bulkMultiSelectWidgetRef}>
                 {this.renderHostErrorMessage()}
                 {this.renderBody()}
                 {this.state.showDeleteDialog && this.renderDeleteDialog()}
                 {this.renderModifyRecipients()}
+                {this.state.headerCheckbox.isChecked && (
+                    <BulkMultiSelectTagWidget
+                        parentRef={this.bulkMultiSelectWidgetRef}
+                        selectedIdentifiersCount={this.state.notificationList.filter((row) => row.isSelected).length}
+                        showDeleteModal={this.showDeleteModal}
+                        events={this.state.events}
+                        applyModifyEvents={this.applyModifyEvents}
+                        onChangeCheckboxHandler={this.onChangeCheckboxHandler}
+                        selectedNotificationList={this.state.selectedNotificationList}
+                        onOpenEditNotificationMenu={this.onOpenEditNotificationMenu}
+                        showModifyModal={this.showModifyModal}
+                    />
+                )}
             </div>
         )
     }
diff --git a/src/components/notifications/Notifications.tsx b/src/components/notifications/Notifications.tsx
index d97c63938f..ac020bc373 100644
--- a/src/components/notifications/Notifications.tsx
+++ b/src/components/notifications/Notifications.tsx
@@ -16,29 +16,72 @@
 
 import { Component } from 'react'
 import { Switch, Route, Redirect, RouteComponentProps } from 'react-router-dom'
-import { DOCUMENTATION, ErrorScreenNotAuthorized, FeatureTitleWithInfo, TabGroup } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    Button,
+    ButtonVariantType,
+    ComponentSizeType,
+    ErrorScreenNotAuthorized,
+    FeatureTitleWithInfo,
+    Icon,
+    TabGroup,
+    TOAST_ACCESS_DENIED,
+    ToastManager,
+    ToastVariantType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { ConfigurationTab } from './ConfigurationTab'
 import { NotificationTab } from './NotificationTab'
 import { ErrorBoundary } from '../common'
-import { HEADER_TEXT } from '../../config'
+import { HEADER_TEXT, URLS } from '../../config'
 import './notifications.scss'
+import { NotificationsProps, NotificationsState } from './types'
 
-interface NotificationsProps extends RouteComponentProps<{}> {
-    isSuperAdmin: boolean
-}
+export default class Notifications extends Component<NotificationsProps, NotificationsState> {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            disableEdit: false,
+        }
+    }
+
+    createNewNotification = () => {
+        if (this.state.disableEdit) {
+            ToastManager.showToast({
+                variant: ToastVariantType.notAuthorized,
+                description: TOAST_ACCESS_DENIED.SUBTITLE,
+            })
+        } else {
+            this.props.history.push(URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS_ADD_NEW)
+        }
+    }
+
+    toggleDisableEdit = (disableEdit: boolean) => {
+        this.setState({ disableEdit })
+    }
 
-export default class Notifications extends Component<NotificationsProps, {}> {
     renderNotificationHeader() {
         return (
             <div className="notification-page bg__primary flexbox-col h-100">
                 <div className="notification-page__header">
-                    <FeatureTitleWithInfo
-                        title={HEADER_TEXT.NOTIFICATIONS.title}
-                        renderDescriptionContent={() => HEADER_TEXT.NOTIFICATIONS.description}
-                        docLink="GLOBAL_CONFIG_NOTIFICATION"
-                        showInfoIconTippy
-                        dataTestId="notifications-feature-title"
-                    />
+                    <div className="flex dc__content-space">
+                        <FeatureTitleWithInfo
+                            title={HEADER_TEXT.NOTIFICATIONS.title}
+                            renderDescriptionContent={() => HEADER_TEXT.NOTIFICATIONS.description}
+                            docLink="GLOBAL_CONFIG_NOTIFICATION"
+                            showInfoIconTippy
+                            dataTestId="notifications-feature-title"
+                        />
+                        <div className="flex right">
+                            <Button
+                                variant={ButtonVariantType.primary}
+                                text="Add New"
+                                size={ComponentSizeType.medium}
+                                onClick={this.createNewNotification}
+                                dataTestId="delete-notification-button"
+                                startIcon={<Icon name="ic-add" color={null} />}
+                            />
+                        </div>
+                    </div>
                     <TabGroup
                         tabs={[
                             {
@@ -64,7 +107,15 @@ export default class Notifications extends Component<NotificationsProps, {}> {
                 </div>
                 <ErrorBoundary>
                     <Switch>
-                        <Route path={`${this.props.match.url}/channels`} component={NotificationTab} />
+                        <Route
+                            path={`${this.props.match.url}/channels`}
+                            render={() => (
+                                <NotificationTab
+                                    disableEdit={this.state.disableEdit}
+                                    toggleDisableEdit={this.toggleDisableEdit}
+                                />
+                            )}
+                        />
                         <Route path={`${this.props.match.url}/configurations`} component={ConfigurationTab} />
                         <Redirect to={`${this.props.match.url}/channels`} />
                     </Switch>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2461d7a3f1..d788cf983d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -54,14 +54,24 @@
     color: var(--N500);
     text-transform: capitalize;
     display: table-row;
+
+    th {
+        padding: 10px;
+        vertical-align: left;
+    }
+}
+
+thead {
+    position: sticky;
+    top: 0;
+    z-index: 2;
     box-shadow: inset 0 -1px 0 0 var(--N200);
-    padding: 10px 0 16px 0;
+    background-color: var(--bg-primary);
 }
 
 .pipeline-list__checkbox {
     width: 24px;
     padding: 10px;
-    padding-top: 15px;
 }
 
 .pipeline-list__pipeline-name {
@@ -125,8 +135,8 @@
 }
 
 
-.configuration-drawer{
-    .webhook-config-modal{
+.configuration-drawer {
+    .webhook-config-modal {
         display: grid;
         grid-template-columns: 1fr 280px;
     }
@@ -331,4 +341,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/notifications/notifications.util.tsx b/src/components/notifications/notifications.util.tsx
index 2e87a3e52d..06e8ff4c0a 100644
--- a/src/components/notifications/notifications.util.tsx
+++ b/src/components/notifications/notifications.util.tsx
@@ -155,7 +155,7 @@ export const Option = (props) => {
     )
 }
 
-export const renderPipelineTypeIcon = (row) => {
+export const renderPipelineTypeIcon = (row, size = 24 as IconBaseSizeType ) => {
     if (row.isVirtualEnvironment) {
         return <Rocket className="icon-dim-24" />
     }
@@ -163,7 +163,7 @@ export const renderPipelineTypeIcon = (row) => {
         return <CI className="icon-dim-20 dc__flip" />
     }
     if (row.pipelineType === NotificationPipelineType.BASE || row.type === NotificationPipelineType.BASE ) {
-        return <Icon name="ic-configuration-file" color={null} size={24} />
+        return <Icon name="ic-configuration-file" color={null} size={size} />
     }
     return <CD className="icon-dim-20 dc__flip" />
 }
diff --git a/src/components/notifications/types.tsx b/src/components/notifications/types.tsx
index 0b12c8045b..48795e04af 100644
--- a/src/components/notifications/types.tsx
+++ b/src/components/notifications/types.tsx
@@ -313,7 +313,6 @@ export interface NotificationTabState {
     deleting: boolean
     confirmation: boolean
     singleDeletedId: number
-    disableEdit: boolean
     selectedNotificationList: NotificationConfiguration[]
 }
 
@@ -450,3 +449,23 @@ export interface ModifyRecipientPopUpType extends Pick<NotificationTabState, 'se
     applyModifyEvents: () => void
     onChangeCheckboxHandler: (e, value) => () => void
 }
+
+export interface NotificationsProps extends RouteComponentProps<{}> {
+    isSuperAdmin: boolean
+}
+
+export interface NotificationsState {
+    disableEdit: boolean
+}
+
+export interface BulkMultiSelectTagWidgetType {
+    parentRef: React.RefObject<HTMLDivElement>
+    selectedIdentifiersCount: number
+    showDeleteModal: () => void
+    events: NotificationTabEvents
+    applyModifyEvents: () => void
+    onChangeCheckboxHandler: (e, value) => () => void
+    selectedNotificationList: NotificationConfiguration[]
+    onOpenEditNotificationMenu: () => void
+    showModifyModal: () => void
+}

From 493b48403c23afa55e7f30968a448f226b9c680b Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Tue, 17 Feb 2026 13:06:07 +0530
Subject: [PATCH 3/4] fix: css fixes

---
 .../notifications/AddNotification.tsx         | 34 ++++++++++---------
 .../notifications/BulkMultiSelectWidget.tsx   | 22 ++++++------
 .../notifications/Notifications.tsx           |  2 +-
 .../notifications/notifications.util.tsx      |  4 +--
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/notifications/AddNotification.tsx b/src/components/notifications/AddNotification.tsx
index 363fcd92a5..39cb0d7537 100644
--- a/src/components/notifications/AddNotification.tsx
+++ b/src/components/notifications/AddNotification.tsx
@@ -42,6 +42,7 @@ import {
     IconsProps,
     ButtonComponentType,
     stopPropagation,
+    BreadCrumb,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { components } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
@@ -736,7 +737,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                         </Checkbox>
                                     </td>
                                     <td className="pipeline-list__pipeline-name">
-                                        <span className="pipeline-list__type">{renderPipelineTypeIcon(row, 20)}</span>
+                                        <span className="pipeline-list__type">{renderPipelineTypeIcon(row, 16)}</span>
                                         {row.appliedFilters.length ? (
                                             <>
                                                 <i>
@@ -1063,28 +1064,29 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
         this.getInitialData()
     }
 
+    renderBreadcrumbs = () => {
+        const breadcrumbs = [
+            {
+                name: 'Notifications',
+                to: URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS,
+            },
+            {
+                name: 'Add Notification',
+                to: '',
+            },
+        ]
+        return <BreadCrumb breadcrumbs={breadcrumbs} />
+    }
+
     render() {
         return (
             <ErrorBoundary>
                 <div className="flexbox-col bg__primary h-100 dc__gap-24 px-20 py-16">
                     <div
                         data-testid="add-notifications-heading-title"
-                        className="form__title mb-16 flex left dc__gap-12"
+                        className="fs-16 fw-6 cn-9 flex left dc__gap-4"
                     >
-                        <Button
-                            dataTestId="back-to-notifications"
-                            icon={<Icon name="ic-arrow-right" color={null} rotateBy={180} />}
-                            component={ButtonComponentType.link}
-                            linkProps={{
-                                to: URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS,
-                            }}
-                            ariaLabel="Back to notifications"
-                            showAriaLabelInTippy={false}
-                            variant={ButtonVariantType.borderLess}
-                            style={ButtonStyleType.neutral}
-                            size={ComponentSizeType.small}
-                        />
-                        Add Notifications
+                        {this.renderBreadcrumbs()}
                     </div>
                     {this.renderAddCard()}
                     {this.renderShowSlackConfigModal()}
diff --git a/src/components/notifications/BulkMultiSelectWidget.tsx b/src/components/notifications/BulkMultiSelectWidget.tsx
index 3d4b524ff8..d388c07298 100644
--- a/src/components/notifications/BulkMultiSelectWidget.tsx
+++ b/src/components/notifications/BulkMultiSelectWidget.tsx
@@ -51,17 +51,7 @@ export const BulkMultiSelectTagWidget = ({
                     <span className="cn-9">Selected</span>
                 </div>
                 <div className="dc__divider h-16" />
-                <div className="flex left dc__gap-4" />
                 <div className="flex left dc__gap-4">
-                    <Button
-                        dataTestId="notification-delete-button"
-                        icon={<Icon name="ic-delete" color={null} />}
-                        variant={ButtonVariantType.borderLess}
-                        style={ButtonStyleType.neutral}
-                        ariaLabel="Delete Notifications"
-                        onClick={showDeleteModal}
-                        showAriaLabelInTippy
-                    />
                     <PopupMenu
                         onToggleCallback={(isOpen) => {
                             if (isOpen) {
@@ -71,7 +61,7 @@ export const BulkMultiSelectTagWidget = ({
                     >
                         <PopupMenu.Button rootClassName="popup-button--notification-tab">
                             <Icon
-                                name="ic-error"
+                                name="ic-bell"
                                 color={null}
                                 size={20}
                                 tooltipProps={{ content: 'Modify events', alwaysShowTippyOnHover: true }}
@@ -89,6 +79,16 @@ export const BulkMultiSelectTagWidget = ({
                         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>
             </div>
         </DraggableWrapper>
diff --git a/src/components/notifications/Notifications.tsx b/src/components/notifications/Notifications.tsx
index ac020bc373..dcc0473ac5 100644
--- a/src/components/notifications/Notifications.tsx
+++ b/src/components/notifications/Notifications.tsx
@@ -74,7 +74,7 @@ export default class Notifications extends Component<NotificationsProps, Notific
                         <div className="flex right">
                             <Button
                                 variant={ButtonVariantType.primary}
-                                text="Add New"
+                                text="Add Notification"
                                 size={ComponentSizeType.medium}
                                 onClick={this.createNewNotification}
                                 dataTestId="delete-notification-button"
diff --git a/src/components/notifications/notifications.util.tsx b/src/components/notifications/notifications.util.tsx
index 06e8ff4c0a..45947f2983 100644
--- a/src/components/notifications/notifications.util.tsx
+++ b/src/components/notifications/notifications.util.tsx
@@ -160,12 +160,12 @@ export const renderPipelineTypeIcon = (row, size = 24 as IconBaseSizeType ) => {
         return <Rocket className="icon-dim-24" />
     }
     if (row.pipelineType === 'CI' || row.type === 'CI') {
-        return <CI className="icon-dim-20 dc__flip" />
+        return <Icon name="ic-build-color" color={null} size={size}  />
     }
     if (row.pipelineType === NotificationPipelineType.BASE || row.type === NotificationPipelineType.BASE ) {
         return <Icon name="ic-configuration-file" color={null} size={size} />
     }
-    return <CD className="icon-dim-20 dc__flip" />
+    return <Icon name="ic-deploy-color" color={null} size={size} />
 }
 
 export const getConfigTabIcons = (tab: ConfigurationsTabTypes, size: IconBaseSizeType = 24) => {

From 2f14b27e9acc6bc4573d812c9f48244a9f110244 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Wed, 18 Feb 2026 17:42:36 +0530
Subject: [PATCH 4/4] chore: css fixes

---
 .../notifications/AddNotificationButton.tsx   | 38 +++++++++++++++++++
 .../notifications/NotificationTab.tsx         | 29 +++-----------
 .../notifications/Notifications.tsx           | 21 +---------
 3 files changed, 45 insertions(+), 43 deletions(-)
 create mode 100644 src/components/notifications/AddNotificationButton.tsx

diff --git a/src/components/notifications/AddNotificationButton.tsx b/src/components/notifications/AddNotificationButton.tsx
new file mode 100644
index 0000000000..c8bbb07fab
--- /dev/null
+++ b/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} />}
+        />
+    )
+}
diff --git a/src/components/notifications/NotificationTab.tsx b/src/components/notifications/NotificationTab.tsx
index ad042090e3..34f6fb19cd 100644
--- a/src/components/notifications/NotificationTab.tsx
+++ b/src/components/notifications/NotificationTab.tsx
@@ -45,7 +45,7 @@ import {
 import { InValidHostUrlWarningBlock } from '@Components/common'
 
 import EmptyImage from '../../assets/img/ic-empty-notifications.png'
-import { URLS, ViewType } from '../../config'
+import { ViewType } from '../../config'
 import { getHostURLConfiguration } from '../../services/service'
 import { ModifyRecipientsModal } from './ModifyRecipientsModal'
 import {
@@ -56,10 +56,10 @@ import {
 } from './notifications.service'
 import { getRecipientChipStartIcon, renderPipelineTypeIcon } from './notifications.util'
 import { NotificationPipelineType, NotificationTabState } from './types'
-import { ModifyRecipientPopUp } from './ModifyRecipientPopUp'
 import { EVENT_ID } from './constants'
 import { BulkMultiSelectTagWidget } from './BulkMultiSelectWidget'
 import React from 'react'
+import { AddNotificationButton } from './AddNotificationButton'
 
 export class NotificationTab extends Component<any, NotificationTabState> {
     bulkMultiSelectWidgetRef = React.createRef<HTMLDivElement>()
@@ -378,28 +378,9 @@ export class NotificationTab extends Component<any, NotificationTabState> {
         )
     }
 
-    createNewNotification = () => {
-        if (this.props.disableEdit) {
-            ToastManager.showToast({
-                variant: ToastVariantType.notAuthorized,
-                description: TOAST_ACCESS_DENIED.SUBTITLE,
-            })
-        } else {
-            this.props.history.push(URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS_ADD_NEW)
-        }
-    }
-
     renderAddNotificationButton = () => (
-        <Button
-            text="Add Notification"
-            variant={ButtonVariantType.primary}
-            size={ComponentSizeType.medium}
-            onClick={this.createNewNotification}
-            dataTestId="add-notification-button"
-            startIcon={<Icon name="ic-add" color={null} />}
-        />
+        <AddNotificationButton disableEdit={this.props.disableEdit} />
     )
-
     renderGenericEmptyState = () => (
         <GenericEmptyState
             image={EmptyImage}
@@ -459,7 +440,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
     }
 
     renderPipelineList = () => (
-        <table className="flexbox-col">
+        <table className="flexbox-col flex-grow-1">
             <thead>
                 <tr className="pipeline-list__header">
                     <th className="pipeline-list__checkbox flex-grow-1">
@@ -699,7 +680,7 @@ export class NotificationTab extends Component<any, NotificationTabState> {
 
     renderBody = () => (
         <div className="flexbox-col flex-grow-1 dc__gap-16">
-            <div>
+            <div className="flexbox-col flex-grow-1">
                 {this.renderPipelineList()}
                 {this.renderPagination()}
             </div>
diff --git a/src/components/notifications/Notifications.tsx b/src/components/notifications/Notifications.tsx
index dcc0473ac5..bd7fc92f7f 100644
--- a/src/components/notifications/Notifications.tsx
+++ b/src/components/notifications/Notifications.tsx
@@ -34,6 +34,7 @@ import { ErrorBoundary } from '../common'
 import { HEADER_TEXT, URLS } from '../../config'
 import './notifications.scss'
 import { NotificationsProps, NotificationsState } from './types'
+import { AddNotificationButton } from './AddNotificationButton'
 
 export default class Notifications extends Component<NotificationsProps, NotificationsState> {
 
@@ -44,17 +45,6 @@ export default class Notifications extends Component<NotificationsProps, Notific
         }
     }
 
-    createNewNotification = () => {
-        if (this.state.disableEdit) {
-            ToastManager.showToast({
-                variant: ToastVariantType.notAuthorized,
-                description: TOAST_ACCESS_DENIED.SUBTITLE,
-            })
-        } else {
-            this.props.history.push(URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS_ADD_NEW)
-        }
-    }
-
     toggleDisableEdit = (disableEdit: boolean) => {
         this.setState({ disableEdit })
     }
@@ -72,14 +62,7 @@ export default class Notifications extends Component<NotificationsProps, Notific
                             dataTestId="notifications-feature-title"
                         />
                         <div className="flex right">
-                            <Button
-                                variant={ButtonVariantType.primary}
-                                text="Add Notification"
-                                size={ComponentSizeType.medium}
-                                onClick={this.createNewNotification}
-                                dataTestId="delete-notification-button"
-                                startIcon={<Icon name="ic-add" color={null} />}
-                            />
+                            <AddNotificationButton disableEdit={this.state.disableEdit} />
                         </div>
                     </div>
                     <TabGroup