From 5a70981d4abb00f42713d3e29703861769e3a627 Mon Sep 17 00:00:00 2001 From: Hellgren Heikki Date: Thu, 31 Jul 2025 13:58:59 +0300 Subject: [PATCH 1/2] fix: duplicate origins with multiple notification processors this fixes the notification settings panel showing duplicate origins when there is multiple notification processors installed. closes #30464 and replaces #30500 to work with latest changes to master. Signed-off-by: Hellgren Heikki --- .changeset/new-papayas-go.md | 5 ++ .../OriginRow.tsx | 7 +-- .../UserNotificationSettingsPanel.tsx | 62 +++++++++++-------- 3 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 .changeset/new-papayas-go.md 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.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 => ( + + )) || [] + : []), + ])}
); From bf2c39621b1484de16befed2e61a81e07272d2bc Mon Sep 17 00:00:00 2001 From: Hellgren Heikki Date: Wed, 6 Aug 2025 15:31:36 +0300 Subject: [PATCH 2/2] test(notification): add test for settings rendering Signed-off-by: Hellgren Heikki --- .../UserNotificationSettingsPanel.test.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.test.tsx 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); + }); +});