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 2b9695764edde9c07ea74ffdad3c29ba5e2700ec..d5a1679061bc4bc7f72ea3ee7d09714c9da4f137 100644 (file)
--- 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 889607e5e3615c7b7f7d9f4055525ec5fecf145e..0af5a25a4024a2078d4996344748b5c894ef08cf 100644 (file)
--- 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 3b4fc1c302c543f349cb031834206303e2af0d96..f3c44c62d7196e034f6536c383a2bc29de462a15 100644 (file)
--- 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 7b5a4efe09669abf6c7e6b8aea4df1efefc2198a..19661afad3cd5e29817a7c0057b6acf0fddab1fd 100644 (file)
--- 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>();