Skip to content

Commit 8eb6352

Browse files
shivani170shivani170
authored
Merge pull request #3038 from devtron-labs/feat/table-replace
feat: Notification cofiguration table replacement
2 parents ce65343 + 894e44b commit 8eb6352

10 files changed

Lines changed: 368 additions & 195 deletions

‎src/components/notifications/ConfigTableRowActionButton.tsx‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,18 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { Button, ButtonStyleType, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
17+
import { useHistory } from 'react-router-dom'
1818

19-
import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
20-
import { Trash } from '@Components/common'
19+
import {
20+
Button,
21+
ButtonStyleType,
22+
ButtonVariantType,
23+
ComponentSizeType,
24+
Icon,
25+
useSearchString,
26+
} from '@devtron-labs/devtron-fe-common-lib'
2127

28+
import { ConfigurationsTabTypes } from './constants'
2229
import { ConfigTableRowActionButtonProps } from './types'
2330

2431
export const ConfigTableRowActionButton = ({
@@ -33,7 +40,7 @@ export const ConfigTableRowActionButton = ({
3340
variant={ButtonVariantType.borderLess}
3441
size={ComponentSizeType.xs}
3542
dataTestId={`${modal}-config-edit-button`}
36-
icon={<Edit />}
43+
icon={<Icon name="ic-pencil" color={null} />}
3744
ariaLabel="Edit"
3845
style={ButtonStyleType.neutral}
3946
/>
@@ -42,10 +49,42 @@ export const ConfigTableRowActionButton = ({
4249
variant={ButtonVariantType.borderLess}
4350
size={ComponentSizeType.xs}
4451
dataTestId={`${modal}-config-delete-button`}
45-
icon={<Trash />}
52+
icon={<Icon name="ic-delete" color={null} />}
4653
ariaLabel="Delete"
4754
style={ButtonStyleType.negativeGrey}
4855
/>
4956
</div>
5057
</div>
5158
)
59+
60+
export const ConfigurationRowActionButtonWrapper = ({
61+
row,
62+
deleteClickHandler,
63+
modal,
64+
}: {
65+
row: any
66+
deleteClickHandler: (id: number, modal: ConfigurationsTabTypes) => () => void
67+
modal: ConfigurationsTabTypes
68+
}) => {
69+
const { searchParams } = useSearchString()
70+
const history = useHistory()
71+
72+
const onClickEditRow = () => () => {
73+
const newParams = {
74+
...searchParams,
75+
configId: row.id,
76+
modal,
77+
}
78+
history.push({
79+
search: new URLSearchParams(newParams).toString(),
80+
})
81+
}
82+
83+
return (
84+
<ConfigTableRowActionButton
85+
onClickEditRow={onClickEditRow()}
86+
onClickDeleteRow={deleteClickHandler(Number(row.id), modal)}
87+
modal={modal}
88+
/>
89+
)
90+
}

‎src/components/notifications/ConfigurationTables.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
1818

1919
import { showError } from '@devtron-labs/devtron-fe-common-lib'
2020

21-
import { DeleteComponentsName } from '@Config/constantMessaging'
22-
2321
import { ConfigurationsTabTypes } from './constants'
2422
import {
2523
getSESConfiguration,
@@ -77,7 +75,7 @@ export const ConfigurationTables = ({ activeTab, state, setState }: Configuratio
7775
...state,
7876
webhookConfig: {
7977
...result,
80-
channel: DeleteComponentsName.WebhookConfigurationTab,
78+
channel: ConfigurationsTabTypes.WEBHOOK,
8179
},
8280
confirmation: true,
8381
activeTab: ConfigurationsTabTypes.WEBHOOK,

‎src/components/notifications/SESConfigurationTable.tsx‎

Lines changed: 61 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,29 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { useMemo } from 'react'
1718
import { useHistory } from 'react-router-dom'
1819

19-
import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
20+
import {
21+
FiltersTypeEnum,
22+
InteractiveCellText,
23+
PaginationEnum,
24+
Table,
25+
useSearchString,
26+
} from '@devtron-labs/devtron-fe-common-lib'
2027

21-
import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
22-
import { DeleteComponentsName } from '@Config/constantMessaging'
23-
24-
import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
25-
import { ConfigurationsTabTypes } from './constants'
26-
import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
27-
import { ConfigurationTableProps } from './types'
28+
import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
29+
import { BASE_CONFIG, ConfigurationsTabTypes, SES_TABLE_COLUMNS } from './constants'
30+
import { renderDefaultTag } from './notifications.util'
31+
import { ConfigurationTableProps, SESConfigurationTableRowType } from './types'
2832

2933
import './notifications.scss'
3034

3135
const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
3236
const { searchParams } = useSearchString()
3337
const history = useHistory()
3438

35-
const onClickSESConfigEdit = (id: number) => () => {
39+
const onClickEditRow = (id: number) => () => {
3640
const newParams = {
3741
...searchParams,
3842
configId: id.toString(),
@@ -43,43 +47,56 @@ const SESConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTable
4347
})
4448
}
4549

46-
return (
47-
<div className="ses-config-container flex-grow-1">
48-
<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">
49-
<p className="icon-dim-24 m-0" />
50-
<p className="flex left m-0">Name</p>
51-
<p className="flex left m-0">Access Key Id</p>
52-
<p className="flex left m-0">Sender&apos;s Email</p>
53-
<p className="m-0" />
54-
</div>
55-
<div className="flex-grow-1">
56-
{state.sesConfigurationList.map((sesConfig) => (
57-
<div
58-
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"
59-
key={sesConfig.id}
60-
>
61-
{getConfigTabIcons(ConfigurationsTabTypes.SES)}
62-
<div className=" flex left dc__gap-8">
63-
<InteractiveCellText
64-
text={sesConfig.name}
65-
onClickHandler={onClickSESConfigEdit(sesConfig.id)}
66-
/>
50+
const tableRows = useMemo(
51+
() =>
52+
state.sesConfigurationList.map((sesConfig) => ({
53+
id: `${sesConfig.id}`,
54+
data: {
55+
name: (
56+
<div className="flex left dc__gap-8 py-10">
57+
<InteractiveCellText text={sesConfig.name} onClickHandler={onClickEditRow(sesConfig.id)} />
6758
{renderDefaultTag(sesConfig.isDefault)}
6859
</div>
69-
<InteractiveCellText text={sesConfig.accessKeyId} />
70-
<InteractiveCellText text={sesConfig.email} />
71-
<ConfigTableRowActionButton
72-
onClickEditRow={onClickSESConfigEdit(sesConfig.id)}
73-
onClickDeleteRow={deleteClickHandler(
74-
sesConfig.id,
75-
DeleteComponentsName.SesConfigurationTab,
76-
)}
77-
modal={ConfigurationsTabTypes.SES}
78-
/>
79-
</div>
80-
))}
81-
</div>
82-
</div>
60+
),
61+
accessKeyId: sesConfig.accessKeyId,
62+
email: sesConfig.email,
63+
},
64+
})),
65+
[state.sesConfigurationList],
66+
)
67+
68+
const onRowClick = (rowData) => {
69+
onClickEditRow(Number(rowData.id))()
70+
}
71+
72+
return (
73+
<Table<SESConfigurationTableRowType, FiltersTypeEnum.STATE>
74+
id="table__ses-configuration"
75+
columns={SES_TABLE_COLUMNS}
76+
rows={tableRows}
77+
emptyStateConfig={{
78+
noRowsConfig: {
79+
title: 'No SES Configurations Found',
80+
},
81+
}}
82+
filtersVariant={FiltersTypeEnum.STATE}
83+
additionalFilterProps={{
84+
initialSortKey: BASE_CONFIG[0].field,
85+
}}
86+
paginationVariant={PaginationEnum.NOT_PAGINATED}
87+
filter={null}
88+
rowStartIconConfig={{
89+
name: 'ic-ses',
90+
color: null,
91+
size: 24,
92+
}}
93+
rowActionOnHoverConfig={{
94+
width: 100,
95+
Component: ConfigurationRowActionButtonWrapper,
96+
}}
97+
additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SES }}
98+
onRowClick={onRowClick}
99+
/>
83100
)
84101
}
85102

‎src/components/notifications/SMTPConfigurationTable.tsx‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -14,79 +14,87 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { useMemo } from 'react'
1718
import { useHistory } from 'react-router-dom'
1819

19-
import { useSearchString } from '@devtron-labs/devtron-fe-common-lib'
20+
import { FiltersTypeEnum, PaginationEnum, Table, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
2021

2122
import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
22-
import { DeleteComponentsName } from '@Config/constantMessaging'
2323

24-
import { ConfigTableRowActionButton } from './ConfigTableRowActionButton'
25-
import { ConfigurationsTabTypes } from './constants'
26-
import { getConfigTabIcons, renderDefaultTag } from './notifications.util'
27-
import { ConfigurationTableProps } from './types'
24+
import { ConfigurationRowActionButtonWrapper } from './ConfigTableRowActionButton'
25+
import { BASE_CONFIG, ConfigurationsTabTypes, SMTP_TABLE_COLUMNS } from './constants'
26+
import { renderDefaultTag } from './notifications.util'
27+
import { ConfigurationTableProps, SMTPConfigurationTableRowType } from './types'
2828

2929
export const SMTPConfigurationTable = ({ state, deleteClickHandler }: ConfigurationTableProps) => {
3030
const { smtpConfigurationList } = state
3131
const { searchParams } = useSearchString()
3232
const history = useHistory()
3333

34-
const onClickEditRow = (configId) => () => {
34+
const onClickEditRow = (id: number) => () => {
3535
const newParams = {
3636
...searchParams,
37-
configId: configId.toString(),
37+
configId: id.toString(),
3838
modal: ConfigurationsTabTypes.SMTP,
3939
}
4040
history.push({
4141
search: new URLSearchParams(newParams).toString(),
4242
})
4343
}
4444

45-
return (
46-
<div className="smtp-config-container flex-grow-1">
47-
<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">
48-
<p className="icon-dim-24 m-0" />
49-
<p className="dc__truncate-text flex left m-0">Name</p>
50-
<p className="dc__truncate-text flex left m-0">Host</p>
51-
<p className="dc__truncate-text flex left m-0">Port</p>
52-
<p className="dc__truncate-text flex left m-0">Sender&apos; Email</p>
53-
<p className="" aria-label="Action" />
54-
</div>
55-
<div className="flex-grow-1">
56-
{smtpConfigurationList.map((smtpConfig) => (
57-
<div
58-
data-testid={`smtp-container-${smtpConfig.name}`}
59-
key={smtpConfig.id}
60-
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"
61-
>
62-
{getConfigTabIcons(ConfigurationsTabTypes.SMTP)}
63-
<div
64-
data-testid={`smtp-config-name-${smtpConfig.name}`}
65-
className=" dc__truncate-text flexbox dc__gap-8"
66-
>
45+
const tableRows = useMemo(
46+
() =>
47+
smtpConfigurationList.map((smtpConfig) => ({
48+
id: `${smtpConfig.id}`,
49+
data: {
50+
name: (
51+
<div className="flex left dc__gap-8 py-10">
6752
<InteractiveCellText
6853
text={smtpConfig.name}
6954
onClickHandler={onClickEditRow(smtpConfig.id)}
7055
/>
7156
{renderDefaultTag(smtpConfig.isDefault)}
7257
</div>
73-
<InteractiveCellText
74-
text={smtpConfig.host}
75-
dataTestId={`smtp-config-host-${smtpConfig.host}`}
76-
/>
77-
<InteractiveCellText text={smtpConfig.port} />
78-
<InteractiveCellText text={smtpConfig.email} />
79-
<ConfigTableRowActionButton
80-
onClickEditRow={onClickEditRow(smtpConfig.id)}
81-
onClickDeleteRow={deleteClickHandler(
82-
smtpConfig.id,
83-
DeleteComponentsName.SMTPConfigurationTab,
84-
)}
85-
modal={ConfigurationsTabTypes.SMTP}
86-
/>
87-
</div>
88-
))}
89-
</div>
90-
</div>
58+
),
59+
host: smtpConfig.host,
60+
port: smtpConfig.port.toString(),
61+
email: smtpConfig.email,
62+
},
63+
})),
64+
[smtpConfigurationList],
65+
)
66+
67+
const onRowClick = (rowData) => {
68+
onClickEditRow(Number(rowData.id))()
69+
}
70+
71+
return (
72+
<Table<SMTPConfigurationTableRowType, FiltersTypeEnum.STATE>
73+
id="table__smtp-configuration"
74+
columns={SMTP_TABLE_COLUMNS}
75+
rows={tableRows}
76+
emptyStateConfig={{
77+
noRowsConfig: {
78+
title: 'No SMTP Configurations Found',
79+
},
80+
}}
81+
filtersVariant={FiltersTypeEnum.STATE}
82+
additionalFilterProps={{
83+
initialSortKey: BASE_CONFIG[0].field,
84+
}}
85+
paginationVariant={PaginationEnum.NOT_PAGINATED}
86+
filter={null}
87+
rowStartIconConfig={{
88+
name: 'ic-smtp',
89+
color: null,
90+
size: 24,
91+
}}
92+
rowActionOnHoverConfig={{
93+
width: 100,
94+
Component: ConfigurationRowActionButtonWrapper,
95+
}}
96+
additionalProps={{ deleteClickHandler, modal: ConfigurationsTabTypes.SMTP }}
97+
onRowClick={onRowClick}
98+
/>
9199
)
92100
}

0 commit comments

Comments
 (0)