diff --git a/.changeset/new-papayas-go.md b/.changeset/new-papayas-go.md new file mode 100644 index 0000000000..348ebbd896 --- /dev/null +++ b/.changeset/new-papayas-go.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +Fix duplicate notification origins with multiple channels diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx index f4f6c61493..4483b4c634 100644 --- a/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx +++ b/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx @@ -15,7 +15,6 @@ */ import { - ChannelSetting, isNotificationsEnabledFor, NotificationSettings, OriginSetting, @@ -30,7 +29,6 @@ import { NoBorderTableCell } from './NoBorderTableCell'; import { useNotificationFormat } from './UserNotificationSettingsCard'; export const OriginRow = (props: { - channel: ChannelSetting; origin: OriginSetting; settings: NotificationSettings; handleChange: ( @@ -42,8 +40,7 @@ export const OriginRow = (props: { open: boolean; handleRowToggle: (originId: string) => void; }) => { - const { channel, origin, settings, handleChange, open, handleRowToggle } = - props; + const { origin, settings, handleChange, open, handleRowToggle } = props; const { formatOriginName } = useNotificationFormat(); return ( @@ -67,7 +64,7 @@ export const OriginRow = (props: { {settings.channels.map(ch => ( diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.test.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.test.tsx new file mode 100644 index 0000000000..6fc7eed55f --- /dev/null +++ b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.test.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { render, screen } from '@testing-library/react'; +import { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel'; +import { NotificationFormatProvider } from './UserNotificationSettingsCard.tsx'; + +describe('UserNotificationSettingsPanel', () => { + it('renders each origin only once even if present in multiple channels', () => { + const settings = { + channels: [ + { + id: 'email', + origins: [ + { + id: 'origin-1', + enabled: true, + topics: [], + }, + ], + }, + { + id: 'slack', + origins: [ + { + id: 'origin-1', + enabled: false, + topics: [], + }, + ], + }, + ], + }; + render( + + {}} + /> + , + ); + + const originRows = screen.getAllByText('Origin 1'); + expect(originRows).toHaveLength(1); + }); +}); diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx index aa079100be..7b1e4fa70a 100644 --- a/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx +++ b/plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx @@ -15,7 +15,10 @@ */ import { useState } from 'react'; -import { NotificationSettings } from '@backstage/plugin-notifications-common'; +import { + NotificationSettings, + OriginSetting, +} from '@backstage/plugin-notifications-common'; import Table from '@material-ui/core/Table'; import MuiTableCell from '@material-ui/core/TableCell'; import { withStyles } from '@material-ui/core/styles'; @@ -109,6 +112,18 @@ export const UserNotificationSettingsPanel = (props: { ); } + const uniqueOriginsMap = settings.channels + .flatMap(channel => channel.origins) + .reduce((map, origin) => { + if (!map.has(origin.id)) { + map.set(origin.id, origin); + } + return map; + }, new Map()) + .values(); + + const uniqueOrigins = Array.from(uniqueOriginsMap); + return ( @@ -130,30 +145,27 @@ export const UserNotificationSettingsPanel = (props: { - {settings.channels.map(channel => - channel.origins.flatMap(origin => [ - , - ...(expandedRows.has(origin.id) - ? origin.topics?.map(topic => ( - - )) || [] - : []), - ]), - )} + {uniqueOrigins.flatMap(origin => [ + , + ...(expandedRows.has(origin.id) + ? origin.topics?.map(topic => ( + + )) || [] + : []), + ])}
);