diff --git a/.changeset/khaki-pugs-perform.md b/.changeset/khaki-pugs-perform.md new file mode 100644 index 0000000000..55f89336ed --- /dev/null +++ b/.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. diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index 2f2357e479..17c1e7e338 100644 --- a/plugins/notifications/report.api.md +++ b/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; diff --git a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx index ef1fda0407..0d48a064e5 100644 --- a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx +++ b/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 ( { ({ /** @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}