From 94fb61541c5bfdacda9997e1929d76609ee6917f Mon Sep 17 00:00:00 2001
From: SheenaMalhotra182 <110394264+SheenaMalhotra182@users.noreply.github.com>
Date: Fri, 3 Nov 2023 20:11:40 +0530
Subject: [PATCH] [ACS-5311] Notification History Bug Fix (#9011)

* [ACS-5311] implemented read state for notifications and showing only unread notifications in history menu

* [ACS-5311] linting fixes

* [ACS-5311] linting fixes

* [ACS-5311] fixed code smell

* [ACS-5311] addressed review comments

* [ACS-5311] addressed review comments

* [ACS-5311] updated unit tests

* [ACS-5311] addressed review comments and optimized unit tests

* [ACS-5311] linting fix

* [ACS-5311] addressed review comments

* [ACS-5311] fixed typos

* [ACS-5311] moved NOTIFICATION_STORAGE to notification.model.ts to reuse across repos

* [ACS-5311] addressed review comments
---
 .../notification-history.component.html       |  6 +-
 .../notification-history.component.spec.ts    | 66 ++++++++++++++++---
 .../notification-history.component.ts         | 49 +++++++-------
 .../helpers/notification.factory.ts           |  9 ++-
 .../models/notification.model.ts              |  3 +
 5 files changed, 95 insertions(+), 38 deletions(-)

diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html
index 178a7b58c4e..aaff992988b 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.html
+++ b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -7,7 +7,7 @@
             id="adf-notification-history-open-button"
             (menuOpened)="onMenuOpened()">
         <mat-icon matBadge="&#8288;"
-                  [matBadgeHidden]="!notifications.length"
+                  [matBadgeHidden]="!unreadNotifications.length"
                   matBadgeColor="accent"
                   matBadgeSize="small">notifications</mat-icon>
     </button>
@@ -21,7 +21,7 @@
              (click)="$event.stopPropagation()">
             <div mat-subheader role="menuitem">
                 <span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
-                <button *ngIf="notifications.length"
+                <button *ngIf="unreadNotifications.length"
                         id="adf-notification-history-mark-as-read"
                         mat-icon-button
                         title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
@@ -33,7 +33,7 @@
             <mat-divider></mat-divider>
 
             <mat-list role="menuitem">
-                <ng-container *ngIf="notifications.length; else empty_list_template">
+                <ng-container *ngIf="unreadNotifications.length; else empty_list_template">
                     <mat-list-item *ngFor="let notification of paginatedNotifications"
                                    class="adf-notification-history-menu-item"
                                    (click)="onNotificationClick(notification)">
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.spec.ts b/lib/core/src/lib/notifications/components/notification-history.component.spec.ts
index 4badb740156..19758543bf7 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.spec.ts
+++ b/lib/core/src/lib/notifications/components/notification-history.component.spec.ts
@@ -22,7 +22,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { NotificationService } from '../services/notification.service';
 import { StorageService } from '../../common/services/storage.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
+import { NotificationModel, NOTIFICATION_TYPE, NOTIFICATION_STORAGE } from '../models/notification.model';
 
 describe('Notification History Component', () => {
 
@@ -32,11 +32,12 @@ describe('Notification History Component', () => {
     let notificationService: NotificationService;
     let overlayContainerElement: HTMLElement;
     let storage: StorageService;
+    let testNotifications: NotificationModel[];
 
     const openNotification = () => {
         fixture.detectChanges();
         const button = element.querySelector<HTMLButtonElement>('#adf-notification-history-open-button');
-        button.click();
+        button?.click();
         fixture.detectChanges();
     };
 
@@ -54,6 +55,26 @@ describe('Notification History Component', () => {
         storage = TestBed.inject(StorageService);
         notificationService = TestBed.inject(NotificationService);
         component.notifications = [];
+        component.unreadNotifications = [];
+
+        testNotifications = [
+            {
+                type: NOTIFICATION_TYPE.INFO,
+                icon: 'info',
+                datetime: new Date(),
+                initiator: { key: '*', displayName: 'SYSTEM' },
+                messages: ['Moved 1 item.'],
+                read: false
+            },
+            {
+                type: NOTIFICATION_TYPE.INFO,
+                icon: 'info',
+                datetime: new Date(),
+                initiator: { key: '*', displayName: 'SYSTEM' },
+                messages: ['Copied 1 item.'],
+                read: false
+            }
+        ];
     });
 
     beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
@@ -61,7 +82,7 @@ describe('Notification History Component', () => {
     }));
 
     afterEach(() => {
-        storage.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
+        storage.removeItem(NOTIFICATION_STORAGE);
         fixture.destroy();
     });
 
@@ -83,12 +104,11 @@ describe('Notification History Component', () => {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                expect(component.notifications.length).toBe(1);
+                expect(component.unreadNotifications.length).toBe(1);
                 const markAllAsRead = overlayContainerElement.querySelector<HTMLButtonElement>('#adf-notification-history-mark-as-read');
-                markAllAsRead.click();
+                markAllAsRead?.click();
                 fixture.detectChanges();
-                expect(storage.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)).toBeNull();
-                expect(component.notifications.length).toBe(0);
+                expect(component.unreadNotifications).toEqual([]);
                 done();
             });
         });
@@ -101,7 +121,7 @@ describe('Notification History Component', () => {
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 expect(overlayContainerElement.querySelector('#adf-notification-history-component-no-message')).toBeNull();
-                expect(overlayContainerElement.querySelector('.adf-notification-history-list').innerHTML).toContain('Example Message');
+                expect(overlayContainerElement.querySelector('.adf-notification-history-list')?.innerHTML).toContain('Example Message');
                 done();
             });
         });
@@ -123,7 +143,7 @@ describe('Notification History Component', () => {
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
                 const notification = overlayContainerElement.querySelector<HTMLButtonElement>('.adf-notification-history-menu-item');
-                notification.click();
+                notification?.click();
                 expect(callBackSpy).toHaveBeenCalled();
                 done();
             });
@@ -148,7 +168,7 @@ describe('Notification History Component', () => {
         });
 
         it('should read notifications from local storage', (done) => {
-            storage.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify([{
+            storage.setItem(NOTIFICATION_STORAGE, JSON.stringify([{
                 messages: ['My new message'],
                 datetime: new Date(),
                 type: NOTIFICATION_TYPE.RECURSIVE
@@ -182,4 +202,30 @@ describe('Notification History Component', () => {
             });
         }, 45000);
     });
+
+    it('should set unreadNotifications to an empty array when there are no notifications', () => {
+        component.notifications = [];
+        fixture.detectChanges();
+
+        expect(component.unreadNotifications).toEqual([]);
+    });
+
+    it('should set unreadNotifications to an empty array when all notifications are read', () => {
+        testNotifications.forEach((notification: NotificationModel) => {
+            notification.read = true;
+        });
+        storage.setItem(NOTIFICATION_STORAGE, JSON.stringify(testNotifications));
+        fixture.detectChanges();
+
+        expect(component.unreadNotifications).toEqual([]);
+    });
+
+    it('should set unreadNotifications by filtering notifications where read is false', () => {
+        testNotifications[0].read = true;
+        storage.setItem(NOTIFICATION_STORAGE, JSON.stringify(testNotifications));
+        fixture.detectChanges();
+
+        expect(component.unreadNotifications.length).toEqual(1);
+        expect(component.unreadNotifications[0].read).toEqual(false);
+    });
 });
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.ts b/lib/core/src/lib/notifications/components/notification-history.component.ts
index 34e2d997bd3..8eea1db056d 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.ts
+++ b/lib/core/src/lib/notifications/components/notification-history.component.ts
@@ -17,7 +17,7 @@
 
 import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { NotificationService } from '../services/notification.service';
-import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
+import { NOTIFICATION_STORAGE, NotificationModel } from '../models/notification.model';
 import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -33,7 +33,6 @@ import { PaginationModel } from '../../models/pagination.model';
 export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit {
 
     public static MAX_NOTIFICATION_STACK_LENGTH = 100;
-    public static NOTIFICATION_STORAGE = 'notification-history';
 
     @ViewChild(MatMenuTrigger, { static: true })
     trigger: MatMenuTrigger;
@@ -53,17 +52,17 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     onDestroy$ = new Subject<boolean>();
     notifications: NotificationModel[] = [];
     paginatedNotifications: NotificationModel[] = [];
+    unreadNotifications: NotificationModel[] = [];
     pagination: PaginationModel;
 
-    constructor(
-        private notificationService: NotificationService,
-        public storageService: StorageService,
-        public cd: ChangeDetectorRef) {
-
-    }
+    constructor(private notificationService: NotificationService, public storageService: StorageService, public cd: ChangeDetectorRef) {}
 
     ngOnInit() {
-        this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || [];
+        this.notifications = JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE)) || [];
+        this.unreadNotifications =
+            JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE))?.filter(
+                (notification: NotificationModel) => !notification.read
+            ) || [];
     }
 
     ngAfterViewInit(): void {
@@ -81,10 +80,10 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     }
 
     addNewNotification(notification: NotificationModel) {
-        this.notifications.unshift(notification);
+        this.unreadNotifications.unshift(notification);
 
-        if (this.notifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) {
-            this.notifications.shift();
+        if (this.unreadNotifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) {
+            this.unreadNotifications.shift();
         }
 
         this.saveNotifications();
@@ -92,9 +91,11 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     }
 
     saveNotifications() {
-        this.storageService.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify(this.notifications.filter((notification) =>
-            notification.type !== NOTIFICATION_TYPE.RECURSIVE
-        )));
+        this.unreadNotifications.forEach((notification: NotificationModel) => {
+            this.notifications.push(notification);
+        });
+
+        this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
     }
 
     onMenuOpened() {
@@ -112,9 +113,13 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
     }
 
     markAsRead() {
-        this.notifications = [];
+        this.unreadNotifications = [];
+        this.notifications.forEach((notification: NotificationModel) => {
+            notification.read = true;
+        });
+
+        this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
         this.paginatedNotifications = [];
-        this.storageService.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
         this.createPagination();
         this.trigger.closeMenu();
     }
@@ -123,16 +128,16 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
         this.pagination = {
             skipCount: this.maxNotifications,
             maxItems: this.maxNotifications,
-            totalItems: this.notifications.length,
-            hasMoreItems: this.notifications.length > this.maxNotifications
+            totalItems: this.unreadNotifications.length,
+            hasMoreItems: this.unreadNotifications.length > this.maxNotifications
         };
-        this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
+        this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount);
     }
 
     loadMore() {
         this.pagination.skipCount = this.pagination.maxItems + this.pagination.skipCount;
-        this.pagination.hasMoreItems = this.notifications.length > this.pagination.skipCount;
-        this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
+        this.pagination.hasMoreItems = this.unreadNotifications.length > this.pagination.skipCount;
+        this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount);
     }
 
     hasMoreNotifications(): boolean {
diff --git a/lib/core/src/lib/notifications/helpers/notification.factory.ts b/lib/core/src/lib/notifications/helpers/notification.factory.ts
index 0c11a9889aa..d3a51d335e0 100644
--- a/lib/core/src/lib/notifications/helpers/notification.factory.ts
+++ b/lib/core/src/lib/notifications/helpers/notification.factory.ts
@@ -31,7 +31,8 @@ export const info = (messages: string | string[], initiator: NotificationInitiat
     icon: 'info',
     datetime: new Date(),
     initiator,
-    messages: [].concat(messages)
+    messages: [].concat(messages),
+    read: false
 });
 
 export const warning = (messages: string | string[], initiator: NotificationInitiator = rootInitiator): NotificationModel => ({
@@ -39,7 +40,8 @@ export const warning = (messages: string | string[], initiator: NotificationInit
     icon: 'warning',
     datetime: new Date(),
     initiator,
-    messages: [].concat(messages)
+    messages: [].concat(messages),
+    read: false
 });
 
 export const error = (messages: string | string[], initiator: NotificationInitiator = rootInitiator): NotificationModel => ({
@@ -47,5 +49,6 @@ export const error = (messages: string | string[], initiator: NotificationInitia
     icon: 'error',
     datetime: new Date(),
     initiator,
-    messages: [].concat(messages)
+    messages: [].concat(messages),
+    read: false
 });
diff --git a/lib/core/src/lib/notifications/models/notification.model.ts b/lib/core/src/lib/notifications/models/notification.model.ts
index ec8392944b9..0083d964751 100644
--- a/lib/core/src/lib/notifications/models/notification.model.ts
+++ b/lib/core/src/lib/notifications/models/notification.model.ts
@@ -39,4 +39,7 @@ export interface NotificationModel {
     icon?: string;
     clickCallBack?: any;
     args?: any;
+    read?: boolean;
 }
+
+export const NOTIFICATION_STORAGE = 'notification-history';