From 07df4b15912aab10ed911a68d8869985fea580e2 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Fri, 3 Mar 2023 15:08:15 +1300
Subject: [PATCH] fix(notifications): limit only in header [EE-4815] (#8579)

Co-authored-by: testa113 <testa113>
---
 app/react/components/PageHeader/NotificationsMenu.tsx |  9 +++++----
 .../portainer/notifications/notifications-store.ts    | 11 ++---------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/app/react/components/PageHeader/NotificationsMenu.tsx b/app/react/components/PageHeader/NotificationsMenu.tsx
index 69b0f35e7..e9639ddfe 100644
--- a/app/react/components/PageHeader/NotificationsMenu.tsx
+++ b/app/react/components/PageHeader/NotificationsMenu.tsx
@@ -33,6 +33,7 @@ export function NotificationsMenu() {
     notificationsStore,
     (state) => state.userNotifications[user.Id]
   );
+  const reducedNotifications = userNotifications?.slice(0, 50);
 
   return (
     <Menu>
@@ -55,7 +56,7 @@ export function NotificationsMenu() {
           <Icon icon={Bell} />
           <span
             className={
-              userNotifications?.length > 0 ? notificationStyles.badge : ''
+              reducedNotifications?.length > 0 ? notificationStyles.badge : ''
             }
           />
         </div>
@@ -77,7 +78,7 @@ export function NotificationsMenu() {
               <h4>Notifications</h4>
             </div>
             <div className={notificationStyles.itemLast}>
-              {userNotifications?.length > 0 && (
+              {reducedNotifications?.length > 0 && (
                 <Button
                   color="none"
                   onClick={(e) => {
@@ -93,10 +94,10 @@ export function NotificationsMenu() {
             </div>
           </div>
         </div>
-        {userNotifications?.length > 0 ? (
+        {reducedNotifications?.length > 0 ? (
           <>
             <div className={notificationStyles.notifications}>
-              {userNotifications.map((notification) => (
+              {reducedNotifications.map((notification) => (
                 <MenuLink
                   to="portainer.notifications"
                   params={{ id: notification.id }}
diff --git a/app/react/portainer/notifications/notifications-store.ts b/app/react/portainer/notifications/notifications-store.ts
index 266eb99e9..e88887317 100644
--- a/app/react/portainer/notifications/notifications-store.ts
+++ b/app/react/portainer/notifications/notifications-store.ts
@@ -20,22 +20,15 @@ export const notificationsStore = create<NotificationsState>()(
       userNotifications: {},
       addNotification: (userId: number, notification: ToastNotification) => {
         set((state) => {
-          const currentUserNotifications =
-            state.userNotifications[userId] || [];
           // keep the new notification at the start of the list, so sorting by newest time isn't required
           const newUserNotifications = [
             notification,
-            ...currentUserNotifications,
+            ...(state.userNotifications[userId] || []),
           ];
-          const maxNotifications = 50;
-          const reducedNotifications = newUserNotifications.slice(
-            0,
-            maxNotifications
-          );
           return {
             userNotifications: {
               ...state.userNotifications,
-              [userId]: reducedNotifications,
+              [userId]: newUserNotifications,
             },
           };
         });