From 361ccf6da86d7e3392d504e8e65d9d7e7f6e86cd Mon Sep 17 00:00:00 2001
From: Khanjan Dalwadi <80506682+KD1712@users.noreply.github.com>
Date: Tue, 4 Jun 2024 19:43:15 +0530
Subject: [PATCH] Common Details Overview Section Card Content (#1599)

* Created a reusable component for content in common section card

* Removed Data array processing in CommonSectionCardContentComponent and refactored its html

---------

Co-authored-by: khanjan <khanjan@khanjans-MacBook-Air.local>
---
 ...e-flag-details-page-content.component.html | 13 +++++---
 ...lag-overview-details-footer.component.html |  2 +-
 ...erview-details-section-card.component.html | 12 +++----
 ...lag-root-section-card-table.component.scss |  2 +-
 ...common-section-card-content.component.html | 16 ++++++++++
 ...common-section-card-content.component.scss |  7 +++++
 ...mon-section-card-content.component.spec.ts | 22 +++++++++++++
 .../common-section-card-content.component.ts  | 31 +++++++++++++++++++
 types/src/Experiment/interfaces.ts            |  2 +-
 9 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.html
 create mode 100644 frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.scss
 create mode 100644 frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.spec.ts
 create mode 100644 frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.ts

diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
index 6c7d747348..41fe2b1864 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
@@ -1,7 +1,12 @@
 <app-common-section-card-list>
   <app-feature-flag-overview-details-section-card section-card></app-feature-flag-overview-details-section-card>
-  <app-feature-flag-inclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card>inclusions-card</app-feature-flag-inclusions-section-card>
-  <app-feature-flag-exclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card>exclusions-card</app-feature-flag-exclusions-section-card>
-  <app-feature-flag-exposures-section-card *ngIf="(activeTabIndex$ | async) === 1" section-card>exposures-card</app-feature-flag-exposures-section-card>
+  <app-feature-flag-inclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card
+    >inclusions-card</app-feature-flag-inclusions-section-card
+  >
+  <app-feature-flag-exclusions-section-card *ngIf="(activeTabIndex$ | async) === 0" section-card
+    >exclusions-card</app-feature-flag-exclusions-section-card
+  >
+  <app-feature-flag-exposures-section-card *ngIf="(activeTabIndex$ | async) === 1" section-card
+    >exposures-card</app-feature-flag-exposures-section-card
+  >
 </app-common-section-card-list>
-
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-footer/feature-flag-overview-details-footer.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-footer/feature-flag-overview-details-footer.component.html
index 97313efe5b..ec9e6cf0be 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-footer/feature-flag-overview-details-footer.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-footer/feature-flag-overview-details-footer.component.html
@@ -1,4 +1,4 @@
 <app-common-tabbed-section-card-footer
   [tabLabels]="tabLabels"
   (selectedTabChange)="onSelectedTabChange($event)"
-></app-common-tabbed-section-card-footer>
\ No newline at end of file
+></app-common-tabbed-section-card-footer>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
index 3fccbe140f..c3ac7333ab 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
@@ -1,6 +1,6 @@
-  <app-common-section-card class="details-overview-card">
-    <div header-left style="background-color: beige; height: 90px; width: 100%">header-left</div>
-    <div header-right style="background-color: beige; height: 90px; width: 100%">header-right</div>
-    <div content style="background-color: beige; height: 90px; width: 100%">content: Details Overview</div>
-    <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer>
-  </app-common-section-card>
+<app-common-section-card class="details-overview-card">
+  <div header-left style="background-color: beige; height: 90px; width: 100%">header-left</div>
+  <div header-right style="background-color: beige; height: 90px; width: 100%">header-right</div>
+  <div content style="background-color: beige; height: 90px; width: 100%">content: Details Overview</div>
+  <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer>
+</app-common-section-card>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
index cfc990b95a..8fdac06e2b 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
@@ -62,4 +62,4 @@
     color: var(--dark-grey);
     padding: 16px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.html
new file mode 100644
index 0000000000..15acc58df5
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.html
@@ -0,0 +1,16 @@
+<div class="content-section">
+  <div *ngFor="let obj of data">
+    <div *ngFor="let item of obj | keyvalue">
+      <span style="font-weight: bold">{{ item.key }}:</span>
+      <ng-container *ngIf="item.key !== 'tags'; else chipSection">
+        <span>{{ item.value }}</span>
+      </ng-container>
+
+      <ng-template #chipSection>
+        <mat-chip-list>
+          <mat-chip *ngFor="let tag of item.value">{{ tag }}</mat-chip>
+        </mat-chip-list>
+      </ng-template>
+    </div>
+  </div>
+</div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.scss
new file mode 100644
index 0000000000..d099530197
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.scss
@@ -0,0 +1,7 @@
+.content-section {
+  width: 100%;
+  border: 1px solid var(--light-grey);
+  border-radius: 4px;
+  background-color: var(--white);
+  padding: 0 32px;
+}
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.spec.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.spec.ts
new file mode 100644
index 0000000000..357984656f
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommonSectionCardContentComponent } from './common-section-card-content.component';
+
+describe('CommonSectionCardContentComponent', () => {
+  let component: CommonSectionCardContentComponent;
+  let fixture: ComponentFixture<CommonSectionCardContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonSectionCardContentComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CommonSectionCardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.ts
new file mode 100644
index 0000000000..2e3f2e7e35
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-content/common-section-card-content.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+
+@Component({
+  selector: 'app-common-section-card-content',
+  standalone: true,
+  //Here imported SharedModule which exports CommonModule and MatChipModule
+  imports: [SharedModule],
+
+  templateUrl: './common-section-card-content.component.html',
+  styleUrl: './common-section-card-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+// This component processes the provided data and splits it into two arrays: 'keys' and 'values'.
+// It then maps and displays the content from these arrays.
+//
+// Example Usage:
+//
+// contentDetails = [
+//   { key: 'name' },
+//   { description: 'something' },
+//   { tags: ['Tag1', 'Tag2'] },
+//   { Appcontext: 'Context1' },
+// ];
+//
+// Simply pass the data to the component as shown below:
+// <app-common-section-card-content [data]="contentDetails"></app-common-section-card-content>
+export class CommonSectionCardContentComponent {
+  @Input() data: { key: string; value: string }[] = [];
+}
diff --git a/types/src/Experiment/interfaces.ts b/types/src/Experiment/interfaces.ts
index a8b2833dc6..6ecb6efa9d 100644
--- a/types/src/Experiment/interfaces.ts
+++ b/types/src/Experiment/interfaces.ts
@@ -243,4 +243,4 @@ export interface CaliperEnvelope {
 export interface IMenuButtonItem {
   name: string;
   disabled: boolean;
-}
\ No newline at end of file
+}