feat(announcements): Adding no notifications message (#27611)

* #27368 Adding no display message * #27368 Fix icon
dotCMS · Feb 14, 2024 · bc6f253 · bc6f253
1 parent 3f0264b
commit bc6f253
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 27 deletions.
diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html
@@ -5,7 +5,9 @@ <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
         class="announcements__list-item"
         [class.announcements__list-item--active]="!item.hasBeenRead">
         <span class="announcements__badge" *ngIf="!item.hasBeenRead"></span>
-        <span class="announcements__image pi" [ngClass]="typesIcons[item.type]"></span>
+        <span
+            class="announcements__image pi"
+            [ngClass]="typesIcons[item.type | lowercase] || typesIcons['important']"></span>
         <a
             class="announcements__url"
             [href]="item.url"
@@ -23,31 +25,43 @@ <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
 </ul>
 
 <div class="announcements__container">
-    <i class="pi pi-external-link"></i>
-    <a
-        class="announcements__link"
-        [href]="linkToDotCms()"
-        target="_blank"
-        data-testId="announcement_link_all"
-        rel="noopener"
-        >{{ 'announcements.show.all' | dm }}</a
-    >
+    <div class="announcements__link-container">
+        <i class="pi pi-external-link"></i>
+        <a
+            class="announcements__link"
+            [href]="linkToDotCms()"
+            target="_blank"
+            data-testId="announcement_link_all"
+            rel="noopener"
+            >{{ 'announcements.show.all' | dm }}</a
+        >
+    </div>
 </div>
 
 <h5 class="announcements__title">{{ 'announcements.knowledge.center' | dm }}</h5>
 <div class="announcements__about">
     @for (item of knowledgeCenterLinks(); track item.id;) {
-    <a [href]="item.url" data-testId="announcement_link" target="_blank" rel="noopener">{{
-        item.label
-    }}</a>
+    <a
+        class="announcements__about-link"
+        [href]="item.url"
+        data-testId="announcement_link"
+        target="_blank"
+        rel="noopener"
+        >{{ item.label }}</a
+    >
     }
 </div>
 
 <h5 class="announcements__title">{{ 'announcements.knowledge.contact.us' | dm }}</h5>
 <div class="announcements__about">
     @for (item of contactLinks(); track item.id;) {
-    <a [href]="item.url" data-testId="announcement_link" target="_blank" rel="noopener">{{
-        item.label
-    }}</a>
+    <a
+        class="announcements__about-link"
+        [href]="item.url"
+        data-testId="announcement_link"
+        target="_blank"
+        rel="noopener"
+        >{{ item.label }}</a
+    >
     }
 </div>
diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss
@@ -16,12 +16,29 @@
 .announcements__container {
     display: flex;
     justify-content: flex-end;
+}
+
+.announcements__link-container {
+    display: flex;
+    padding: $spacing-1;
+    gap: $spacing-1;
+    border-radius: $border-radius-lg;
+    &:hover {
+        background-color: $color-palette-primary-100;
+    }
 
     i {
         color: $color-palette-primary-500;
     }
 }
 
+.announcements__about-link {
+    padding: $spacing-1;
+    &:hover {
+        background-color: $color-palette-primary-100;
+    }
+}
+
 .announcements__list-item {
     display: flex;
     position: relative;
@@ -73,15 +90,13 @@
 .announcements__about {
     display: grid;
     flex-direction: column;
-    gap: $spacing-3;
+    gap: $spacing-0;
     margin: $spacing-3;
     grid-template-columns: 1fr 1fr;
 }
 
 .announcements__link {
     color: $color-palette-primary;
-    padding: $spacing-1;
-    border-radius: $border-radius-lg;
     &:hover {
         background-color: $color-palette-primary-100;
     }

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html
@@ -27,10 +27,10 @@
         *ngIf="notificationsUnreadCount"></span>
     <dot-dropdown-component
         id="dot-toolbar-notifications"
-        [disabled]="!notifications.length"
         (shutdown)="iframeOverlayService.hide()"
         (wasOpen)="iframeOverlayService.show()"
         (toggle)="toggleNotifications()"
+        data-testId="dot-toolbar-notifications"
         icon="pi pi-bell"
         position="right">
         <div class="toolbar-notifications">
@@ -40,11 +40,20 @@ <h3 class="toolbar-notifications__title" id="dot-toolbar-notifications-title">
                 </h3>
                 <p-button
                     id="dot-toolbar-notifications-button-dismiss-all"
+                    *ngIf="notifications.length"
                     (click)="dismissAllNotifications()"
                     label="{{ 'notifications_clear_all' | dm }}"
                     icon="pi pi-trash"
                     styleClass="p-button-rounded p-button-text p-button-sm p-button-primary"></p-button>
             </div>
+            <div class="dot-toolbar-notifications__empty" *ngIf="!notifications.length">
+                <span class="dot-toolbar-notifications__empty-title">
+                    {{ 'notifications_no_notifications_title' | dm }}
+                </span>
+                <span class="dot-toolbar-notifications__empty-info">
+                    {{ 'notifications_no_notifications' | dm }}
+                </span>
+            </div>
             <div class="toolbar-notifications__content" id="dot-toolbar-notifications-content">
                 <dot-notifications-list
                     id="dot-notifications-list"

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss
@@ -64,4 +64,22 @@ $notification-dot-badge-size: 0.625rem;
     .toolbar-notifications__footer button {
         margin: auto;
     }
+
+    .dot-toolbar-notifications__empty {
+        display: flex;
+        border-top: solid 1px $color-palette-gray-200;
+        flex-direction: column;
+        align-items: center;
+        padding: $spacing-4 0;
+    }
+
+    .dot-toolbar-notifications__empty-title {
+        font-size: $font-size-default;
+        font-weight: $font-weight-semi-bold;
+    }
+
+    .dot-toolbar-notifications__empty-info {
+        font-size: $font-size-sm;
+        color: $color-palette-gray-800;
+    }
 }
diff --git a/...-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.spec.ts b/...-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.spec.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { Observable, of as observableOf, Subject } from 'rxjs';
+import { Observable, of as observableOf, of, Subject } from 'rxjs';
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Component, DebugElement, Injectable, Input, signal } from '@angular/core';
@@ -40,9 +40,6 @@ class MockDotNotificationsListComponent {
     notifications: INotification;
 }
 
-@Injectable()
-class MockIframeOverlayService {}
-
 @Injectable()
 class MockDotcmsEventsService {
     private events: Subject<any> = new Subject();
@@ -82,10 +79,13 @@ class MockNotificationsService {
 
 describe('DotToolbarNotificationsComponent', () => {
     let fixture: ComponentFixture<DotToolbarNotificationsComponent>;
+    let iframeOverlayService: IframeOverlayService;
     const messageServiceMock = new MockDotMessageService({
         notifications_dismissall: 'Dismiss all',
         notifications_title: 'Notifications',
-        notifications_load_more: 'More'
+        notifications_load_more: 'More',
+        notifications_no_notifications_title: 'No More Notifications Here',
+        notifications_no_notifications: 'There are no notifications to show right now.'
     });
     const siteServiceMock = new SiteServiceMock();
 
@@ -99,7 +99,7 @@ describe('DotToolbarNotificationsComponent', () => {
             imports: [DotPipesModule, DotMessagePipe, ButtonModule, HttpClientTestingModule],
             providers: [
                 { provide: DotMessageService, useValue: messageServiceMock },
-                { provide: IframeOverlayService, useClass: MockIframeOverlayService },
+                { provide: IframeOverlayService, useClass: IframeOverlayService },
                 { provide: DotcmsEventsService, useClass: MockDotcmsEventsService },
                 { provide: LoginService, useClass: MockLoginService },
                 { provide: NotificationsService, useClass: MockNotificationsService },
@@ -115,6 +115,7 @@ describe('DotToolbarNotificationsComponent', () => {
         }).compileComponents();
 
         fixture = TestBed.createComponent(DotToolbarNotificationsComponent);
+        iframeOverlayService = fixture.debugElement.injector.get(IframeOverlayService);
     }));
 
     it(`should has a badge`, () => {
@@ -126,4 +127,24 @@ describe('DotToolbarNotificationsComponent', () => {
 
         expect(badge).not.toBeNull();
     });
+
+    it('should display the dropdown even if there are no notifications', () => {
+        spyOn(TestBed.inject(NotificationsService), 'getLastNotifications').and.returnValue(
+            of<any>({
+                entity: {
+                    totalUnreadNotifications: 0,
+                    notifications: [],
+                    total: 0
+                }
+            })
+        );
+
+        iframeOverlayService.show();
+        fixture.detectChanges();
+
+        const notificationsComponent = fixture.debugElement.query(
+            By.css('[data-testId="dot-toolbar-notifications"]')
+        );
+        expect(notificationsComponent).toBeDefined();
+    });
 });
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -2957,7 +2957,8 @@ notifications_dismiss=Dismiss
 notifications_dismissall=Dismiss All
 notifications_host_deletion_error=Error deleting Site &quot;{0}&quot;:
 notifications_load_more=Load more
-notifications_no_notifications=No Notifications to Show
+notifications_no_notifications_title=No More Notifications Here
+notifications_no_notifications=There are no notifications to show right now.
 notifications_show_all=Show All
 notifications_clear_all=Clear All
 notifications_show_only_me=Only Me