From fb3ef83cd2d9849959fa0ab35d526f227889291b Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Wed, 15 Mar 2023 17:42:02 +0200
Subject: [PATCH] RED-6332: cherry pick commit from master branch

---
 .../base-screen/base-screen.component.html     |  5 ++++-
 .../notifications/notifications.component.html | 18 +++++++++++++++---
 .../notifications/notifications.component.ts   |  3 ++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index 4fffdc4e0..515df50ea 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -29,7 +29,10 @@
 
             <iqser-help-button *deny="roles.getRss" [iqserHelpMode]="'help_mode'" id="help-mode-button"></iqser-help-button>
 
-            <redaction-notifications [iqserHelpMode]="'open_notifications'"></redaction-notifications>
+            <redaction-notifications
+                *ngIf="!currentUser.isAdmin && !currentUser.isUserAdmin"
+                [iqserHelpMode]="'open_notifications'"
+            ></redaction-notifications>
         </div>
 
         <iqser-user-button [iqserHelpMode]="'open_usermenu'" [matMenuTriggerFor]="userMenu" id="userMenu"></iqser-user-button>
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 518a46c85..82e391820 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,4 +1,9 @@
-<iqser-circle-button [matMenuTriggerFor]="menu" [showDot]="hasUnreadNotifications$ | async" icon="red:notification"></iqser-circle-button>
+<iqser-circle-button
+    [matMenuTriggerFor]="menu"
+    [showDot]="hasUnreadNotifications$ | async"
+    buttonId="notification-button"
+    icon="red:notification"
+></iqser-circle-button>
 
 <mat-menu #menu="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
     <ng-template matMenuContent>
@@ -13,15 +18,21 @@
             <div *ngFor="let group of groups; let first = first">
                 <div class="all-caps-label flex-align-items-center">
                     <div>{{ group.date }}</div>
-                    <div (click)="markRead($event)" *ngIf="(hasUnreadNotifications$ | async) && first" class="view-all">
+                    <div
+                        (click)="markRead($event)"
+                        *ngIf="(hasUnreadNotifications$ | async) && first"
+                        class="view-all"
+                        id="notifications-mark-all-as-read-btn"
+                    >
                         {{ 'notifications.mark-all-as-read' | translate }}
                     </div>
                 </div>
 
                 <div
                     (click)="markRead($event, [notification], true)"
-                    *ngFor="let notification of group.notifications"
+                    *ngFor="let notification of group.notifications; trackBy: trackBy"
                     [class.unread]="!notification.readDate"
+                    [id]="'notifications-mark-as-read-' + notification.id + '-btn'"
                     class="notification"
                     mat-menu-item
                 >
@@ -33,6 +44,7 @@
                     </div>
                     <div
                         (click)="markRead($event, [notification], !notification.readDate)"
+                        [id]="'notifications-mark-' + notification.id"
                         class="dot"
                         matTooltip="{{ 'notifications.mark-as' | translate : { type: notification.readDate ? 'unread' : 'read' } }}"
                         matTooltipPosition="before"
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index 14568e121..8320e4193 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -4,7 +4,7 @@ import { NotificationsService } from '@services/notifications.service';
 import { Notification } from '@red/domain';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { Observable } from 'rxjs';
-import { isToday, shareLast } from '@iqser/common-ui';
+import { isToday, shareLast, trackByFactory } from '@iqser/common-ui';
 import dayjs, { Dayjs } from 'dayjs';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -29,6 +29,7 @@ function chronologically(first: string, second: string) {
 export class NotificationsComponent {
     readonly hasUnreadNotifications$: Observable<boolean>;
     readonly groupedNotifications$: Observable<NotificationsGroup[]>;
+    readonly trackBy = trackByFactory();
 
     constructor(
         private readonly _notificationsService: NotificationsService,