From: Nizamudeen A <nia@redhat.com>
Date: Wed, 23 Jul 2025 05:24:51 +0000 (+0530)
Subject: mgr/dashboard: introduce details card component
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=7cf2b5fd22de142d8175c4cc4399ab080bf03722;p=ceph.git

mgr/dashboard: introduce details card component

as per https://pages.github.ibm.com/ibmcloud/pal/storybook/?path=/story/components-card--details-with-stacked-rows

added a details component which can be used as

```
<cd-details-card title="card title">
  <ng-container class="details-body-content">
   <div cdsCol [columnNumbers]="{lg: 4}">
     <span class="cds--label">
       label
     </span>
     <span>value</span>
   </div
  </ng-container>
</cd-details-card>
```

Fixes: https://tracker.ceph.com/issues/72246
Signed-off-by: Nizamudeen A <nia@redhat.com>
---

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 b22124cebfd..74e9b8f0212 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
@@ -37,7 +37,8 @@ import {
   ComboBoxModule,
   ProgressIndicatorModule,
   PanelModule,
-  LayoutModule
+  LayoutModule,
+  TilesModule
 } from 'carbon-components-angular';
 import EditIcon from '@carbon/icons/es/edit/20';
 import CodeIcon from '@carbon/icons/es/code/16';
@@ -87,6 +88,7 @@ import { SidePanelComponent } from './side-panel/side-panel.component';
 import { ChartsModule } from '@carbon/charts-angular';
 import { InlineMessageComponent } from './inline-message/inline-message.component';
 import { IconComponent } from './icon/icon.component';
+import { DetailsCardComponent } from './details-card/details-card.component';
 
 // Icons
 import InfoIcon from '@carbon/icons/es/information/16';
@@ -135,7 +137,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     BaseChartDirective,
     PanelModule,
     ChartsModule,
-    LayoutModule
+    LayoutModule,
+    TilesModule
   ],
   declarations: [
     SparklineComponent,
@@ -180,7 +183,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     ProgressComponent,
     SidePanelComponent,
     IconComponent,
-    InlineMessageComponent
+    InlineMessageComponent,
+    DetailsCardComponent
   ],
   providers: [provideCharts(withDefaultRegisterables())],
   exports: [
@@ -222,7 +226,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     ProgressComponent,
     SidePanelComponent,
     IconComponent,
-    InlineMessageComponent
+    InlineMessageComponent,
+    DetailsCardComponent
   ]
 })
 export class ComponentsModule {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
new file mode 100644
index 00000000000..f51fbae0310
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html
@@ -0,0 +1,12 @@
+<cds-tile>
+  <div class="details-card-header">
+    <span class="cds--type-heading-03"
+          i18n>{{ cardTitle }}</span>
+  </div>
+
+  <div class="details-card-body">
+    <div cdsRow>
+      <ng-content select=".details-body-content"></ng-content>
+    </div>
+  </div>
+</cds-tile>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss
new file mode 100644
index 00000000000..5d896839cd4
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss
@@ -0,0 +1,17 @@
+@use '@carbon/layout';
+
+.details-card-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: layout.$spacing-05;
+  position: relative;
+}
+
+::ng-deep .cds--label {
+  display: block;
+}
+
+.cds--row {
+  row-gap: layout.$spacing-05;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts
new file mode 100644
index 00000000000..05f5c9ab6cd
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsCardComponent } from './details-card.component';
+
+describe('DetailsCardComponent', () => {
+  let component: DetailsCardComponent;
+  let fixture: ComponentFixture<DetailsCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DetailsCardComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DetailsCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts
new file mode 100644
index 00000000000..e248ea81ce1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-details-card',
+  templateUrl: './details-card.component.html',
+  styleUrl: './details-card.component.scss'
+})
+export class DetailsCardComponent {
+  @Input()
+  cardTitle: string;
+}