feat: Notification cofiguration table replacement

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(Number(row.id), modal)}
+            modal={modal}
+        />
+    )
+}

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,

src/components/notifications/SESConfigurationTable.tsx

@@ -14,25 +14,29 @@
  * 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,
+    InteractiveCellText,
+    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 } from './constants'
-import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps } from './types'
+import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
+import { BASE_CONFIG, ConfigurationsTabTypes, SES_TABLE_COLUMNS } from './constants'
+import { renderDefaultTag } from './notifications.util'
+import { ConfigurationTableProps, SESConfigurationTableRowType } from './types'
 
 import './notifications.scss'
 
 const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
     const { searchParams } = useSearchString()
     const history = useHistory()
 
-    const onClickSESConfigEdit = (id: number) => () => {
+    const onClickEditRow = (id: number) => () => {
         const newParams = {
             ...searchParams,
             configId: id.toString(),
@@ -43,43 +47,56 @@ 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">
-                            <InteractiveCellText
-                                text={sesConfig.name}
-                                onClickHandler={onClickSESConfigEdit(sesConfig.id)}
-                            />
+    const tableRows = useMemo(
+        () =>
+            state.sesConfigurationList.map((sesConfig) => ({
+                id: `${sesConfig.id}`,
+                data: {
+                    name: (
+                        <div className="flex left dc__gap-8 py-10">
+                            <InteractiveCellText text={sesConfig.name} onClickHandler={onClickEditRow(sesConfig.id)} />
                             {renderDefaultTag(sesConfig.isDefault)}
                         </div>
-                        <InteractiveCellText text={sesConfig.accessKeyId} />
-                        <InteractiveCellText text={sesConfig.email} />
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickSESConfigEdit(sesConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                sesConfig.id,
-                                DeleteComponentsName.SesConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.SES}
-                        />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                    accessKeyId: sesConfig.accessKeyId,
+                    email: sesConfig.email,
+                },
+            })),
+        [state.sesConfigurationList],
+    )
+
+    const onRowClick = (rowData) => {
+        onClickEditRow(Number(rowData.id))()
+    }
+
+    return (
+        <Table<SESConfigurationTableRowType, FiltersTypeEnum.STATE>
+            id="table__ses-configuration"
+            columns={SES_TABLE_COLUMNS}
+            rows={tableRows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No SES Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: BASE_CONFIG[0].field,
+            }}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
+            filter={null}
+            rowStartIconConfig={{
+                name: 'ic-ses',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SES }}
+            onRowClick={onRowClick}
+        />
     )
 }
 

src/components/notifications/SMTPConfigurationTable.tsx

@@ -14,79 +14,87 @@
  * 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, 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 } from './constants'
-import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
-import { ConfigurationTableProps } 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({
             search: new URLSearchParams(newParams).toString(),
         })
     }
 
-    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: `${smtpConfig.id}`,
+                data: {
+                    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} />
-                        <ConfigTableRowActionButton
-                            onClickEditRow={onClickEditRow(smtpConfig.id)}
-                            onClickDeleteRow={deleteClickHandler(
-                                smtpConfig.id,
-                                DeleteComponentsName.SMTPConfigurationTab,
-                            )}
-                            modal={ConfigurationsTabTypes.SMTP}
-                        />
-                    </div>
-                ))}
-            </div>
-        </div>
+                    ),
+                    host: smtpConfig.host,
+                    port: smtpConfig.port.toString(),
+                    email: smtpConfig.email,
+                },
+            })),
+        [smtpConfigurationList],
+    )
+
+    const onRowClick = (rowData) => {
+        onClickEditRow(Number(rowData.id))()
+    }
+
+    return (
+        <Table<SMTPConfigurationTableRowType, FiltersTypeEnum.STATE>
+            id="table__smtp-configuration"
+            columns={SMTP_TABLE_COLUMNS}
+            rows={tableRows}
+            emptyStateConfig={{
+                noRowsConfig: {
+                    title: 'No SMTP Configurations Found',
+                },
+            }}
+            filtersVariant={FiltersTypeEnum.STATE}
+            additionalFilterProps={{
+                initialSortKey: BASE_CONFIG[0].field,
+            }}
+            paginationVariant={PaginationEnum.NOT_PAGINATED}
+            filter={null}
+            rowStartIconConfig={{
+                name: 'ic-smtp',
+                color: null,
+                size: 24,
+            }}
+            rowActionOnHoverConfig={{
+                width: 100,
+                Component: ConfigurationRowActionButtonWrapper,
+            }}
+            additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SMTP }}
+            onRowClick={onRowClick}
+        />
     )
 }