From b5620f74dd62f0e41c9be0f6ec10eec91915d239 Mon Sep 17 00:00:00 2001
From: Afreen Misbah <afreen@ibm.com>
Date: Fri, 19 Dec 2025 03:16:05 +0530
Subject: [PATCH] mgr/dashboard: Add footer

Signed-off-by: Afreen Misbah <afreen@ibm.com>
---
 .../notification-area.component.scss          |  9 +--------
 .../notification-footer.component.html        |  1 +
 .../notification-footer.component.scss        | 19 ++++++++++---------
 .../notification-footer.component.ts          |  1 +
 .../notification-header.component.scss        |  1 -
 .../notification-panel.component.html         |  7 ++++---
 .../notification-panel.component.ts           |  6 ++++++
 7 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
index f6767694ad95e..bcf211a394e84 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
@@ -10,9 +10,8 @@
   padding: $spacing-05 $spacing-05 $spacing-03;
   background-color: $layer-01;
   position: sticky;
-  top: 0;
   z-index: 2;
-  display: block;
+  inset-block-start: 3.6125rem;
 }
 
 .notification-timestamp {
@@ -110,9 +109,3 @@
   border-bottom: 1px solid $border-subtle-01;
 }
 
-:host {
-  display: block;
-  height: 100%;
-  overflow-y: auto;
-  background-color: $layer-01;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
index 4d6475a55e86b..3afd57c71bdb3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.html
@@ -2,6 +2,7 @@
   <cds-button
     kind="ghost"
     size="sm"
+    class="notification-footer__view-all-button"
     [routerLink]="['/notifications']"
     (click)="closePanel($event)"
     i18n>View all</cds-button>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
index 0a513f7475a1f..a2209232581e1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
@@ -2,16 +2,17 @@
 @use '@carbon/styles/scss/theme';
 
 .notification-footer {
+  position: sticky;
+  z-index: 2;
   display: flex;
-  justify-content: flex-start;
-  padding: spacing.$spacing-03;
-  border-top: 1px solid theme.$border-subtle-01;
-
-  cds-button {
+  align-items: center;
+  background-color: theme.$layer-01;
+  block-size: 2.5rem;
+  border-block-start: 1px solid theme.$border-subtle-01;
+  inset-block-end: 0;
+  min-block-size: 2.5rem;
+  &__view-all-button {
     color: theme.$text-primary;
-
-    &:hover {
-      color: theme.$link-primary;
-    }
+    padding: spacing.$spacing-03 spacing.$spacing-05;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
index 5dcf0d39c3674..d62ff40fc2de2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.ts
@@ -14,4 +14,5 @@ export class NotificationFooterComponent {
     event.stopPropagation();
     this.notificationService.toggleSidebar(false, true);
   }
+
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
index d903bf860d62b..87f8cb4a71f96 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
@@ -19,5 +19,4 @@
   &__dismiss-btn {
     color: theme.$text-primary;
   }
-
 }
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 826957a020679..f23d47b02fac2 100644
--- 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
@@ -4,13 +4,14 @@
   cdsTheme="g10"
   class="notification-panel__container"
   hasScrollingContent="true"
+  (dismissAll)="handleDismissAll"
   @panelAnimation>
   <cds-modal-header
     [showCloseButton]="true">
     <cd-notification-header></cd-notification-header>
   </cds-modal-header>
-  <cd-notification-area></cd-notification-area>
-  <cds-modal-footer>
-      <cd-notification-footer></cd-notification-footer>
+    <cd-notification-area></cd-notification-area>
+  <cds-modal-footer *ngIf="showFooter">
+    <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.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts
index 1eb245f4c84a3..f82a6a798a831 100644
--- 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
@@ -21,6 +21,12 @@ import { trigger, transition, style, animate } from '@angular/animations';
 })
 export class NotificationPanelComponent {
   @Input() isPanelOpen: boolean = true;
+  showFooter = true;
 
   constructor(public notificationService: NotificationService) {}
+
+  handleDismissAll() {
+    this.showFooter = false;
+    // TODO: Also hoide if there is  afooter
+  }
 }
-- 
2.47.3