From 0f4122d6cb0cc605a53b8eb020d5135f9dd2f466 Mon Sep 17 00:00:00 2001
From: pujashahu <pshahu@redhat.com>
Date: Mon, 11 Aug 2025 21:26:48 +0530
Subject: [PATCH] mgr/dashboard: When the about panel is open, top-right
 options stay clickable, opening pages in the background

Fixes: https://tracker.ceph.com/issues/70500

Signed-off-by: pujashahu <pshahu@redhat.com>
(cherry picked from commit 887053c2228a05d82f3aa0cadaee0e9b8e449851)
Signed-off-by: pujashahu <pshahu@redhat.com>
---
 .../navigation/about/about.component.html     | 86 ++++++++++---------
 .../navigation/about/about.component.scss     | 36 ++++----
 .../core/navigation/about/about.component.ts  |  8 +-
 .../dashboard-help.component.ts               | 15 ++--
 .../app/core/navigation/navigation.module.ts  |  8 +-
 5 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
index 9112d2d010839..6e6e5232bddfe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
@@ -1,47 +1,53 @@
-<div class="about-container">
-  <div class="modal-header">
-    <button type="button"
-            class="btn-close float-end"
-            aria-label="Close"
-            i18n-aria-label
-            (click)="activeModal.close()">
-    </button>
-  </div>
-  <div class="modal-body">
-    <img src="assets/Ceph_Ceph_Logo_with_text_red_white.svg"
-         class="ceph-logo"
-         alt="{{ projectConstants.organization }}">
-    <h3>
+<cds-modal [open]="open"
+           size="md"
+           (overlaySelected)="closeModal()">
+  <cds-modal-header (closeSelect)="closeModal()">
+    <div class="header-content">
+      <img src="assets/Ceph_Ceph_Logo_with_text_red_white.svg"
+           class="ceph-logo"
+           alt="{{ projectConstants.organization }}">
+    <h3 class="modal-title">
       <strong>{{ projectConstants.projectName }}</strong>
     </h3>
-    <div class="product-versions">
-      <strong i18n>Version</strong>
-      <br>
-      {{ versionNumber }}
-      {{ versionHash }}
+    </div>
+
+  </cds-modal-header>
+    <section cdsModalContent>
+    <div class="modal-body" >
+      <div class="product-versions">
+        <strong i18n>Version</strong>
+        <br>
+        {{ versionNumber }}
+        {{ versionHash }}
+        <br>
+        {{ versionName }}
+      </div>
+
       <br>
-      {{ versionName }}
+
+      <dl>
+        <dt i18n>Ceph Manager</dt>
+        <dd>{{ hostAddr }}</dd>
+        <dt i18n>User</dt>
+        <dd>{{ modalVariables.user }}</dd>
+        <dt i18n>User Role</dt>
+        <dd>{{ modalVariables.role }}</dd>
+        <dt i18n>Browser</dt>
+        <dd>{{ modalVariables.browserName }}</dd>
+        <dt i18n>Browser Version</dt>
+        <dd>{{ modalVariables.browserVersion }}</dd>
+        <dt i18n>Browser OS</dt>
+        <dd>{{ modalVariables.browserOS }}</dd>
+      </dl>
     </div>
-    <br>
-    <dl>
-      <dt i18n>Ceph Manager</dt>
-      <dd>{{ hostAddr }}</dd>
-      <dt i18n>User</dt>
-      <dd>{{ modalVariables.user }}</dd>
-      <dt i18n>User Role</dt>
-      <dd>{{ modalVariables.role }}</dd>
-      <dt i18n>Browser</dt>
-      <dd>{{ modalVariables.browserName }}</dd>
-      <dt i18n>Browser Version</dt>
-      <dd>{{ modalVariables.browserVersion }}</dd>
-      <dt i18n>Browser OS</dt>
-      <dd>{{ modalVariables.browserOS }}</dd>
-    </dl>
-  </div>
-  <div class="modal-footer">
-    <div class="text-left">
+    </section>
+
+  <cds-modal-footer>
+    <div class="footer-content">
       {{ projectConstants.copyright }}
       {{ projectConstants.license }}
     </div>
-  </div>
-</div>
+  </cds-modal-footer>
+</cds-modal>
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
index 78c7fe550d57f..f3b1f1bc15467 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -1,43 +1,41 @@
 @use './src/styles/vendor/variables' as vv;
+@use '@carbon/layout';
 
-.about-container {
+::ng-deep .cds--modal-container {
   background-color: vv.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
   color: vv.$white;
-  text-shadow: 1px 1px vv.$secondary;
+  position: relative;
 }
 
-.product-versions {
-  margin-top: 30px;
-}
-
-.product-versions strong {
-  margin-right: 10px;
+.header-content {
+  padding-left: layout.$spacing-11;
+  padding-top: layout.$spacing-07;
 }
 
-.modal-header {
-  border-bottom: 0;
+.product-versions {
+  margin-top: layout.$spacing-05;
 }
 
-.modal-header .close {
-  color: vv.$white;
-  font-size: 2em;
+.product-versions strong {
+  margin-right: layout.$spacing-03;
 }
 
 .modal-body {
-  padding-left: 80px;
-  padding-right: 80px;
+  color: vv.$white;
+  padding-left: layout.$spacing-11;
+  padding-right: layout.$spacing-11;
 }
 
 .ceph-logo {
-  margin-bottom: 30px;
-  width: 25%;
+  margin-bottom: layout.$spacing-07;
+  width: 20%;
 }
 
-.modal-footer {
+::ng-deep .cds--modal-footer {
   border-top: 0;
   display: block;
-  padding: 15px 80px 35px;
+  padding: layout.$spacing-05 layout.$spacing-12 layout.$spacing-07;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
index 3a5c2eaf04721..1f74c360a3372 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
@@ -1,9 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BaseModal } from 'carbon-components-angular';
 import { detect } from 'detect-browser';
 import { Subscription } from 'rxjs';
-
 import { UserService } from '~/app/shared/api/user.service';
 import { AppConstants, USER, VERSION_PREFIX } from '~/app/shared/constants/app.constants';
 import { LocalStorage } from '~/app/shared/enum/local-storage-enum';
@@ -16,7 +14,7 @@ import { SummaryService } from '~/app/shared/services/summary.service';
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss']
 })
-export class AboutComponent implements OnInit, OnDestroy {
+export class AboutComponent extends BaseModal implements OnInit, OnDestroy {
   modalVariables: any;
   versionNumber: string;
   versionHash: string;
@@ -28,11 +26,11 @@ export class AboutComponent implements OnInit, OnDestroy {
   copyright: string;
 
   constructor(
-    public activeModal: NgbActiveModal,
     private summaryService: SummaryService,
     private userService: UserService,
     private authStorageService: AuthStorageService
   ) {
+    super();
     this.userPermission = this.authStorageService.getPermissions().user;
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
index 88da15472e3e5..30bf6f8efc0c6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.ts
@@ -2,11 +2,13 @@ import { Component, OnInit } from '@angular/core';
 
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 
-import { FeedbackComponent } from '~/app/ceph/shared/feedback/feedback.component';
 import { Icons } from '~/app/shared/enum/icons.enum';
 import { DocService } from '~/app/shared/services/doc.service';
-import { ModalService } from '~/app/shared/services/modal.service';
+
 import { AboutComponent } from '../about/about.component';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
+import { FeedbackComponent } from '~/app/ceph/shared/feedback/feedback.component';
+import { ModalService } from '~/app/shared/services/modal.service';
 
 @Component({
   selector: 'cd-dashboard-help',
@@ -15,11 +17,14 @@ import { AboutComponent } from '../about/about.component';
 })
 export class DashboardHelpComponent implements OnInit {
   docsUrl: string;
-  modalRef: NgbModalRef;
   icons = Icons;
   bsModalRef: NgbModalRef;
 
-  constructor(private modalService: ModalService, private docService: DocService) {}
+  constructor(
+    private docService: DocService,
+    private modalCdsService: ModalCdsService,
+    private modalService: ModalService
+  ) {}
 
   ngOnInit() {
     this.docService.subscribeOnce('dashboard', (url: string) => {
@@ -28,7 +33,7 @@ export class DashboardHelpComponent implements OnInit {
   }
 
   openAboutModal() {
-    this.modalRef = this.modalService.show(AboutComponent, null, { size: 'lg' });
+    this.modalCdsService.show(AboutComponent);
   }
 
   openFeedbackModal() {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index d5bc8bc936a4a..0b6eaa8d531b0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -11,7 +11,8 @@ import {
   ThemeModule,
   DialogModule,
   GridModule,
-  BreadcrumbModule
+  BreadcrumbModule,
+  ModalModule
 } from 'carbon-components-angular';
 
 import { AppRoutingModule } from '~/app/app-routing.module';
@@ -42,6 +43,7 @@ import ObservabilityIcon from '@carbon/icons/es/observed--hail/20';
 import AdminIcon from '@carbon/icons/es/network--admin-control/20';
 import LockedIcon from '@carbon/icons/es/locked/16';
 import LogoutIcon from '@carbon/icons/es/logout/16';
+import { ModalCdsService } from '~/app/shared/services/modal-cds.service';
 
 @NgModule({
   imports: [
@@ -58,7 +60,8 @@ import LogoutIcon from '@carbon/icons/es/logout/16';
     ThemeModule,
     DialogModule,
     GridModule,
-    BreadcrumbModule
+    BreadcrumbModule,
+    ModalModule
   ],
   declarations: [
     AboutComponent,
@@ -70,6 +73,7 @@ import LogoutIcon from '@carbon/icons/es/logout/16';
     AdministrationComponent,
     IdentityComponent
   ],
+  providers: [ModalCdsService],
   exports: [NavigationComponent, BreadcrumbsComponent]
 })
 export class NavigationModule {
-- 
2.39.5