Merge pull request #27568 from mareklibra/FLPATH-1841.showTotalInTitle

feat(notifications): add title to the Notifications' table

.changeset/khaki-pugs-perform.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+Added title to the Notifications' table. The title clearly states the filter selection and total count of messages. This change aligns the look and feel closer to other tables.

plugins/notifications/report.api.md

@@ -125,6 +125,7 @@ export const NotificationsSidebarItem: (props?: {
 
 // @public (undocumented)
 export const NotificationsTable: ({
+  title,
   markAsReadOnLinkOpen,
   isLoading,
   notifications,
@@ -141,7 +142,7 @@ export const NotificationsTable: ({
 // @public (undocumented)
 export type NotificationsTableProps = Pick<
   TableProps,
-  'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'
+  'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount' | 'title'
 > & {
   markAsReadOnLinkOpen?: boolean;
   isLoading?: boolean;

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

@@ -144,6 +144,15 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
   const totalCount = value?.[0]?.totalCount;
   const isUnread = !!value?.[1]?.unread;
 
+  let tableTitle = `All notifications (${totalCount})`;
+  if (saved) {
+    tableTitle = `Saved notifications (${totalCount})`;
+  } else if (unreadOnly === true) {
+    tableTitle = `Unread notifications (${totalCount})`;
+  } else if (unreadOnly === false) {
+    tableTitle = `Read notifications (${totalCount})`;
+  }
+
   return (
     <PageWithHeader
       title={title}
@@ -172,6 +181,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
             </Grid>
             <Grid item xs={10}>
               <NotificationsTable
+                title={tableTitle}
                 isLoading={loading}
                 isUnread={isUnread}
                 markAsReadOnLinkOpen={markAsReadOnLinkOpen}

plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx

@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
 /** @public */
 export type NotificationsTableProps = Pick<
   TableProps,
-  'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount'
+  'onPageChange' | 'onRowsPerPageChange' | 'page' | 'totalCount' | 'title'
 > & {
   markAsReadOnLinkOpen?: boolean;
   isLoading?: boolean;
@@ -74,6 +74,7 @@ export type NotificationsTableProps = Pick<
 
 /** @public */
 export const NotificationsTable = ({
+  title,
   markAsReadOnLinkOpen,
   isLoading,
   notifications = [],
@@ -334,6 +335,7 @@ export const NotificationsTable = ({
         header: true,
         sorting: false,
       }}
+      title={title}
       onPageChange={onPageChange}
       onRowsPerPageChange={onRowsPerPageChange}
       page={page}