mgr/dashboard: add footer to side-panel

Fixes: https://tracker.ceph.com/issues/73788Wq

Signed-off-by: Naman Munet <[email protected]>

Author: Naman Munet

src/pybind/mgr/dashboard/frontend/src/app/shared/components/side-panel/side-panel.component.html

@@ -4,23 +4,18 @@
 
 <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>
+  <div>
+    <cds-icon-button kind="ghost"
+                     class="float-end"
+                     title="Close"
+                     (click)="close()">
+      <svg cdsIcon="close"></svg>
+    </cds-icon-button>
+    <div class="panel-header"
+         *ngIf="headerText">
+    {{ headerText }}
+    </div>
   </div>
+  <ng-content select=".panel-content"></ng-content>
+  <ng-content select=".panel-footer"></ng-content>
 </cds-panel>

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 {
@@ -16,6 +18,24 @@
   .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-04 layout.$spacing-04 0 layout.$spacing-04;
+  }
+
+  .panel-content {
+    overflow: auto;
+    padding: 0 layout.$spacing-04 0 layout.$spacing-04;
+  }
+
+  .panel-footer {
+    display: flex;
+    justify-content: flex-end;
+    border-top: 1px solid theme.$border-subtle-02;
   }
 }