added header and content component for exposures

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>

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');
   }

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>

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 @@
+

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 {}

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>

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%;
+}

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;
+  }
 }

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>

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;
+}

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",