From: Naman Munet <naman.munet@ibm.com>
Date: Wed, 21 Jan 2026 11:50:15 +0000 (+0530)
Subject: mgr/dashboard: side-panel enhancements
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=dc3f799cb3c98f17c71c5089a69b2a74c38c6039;p=ceph.git

mgr/dashboard: side-panel enhancements

fixes: https://tracker.ceph.com/issues/74486

Signed-off-by: Naman Munet <naman.munet@ibm.com>
(cherry picked from commit 4c4460a96af38edd6ac5f119b2f288bbd45cbd09)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
	src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 2b9695764edd..d5a1679061bc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -41,7 +41,8 @@ import {
   TagModule,
   LinkModule,
   LayerModule,
-  TilesModule
+  TilesModule,
+  ThemeModule
 } from 'carbon-components-angular';
 
 import { MotdComponent } from '~/app/shared/components/motd/motd.component';
@@ -141,7 +142,8 @@ import { ChartsModule } from '@carbon/charts-angular';
     TagModule,
     LinkModule,
     LayerModule,
-    TilesModule
+    TilesModule,
+    ThemeModule
   ],
   declarations: [
     SparklineComponent,
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
index 889607e5e361..0af5a25a4024 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html
@@ -3,24 +3,23 @@
      *ngIf="expanded && overlay"></div>
 
 <cds-panel [expanded]="expanded"
-           [attr.panel-size]="size">
-  <cds-icon-button
-    kind="ghost"
-    class="float-end"
-    title="Close"
-    (click)="close()">
-    <svg
-      class="cds--btn__icon"
-      cdsIcon="close"></svg>
-  </cds-icon-button>
-
-  <div
-    class="panel-header spacing-03"
-    *ngIf="headerText">
-      {{ headerText }}
-  </div>
-
-  <div class="spacing-03">
-    <ng-content select=".panel-content"></ng-content>
+           [attr.panel-size]="size"
+           [cdsLayer]="layer"
+           [cdsTheme]="theme">
+  <div>
+    <cds-icon-button kind="ghost"
+                     class="float-end"
+                     title="Close"
+                     i18n-title
+                     (click)="close()">
+      <svg cdsIcon="close"></svg>
+    </cds-icon-button>
+    <div class="panel-header"
+         *ngIf="headerText">
+      <p class="cds--type-heading-03">{{ headerText }}</p>
+      <ng-content select="[panel-header-description]"></ng-content>
+    </div>
   </div>
+  <ng-content select=".panel-content"></ng-content>
+  <ng-content select=".panel-footer"></ng-content>
 </cds-panel>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
index 3b4fc1c302c5..f3c44c62d719 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.scss
@@ -1,4 +1,6 @@
 @use './src/styles/vendor/variables' as vv;
+@use '@carbon/layout';
+@use '@carbon/styles/scss/theme';
 
 :host ::ng-deep cds-panel {
   &[panel-size='sm'] .cds--header-panel--expanded {
@@ -13,9 +15,34 @@
     inline-size: 40rem;
   }
 
+  &[panel-size='xl'] .cds--header-panel--expanded {
+    inline-size: 60rem;
+  }
+
+  &[panel-size='2xl'] .cds--header-panel--expanded {
+    inline-size: 80rem;
+  }
+
   .cds--header-panel--expanded {
-    background-color: vv.$white;
     max-inline-size: 100%;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .panel-header {
+    padding: layout.$spacing-05 layout.$spacing-05 0 layout.$spacing-05;
+  }
+
+  .panel-content {
+    overflow-x: hidden;
+    padding: 0 layout.$spacing-05 0 layout.$spacing-05;
+  }
+
+  .panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    border-top: 1px solid theme.$border-subtle-02;
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
index 7b5a4efe0966..19661afad3cd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.ts
@@ -3,13 +3,16 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'cd-side-panel',
   templateUrl: './side-panel.component.html',
-  styleUrl: './side-panel.component.scss'
+  styleUrl: './side-panel.component.scss',
+  standalone: false
 })
 export class SidePanelComponent {
   @Input() expanded = false;
   @Input() headerText = '';
   @Input() overlay = true;
-  @Input() size: 'sm' | 'md' | 'lg' = 'lg';
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'lg';
+  @Input() layer: number;
+  @Input() theme: string;
 
   @Output() closed = new EventEmitter<void>();