Merge pull request ceph#64375 from SundownRises/header-component

mgr/dashboard: Carbonised Notification Header

Reviewed-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -12,7 +12,9 @@ import {
   DialogModule,
   GridModule,
   BreadcrumbModule,
-  ModalModule
+  ModalModule,
+  ToggleModule,
+  ButtonModule
 } from 'carbon-components-angular';
 
 import { AppRoutingModule } from '~/app/app-routing.module';
@@ -26,6 +28,8 @@ import { DashboardHelpComponent } from './dashboard-help/dashboard-help.componen
 import { IdentityComponent } from './identity/identity.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { NotificationsComponent } from './notifications/notifications.component';
+import { NotificationPanelComponent } from './notification-panel/notification-panel.component';
+import { NotificationHeaderComponent } from './notification-panel/header/notification-header.component';
 
 // Icons
 import UserFilledIcon from '@carbon/icons/es/user--filled/20';
@@ -61,20 +65,25 @@ import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
     DialogModule,
     GridModule,
     BreadcrumbModule,
-    ModalModule
+    ModalModule,
+    ToggleModule,
+    ButtonModule
   ],
   declarations: [
     AboutComponent,
     ApiDocsComponent,
     BreadcrumbsComponent,
     NavigationComponent,
     NotificationsComponent,
+    NotificationPanelComponent,
+    NotificationHeaderComponent,
     DashboardHelpComponent,
     AdministrationComponent,
     IdentityComponent
   ],
-  providers: [ModalCdsService],
-  exports: [NavigationComponent, BreadcrumbsComponent]
+  exports: [NavigationComponent, BreadcrumbsComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [ModalCdsService]
 })
 export class NavigationModule {
   constructor(private iconService: IconService) {

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

@@ -209,7 +209,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
     );
   }
   toggleSidebar() {
-    this.notificationService.toggleSidebar();
+    this.notificationService.toggleSidebar(true, true);
   }
   trackByFn(item: any) {
     return item;

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/header/notification-header.component.html

@@ -0,0 +1,27 @@
+<div class="notification-header">
+  <div class="notification-header__top">
+    <div class="notification-header__title">
+      <cds-text i18n>Tasks and Notifications</cds-text>
+    </div>
+
+    <button
+      i18n
+      cdsButton="ghost"
+      size="sm"
+      (click)="onDismissAll()"
+      class="notification-header__dismiss-btn">
+      Dismiss all
+    </button>
+  </div>
+
+  <div class="notification-header__toggle">
+    <cds-toggle
+      [checked]="isMuted"
+      size="sm"
+      (checkedChange)="onToggleMute()"
+      label="Mute notifications"
+      i18n-label
+      hideLabel="true"> <!--hides the toggle state values (like "On/Off" in the toggle button)-->
+    </cds-toggle>
+  </div>
+</div>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/header/notification-header.component.scss

@@ -0,0 +1,56 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/theme';
+
+.notification-header {
+  display: flex;
+  flex-direction: column;
+  padding: spacing.$spacing-04;
+  border-bottom: 1px solid theme.$border-subtle-01;
+  background-color: theme.$layer-01;
+
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: spacing.$spacing-03;
+  }
+
+  &__title {
+    h4 {
+      @include type.type-style('heading-compact-01');
+
+      color: theme.$text-primary;
+      margin: 0;
+    }
+  }
+
+  &__dismiss-btn {
+    color: theme.$text-primary;
+
+    &:hover {
+      color: theme.$link-primary;
+    }
+  }
+
+  &__toggle {
+    cds-toggle {
+      margin: 0;
+
+      ::ng-deep {
+        .cds--toggle__label-text {
+          color: theme.$text-primary;
+        }
+
+        .cds--toggle__label {
+          color: theme.$text-primary;
+        }
+
+        .cds--toggle__text {
+          color: theme.$text-primary;
+        }
+      }
+    }
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/header/notification-header.component.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NotificationHeaderComponent } from './notification-header.component';
+import { NotificationService } from '../../../../shared/services/notification.service';
+import { BehaviorSubject } from 'rxjs';
+
+describe('NotificationHeaderComponent', () => {
+  let component: NotificationHeaderComponent;
+  let fixture: ComponentFixture<NotificationHeaderComponent>;
+  let notificationService: NotificationService;
+  let muteStateSubject: BehaviorSubject<boolean>;
+
+  beforeEach(async () => {
+    muteStateSubject = new BehaviorSubject<boolean>(false);
+    await TestBed.configureTestingModule({
+      declarations: [NotificationHeaderComponent],
+      providers: [
+        {
+          provide: NotificationService,
+          useValue: {
+            muteState$: muteStateSubject.asObservable(),
+            removeAll: jasmine.createSpy('removeAll'),
+            suspendToasties: jasmine.createSpy('suspendToasties')
+          }
+        }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationHeaderComponent);
+    component = fixture.componentInstance;
+    notificationService = TestBed.inject(NotificationService);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with default mute state', () => {
+    expect(component.isMuted).toBe(false);
+  });
+
+  it('should update mute state when subscription emits', () => {
+    muteStateSubject.next(true);
+    fixture.detectChanges();
+    expect(component.isMuted).toBe(true);
+  });
+
+  it('should emit dismissAll event and call removeAll on dismiss', () => {
+    spyOn(component.dismissAll, 'emit');
+
+    component.onDismissAll();
+
+    expect(component.dismissAll.emit).toHaveBeenCalled();
+    expect(notificationService.removeAll).toHaveBeenCalled();
+  });
+
+  it('should toggle mute state', () => {
+    component.isMuted = false;
+    component.onToggleMute();
+    expect(notificationService.suspendToasties).toHaveBeenCalledWith(true);
+
+    component.isMuted = true;
+    component.onToggleMute();
+    expect(notificationService.suspendToasties).toHaveBeenCalledWith(false);
+  });
+
+  it('should unsubscribe on destroy', () => {
+    spyOn(component['subs'], 'unsubscribe');
+    component.ngOnDestroy();
+    expect(component['subs'].unsubscribe).toHaveBeenCalled();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/header/notification-header.component.ts

@@ -0,0 +1,38 @@
+import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { NotificationService } from '../../../../shared/services/notification.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'cd-notification-header',
+  templateUrl: './notification-header.component.html',
+  styleUrls: ['./notification-header.component.scss']
+})
+export class NotificationHeaderComponent implements OnInit, OnDestroy {
+  @Output() dismissAll = new EventEmitter<void>();
+
+  isMuted = false;
+  private subs = new Subscription();
+
+  constructor(private notificationService: NotificationService) {}
+
+  ngOnInit(): void {
+    this.subs.add(
+      this.notificationService.muteState$.subscribe((isMuted) => {
+        this.isMuted = isMuted;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+  onDismissAll(): void {
+    this.dismissAll.emit();
+    this.notificationService.removeAll();
+  }
+
+  onToggleMute(): void {
+    this.notificationService.suspendToasties(!this.isMuted);
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel.component.html

@@ -0,0 +1,4 @@
+<div class="notification-panel">
+  <cd-notification-header></cd-notification-header>
+  <!-- Body and footer components will be added here later -->
+</div>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel.component.scss

@@ -0,0 +1,18 @@
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+
+.notification-panel {
+  @include theme.theme(themes.$g10);
+
+  position: absolute;
+  top: spacing.$spacing-09;
+  right: 0;
+  width: 400px; // Keep original width as it doesn't map to a spacing token
+  background-color: $layer-01;
+  box-shadow: $shadow;
+  border: 1px solid $border-subtle-01;
+  z-index: 6000;
+  color: $text-primary;
+}

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel.component.spec.ts

@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NotificationPanelComponent } from './notification-panel.component';
+import { NotificationService } from '../../../shared/services/notification.service';
+
+describe('NotificationPanelComponent', () => {
+  let component: NotificationPanelComponent;
+  let fixture: ComponentFixture<NotificationPanelComponent>;
+  let notificationService: NotificationService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NotificationPanelComponent],
+      providers: [
+        {
+          provide: NotificationService,
+          useValue: {
+            toggleSidebar: jasmine.createSpy('toggleSidebar')
+          }
+        }
+      ]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationPanelComponent);
+    component = fixture.componentInstance;
+    notificationService = TestBed.inject(NotificationService);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('handleClickOutside', () => {
+    it('should close sidebar when clicking outside', () => {
+      // Create a click event outside the component
+      const outsideClickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      });
+      document.dispatchEvent(outsideClickEvent);
+
+      expect(notificationService.toggleSidebar).toHaveBeenCalledWith(false, true);
+    });
+
+    it('should not close sidebar when clicking inside', () => {
+      // Create a click event inside the component
+      const insideClickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true
+      });
+
+      const componentElement = fixture.nativeElement;
+      componentElement.dispatchEvent(insideClickEvent);
+
+      expect(notificationService.toggleSidebar).not.toHaveBeenCalled();
+    });
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel.component.ts

@@ -0,0 +1,19 @@
+import { Component, ElementRef, HostListener } from '@angular/core';
+import { NotificationService } from '../../../shared/services/notification.service';
+
+@Component({
+  selector: 'cd-notification-panel',
+  templateUrl: './notification-panel.component.html',
+  styleUrls: ['./notification-panel.component.scss']
+})
+export class NotificationPanelComponent {
+  constructor(public notificationService: NotificationService, private elementRef: ElementRef) {}
+
+  @HostListener('document:click', ['$event'])
+  handleClickOutside(event: Event) {
+    const clickedInside = this.elementRef.nativeElement.contains(event.target);
+    if (!clickedInside) {
+      this.notificationService.toggleSidebar(false, true);
+    }
+  }
+}