From 3bf0697eb80eb0a78c654c896587e03e678e510e Mon Sep 17 00:00:00 2001
From: Marek Libra <marek.libra@gmail.com>
Date: Thu, 20 Jun 2024 10:23:18 +0200
Subject: [PATCH] Hide NotificationsPage toolbar for empty list

Signed-off-by: Marek Libra <marek.libra@gmail.com>
---
 .changeset/metal-suits-drum.md                |  5 +++
 .../NotificationsTable/NotificationsTable.tsx | 41 ++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/metal-suits-drum.md

diff --git a/.changeset/metal-suits-drum.md b/.changeset/metal-suits-drum.md
new file mode 100644
index 0000000000..4cc7e18ced
--- /dev/null
+++ b/.changeset/metal-suits-drum.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-notifications': patch
+---
+
+The toolbar on the Notifications page is hidden when there are no listed notifications.
diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx
index 72a27975f6..d7c4c40781 100644
--- a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx
+++ b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx
@@ -173,12 +173,14 @@ export const NotificationsTable = ({
     }
   }, [notifications, selectedNotifications]);
 
-  const compactColumns = React.useMemo(
-    (): TableColumn<Notification>[] => [
+  const compactColumns = React.useMemo((): TableColumn<Notification>[] => {
+    const showToolbar = notifications.length > 0;
+
+    return [
       {
         /* selection column */
         width: '1rem',
-        title: (
+        title: showToolbar ? (
           <SelectAll
             count={selectedNotifications.size}
             totalCount={notifications.length}
@@ -189,7 +191,7 @@ export const NotificationsTable = ({
               )
             }
           />
-        ),
+        ) : undefined,
         render: (notification: Notification) => (
           <CheckBox
             color="primary"
@@ -254,7 +256,7 @@ export const NotificationsTable = ({
       {
         /* actions column */
         width: '1rem',
-        title: (
+        title: showToolbar ? (
           <BulkActions
             notifications={notifications}
             selectedNotifications={selectedNotifications}
@@ -263,7 +265,7 @@ export const NotificationsTable = ({
             onSwitchSavedStatus={onSwitchSavedStatus}
             onMarkAllRead={onMarkAllRead}
           />
-        ),
+        ) : undefined,
         render: (notification: Notification) => (
           <BulkActions
             notifications={[notification]}
@@ -274,20 +276,19 @@ export const NotificationsTable = ({
           />
         ),
       },
-    ],
-    [
-      markAsReadOnLinkOpen,
-      selectedNotifications,
-      notifications,
-      isUnread,
-      onSwitchReadStatus,
-      onSwitchSavedStatus,
-      onMarkAllRead,
-      onNotificationsSelectChange,
-      classes.severityItem,
-      classes.description,
-    ],
-  );
+    ];
+  }, [
+    markAsReadOnLinkOpen,
+    selectedNotifications,
+    notifications,
+    isUnread,
+    onSwitchReadStatus,
+    onSwitchSavedStatus,
+    onMarkAllRead,
+    onNotificationsSelectChange,
+    classes.severityItem,
+    classes.description,
+  ]);
 
   return (
     <Table<Notification>