From 4b1f359ca0e6f65da58682095f592d1482068ac6 Mon Sep 17 00:00:00 2001
From: Yagnik Hingrajiya <50392803+Yagnik56@users.noreply.github.com>
Date: Thu, 27 Jun 2024 22:34:22 +0530
Subject: [PATCH] added header and content component for exposures (#1697)

Co-authored-by: danoswaltCL <97542869+danoswaltCL@users.noreply.github.com>
---
 ...lag-exclusions-section-card.component.html |  4 +---
 ...-flag-exclusions-section-card.component.ts |  3 +--
 ...feature-flag-exposures-data.component.html |  5 +++++
 ...feature-flag-exposures-data.component.scss |  1 +
 .../feature-flag-exposures-data.component.ts  | 15 ++++++++++++++
 ...flag-exposures-section-card.component.html | 20 ++++++++++++++++---
 ...flag-exposures-section-card.component.scss |  3 +++
 ...e-flag-exposures-section-card.component.ts | 12 +++++++++--
 ...lag-inclusions-section-card.component.html |  2 +-
 ...-tabbed-section-card-footer.component.scss |  3 +++
 .../projects/upgrade/src/assets/i18n/en.json  |  2 ++
 11 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.html
 create mode 100644 frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.scss
 create mode 100644 frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.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-exclusions-section-card/feature-flag-exclusions-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-exclusions-section-card/feature-flag-exclusions-section-card.component.html
index 33996ac262..226fc69ad3 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-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-exclusions-section-card/feature-flag-exclusions-section-card.component.html
@@ -22,7 +22,5 @@
   </app-common-section-card-action-buttons>
 
   <!-- content -->
-  <app-feature-flag-exclusions-table content
-    class="full-width"
-  ></app-feature-flag-exclusions-table>
+  <app-feature-flag-exclusions-table content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-exclusions-table>
 </app-common-section-card>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts
index 1ff9f5f3b3..82ef722230 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts
@@ -27,6 +27,7 @@ import { FeatureFlagsService } from '../../../../../../../core/feature-flags/fea
 })
 export class FeatureFlagExclusionsSectionCardComponent {
   tableRowCount$ = this.featureFlagService.selectFeatureFlagExclusionsLength$;
+  isSectionCardExpanded = true;
 
   constructor(private featureFlagService: FeatureFlagsService) {}
 
@@ -35,8 +36,6 @@ export class FeatureFlagExclusionsSectionCardComponent {
     { name: 'Delete', disabled: false },
   ];
 
-  isSectionCardExpanded = true;
-
   addExcludeListClicked() {
     console.log('add Exclude List Clicked');
   }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.html
new file mode 100644
index 0000000000..3c57c982d1
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.html
@@ -0,0 +1,5 @@
+<div class="exposures-data">
+  <span class="ft-16-500">
+    Add Exposures data here!
+  </span>
+</div>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.scss
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.scss
@@ -0,0 +1 @@
+
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.ts
new file mode 100644
index 0000000000..866aa5d595
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-data/feature-flag-exposures-data.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FeatureFlagsService } from '../../../../../../../../core/feature-flags/feature-flags.service';
+import { CommonDetailsParticipantListTableComponent } from '../../../../../../../../shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-feature-flag-exposures-data',
+  standalone: true,
+  templateUrl: './feature-flag-exposures-data.component.html',
+  styleUrl: './feature-flag-exposures-data.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonDetailsParticipantListTableComponent, CommonModule, TranslateModule],
+})
+export class FeatureFlagExposuresDataComponent {}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-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-exposures-section-card/feature-flag-exposures-section-card.component.html
index 791f6df23d..033462451e 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-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-exposures-section-card/feature-flag-exposures-section-card.component.html
@@ -1,5 +1,19 @@
 <app-common-section-card>
-  <div header-left style="background-color: lightpink; height: 90px; width: 100%">header-left</div>
-  <div header-right style="background-color: lightpink; height: 90px; width: 100%">header-right</div>
-  <div content style="background-color: lightpink; height: 90px; width: 100%">content: Exposures</div>
+  <!-- header-left -->
+  <app-common-section-card-title-header
+    header-left
+    [title]="'feature-flags.details.exposures.card.title.text' | translate"
+    [subtitle]="'feature-flags.details.exposures.card.subtitle.text' | translate"
+  ></app-common-section-card-title-header>
+
+  <!-- header-right -->
+  <app-common-section-card-action-buttons
+    header-right
+    [isSectionCardExpanded]="isSectionCardExpanded"
+    (sectionCardExpandChange)="onSectionCardExpandChange($event)"
+  >
+  </app-common-section-card-action-buttons>
+
+  <!-- content -->
+  <app-feature-flag-exposures-data content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-exposures-data>
 </app-common-section-card>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.scss
index e69de29bb2..54079260c1 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.scss
@@ -0,0 +1,3 @@
+.full-width {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts
index 43f0b955e7..0bc6512dce 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts
@@ -1,15 +1,23 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { CommonSectionCardComponent } from '../../../../../../../shared-standalone-component-lib/components';
+import { CommonSectionCardActionButtonsComponent, CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent } from '../../../../../../../shared-standalone-component-lib/components';
 import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { FeatureFlagExposuresDataComponent } from './feature-flag-exposures-data/feature-flag-exposures-data.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-feature-flag-exposures-section-card',
   standalone: true,
-  imports: [CommonSectionCardComponent],
+  imports: [CommonSectionCardComponent, CommonSectionCardTitleHeaderComponent, CommonSectionCardActionButtonsComponent, CommonModule, TranslateModule, FeatureFlagExposuresDataComponent],
   templateUrl: './feature-flag-exposures-section-card.component.html',
   styleUrl: './feature-flag-exposures-section-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagExposuresSectionCardComponent {
   @Input() data: FeatureFlag;
+  isSectionCardExpanded = true;
+
+  onSectionCardExpandChange(isSectionCardExpanded: boolean) {
+    this.isSectionCardExpanded = isSectionCardExpanded;
+  }
 }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-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-inclusions-section-card/feature-flag-inclusions-section-card.component.html
index c50c7a3593..923164b3c5 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-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-inclusions-section-card/feature-flag-inclusions-section-card.component.html
@@ -22,5 +22,5 @@
   </app-common-section-card-action-buttons>
 
   <!-- content -->
-  <app-feature-flag-inclusions-table content class="full-width"></app-feature-flag-inclusions-table>
+  <app-feature-flag-inclusions-table content *ngIf="isSectionCardExpanded" class="full-width"></app-feature-flag-inclusions-table>
 </app-common-section-card>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.scss
index e69de29bb2..5e794b6c31 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-labels .mat-mdc-tab:first-of-type {
+    margin-left: 0;
+}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
index 5e57f98da1..0f7c5f3418 100644
--- a/frontend/projects/upgrade/src/assets/i18n/en.json
+++ b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -364,6 +364,8 @@
   "feature-flags.details.exclusions.card.no-data-row.text": "No Exclude Lists defined.",
   "feature-flags.details.exclusions.card.title.text": "Exclude Lists",
   "feature-flags.details.exclusions.card.subtitle.text": "Define Exclude lists for this feature flag",
+  "feature-flags.details.exposures.card.title.text": "Exposures",
+  "feature-flags.details.exposures.card.subtitle.text": "View total exposures for the feature flag during the specific period.",
   "feature-flags.details.add-exclude-list.button.text": "Add Exclude List",
   "feature-flags.table-variation-type.text": "Variation type",
   "feature-flags.overview.flag-variation-type.text": "Flag Variation Type",