mgr/dashboard:Added modal for notiifcation area

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index ffa28d80efeb7e7cb31a3256bfb9a1b353e16227..109279f4ea18d4d00df9262e11286859eacff797 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -1,5 +1,10 @@
 <div class="cd-navbar-main">
-  <cd-notification-panel *ngIf="isNotifPanelOpen"></cd-notification-panel>
+  <!-- ************************ -->
+  <!-- NOTIFICATION PANEL     -->
+  <!-- ************************ -->
+  <cd-notification-panel
+    *ngIf="isNotifPanelOpen"
+    [isPanelOpen]="isNotifPanelOpen"></cd-notification-panel>
   <!-- ************************ -->
   <!-- HEADER                   -->
   <!-- ************************ -->

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
index 83b6e3332f0317d1904b20fab35d024252ea9f26..826957a020679f71585a054a1c693f0295b7b501 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html
@@ -1,5 +1,16 @@
-<div class="notification-panel">
-  <cd-notification-header></cd-notification-header>
+<cds-modal
+  [open]="isPanelOpen"
+  size="xs"
+  cdsTheme="g10"
+  class="notification-panel__container"
+  hasScrollingContent="true"
+  @panelAnimation>
+  <cds-modal-header
+    [showCloseButton]="true">
+    <cd-notification-header></cd-notification-header>
+  </cds-modal-header>
   <cd-notification-area></cd-notification-area>
-  <cd-notification-footer></cd-notification-footer>
-</div>
+  <cds-modal-footer>
+      <cd-notification-footer></cd-notification-footer>
+  </cds-modal-footer>
+</cds-modal>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
index 8264b4f5e6af4779efac8dfad4cafb3b1bac099b..40f81de4c8373053851d2ce4664040e2ead0e0da 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
@@ -1,32 +1,21 @@
-@use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
 
-.notification-panel {
-  @include theme.theme(themes.$g10);
+$block-class: notification-panel;
+$block-size: 38.5rem;
 
+.#{$block-class}__container {
   position: fixed;
-  top: spacing.$spacing-09;
-  right: 0;
-  width: 400px;
-  height: 700px;
-  background-color: $layer-01;
-  box-shadow: $shadow;
-  border: 1px solid $border-subtle-01;
-  z-index: 6000;
-  color: $text-primary;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  cd-notification-header {
-    flex: 0 0 auto;
-  }
-
-  cd-notification-area {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    min-height: 0; // Failing in firefox without this
-  }
+  z-index: 2;
+  overflow: auto;
+  background-color: var(--cds-layer-01);
+  border-block-end: 1px solid var(--cds-border-subtle-02);
+  border-inline-start: 1px solid var(--cds-border-subtle-02);
+  box-shadow: 0 0.125rem 0.25rem var(--cds-overlay);
+  min-block-size: $block-size;
+  min-inline-size: 20rem;
+  inset-block-start: 3rem;
+  inset-inline-end: 0;
+  max-block-size: $block-size;
+  max-inline-size: 22.75rem;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
index 1dcd166d9b6d758b8275ecddb980e8f45396001f..1eb245f4c84a3519e5991d7a9beebf38c74b79e1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
@@ -1,20 +1,26 @@
-import { Component, ElementRef, HostListener } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NotificationService } from '~/app/shared/services/notification.service';
+import { trigger, transition, style, animate } from '@angular/animations';
 
 @Component({
   selector: 'cd-notification-panel',
   templateUrl: './notification-panel.component.html',
   styleUrls: ['./notification-panel.component.scss'],
-  standalone: false
+  standalone: false,
+  animations: [
+    trigger('panelAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-38.5rem)' }),
+        animate(
+          '240ms cubic-bezier(0.2, 0, 0.38, 0.9)',
+          style({ opacity: 1, transform: 'translateY(0)' })
+        )
+      ])
+    ])
+  ]
 })
 export class NotificationPanelComponent {
-  constructor(public notificationService: NotificationService, private elementRef: ElementRef) {}
+  @Input() isPanelOpen: boolean = true;
 
-  @HostListener('document:click', ['$event'])
-  handleClickOutside(event: Event) {
-    const clickedInside = this.elementRef.nativeElement.contains(event.target);
-    if (!clickedInside) {
-      this.notificationService.toggleSidebar(false, true);
-    }
-  }
+  constructor(public notificationService: NotificationService) {}
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
index ff0a276959d3dc3fe6cc933f30b85048e43b52a4..05655e3109192c984d63d5dd763567aded992f7f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
@@ -1,9 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
 import { ICON_TYPE, IconSize } from '~/app/shared/enum/icons.enum';
-import { CdNotification } from '~/app/shared/models/cd-notification';
 import { NotificationService } from '~/app/shared/services/notification.service';
 import { SummaryService } from '~/app/shared/services/summary.service';
 
@@ -14,12 +13,10 @@ import { SummaryService } from '~/app/shared/services/summary.service';
   standalone: false
 })
 export class NotificationsComponent implements OnInit, OnDestroy {
-  @Input() isPanelOpen: boolean = false;
   icons = ICON_TYPE;
   iconSize = IconSize.size20;
   hasRunningTasks = false;
   hasNotifications = false;
-  notificationCount = 0;
   isMuted = false;
   private subs = new Subscription();
 
@@ -32,13 +29,7 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     this.subs.add(
       this.summaryService.subscribe((summary) => {
         this.hasRunningTasks = summary.executing_tasks.length > 0;
-      })
-    );
-
-    this.subs.add(
-      this.notificationService.data$.subscribe((notifications: CdNotification[]) => {
-        this.hasNotifications = notifications.length > 0;
-        this.notificationCount = notifications.length;
+        // TODO: when notifications are mute - show unread icon too
       })
     );
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
index 1dba3684c58f72b79bd27103274a09159ee70eb8..8185be6eebb882c1dad67e4cd8f77891a9caac15 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
@@ -45,7 +45,6 @@ export class NotificationService {
   private activeToasts: ToastContent[] = [];
   KEY = 'cdNotifications';
   MUTE_KEY = 'cdNotificationsMuted';
-  private readonly MAX_NOTIFICATIONS = 10;
 
   constructor(
     private taskMessageService: TaskMessageService,
@@ -97,9 +96,6 @@ export class NotificationService {
     const notifications = this.dataSource.getValue();
     notifications.push(notification);
     notifications.sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1));
-    while (notifications.length > this.MAX_NOTIFICATIONS) {
-      notifications.pop();
-    }
     this.dataSource.next(notifications);
     this.persistNotifications(notifications);
   }