[38135] Improve no-results message for unread notifications

https://community.openproject.org/wp/38135

config/locales/js-en.yml

@@ -561,6 +561,7 @@ en:
     notifications:
       title: "Notifications"
       channel: "Channel"
+      no_unread: "No unread notifications"
       channels:
         in_app: "In-app"
         mail: "Email"

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html

@@ -66,7 +66,7 @@
             class="generic-table--no-results-title"
         >
           <op-icon icon-classes="icon-info1"></op-icon>
-          {{ text.no_results }}
+          {{ noResultText$ | async }}
         </span>
       </div>
     </ng-template>

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts

@@ -1,5 +1,10 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
 } from '@angular/core';
 import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
 import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
@@ -8,6 +13,7 @@ import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { InAppNotificationsQuery } from 'core-app/features/in-app-notifications/store/in-app-notifications.query';
 import { InAppNotificationsService } from 'core-app/features/in-app-notifications/store/in-app-notifications.service';
 import { NOTIFICATIONS_MAX_SIZE } from 'core-app/features/in-app-notifications/store/in-app-notification.model';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'op-in-app-notification-center',
@@ -26,6 +32,12 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
 
   hasMoreThanPageSize$ = this.ianQuery.hasMoreThanPageSize$;
 
+  noResultText$ = this
+    .activeFacet$
+    .pipe(
+      map((facet:'unread'|'all') => this.text.no_results[facet] || this.text.no_results.unread),
+    );
+
   maxSize = NOTIFICATIONS_MAX_SIZE;
 
   facets:string[] = ['unread', 'all'];
@@ -34,7 +46,10 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
     title: this.I18n.t('js.notifications.title'),
     mark_all_read: this.I18n.t('js.notifications.center.mark_all_read'),
     button_close: this.I18n.t('js.button_close'),
-    no_results: this.I18n.t('js.notice_no_results_to_display'),
+    no_results: {
+      unread: this.I18n.t('js.notifications.no_unread'),
+      all: this.I18n.t('js.notice_no_results_to_display'),
+    },
     facets: {
       unread: this.I18n.t('js.notifications.facets.unread'),
       all: this.I18n.t('js.notifications.facets.all'),
@@ -56,17 +71,17 @@ export class InAppNotificationCenterComponent extends OpModalComponent implement
     this.ianService.get();
   }
 
-  markAllRead() {
+  markAllRead():void {
     this.ianService.markAllRead();
     this.closeMe();
   }
 
-  activateFacet(facet:string) {
+  activateFacet(facet:string):void {
     this.ianService.setActiveFacet(facet);
     this.ianService.get();
   }
 
-  totalCountWarning() {
+  totalCountWarning():string {
     const state = this.ianQuery.getValue();
 
     return this.I18n.t(

frontend/src/app/features/in-app-notifications/store/in-app-notifications.store.ts

@@ -5,6 +5,8 @@ import { InAppNotification } from './in-app-notification.model';
 export interface InAppNotificationsState extends EntityState<InAppNotification> {
   /** The entities in the store might not all be unread so we keep separate count */
   unreadCount:number;
+  /** Number of elements not showing after max values loaded */
+  notShowing:number;
   activeFacet:string;
   expanded:boolean;
 }

spec/support/components/notifications/center.rb

@@ -93,7 +93,7 @@ module Components
       end
 
       def expect_empty
-        expect(page).to have_text I18n.t('js.notice_no_results_to_display')
+        expect(page).to have_text 'No unread notifications'
       end
 
       def expect_bell_count(count)