Merge pull request #24450 from drodil/notifications_page_props

feat: allow overriding notifications page properties

.changeset/bright-pumpkins-rule.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Allow overriding `NotificationsPage` page properties

plugins/notifications/api-report.md

@@ -74,7 +74,19 @@ export class NotificationsClient implements NotificationsApi {
 }
 
 // @public (undocumented)
-export const NotificationsPage: () => JSX_2.Element;
+export const NotificationsPage: (
+  props?: NotificationsPageProps | undefined,
+) => JSX_2.Element;
+
+// @public (undocumented)
+export type NotificationsPageProps = {
+  title?: string;
+  themeId?: string;
+  subtitle?: string;
+  tooltip?: string;
+  type?: string;
+  typeLink?: string;
+};
 
 // @public (undocumented)
 export const notificationsPlugin: BackstagePlugin<

plugins/notifications/dev/index.tsx

@@ -15,13 +15,21 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { NotificationsPage, notificationsPlugin } from '../src/plugin';
-import { NotificationsSidebarItem } from '../src';
+import {
+  NotificationsPage,
+  notificationsPlugin,
+  NotificationsSidebarItem,
+} from '../src';
 
 createDevApp()
   .registerPlugin(notificationsPlugin)
   .addPage({
-    element: <NotificationsPage />,
+    element: (
+      <NotificationsPage
+        title="Notifications (debug)"
+        subtitle="Notifications local development environment to showcase notification capabilities"
+      />
+    ),
     path: '/notifications',
   })
   .addSidebarItem(<NotificationsSidebarItem />)

plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx

@@ -37,7 +37,26 @@ import { NotificationSeverity } from '@backstage/plugin-notifications-common';
 
 const ThrottleDelayMs = 2000;
 
-export const NotificationsPage = () => {
+/** @public */
+export type NotificationsPageProps = {
+  title?: string;
+  themeId?: string;
+  subtitle?: string;
+  tooltip?: string;
+  type?: string;
+  typeLink?: string;
+};
+
+export const NotificationsPage = (props?: NotificationsPageProps) => {
+  const {
+    title = 'Notifications',
+    themeId = 'tool',
+    subtitle,
+    tooltip,
+    type,
+    typeLink,
+  } = props ?? {};
+
   const [refresh, setRefresh] = React.useState(false);
   const { lastSignal } = useSignal('notifications');
   const [unreadOnly, setUnreadOnly] = React.useState<boolean | undefined>(true);
@@ -113,7 +132,14 @@ export const NotificationsPage = () => {
   }
 
   return (
-    <PageWithHeader title="Notifications" themeId="tool">
+    <PageWithHeader
+      title={title}
+      themeId={themeId}
+      tooltip={tooltip}
+      subtitle={subtitle}
+      type={type}
+      typeLink={typeLink}
+    >
       <Content>
         <Grid container>
           <Grid item xs={2}>

plugins/notifications/src/components/index.ts

@@ -15,3 +15,4 @@
  */
 export * from './NotificationsSideBarItem';
 export * from './NotificationsTable';
+export type { NotificationsPageProps } from './NotificationsPage';