From 03311e33da9a8bb75d6b27efe4f816972b5bbb2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@spotify.com>
Date: Tue, 21 Apr 2026 16:35:29 +0200
Subject: [PATCH] Make NotificationDescription a swappable component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Fredrik Adelöw <freben@spotify.com>
---
 .../swappable-notification-description.md     |  5 ++++
 plugins/notifications/report.api.md           | 16 +++++++++++
 .../NotificationDescription.tsx               | 27 ++++++++++++++++++-
 .../components/NotificationsTable/index.ts    |  1 +
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/swappable-notification-description.md

diff --git a/.changeset/swappable-notification-description.md b/.changeset/swappable-notification-description.md
new file mode 100644
index 0000000000..abfa470035
--- /dev/null
+++ b/.changeset/swappable-notification-description.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+The notification description used in the notifications table is now a swappable component, so that apps can replace its rendering with a custom implementation.
diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md
index ff39a03a8a..74dd1b137b 100644
--- a/plugins/notifications/report.api.md
+++ b/plugins/notifications/report.api.md
@@ -14,6 +14,7 @@ import { NotificationSettings } from '@backstage/plugin-notifications-common';
 import { NotificationSeverity } from '@backstage/plugin-notifications-common';
 import { NotificationStatus } from '@backstage/plugin-notifications-common';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SwappableComponentRef } from '@backstage/frontend-plugin-api';
 import { TableProps } from '@backstage/core-components';
 import { TranslationRef } from '@backstage/frontend-plugin-api';
 
@@ -49,6 +50,21 @@ export type GetTopicsResponse = {
   topics: string[];
 };
 
+// @public
+export const NotificationDescription: {
+  (props: NotificationDescriptionProps): JSX.Element | null;
+  ref: SwappableComponentRef<
+    NotificationDescriptionProps,
+    NotificationDescriptionProps
+  >;
+};
+
+// @public
+export interface NotificationDescriptionProps {
+  // (undocumented)
+  description: string;
+}
+
 // @public (undocumented)
 export interface NotificationsApi {
   // (undocumented)
diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx
index 760473d064..dc023031a3 100644
--- a/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx
+++ b/plugins/notifications/src/components/NotificationsTable/NotificationDescription.tsx
@@ -15,10 +15,22 @@
  */
 import { Text, Button } from '@backstage/ui';
 import { useState } from 'react';
+import { createSwappableComponent } from '@backstage/frontend-plugin-api';
+
+/**
+ * Props for the {@link NotificationDescription} swappable component.
+ *
+ * @public
+ */
+export interface NotificationDescriptionProps {
+  description: string;
+}
 
 const MAX_LENGTH = 100;
 
-export const NotificationDescription = (props: { description: string }) => {
+const DefaultNotificationDescription = (
+  props: NotificationDescriptionProps,
+) => {
   const { description } = props;
   const [shown, setShown] = useState(false);
   const isLong = description.length > MAX_LENGTH;
@@ -56,3 +68,16 @@ export const NotificationDescription = (props: { description: string }) => {
     </Text>
   );
 };
+
+/**
+ * Swappable component that renders the description of a notification in the
+ * notifications table. Apps can override this to customize how descriptions
+ * are displayed.
+ *
+ * @public
+ */
+export const NotificationDescription =
+  createSwappableComponent<NotificationDescriptionProps>({
+    id: 'notifications.notification-description',
+    loader: () => DefaultNotificationDescription,
+  });
diff --git a/plugins/notifications/src/components/NotificationsTable/index.ts b/plugins/notifications/src/components/NotificationsTable/index.ts
index a1fb7a25c6..81d6cacce9 100644
--- a/plugins/notifications/src/components/NotificationsTable/index.ts
+++ b/plugins/notifications/src/components/NotificationsTable/index.ts
@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export * from './NotificationsTable';
+export * from './NotificationDescription';