Make NotificationDescription a swappable component

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Fredrik Adelöw <freben@spotify.com>

.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.

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)

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,
+  });

plugins/notifications/src/components/NotificationsTable/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export * from './NotificationsTable';
+export * from './NotificationDescription';