Migrate NFS pages to HeaderPage

Always render the plugin header for page blueprints and move page-level actions into the Backstage UI header pattern for affected NFS pages.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

plugins/notifications/package.json

@@ -58,6 +58,7 @@
     "@backstage/plugin-notifications-common": "workspace:^",
     "@backstage/plugin-signals-react": "workspace:^",
     "@backstage/theme": "workspace:^",
+    "@backstage/ui": "workspace:^",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "lodash": "^4.17.21",

plugins/notifications/src/alpha.tsx

@@ -30,7 +30,7 @@ const page = PageBlueprint.make({
     routeRef: rootRouteRef,
     loader: () =>
       import('./components/NotificationsPage').then(m => (
-        <m.NotificationsPage />
+        <m.NfsNotificationsPage />
       )),
   },
 });

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

@@ -21,6 +21,7 @@ import {
   PageWithHeader,
   ResponseErrorPanel,
 } from '@backstage/core-components';
+import { HeaderPage } from '@backstage/ui';
 import Grid from '@material-ui/core/Grid';
 import { ConfirmProvider } from 'material-ui-confirm';
 import { useSignal } from '@backstage/plugin-signals-react';
@@ -66,7 +67,9 @@ export type NotificationsPageProps = {
   typeLink?: string;
 };
 
-export const NotificationsPage = (props?: NotificationsPageProps) => {
+function NotificationsPageContent(
+  props: NotificationsPageProps & { headerVariant: 'legacy' | 'bui' },
+) {
   const { t } = useTranslationRef(notificationsTranslationRef);
   const {
     title = t('notificationsPage.title'),
@@ -76,7 +79,8 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
     type,
     typeLink,
     markAsReadOnLinkOpen,
-  } = props ?? {};
+    headerVariant,
+  } = props;
 
   const [refresh, setRefresh] = useState(false);
   const { lastSignal } = useSignal('notifications');
@@ -186,6 +190,57 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
     });
   }
 
+  const pageContent = (
+    <Content>
+      <ConfirmProvider>
+        <Grid container>
+          <Grid item xs={2}>
+            <NotificationsFilters
+              unreadOnly={unreadOnly}
+              onUnreadOnlyChanged={setUnreadOnly}
+              createdAfter={createdAfter}
+              onCreatedAfterChanged={setCreatedAfter}
+              onSortingChanged={setSorting}
+              sorting={sorting}
+              saved={saved}
+              onSavedChanged={setSaved}
+              severity={severity}
+              onSeverityChanged={setSeverity}
+              topic={topic}
+              onTopicChanged={setTopic}
+              allTopics={allTopics}
+            />
+          </Grid>
+          <Grid item xs={10}>
+            <NotificationsTable
+              title={tableTitle}
+              isLoading={loading}
+              isUnread={isUnread}
+              markAsReadOnLinkOpen={markAsReadOnLinkOpen}
+              notifications={notifications}
+              onUpdate={onUpdate}
+              setContainsText={setContainsText}
+              onPageChange={setPageNumber}
+              onRowsPerPageChange={setPageSize}
+              page={pageNumber}
+              pageSize={pageSize}
+              totalCount={totalCount}
+            />
+          </Grid>
+        </Grid>
+      </ConfirmProvider>
+    </Content>
+  );
+
+  if (headerVariant === 'bui') {
+    return (
+      <>
+        <HeaderPage title={title} subtitle={subtitle} />
+        {pageContent}
+      </>
+    );
+  }
+
   return (
     <PageWithHeader
       title={title}
@@ -195,45 +250,15 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
       type={type}
       typeLink={typeLink}
     >
-      <Content>
-        <ConfirmProvider>
-          <Grid container>
-            <Grid item xs={2}>
-              <NotificationsFilters
-                unreadOnly={unreadOnly}
-                onUnreadOnlyChanged={setUnreadOnly}
-                createdAfter={createdAfter}
-                onCreatedAfterChanged={setCreatedAfter}
-                onSortingChanged={setSorting}
-                sorting={sorting}
-                saved={saved}
-                onSavedChanged={setSaved}
-                severity={severity}
-                onSeverityChanged={setSeverity}
-                topic={topic}
-                onTopicChanged={setTopic}
-                allTopics={allTopics}
-              />
-            </Grid>
-            <Grid item xs={10}>
-              <NotificationsTable
-                title={tableTitle}
-                isLoading={loading}
-                isUnread={isUnread}
-                markAsReadOnLinkOpen={markAsReadOnLinkOpen}
-                notifications={notifications}
-                onUpdate={onUpdate}
-                setContainsText={setContainsText}
-                onPageChange={setPageNumber}
-                onRowsPerPageChange={setPageSize}
-                page={pageNumber}
-                pageSize={pageSize}
-                totalCount={totalCount}
-              />
-            </Grid>
-          </Grid>
-        </ConfirmProvider>
-      </Content>
+      {pageContent}
     </PageWithHeader>
   );
-};
+}
+
+export const NotificationsPage = (props?: NotificationsPageProps) => (
+  <NotificationsPageContent {...(props ?? {})} headerVariant="legacy" />
+);
+
+export const NfsNotificationsPage = (props?: NotificationsPageProps) => (
+  <NotificationsPageContent {...(props ?? {})} headerVariant="bui" />
+);