From aa70393cc764ef63bf9f5f74d7c2345a6c6905cd Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Fri, 9 Jan 2026 13:31:10 +0530
Subject: [PATCH 1/7] feat: Notification cofiguration table replacement

---
 .../notifications/SESConfigurationTable.tsx   | 68 +++++++++------
 .../notifications/SMTPConfigurationTable.tsx  | 75 ++++++++--------
 .../notifications/SlackConfigurationTable.tsx | 53 +++++++-----
 .../WebhookConfigurationTable.tsx             | 75 +++++++++-------
 src/components/notifications/constants.ts     | 86 ++++++++++++++++++-
 .../notifications/notifications.util.tsx      | 15 ++--
 src/components/notifications/types.tsx        | 21 +++++
 7 files changed, 266 insertions(+), 127 deletions(-)

diff --git a/src/components/notifications/SESConfigurationTable.tsx b/src/components/notifications/SESConfigurationTable.tsx
index 0fc2bc6a66..2781997760 100644
--- a/src/components/notifications/SESConfigurationTable.tsx
+++ b/src/components/notifications/SESConfigurationTable.tsx
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, Icon, InteractiveCellText, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
-import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 import { DeleteComponentsName } from '@Config/constantMessaging'
 
 import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes } from './constants'
-import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps } from './types'
+import { ConfigurationsTabTypes, SES_TABLE_COLUMNS } from './constants'
+import { renderDefaultTag } from './notifications.util'
+import { ConfigurationTableProps, SESConfigurationTableRow } from './types'
 
 import './notifications.scss'
 
@@ -43,31 +43,24 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
         })
     }
 
-    return (
-        <div className="ses-config-container flex-grow-1">
-            <div className="ses-config-grid fs-12 fw-6 dc__uppercase cn-7 py-6 dc__gap-16 dc__border-bottom-n1 px-20 dc__position-sticky dc__top-0 bg__primary">
-                <p className="icon-dim-24 m-0" />
-                <p className="flex left m-0">Name</p>
-                <p className="flex left m-0">Access Key Id</p>
-                <p className="flex left m-0">Sender&apos;s Email</p>
-                <p className="m-0" />
-            </div>
-            <div className="flex-grow-1">
-                {state.sesConfigurationList.map((sesConfig) => (
-                    <div
-                        className="configuration-tab__table-row ses-config-grid fs-13 cn-9 dc__gap-16 py-6 px-20 dc__hover-n50 dc__visible-hover dc__visible-hover--parent"
-                        key={sesConfig.id}
-                    >
-                        {getConfigTabIcons(ConfigurationsTabTypes.SES)}
-                        <div className=" flex left dc__gap-8">
+    const tableRows = useMemo(
+        () =>
+            state.sesConfigurationList.map((sesConfig) => ({
+                id: `ses-${sesConfig.id}`,
+                data: {
+                    icon: <Icon name="ic-ses" color={null} size={null} />,
+                    name: (
+                        <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
                                 text={sesConfig.name}
                                 onClickHandler={onClickSESConfigEdit(sesConfig.id)}
                             />
                             {renderDefaultTag(sesConfig.isDefault)}
                         </div>
-                        <InteractiveCellText text={sesConfig.accessKeyId} />
-                        <InteractiveCellText text={sesConfig.email} />
+                    ),
+                    accessKeyId: sesConfig.accessKeyId,
+                    email: sesConfig.email,
+                    actions: (
                         <ConfigTableRowActionButton
                             onClickEditRow={onClickSESConfigEdit(sesConfig.id)}
                             onClickDeleteRow={deleteClickHandler(
@@ -76,10 +69,29 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
                             )}
                             modal={ConfigurationsTabTypes.SES}
                         />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                },
+            })),
+        [state.sesConfigurationList, deleteClickHandler],
+    )
+
+    return (
+        <Table<SESConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+            id="table__ses-configuration"
+            columns={SES_TABLE_COLUMNS}
+            rows={tableRows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No SES Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: 'name',
+            }}
+            paginationVariant={undefined}
+            filter={null}
+        />
     )
 }
 
diff --git a/src/components/notifications/SMTPConfigurationTable.tsx b/src/components/notifications/SMTPConfigurationTable.tsx
index d07fe05789..2b7329830c 100644
--- a/src/components/notifications/SMTPConfigurationTable.tsx
+++ b/src/components/notifications/SMTPConfigurationTable.tsx
@@ -14,17 +14,18 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 import { DeleteComponentsName } from '@Config/constantMessaging'
 
 import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes } from './constants'
+import { ConfigurationsTabTypes, SMTP_TABLE_COLUMNS } from './constants'
 import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps } from './types'
+import { ConfigurationTableProps, SMTPConfigurationTableRow } from './types'
 
 export const SMTPConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
     const { smtpConfigurationList } = state
@@ -42,40 +43,25 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
         })
     }
 
-    return (
-        <div className="smtp-config-container flex-grow-1">
-            <div className="smtp-config-grid fs-12 fw-6 dc__uppercase cn-7 py-6 dc__gap-16 dc__border-bottom-n1 px-20 dc__position-sticky dc__top-0 bg__primary">
-                <p className="icon-dim-24 m-0" />
-                <p className="dc__truncate-text flex left m-0">Name</p>
-                <p className="dc__truncate-text flex left m-0">Host</p>
-                <p className="dc__truncate-text flex left m-0">Port</p>
-                <p className="dc__truncate-text flex left m-0">Sender&apos; Email</p>
-                <p className="" aria-label="Action" />
-            </div>
-            <div className="flex-grow-1">
-                {smtpConfigurationList.map((smtpConfig) => (
-                    <div
-                        data-testid={`smtp-container-${smtpConfig.name}`}
-                        key={smtpConfig.id}
-                        className="configuration-tab__table-row smtp-config-grid dc__gap-16 py-6 px-20 dc__hover-n50 h-100 dc__visible-hover dc__visible-hover--parent"
-                    >
-                        {getConfigTabIcons(ConfigurationsTabTypes.SMTP)}
-                        <div
-                            data-testid={`smtp-config-name-${smtpConfig.name}`}
-                            className=" dc__truncate-text flexbox dc__gap-8"
-                        >
+    const tableRows = useMemo(
+        () =>
+            smtpConfigurationList.map((smtpConfig) => ({
+                id: `smtp-${smtpConfig.id}`,
+                data: {
+                    icon: getConfigTabIcons(ConfigurationsTabTypes.SMTP),
+                    name: (
+                        <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
                                 text={smtpConfig.name}
                                 onClickHandler={onClickEditRow(smtpConfig.id)}
                             />
                             {renderDefaultTag(smtpConfig.isDefault)}
                         </div>
-                        <InteractiveCellText
-                            text={smtpConfig.host}
-                            dataTestId={`smtp-config-host-${smtpConfig.host}`}
-                        />
-                        <InteractiveCellText text={smtpConfig.port} />
-                        <InteractiveCellText text={smtpConfig.email} />
+                    ),
+                    host: smtpConfig.host,
+                    port: smtpConfig.port.toString(),
+                    email: smtpConfig.email,
+                    actions: (
                         <ConfigTableRowActionButton
                             onClickEditRow={onClickEditRow(smtpConfig.id)}
                             onClickDeleteRow={deleteClickHandler(
@@ -84,9 +70,28 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
                             )}
                             modal={ConfigurationsTabTypes.SMTP}
                         />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                },
+            })),
+        [smtpConfigurationList],
+    )
+
+    return (
+        <Table<SMTPConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+            id="table__smtp-configuration"
+            columns={SMTP_TABLE_COLUMNS}
+            rows={tableRows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No SMTP Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: 'name',
+            }}
+            paginationVariant={undefined}
+            filter={null}
+        />
     )
 }
diff --git a/src/components/notifications/SlackConfigurationTable.tsx b/src/components/notifications/SlackConfigurationTable.tsx
index 0918182f0d..dd90c9ab00 100644
--- a/src/components/notifications/SlackConfigurationTable.tsx
+++ b/src/components/notifications/SlackConfigurationTable.tsx
@@ -16,15 +16,15 @@
 
 import { useHistory } from 'react-router-dom'
 
-import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 import { DeleteComponentsName } from '@Config/constantMessaging'
 
 import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes } from './constants'
+import { ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
 import { getConfigTabIcons } from './notifications.util'
-import { ConfigurationTableProps } from './types'
+import { ConfigurationTableProps, SlackWebhookConfigurationTableRow } from './types'
 
 import './notifications.scss'
 
@@ -45,27 +45,23 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
     }
 
     return (
-        <div className="slack-config-container h-100">
-            <div className="slack-config-grid fs-12 fw-6 dc__uppercase cn-7 py-6 dc__gap-16 dc__border-bottom-n1 px-20  dc__position-sticky dc__top-0 bg__primary">
-                <div className="icon-dim-24" />
-                <p className="flex left m-0 ">Name</p>
-                <p className="flex left m-0 ">Webhook URL</p>
-                <p className="m-0" />
-            </div>
-            <div className="flex-grow-1">
-                {slackConfigurationList.map((slackConfig) => (
-                    <div
-                        key={slackConfig.id}
-                        className="slack-config-grid configuration-tab__table-row dc__gap-16 dc__hover-n50 dc__visible-hover dc__visible-hover--parent"
-                    >
-                        {getConfigTabIcons(ConfigurationsTabTypes.SLACK)}
-                        <div className="flex left dc__gap-8">
+        <Table<SlackWebhookConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+            id="table__slack-configuration"
+            columns={SLACK_WEBHOOK_TABLE_COLUMNS}
+            rows={slackConfigurationList.map((slackConfig) => ({
+                id: `slack-${slackConfig.id}`,
+                data: {
+                    icon: getConfigTabIcons(ConfigurationsTabTypes.SLACK),
+                    name: (
+                        <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
                                 text={slackConfig.slackChannel}
                                 onClickHandler={onClickSlackConfigEdit(slackConfig.id)}
                             />
                         </div>
-                        <InteractiveCellText text={slackConfig.webhookUrl} />
+                    ),
+                    webhookUrl: slackConfig.webhookUrl,
+                    actions: (
                         <ConfigTableRowActionButton
                             onClickEditRow={onClickSlackConfigEdit(slackConfig.id)}
                             onClickDeleteRow={deleteClickHandler(
@@ -74,10 +70,21 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
                             )}
                             modal={ConfigurationsTabTypes.SLACK}
                         />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                },
+            }))}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No Slack Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: 'name',
+            }}
+            paginationVariant={undefined}
+            filter={null}
+        />
     )
 }
 
diff --git a/src/components/notifications/WebhookConfigurationTable.tsx b/src/components/notifications/WebhookConfigurationTable.tsx
index 8eeb174c9e..afae48ebeb 100644
--- a/src/components/notifications/WebhookConfigurationTable.tsx
+++ b/src/components/notifications/WebhookConfigurationTable.tsx
@@ -14,17 +14,18 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 import { DeleteComponentsName } from '@Config/constantMessaging'
 
 import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes } from './constants'
+import { ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
 import { getConfigTabIcons } from './notifications.util'
-import { ConfigurationTableProps } from './types'
+import { ConfigurationTableProps, SlackWebhookConfigurationTableRow } from './types'
 
 export const WebhookConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
     const { webhookConfigurationList } = state
@@ -42,31 +43,22 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
         })
     }
 
-    return (
-        <div className="webhook-config-container">
-            <div className="webhook-config-grid fs-12 fw-6 dc__uppercase cn-7 py-6 dc__gap-16 dc__border-bottom-n1 px-20 dc__position-sticky dc__top-0 bg__primary">
-                <p className="icon-dim-24 m-0" />
-                <p className="flex left m-0">Name</p>
-                <p className="dc__truncate-text flex left m-0">Webhook URL</p>
-                <p className="m-0" />
-            </div>
-            <div className="flex-grow-1">
-                {webhookConfigurationList.map((webhookConfig) => (
-                    <div
-                        key={webhookConfig.id}
-                        className="configuration-tab__table-row webhook-config-grid fs-13 cn-9 dc__gap-16 py-6 px-20 dc__hover-n50 dc__visible-hover dc__visible-hover--parent"
-                        data-testid={`webhook-container-${webhookConfig.name}`}
-                    >
-                        {getConfigTabIcons(ConfigurationsTabTypes.WEBHOOK)}
-                        <InteractiveCellText
-                            text={webhookConfig.name}
-                            onClickHandler={onClickWebhookConfigEdit(webhookConfig.id)}
-                            dataTestId={`webhook-config-name-${webhookConfig.name}`}
-                        />
-                        <InteractiveCellText
-                            text={webhookConfig.webhookUrl}
-                            dataTestId={`webhook-url-${webhookConfig.webhookUrl}`}
-                        />
+    const tableRows = useMemo(
+        () =>
+            webhookConfigurationList.map((webhookConfig) => ({
+                id: `webhook-${webhookConfig.id}`,
+                data: {
+                    icon: getConfigTabIcons(ConfigurationsTabTypes.WEBHOOK),
+                    name: (
+                        <div className="flex left dc__gap-8 py-10">
+                            <InteractiveCellText
+                                text={webhookConfig.name}
+                                onClickHandler={onClickWebhookConfigEdit(webhookConfig.id)}
+                            />
+                        </div>
+                    ),
+                    webhookUrl: webhookConfig.webhookUrl,
+                    actions: (
                         <ConfigTableRowActionButton
                             onClickEditRow={onClickWebhookConfigEdit(webhookConfig.id)}
                             onClickDeleteRow={deleteClickHandler(
@@ -75,9 +67,28 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
                             )}
                             modal={ConfigurationsTabTypes.WEBHOOK}
                         />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                },
+            })),
+        [webhookConfigurationList, deleteClickHandler],
+    )
+
+    return (
+        <Table<SlackWebhookConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+            id="table__webhook-configuration"
+            columns={SLACK_WEBHOOK_TABLE_COLUMNS}
+            rows={tableRows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No Webhook Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: 'name',
+            }}
+            paginationVariant={undefined}
+            filter={null}
+        />
     )
 }
diff --git a/src/components/notifications/constants.ts b/src/components/notifications/constants.ts
index f52e27c2c7..13f710b935 100644
--- a/src/components/notifications/constants.ts
+++ b/src/components/notifications/constants.ts
@@ -16,7 +16,14 @@
 
 // ------------ Configuration Constants ------------
 
-import { SlackFormType } from './types'
+import { FiltersTypeEnum, TableProps } from '@devtron-labs/devtron-fe-common-lib'
+
+import {
+    SESConfigurationTableRow,
+    SlackFormType,
+    SlackWebhookConfigurationTableRow,
+    SMTPConfigurationTableRow,
+} from './types'
 
 export enum ConfigurationsTabTypes {
     SES = 'ses',
@@ -120,3 +127,80 @@ export const DefaultWebhookValidations = {
 }
 
 export const SlackIncomingWebhookUrl = 'https://slack.com/marketplace/A0F7XDUAZ-incoming-webhooks'
+
+// ------------ Common Configuration Constants ------------
+
+export const BASE_CONFIG = [
+    {
+        label: '',
+        field: 'icon',
+        size: { fixed: 24 },
+    },
+    {
+        label: 'Name',
+        field: 'name',
+        isSortable: true,
+        size: null,
+    },
+]
+
+export const ACTION_COLUMN = {
+    label: '',
+    field: 'actions',
+    size: { fixed: 80 },
+}
+
+export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRow, FiltersTypeEnum.STATE, {}>['columns'] = [
+    ...BASE_CONFIG,
+    {
+        label: 'Access Key Id',
+        field: 'accessKeyId',
+        isSortable: true,
+        size: null,
+    },
+    {
+        label: "Sender's Email",
+        field: 'email',
+        isSortable: true,
+        size: null,
+    },
+    ...[ACTION_COLUMN],
+]
+
+export const SMTP_TABLE_COLUMNS: TableProps<SMTPConfigurationTableRow, FiltersTypeEnum.STATE, {}>['columns'] = [
+    ...BASE_CONFIG,
+    {
+        label: 'Host',
+        field: 'host',
+        isSortable: true,
+        size: null,
+    },
+    {
+        label: 'Port',
+        field: 'port',
+        isSortable: true,
+        size: null,
+    },
+    {
+        label: "Sender's Email",
+        field: 'email',
+        isSortable: true,
+        size: null,
+    },
+    ...[ACTION_COLUMN],
+]
+
+export const SLACK_WEBHOOK_TABLE_COLUMNS: TableProps<
+    SlackWebhookConfigurationTableRow,
+    FiltersTypeEnum.STATE,
+    {}
+>['columns'] = [
+    ...BASE_CONFIG,
+    {
+        label: 'Webhook URL',
+        field: 'webhookUrl',
+        isSortable: false,
+        size: null,
+    },
+    ...[ACTION_COLUMN],
+]
diff --git a/src/components/notifications/notifications.util.tsx b/src/components/notifications/notifications.util.tsx
index fbf8364c9f..54111f629d 100644
--- a/src/components/notifications/notifications.util.tsx
+++ b/src/components/notifications/notifications.util.tsx
@@ -22,17 +22,16 @@ import { ReactComponent as CI } from '@Icons/ic-CI.svg'
 import { ReactComponent as CD } from '@Icons/ic-CD.svg'
 import { ReactComponent as Rocket } from '@Icons/ic-paper-rocket.svg'
 import { ReactComponent as Slack } from '@Icons/slack-logo.svg'
-import { ReactComponent as SES } from '@Icons/ic-aws-ses.svg'
 import { ReactComponent as Webhook } from '@Icons/ic-CIWebhook.svg'
-import { ReactComponent as SMTP } from '@Icons/ic-smtp.svg'
 import {
     commonSelectStyles,
     DynamicDataTableHeaderType,
     DynamicDataTableRowDataType,
     getUniqueId,
+    Icon,
+    IconBaseSizeType,
     ToastManager,
     ToastVariantType,
-    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ConfigurationFieldKeys, ConfigurationsTabTypes, ConfigurationTabText } from './constants'
 import { validateEmail } from '../common'
@@ -166,17 +165,17 @@ export const renderPipelineTypeIcon = (row) => {
     return <CD className="icon-dim-20 dc__flip" />
 }
 
-export const getConfigTabIcons = (tab: ConfigurationsTabTypes, size: number = 24) => {
+export const getConfigTabIcons = (tab: ConfigurationsTabTypes, size: IconBaseSizeType = 24) => {
     switch (tab) {
         case ConfigurationsTabTypes.SMTP:
-            return <SMTP className={`icon-dim-${size}`} />
+            return <Icon name="ic-smtp" color={null} size={size} />
         case ConfigurationsTabTypes.SLACK:
-            return <Slack className={`icon-dim-${size}`} />
+            return <Icon name="ic-slack" color={null} size={size} />
         case ConfigurationsTabTypes.WEBHOOK:
-            return <Webhook className={`icon-dim-${size}`} />
+            return <Icon name="ic-webhook" color={null} size={size} />
         case ConfigurationsTabTypes.SES:
         default:
-            return <SES className={`icon-dim-${size}`} />
+            return <Icon name="ic-ses" color={null} size={size} />
     }
 }
 
diff --git a/src/components/notifications/types.tsx b/src/components/notifications/types.tsx
index 092c76f169..a5b4cf68e8 100644
--- a/src/components/notifications/types.tsx
+++ b/src/components/notifications/types.tsx
@@ -303,3 +303,24 @@ export interface NotificationTabState {
     singleDeletedId: number
     disableEdit: boolean
 }
+
+export interface BaseConfigurationTableRow {
+    icon: React.ReactNode
+    name: React.ReactNode
+    actions: React.ReactNode
+}
+
+export interface SESConfigurationTableRow extends BaseConfigurationTableRow {
+    accessKeyId: string
+    email: string
+}
+
+export interface SMTPConfigurationTableRow extends BaseConfigurationTableRow {
+    host: string
+    port: string
+    email: string
+}
+
+export interface SlackWebhookConfigurationTableRow extends BaseConfigurationTableRow {
+    webhookUrl: string
+}

From e4392b5ed788534fd9c948db8eff82c79fe6773e Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Mon, 19 Jan 2026 16:56:35 +0530
Subject: [PATCH 2/7] feat: code refactoring

---
 .../ConfigTableRowActionButton.tsx            | 49 +++++++++++++--
 .../notifications/ConfigurationTables.tsx     |  4 +-
 .../notifications/SESConfigurationTable.tsx   | 54 ++++++++---------
 .../notifications/SMTPConfigurationTable.tsx  | 44 +++++++-------
 .../notifications/SlackConfigurationTable.tsx | 60 ++++++++++---------
 .../WebhookConfigurationTable.tsx             | 35 +++++------
 src/components/notifications/constants.ts     | 20 ++-----
 .../notifications/notifications.util.tsx      | 15 ++++-
 src/components/notifications/types.tsx        | 11 ++--
 src/config/constantMessaging.ts               |  4 --
 10 files changed, 164 insertions(+), 132 deletions(-)

diff --git a/src/components/notifications/ConfigTableRowActionButton.tsx b/src/components/notifications/ConfigTableRowActionButton.tsx
index fb087179d3..71d68cba19 100644
--- a/src/components/notifications/ConfigTableRowActionButton.tsx
+++ b/src/components/notifications/ConfigTableRowActionButton.tsx
@@ -14,11 +14,18 @@
  * limitations under the License.
  */
 
-import { Button, ButtonStyleType, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+import { useHistory } from 'react-router-dom'
 
-import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
-import { Trash } from '@Components/common'
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    useSearchString,
+} from '@devtron-labs/devtron-fe-common-lib'
 
+import { ConfigurationsTabTypes } from './constants'
 import { ConfigTableRowActionButtonProps } from './types'
 
 export const ConfigTableRowActionButton = ({
@@ -33,7 +40,7 @@ export const ConfigTableRowActionButton = ({
                 variant={ButtonVariantType.borderLess}
                 size={ComponentSizeType.xs}
                 dataTestId={`${modal}-config-edit-button`}
-                icon={<Edit />}
+                icon={<Icon name="ic-pencil" color={null} />}
                 ariaLabel="Edit"
                 style={ButtonStyleType.neutral}
             />
@@ -42,10 +49,42 @@ export const ConfigTableRowActionButton = ({
                 variant={ButtonVariantType.borderLess}
                 size={ComponentSizeType.xs}
                 dataTestId={`${modal}-config-delete-button`}
-                icon={<Trash />}
+                icon={<Icon name="ic-delete" color={null} />}
                 ariaLabel="Delete"
                 style={ButtonStyleType.negativeGrey}
             />
         </div>
     </div>
 )
+
+export const ConfigurationRowActionButtonWrapper = ({
+    row,
+    deleteClickHandler,
+    modal,
+}: {
+    row: any
+    deleteClickHandler: (id: number, modal: ConfigurationsTabTypes) => () => void
+    modal: ConfigurationsTabTypes
+}) => {
+    const { searchParams } = useSearchString()
+    const history = useHistory()
+
+    const onClickEditRow = () => () => {
+        const newParams = {
+            ...searchParams,
+            configId: row.id,
+            modal,
+        }
+        history.push({
+            search: new URLSearchParams(newParams).toString(),
+        })
+    }
+
+    return (
+        <ConfigTableRowActionButton
+            onClickEditRow={onClickEditRow()}
+            onClickDeleteRow={deleteClickHandler(row.id, modal)}
+            modal={modal}
+        />
+    )
+}
diff --git a/src/components/notifications/ConfigurationTables.tsx b/src/components/notifications/ConfigurationTables.tsx
index c31905834d..30286c659b 100644
--- a/src/components/notifications/ConfigurationTables.tsx
+++ b/src/components/notifications/ConfigurationTables.tsx
@@ -18,8 +18,6 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import { showError } from '@devtron-labs/devtron-fe-common-lib'
 
-import { DeleteComponentsName } from '@Config/constantMessaging'
-
 import { ConfigurationsTabTypes } from './constants'
 import {
     getSESConfiguration,
@@ -77,7 +75,7 @@ export const ConfigurationTables = ({ activeTab, state, setState }: Configuratio
                     ...state,
                     webhookConfig: {
                         ...result,
-                        channel: DeleteComponentsName.WebhookConfigurationTab,
+                        channel: ConfigurationsTabTypes.WEBHOOK,
                     },
                     confirmation: true,
                     activeTab: ConfigurationsTabTypes.WEBHOOK,
diff --git a/src/components/notifications/SESConfigurationTable.tsx b/src/components/notifications/SESConfigurationTable.tsx
index 2781997760..5a8b6bc4db 100644
--- a/src/components/notifications/SESConfigurationTable.tsx
+++ b/src/components/notifications/SESConfigurationTable.tsx
@@ -17,14 +17,18 @@
 import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { FiltersTypeEnum, Icon, InteractiveCellText, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    FiltersTypeEnum,
+    InteractiveCellText,
+    PaginationEnum,
+    Table,
+    useSearchString,
+} from '@devtron-labs/devtron-fe-common-lib'
 
-import { DeleteComponentsName } from '@Config/constantMessaging'
-
-import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes, SES_TABLE_COLUMNS } from './constants'
+import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
+import { BASE_CONFIG, ConfigurationsTabTypes, SES_TABLE_COLUMNS } from './constants'
 import { renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps, SESConfigurationTableRow } from './types'
+import { ConfigurationTableProps, SESConfigurationTableRowType } from './types'
 
 import './notifications.scss'
 
@@ -32,7 +36,7 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
     const { searchParams } = useSearchString()
     const history = useHistory()
 
-    const onClickSESConfigEdit = (id: number) => () => {
+    const onClickEditRow = (id: number) => () => {
         const newParams = {
             ...searchParams,
             configId: id.toString(),
@@ -46,37 +50,23 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
     const tableRows = useMemo(
         () =>
             state.sesConfigurationList.map((sesConfig) => ({
-                id: `ses-${sesConfig.id}`,
+                id: `${sesConfig.id}`,
                 data: {
-                    icon: <Icon name="ic-ses" color={null} size={null} />,
                     name: (
                         <div className="flex left dc__gap-8 py-10">
-                            <InteractiveCellText
-                                text={sesConfig.name}
-                                onClickHandler={onClickSESConfigEdit(sesConfig.id)}
-                            />
+                            <InteractiveCellText text={sesConfig.name} onClickHandler={onClickEditRow(sesConfig.id)} />
                             {renderDefaultTag(sesConfig.isDefault)}
                         </div>
                     ),
                     accessKeyId: sesConfig.accessKeyId,
                     email: sesConfig.email,
-                    actions: (
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickSESConfigEdit(sesConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                sesConfig.id,
-                                DeleteComponentsName.SesConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.SES}
-                        />
-                    ),
                 },
             })),
-        [state.sesConfigurationList, deleteClickHandler],
+        [state.sesConfigurationList],
     )
 
     return (
-        <Table<SESConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+        <Table<SESConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__ses-configuration"
             columns={SES_TABLE_COLUMNS}
             rows={tableRows}
@@ -87,10 +77,20 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             additionalFilterProps={{
-                initialSortKey: 'name',
+                initialSortKey: BASE_CONFIG[0].field,
             }}
-            paginationVariant={undefined}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
             filter={null}
+            rowStartIconConfig={{
+                name: 'ic-ses',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SES }}
         />
     )
 }
diff --git a/src/components/notifications/SMTPConfigurationTable.tsx b/src/components/notifications/SMTPConfigurationTable.tsx
index 2b7329830c..13e637817a 100644
--- a/src/components/notifications/SMTPConfigurationTable.tsx
+++ b/src/components/notifications/SMTPConfigurationTable.tsx
@@ -17,25 +17,24 @@
 import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, PaginationEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
-import { DeleteComponentsName } from '@Config/constantMessaging'
 
-import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes, SMTP_TABLE_COLUMNS } from './constants'
-import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps, SMTPConfigurationTableRow } from './types'
+import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
+import { BASE_CONFIG, ConfigurationsTabTypes, SMTP_TABLE_COLUMNS } from './constants'
+import { renderDefaultTag } from './notifications.util'
+import { ConfigurationTableProps, SMTPConfigurationTableRowType } from './types'
 
 export const SMTPConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
     const { smtpConfigurationList } = state
     const { searchParams } = useSearchString()
     const history = useHistory()
 
-    const onClickEditRow = (configId) => () => {
+    const onClickEditRow = (id: number) => () => {
         const newParams = {
             ...searchParams,
-            configId: configId.toString(),
+            configId: id.toString(),
             modal: ConfigurationsTabTypes.SMTP,
         }
         history.push({
@@ -46,9 +45,8 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
     const tableRows = useMemo(
         () =>
             smtpConfigurationList.map((smtpConfig) => ({
-                id: `smtp-${smtpConfig.id}`,
+                id: `${smtpConfig.id}`,
                 data: {
-                    icon: getConfigTabIcons(ConfigurationsTabTypes.SMTP),
                     name: (
                         <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
@@ -61,23 +59,13 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
                     host: smtpConfig.host,
                     port: smtpConfig.port.toString(),
                     email: smtpConfig.email,
-                    actions: (
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickEditRow(smtpConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                smtpConfig.id,
-                                DeleteComponentsName.SMTPConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.SMTP}
-                        />
-                    ),
                 },
             })),
         [smtpConfigurationList],
     )
 
     return (
-        <Table<SMTPConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+        <Table<SMTPConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__smtp-configuration"
             columns={SMTP_TABLE_COLUMNS}
             rows={tableRows}
@@ -88,10 +76,20 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             additionalFilterProps={{
-                initialSortKey: 'name',
+                initialSortKey: BASE_CONFIG[0].field,
             }}
-            paginationVariant={undefined}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
             filter={null}
+            rowStartIconConfig={{
+                name: 'ic-smtp',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SMTP }}
         />
     )
 }
diff --git a/src/components/notifications/SlackConfigurationTable.tsx b/src/components/notifications/SlackConfigurationTable.tsx
index dd90c9ab00..6b0e93bf06 100644
--- a/src/components/notifications/SlackConfigurationTable.tsx
+++ b/src/components/notifications/SlackConfigurationTable.tsx
@@ -14,17 +14,16 @@
  * limitations under the License.
  */
 
+import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, PaginationEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
-import { DeleteComponentsName } from '@Config/constantMessaging'
 
-import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
-import { getConfigTabIcons } from './notifications.util'
-import { ConfigurationTableProps, SlackWebhookConfigurationTableRow } from './types'
+import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
+import { BASE_CONFIG, ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
+import { ConfigurationTableProps, SlackWebhookConfigurationTableRowType } from './types'
 
 import './notifications.scss'
 
@@ -33,7 +32,7 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
     const history = useHistory()
     const { slackConfigurationList } = state
 
-    const onClickSlackConfigEdit = (id: number) => () => {
+    const onClickEditRow = (id: number) => () => {
         const newParams = {
             ...searchParams,
             configId: id.toString(),
@@ -44,35 +43,30 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
         })
     }
 
-    return (
-        <Table<SlackWebhookConfigurationTableRow, FiltersTypeEnum.STATE, {}>
-            id="table__slack-configuration"
-            columns={SLACK_WEBHOOK_TABLE_COLUMNS}
-            rows={slackConfigurationList.map((slackConfig) => ({
-                id: `slack-${slackConfig.id}`,
+    const tableRow = useMemo(
+        () =>
+            slackConfigurationList.map((slackConfig) => ({
+                id: `${slackConfig.id}`,
                 data: {
-                    icon: getConfigTabIcons(ConfigurationsTabTypes.SLACK),
                     name: (
                         <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
                                 text={slackConfig.slackChannel}
-                                onClickHandler={onClickSlackConfigEdit(slackConfig.id)}
+                                onClickHandler={onClickEditRow(slackConfig.id)}
                             />
                         </div>
                     ),
                     webhookUrl: slackConfig.webhookUrl,
-                    actions: (
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickSlackConfigEdit(slackConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                slackConfig.id,
-                                DeleteComponentsName.SlackConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.SLACK}
-                        />
-                    ),
                 },
-            }))}
+            })),
+        [],
+    )
+
+    return (
+        <Table<SlackWebhookConfigurationTableRowType, FiltersTypeEnum.STATE>
+            id="table__slack-configuration"
+            columns={SLACK_WEBHOOK_TABLE_COLUMNS}
+            rows={tableRow}
             emptyStateConfig={{
                 noRowsConfig: {
                     title: 'No Slack Configurations Found',
@@ -80,10 +74,20 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             additionalFilterProps={{
-                initialSortKey: 'name',
+                initialSortKey: BASE_CONFIG[0].field,
             }}
-            paginationVariant={undefined}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
             filter={null}
+            rowStartIconConfig={{
+                name: 'ic-slack',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SLACK }}
         />
     )
 }
diff --git a/src/components/notifications/WebhookConfigurationTable.tsx b/src/components/notifications/WebhookConfigurationTable.tsx
index afae48ebeb..2c5d672a38 100644
--- a/src/components/notifications/WebhookConfigurationTable.tsx
+++ b/src/components/notifications/WebhookConfigurationTable.tsx
@@ -17,15 +17,13 @@
 import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { FiltersTypeEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { FiltersTypeEnum, PaginationEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
 
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
-import { DeleteComponentsName } from '@Config/constantMessaging'
 
-import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
+import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
 import { ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
-import { getConfigTabIcons } from './notifications.util'
-import { ConfigurationTableProps, SlackWebhookConfigurationTableRow } from './types'
+import { ConfigurationTableProps, SlackWebhookConfigurationTableRowType } from './types'
 
 export const WebhookConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
     const { webhookConfigurationList } = state
@@ -46,9 +44,8 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
     const tableRows = useMemo(
         () =>
             webhookConfigurationList.map((webhookConfig) => ({
-                id: `webhook-${webhookConfig.id}`,
+                id: `${webhookConfig.id}`,
                 data: {
-                    icon: getConfigTabIcons(ConfigurationsTabTypes.WEBHOOK),
                     name: (
                         <div className="flex left dc__gap-8 py-10">
                             <InteractiveCellText
@@ -58,23 +55,13 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
                         </div>
                     ),
                     webhookUrl: webhookConfig.webhookUrl,
-                    actions: (
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickWebhookConfigEdit(webhookConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                webhookConfig.id,
-                                DeleteComponentsName.WebhookConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.WEBHOOK}
-                        />
-                    ),
                 },
             })),
         [webhookConfigurationList, deleteClickHandler],
     )
 
     return (
-        <Table<SlackWebhookConfigurationTableRow, FiltersTypeEnum.STATE, {}>
+        <Table<SlackWebhookConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__webhook-configuration"
             columns={SLACK_WEBHOOK_TABLE_COLUMNS}
             rows={tableRows}
@@ -87,8 +74,18 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
             additionalFilterProps={{
                 initialSortKey: 'name',
             }}
-            paginationVariant={undefined}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
             filter={null}
+            rowStartIconConfig={{
+                name: 'ic-webhook-config',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.WEBHOOK }}
         />
     )
 }
diff --git a/src/components/notifications/constants.ts b/src/components/notifications/constants.ts
index 13f710b935..466a8576d6 100644
--- a/src/components/notifications/constants.ts
+++ b/src/components/notifications/constants.ts
@@ -19,10 +19,10 @@
 import { FiltersTypeEnum, TableProps } from '@devtron-labs/devtron-fe-common-lib'
 
 import {
-    SESConfigurationTableRow,
+    SESConfigurationTableRowType,
     SlackFormType,
-    SlackWebhookConfigurationTableRow,
-    SMTPConfigurationTableRow,
+    SlackWebhookConfigurationTableRowType,
+    SMTPConfigurationTableRowType,
 } from './types'
 
 export enum ConfigurationsTabTypes {
@@ -131,11 +131,6 @@ export const SlackIncomingWebhookUrl = 'https://slack.com/marketplace/A0F7XDUAZ-
 // ------------ Common Configuration Constants ------------
 
 export const BASE_CONFIG = [
-    {
-        label: '',
-        field: 'icon',
-        size: { fixed: 24 },
-    },
     {
         label: 'Name',
         field: 'name',
@@ -150,7 +145,7 @@ export const ACTION_COLUMN = {
     size: { fixed: 80 },
 }
 
-export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRow, FiltersTypeEnum.STATE, {}>['columns'] = [
+export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRowType, FiltersTypeEnum.STATE, {}>['columns'] = [
     ...BASE_CONFIG,
     {
         label: 'Access Key Id',
@@ -164,10 +159,9 @@ export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRow, FiltersType
         isSortable: true,
         size: null,
     },
-    ...[ACTION_COLUMN],
 ]
 
-export const SMTP_TABLE_COLUMNS: TableProps<SMTPConfigurationTableRow, FiltersTypeEnum.STATE, {}>['columns'] = [
+export const SMTP_TABLE_COLUMNS: TableProps<SMTPConfigurationTableRowType, FiltersTypeEnum.STATE, {}>['columns'] = [
     ...BASE_CONFIG,
     {
         label: 'Host',
@@ -187,11 +181,10 @@ export const SMTP_TABLE_COLUMNS: TableProps<SMTPConfigurationTableRow, FiltersTy
         isSortable: true,
         size: null,
     },
-    ...[ACTION_COLUMN],
 ]
 
 export const SLACK_WEBHOOK_TABLE_COLUMNS: TableProps<
-    SlackWebhookConfigurationTableRow,
+    SlackWebhookConfigurationTableRowType,
     FiltersTypeEnum.STATE,
     {}
 >['columns'] = [
@@ -202,5 +195,4 @@ export const SLACK_WEBHOOK_TABLE_COLUMNS: TableProps<
         isSortable: false,
         size: null,
     },
-    ...[ACTION_COLUMN],
 ]
diff --git a/src/components/notifications/notifications.util.tsx b/src/components/notifications/notifications.util.tsx
index 54111f629d..41e182c8ba 100644
--- a/src/components/notifications/notifications.util.tsx
+++ b/src/components/notifications/notifications.util.tsx
@@ -35,7 +35,13 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ConfigurationFieldKeys, ConfigurationsTabTypes, ConfigurationTabText } from './constants'
 import { validateEmail } from '../common'
-import { FormError, SESFormType, SMTPFormType, WebhookDataRowType, WebhookHeaderKeyType } from './types'
+import {
+    FormError,
+    SESFormType,
+    SMTPFormType,
+    WebhookDataRowType,
+    WebhookHeaderKeyType,
+} from './types'
 import { REQUIRED_FIELD_MSG } from '@Config/constantMessaging'
 
 export const multiSelectStyles = {
@@ -223,8 +229,6 @@ export const getSMTPDefaultConfiguration = (shouldBeDefault: boolean): SMTPFormT
     isLoading: false,
 })
 
-
-
 export const renderDefaultTag = (isDefault: boolean) => {
     if (isDefault) {
         return <span className="br-4 fs-12 px-6 fw-5 lh-16 cb-7 bcb-1 py-2">Default</span>
@@ -352,3 +356,8 @@ export const getValidationFormConfig = (formConfig) => {
     )
     return { allValid, formValidations }
 }
+
+export const CommonIconComponent = (tab: ConfigurationsTabTypes) => (
+    <div className="flex py-12">{getConfigTabIcons(tab)}</div>
+)
+
diff --git a/src/components/notifications/types.tsx b/src/components/notifications/types.tsx
index a5b4cf68e8..1d657c1b83 100644
--- a/src/components/notifications/types.tsx
+++ b/src/components/notifications/types.tsx
@@ -304,23 +304,22 @@ export interface NotificationTabState {
     disableEdit: boolean
 }
 
-export interface BaseConfigurationTableRow {
-    icon: React.ReactNode
+export interface BaseConfigurationTableRowType {
     name: React.ReactNode
-    actions: React.ReactNode
+    actions?: React.ReactNode
 }
 
-export interface SESConfigurationTableRow extends BaseConfigurationTableRow {
+export interface SESConfigurationTableRowType extends BaseConfigurationTableRowType {
     accessKeyId: string
     email: string
 }
 
-export interface SMTPConfigurationTableRow extends BaseConfigurationTableRow {
+export interface SMTPConfigurationTableRowType extends BaseConfigurationTableRowType {
     host: string
     port: string
     email: string
 }
 
-export interface SlackWebhookConfigurationTableRow extends BaseConfigurationTableRow {
+export interface SlackWebhookConfigurationTableRowType extends BaseConfigurationTableRowType {
     webhookUrl: string
 }
diff --git a/src/config/constantMessaging.ts b/src/config/constantMessaging.ts
index 7b4fab911f..152c7b03b4 100644
--- a/src/config/constantMessaging.ts
+++ b/src/config/constantMessaging.ts
@@ -67,10 +67,6 @@ export const enum DeleteComponentsName {
     LinkedBuildPipeline = 'linked build pipeline',
     MaterialView = 'git repository',
     Node = 'node',
-    SlackConfigurationTab = 'slack',
-    SesConfigurationTab = 'ses',
-    SMTPConfigurationTab = 'smtp',
-    WebhookConfigurationTab = 'webhook',
     Preset = 'preset value',
     Project = 'project',
     Override = 'override',

From 94cda5a090362fbb693edaa19daa4662cb3a52e7 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Mon, 19 Jan 2026 16:57:55 +0530
Subject: [PATCH 3/7] chore: unnecessary dependency removed

---
 src/components/notifications/WebhookConfigurationTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notifications/WebhookConfigurationTable.tsx b/src/components/notifications/WebhookConfigurationTable.tsx
index 2c5d672a38..dfe3f4864c 100644
--- a/src/components/notifications/WebhookConfigurationTable.tsx
+++ b/src/components/notifications/WebhookConfigurationTable.tsx
@@ -57,7 +57,7 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
                     webhookUrl: webhookConfig.webhookUrl,
                 },
             })),
-        [webhookConfigurationList, deleteClickHandler],
+        [webhookConfigurationList],
     )
 
     return (

From 6e5adafab609fea2b2f14a336cd2092b6d4f4ed7 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Tue, 20 Jan 2026 10:10:42 +0530
Subject: [PATCH 4/7] chore: code refactoring

---
 src/components/notifications/SlackConfigurationTable.tsx   | 2 +-
 src/components/notifications/WebhookConfigurationTable.tsx | 4 ++--
 src/components/notifications/constants.ts                  | 7 -------
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/notifications/SlackConfigurationTable.tsx b/src/components/notifications/SlackConfigurationTable.tsx
index 6b0e93bf06..77d06dacc0 100644
--- a/src/components/notifications/SlackConfigurationTable.tsx
+++ b/src/components/notifications/SlackConfigurationTable.tsx
@@ -59,7 +59,7 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
                     webhookUrl: slackConfig.webhookUrl,
                 },
             })),
-        [],
+        [state.slackConfigurationList],
     )
 
     return (
diff --git a/src/components/notifications/WebhookConfigurationTable.tsx b/src/components/notifications/WebhookConfigurationTable.tsx
index dfe3f4864c..02e854393c 100644
--- a/src/components/notifications/WebhookConfigurationTable.tsx
+++ b/src/components/notifications/WebhookConfigurationTable.tsx
@@ -22,7 +22,7 @@ import { FiltersTypeEnum, PaginationEnum, Table, useSearchString } from '@devtro
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 
 import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
-import { ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
+import { BASE_CONFIG, ConfigurationsTabTypes, SLACK_WEBHOOK_TABLE_COLUMNS } from './constants'
 import { ConfigurationTableProps, SlackWebhookConfigurationTableRowType } from './types'
 
 export const WebhookConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
@@ -72,7 +72,7 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
             }}
             filtersVariant={FiltersTypeEnum.STATE}
             additionalFilterProps={{
-                initialSortKey: 'name',
+                initialSortKey: BASE_CONFIG[0].field,
             }}
             paginationVariant={PaginationEnum.NOT_PAGINATED}
             filter={null}
diff --git a/src/components/notifications/constants.ts b/src/components/notifications/constants.ts
index 466a8576d6..7b885eccca 100644
--- a/src/components/notifications/constants.ts
+++ b/src/components/notifications/constants.ts
@@ -134,7 +134,6 @@ export const BASE_CONFIG = [
     {
         label: 'Name',
         field: 'name',
-        isSortable: true,
         size: null,
     },
 ]
@@ -150,13 +149,11 @@ export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRowType, Filters
     {
         label: 'Access Key Id',
         field: 'accessKeyId',
-        isSortable: true,
         size: null,
     },
     {
         label: "Sender's Email",
         field: 'email',
-        isSortable: true,
         size: null,
     },
 ]
@@ -166,19 +163,16 @@ export const SMTP_TABLE_COLUMNS: TableProps<SMTPConfigurationTableRowType, Filte
     {
         label: 'Host',
         field: 'host',
-        isSortable: true,
         size: null,
     },
     {
         label: 'Port',
         field: 'port',
-        isSortable: true,
         size: null,
     },
     {
         label: "Sender's Email",
         field: 'email',
-        isSortable: true,
         size: null,
     },
 ]
@@ -192,7 +186,6 @@ export const SLACK_WEBHOOK_TABLE_COLUMNS: TableProps<
     {
         label: 'Webhook URL',
         field: 'webhookUrl',
-        isSortable: false,
         size: null,
     },
 ]

From be8ad1d439596309b73450fe1ad1fdeff2669e40 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Tue, 20 Jan 2026 12:33:12 +0530
Subject: [PATCH 5/7] chore: unnecessary type removed

---
 src/components/notifications/ConfigTableRowActionButton.tsx | 2 +-
 src/components/notifications/types.tsx                      | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/notifications/ConfigTableRowActionButton.tsx b/src/components/notifications/ConfigTableRowActionButton.tsx
index 71d68cba19..447c67f9a7 100644
--- a/src/components/notifications/ConfigTableRowActionButton.tsx
+++ b/src/components/notifications/ConfigTableRowActionButton.tsx
@@ -83,7 +83,7 @@ export const ConfigurationRowActionButtonWrapper = ({
     return (
         <ConfigTableRowActionButton
             onClickEditRow={onClickEditRow()}
-            onClickDeleteRow={deleteClickHandler(row.id, modal)}
+            onClickDeleteRow={deleteClickHandler(Number(row.id), modal)}
             modal={modal}
         />
     )
diff --git a/src/components/notifications/types.tsx b/src/components/notifications/types.tsx
index 1d657c1b83..cf35c12a69 100644
--- a/src/components/notifications/types.tsx
+++ b/src/components/notifications/types.tsx
@@ -306,7 +306,6 @@ export interface NotificationTabState {
 
 export interface BaseConfigurationTableRowType {
     name: React.ReactNode
-    actions?: React.ReactNode
 }
 
 export interface SESConfigurationTableRowType extends BaseConfigurationTableRowType {

From b334f73dea77d98be8b6164b3e0cb7d50f11ca53 Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Tue, 20 Jan 2026 12:45:31 +0530
Subject: [PATCH 6/7] chore: unnecessarycode removed

---
 src/components/notifications/constants.ts           | 6 ------
 src/components/notifications/notifications.util.tsx | 4 ----
 2 files changed, 10 deletions(-)

diff --git a/src/components/notifications/constants.ts b/src/components/notifications/constants.ts
index 7b885eccca..e10d669e93 100644
--- a/src/components/notifications/constants.ts
+++ b/src/components/notifications/constants.ts
@@ -138,12 +138,6 @@ export const BASE_CONFIG = [
     },
 ]
 
-export const ACTION_COLUMN = {
-    label: '',
-    field: 'actions',
-    size: { fixed: 80 },
-}
-
 export const SES_TABLE_COLUMNS: TableProps<SESConfigurationTableRowType, FiltersTypeEnum.STATE, {}>['columns'] = [
     ...BASE_CONFIG,
     {
diff --git a/src/components/notifications/notifications.util.tsx b/src/components/notifications/notifications.util.tsx
index 41e182c8ba..8207368621 100644
--- a/src/components/notifications/notifications.util.tsx
+++ b/src/components/notifications/notifications.util.tsx
@@ -357,7 +357,3 @@ export const getValidationFormConfig = (formConfig) => {
     return { allValid, formValidations }
 }
 
-export const CommonIconComponent = (tab: ConfigurationsTabTypes) => (
-    <div className="flex py-12">{getConfigTabIcons(tab)}</div>
-)
-

From 894e44b0d0b289ec0927056db2db6f3165dcedca Mon Sep 17 00:00:00 2001
From: shivani170 <shivani@devtron.ai>
Date: Wed, 21 Jan 2026 13:09:06 +0530
Subject: [PATCH 7/7] chore: enter click on configuration

---
 src/components/notifications/SESConfigurationTable.tsx     | 5 +++++
 src/components/notifications/SMTPConfigurationTable.tsx    | 5 +++++
 src/components/notifications/SlackConfigurationTable.tsx   | 5 +++++
 src/components/notifications/WebhookConfigurationTable.tsx | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/src/components/notifications/SESConfigurationTable.tsx b/src/components/notifications/SESConfigurationTable.tsx
index 5a8b6bc4db..e26b221d20 100644
--- a/src/components/notifications/SESConfigurationTable.tsx
+++ b/src/components/notifications/SESConfigurationTable.tsx
@@ -65,6 +65,10 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
         [state.sesConfigurationList],
     )
 
+    const onRowClick = (rowData) => {
+        onClickEditRow(Number(rowData.id))()
+    }
+
     return (
         <Table<SESConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__ses-configuration"
@@ -91,6 +95,7 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
                 Component: ConfigurationRowActionButtonWrapper,
             }}
             additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SES }}
+            onRowClick={onRowClick}
         />
     )
 }
diff --git a/src/components/notifications/SMTPConfigurationTable.tsx b/src/components/notifications/SMTPConfigurationTable.tsx
index 13e637817a..525d1a0c49 100644
--- a/src/components/notifications/SMTPConfigurationTable.tsx
+++ b/src/components/notifications/SMTPConfigurationTable.tsx
@@ -64,6 +64,10 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
         [smtpConfigurationList],
     )
 
+    const onRowClick = (rowData) => {
+        onClickEditRow(Number(rowData.id))()
+    }
+
     return (
         <Table<SMTPConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__smtp-configuration"
@@ -90,6 +94,7 @@ export const SMTPConfigurationTable = ({ state, deleteClickHandler }: Configurat
                 Component: ConfigurationRowActionButtonWrapper,
             }}
             additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SMTP }}
+            onRowClick={onRowClick}
         />
     )
 }
diff --git a/src/components/notifications/SlackConfigurationTable.tsx b/src/components/notifications/SlackConfigurationTable.tsx
index 77d06dacc0..b791de075c 100644
--- a/src/components/notifications/SlackConfigurationTable.tsx
+++ b/src/components/notifications/SlackConfigurationTable.tsx
@@ -62,6 +62,10 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
         [state.slackConfigurationList],
     )
 
+    const onRowClick = (rowData) => {
+        onClickEditRow(Number(rowData.id))()
+    }
+
     return (
         <Table<SlackWebhookConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__slack-configuration"
@@ -88,6 +92,7 @@ const SlackConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTab
                 Component: ConfigurationRowActionButtonWrapper,
             }}
             additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SLACK }}
+            onRowClick={onRowClick}
         />
     )
 }
diff --git a/src/components/notifications/WebhookConfigurationTable.tsx b/src/components/notifications/WebhookConfigurationTable.tsx
index 02e854393c..685858209c 100644
--- a/src/components/notifications/WebhookConfigurationTable.tsx
+++ b/src/components/notifications/WebhookConfigurationTable.tsx
@@ -60,6 +60,10 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
         [webhookConfigurationList],
     )
 
+    const onRowClick = (rowData) => {
+        onClickWebhookConfigEdit(Number(rowData.id))()
+    }
+
     return (
         <Table<SlackWebhookConfigurationTableRowType, FiltersTypeEnum.STATE>
             id="table__webhook-configuration"
@@ -86,6 +90,7 @@ export const WebhookConfigurationTable = ({ state, deleteClickHandler }: Configu
                 Component: ConfigurationRowActionButtonWrapper,
             }}
             additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.WEBHOOK }}
+            onRowClick={onRowClick}
         />
     )
 }