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 <heikki.hellgren@op.fi>

.changeset/new-papayas-go.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Fix duplicate notification origins with multiple channels

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 (
     <TableRow>
@@ -67,7 +64,7 @@ export const OriginRow = (props: {
       {settings.channels.map(ch => (
         <NoBorderTableCell key={ch.id} align="center">
           <Tooltip
-            title={`Enable or disable ${channel.id.toLocaleLowerCase(
+            title={`Enable or disable ${ch.id.toLocaleLowerCase(
               'en-US',
             )} notifications from ${formatOriginName(origin.id)}`}
           >

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<string, OriginSetting>())
+    .values();
+
+  const uniqueOrigins = Array.from(uniqueOriginsMap);
+
   return (
     <Table>
       <TableHead>
@@ -130,30 +145,27 @@ export const UserNotificationSettingsPanel = (props: {
         </TableRow>
       </TableHead>
       <TableBody>
-        {settings.channels.map(channel =>
-          channel.origins.flatMap(origin => [
-            <OriginRow
-              key={origin.id}
-              channel={channel}
-              origin={origin}
-              settings={settings}
-              open={expandedRows.has(origin.id)}
-              handleChange={handleChange}
-              handleRowToggle={handleRowToggle}
-            />,
-            ...(expandedRows.has(origin.id)
-              ? origin.topics?.map(topic => (
-                  <TopicRow
-                    key={`${origin.id}-${topic.id}`}
-                    topic={topic}
-                    origin={origin}
-                    settings={settings}
-                    handleChange={handleChange}
-                  />
-                )) || []
-              : []),
-          ]),
-        )}
+        {uniqueOrigins.flatMap(origin => [
+          <OriginRow
+            key={origin.id}
+            origin={origin}
+            settings={settings}
+            open={expandedRows.has(origin.id)}
+            handleChange={handleChange}
+            handleRowToggle={handleRowToggle}
+          />,
+          ...(expandedRows.has(origin.id)
+            ? origin.topics?.map(topic => (
+                <TopicRow
+                  key={`${origin.id}-${topic.id}`}
+                  topic={topic}
+                  origin={origin}
+                  settings={settings}
+                  handleChange={handleChange}
+                />
+              )) || []
+            : []),
+        ])}
       </TableBody>
     </Table>
   );