Merge pull request #33389 from backstage/rugvip/nfs-header-page-migration

plugins: migrate NFS pages to HeaderPage

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

@@ -66,7 +66,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 +78,8 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
     type,
     typeLink,
     markAsReadOnLinkOpen,
-  } = props ?? {};
+    headerVariant,
+  } = props;
 
   const [refresh, setRefresh] = useState(false);
   const { lastSignal } = useSignal('notifications');
@@ -186,6 +189,52 @@ 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 pageContent;
+  }
+
   return (
     <PageWithHeader
       title={title}
@@ -195,45 +244,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" />
+);