From f14f6b53fff8b3603866b68abea9bf45ef3d50d9 Mon Sep 17 00:00:00 2001
From: Khanjan Dalwadi <17khanjan@gmail.com>
Date: Fri, 7 Jun 2024 19:52:13 +0530
Subject: [PATCH 1/3] Get flag details on details page on navigation only.
 Issue with page reload or url hit

---
 .../feature-flags.data.service.ts             |  7 ++-
 .../feature-flags/feature-flags.service.ts    | 11 +++++
 .../store/feature-flags.actions.ts            | 12 ++++++
 .../store/feature-flags.effects.ts            | 43 +++++++++++++++++--
 .../store/feature-flags.model.ts              |  1 +
 .../store/feature-flags.reducer.ts            |  6 +++
 .../store/feature-flags.selectors.ts          |  5 +++
 ...e-flag-details-page-content.component.html | 11 +++--
 ...ure-flag-details-page-content.component.ts | 31 +++++++++++--
 ...-flag-exclusions-section-card.component.ts |  4 +-
 ...e-flag-exposures-section-card.component.ts |  7 ++-
 ...-flag-inclusions-section-card.component.ts |  2 +
 ...overview-details-section-card.component.ts |  3 +-
 13 files changed, 128 insertions(+), 15 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
index 6c4812b4df..625820fd4a 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
@@ -18,7 +18,12 @@ export class FeatureFlagsDataService {
     const url = this.environment.api.getPaginatedFlags;
     return this.http.post<FeatureFlagsPaginationInfo>(url, params);
     // mock
-    // return of({ nodes: mockFeatureFlags, total: 2 }).pipe(delay(2000));
+    // // return of({ nodes: mockFeatureFlags, total: 2 }).pipe(delay(2000));
+  }
+
+  fetchFeatureFlagById(id: string) {
+    const url = `${this.environment.api.featureFlag}/${id}`;
+    return this.http.get(url);
   }
 
   addFeatureFlag(params: AddFeatureFlagRequest): Observable<FeatureFlag> {
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
index eca5a1a0e3..50fbcc7edc 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
@@ -8,6 +8,8 @@ import {
   selectHasInitialFeatureFlagsDataLoaded,
   selectIsLoadingAddFeatureFlag,
   selectActiveDetailsTabIndex,
+  selectSelectedFeatureFlag,
+  // selectIsLoadingFeatureFlagDetail,
 } from './store/feature-flags.selectors';
 import * as FeatureFlagsActions from './store/feature-flags.actions';
 import { actionFetchContextMetaData } from '../experiments/store/experiments.actions';
@@ -25,10 +27,15 @@ export class FeatureFlagsService {
   allFeatureFlags$ = this.store$.pipe(select(selectAllFeatureFlagsSortedByDate));
   isAllFlagsFetched$ = this.store$.pipe(select(selectIsAllFlagsFetched));
   isLoadingAddFeatureFlag$ = this.store$.pipe(select(selectIsLoadingAddFeatureFlag));
+  // isLoadingFeatureFlagDetail$ = this.store$.pipe(select(selectIsLoadingFeatureFlagDetail));
+
   featureFlagsListLengthChange$ = this.allFeatureFlags$.pipe(
     pairwise(),
     filter(([prevEntities, currEntities]) => prevEntities.length !== currEntities.length)
   );
+
+  selectedFeatureFlag$ = this.store$.pipe(select(selectSelectedFeatureFlag));
+
   activeDetailsTabIndex$ = this.store$.pipe(select(selectActiveDetailsTabIndex));
   appContexts$ = this.experimentService.contextMetaData$.pipe(
     map((contextMetaData) => {
@@ -40,6 +47,10 @@ export class FeatureFlagsService {
     this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlags({ fromStarting }));
   }
 
+  fetchFeatureFlagById(featureFlagId: string) {
+    this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlagById({ featureFlagId }));
+  }
+
   fetchContextMetaData() {
     this.store$.dispatch(actionFetchContextMetaData({ isLoadingContextMetaData: true }));
   }
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
index 7b9e85a316..fd0bf6db40 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
@@ -14,6 +14,18 @@ export const actionFetchFeatureFlagsSuccess = createAction(
 
 export const actionFetchFeatureFlagsFailure = createAction('[Feature Flags] Fetch Feature Flags Paginated Failure');
 
+export const actionFetchFeatureFlagById = createAction(
+  '[Feature Flags] Fetch Feature Flags By Id',
+  props<{ featureFlagId: string }>()
+);
+
+export const actionFetchFeatureFlagByIdSuccess = createAction(
+  '[Feature Flags] Fetch Feature Flags By Id Success',
+  props<{ flag: FeatureFlag }>()
+);
+
+export const actionFetchFeatureFlagByIdFailure = createAction('[Feature Flags] Fetch Feature Flags By Id Failure');
+
 export const actionSetIsLoadingFeatureFlags = createAction(
   '[Feature Flags] Set Is Loading Flags',
   props<{ isLoadingFeatureFlags: boolean }>()
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
index 7bb99ddb60..e472e1ae66 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
@@ -2,8 +2,8 @@ import { FeatureFlagsDataService } from '../feature-flags.data.service';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import * as FeatureFlagsActions from './feature-flags.actions';
-import { catchError, switchMap, map, filter, withLatestFrom, tap, first } from 'rxjs/operators';
-import { FeatureFlagsPaginationParams, NUMBER_OF_FLAGS } from './feature-flags.model';
+import { catchError, switchMap, map, filter, withLatestFrom, tap, first, mergeMap } from 'rxjs/operators';
+import { FeatureFlag, FeatureFlagsPaginationParams, NUMBER_OF_FLAGS } from './feature-flags.model';
 import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { AppState } from '../../core.module';
@@ -15,6 +15,7 @@ import {
   selectSortAs,
   selectSearchString,
 } from './feature-flags.selectors';
+import { of } from 'rxjs';
 
 @Injectable()
 export class FeatureFlagsEffects {
@@ -99,7 +100,6 @@ export class FeatureFlagsEffects {
     )
   );
 
-
   fetchFeatureFlagsOnSearchString$ = createEffect(
     () =>
       this.actions$.pipe(
@@ -129,5 +129,42 @@ export class FeatureFlagsEffects {
     { dispatch: false }
   );
 
+  // fetchFeatureFlagById$ = createEffect(() =>
+  //   this.actions$.pipe(
+  //     ofType(FeatureFlagsActions.actionFetchFeatureFlagById),
+  //     mergeMap((action) => {
+  //       console.log('Effect triggered: ', action);
+  //       return this.featureFlagsDataService.fetchFeatureFlagById(action.featureFlagId).pipe(
+  //         map((response: { flags: FeatureFlag; totalFlags: number }) => {
+  //           console.log('API response: ', response);
+  //           return FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess({
+  //             flags: response.flags,
+  //             totalFlags: response.totalFlags,
+  //           });
+  //         }),
+  //         catchError((error) => {
+  //           console.error('API error: ', error);
+  //           return of(FeatureFlagsActions.actionFetchFeatureFlagByIdFailure({ error: error.message || error }));
+  //         })
+  //       );
+  //     })
+  //   )
+  // );
+  fetchFeatureFlagById$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(FeatureFlagsActions.actionFetchFeatureFlagById),
+      map((action) => action.featureFlagId),
+      filter((featureFlagId) => !!featureFlagId),
+      switchMap((featureFlagId) =>
+        this.featureFlagsDataService.fetchFeatureFlagById(featureFlagId).pipe(
+          map((data: FeatureFlag) => {
+            return FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess({ flag: data });
+          }),
+          catchError(() => [FeatureFlagsActions.actionFetchFeatureFlagByIdFailure()])
+        )
+      )
+    )
+  );
+
   private getSearchString$ = () => this.store$.pipe(select(selectSearchString)).pipe(first());
 }
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
index 8a1e510c05..7d401cadd8 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
@@ -103,6 +103,7 @@ export const FLAG_ROOT_DISPLAYED_COLUMNS = Object.values(FLAG_ROOT_COLUMN_NAMES)
 export interface FeatureFlagState extends EntityState<FeatureFlag> {
   isLoadingAddFeatureFlag: boolean;
   isLoadingFeatureFlags: boolean;
+  // isLoadingFeatureFlagDetail: boolean;
   hasInitialFeatureFlagsDataLoaded: boolean;
   activeDetailsTabIndex: number;
   skipFlags: number;
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
index e002ad245a..f13a7d3054 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
@@ -10,6 +10,7 @@ export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.get
 export const initialState: FeatureFlagState = adapter.getInitialState({
   isLoadingAddFeatureFlag: false,
   isLoadingFeatureFlags: false,
+  isLoadingFeatureFlagDetail: false,
   hasInitialFeatureFlagsDataLoaded: false,
   activeDetailsTabIndex: 0,
   skipFlags: 0,
@@ -39,6 +40,7 @@ const reducer = createReducer(
     });
   }),
   on(FeatureFlagsActions.actionFetchFeatureFlagsFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
+  on(FeatureFlagsActions.actionFetchFeatureFlagByIdFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
   on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
     ...state,
     isLoadingFeatureFlags,
@@ -59,6 +61,10 @@ const reducer = createReducer(
   on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
     ...state,
     activeDetailsTabIndex,
+  })),
+  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+    ...state,
+    isLoadingFeatureFlags: true,
   }))
 );
 
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
index 589fef7a2d..e7926c5385 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
@@ -28,6 +28,11 @@ export const selectIsLoadingFeatureFlags = createSelector(
   (state) => state.isLoadingFeatureFlags
 );
 
+// export const selectIsLoadingFeatureFlagDetail = createSelector(
+//   selectFeatureFlagsState,
+//   (state) => state.isLoadingFeatureFlagDetail
+// );
+
 export const selectIsInitialFeatureFlagsLoading = createSelector(
   selectIsLoadingFeatureFlags,
   selectAllFeatureFlagsSortedByDate,
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 41fe2b1864..6daa84a761 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,12 +1,15 @@
 <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
+  <app-feature-flag-overview-details-section-card
+    [data]="featureFlag"
+    section-card
+  ></app-feature-flag-overview-details-section-card>
+  <app-feature-flag-inclusions-section-card [data]="featureFlag" *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
+  <app-feature-flag-exclusions-section-card [data]="featureFlag" *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
+  <app-feature-flag-exposures-section-card [data]="featureFlag" *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-details-page-content.component.ts 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.ts
index 48fd7d1248..c415b984b3 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.ts
+++ 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.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { CommonSectionCardListComponent } from '../../../../../../shared-standalone-component-lib/components';
 import { CommonModule } from '@angular/common';
 import { FeatureFlagInclusionsSectionCardComponent } from './feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component';
@@ -6,6 +6,9 @@ import { FeatureFlagExclusionsSectionCardComponent } from './feature-flag-exclus
 import { FeatureFlagExposuresSectionCardComponent } from './feature-flag-exposures-section-card/feature-flag-exposures-section-card.component';
 import { FeatureFlagOverviewDetailsSectionCardComponent } from './feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component';
 import { FeatureFlagsService } from '../../../../../../core/feature-flags/feature-flags.service';
+import { filter, Subscription } from 'rxjs';
+import { FeatureFlag } from '../../../../../../core/feature-flags/store/feature-flags.model';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-feature-flag-details-page-content',
@@ -22,13 +25,35 @@ import { FeatureFlagsService } from '../../../../../../core/feature-flags/featur
   styleUrl: './feature-flag-details-page-content.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeatureFlagDetailsPageContentComponent {
+export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy {
   activeTabIndex$ = this.featureFlagsService.activeDetailsTabIndex$;
+  featureFlag: FeatureFlag;
+  featureFlagSub: Subscription;
+  featureFlagIdSub: Subscription;
 
-  constructor(private featureFlagsService: FeatureFlagsService) {
+  constructor(private featureFlagsService: FeatureFlagsService, private _Activatedroute: ActivatedRoute) {
     console.log('in the ff content component');
+
     this.activeTabIndex$.subscribe((activeTabIndex) => {
       console.log('activeTabIndex', activeTabIndex);
     });
   }
+  ngOnInit() {
+    this.featureFlagIdSub = this._Activatedroute.paramMap.subscribe((params) => {
+      const featureFlagIdFromParams = params.get('flagId');
+      console.log(featureFlagIdFromParams);
+      this.featureFlagsService.fetchFeatureFlagById(featureFlagIdFromParams);
+    });
+
+    this.featureFlagSub = this.featureFlagsService.selectedFeatureFlag$
+      .pipe(filter((featureFlag) => !!featureFlag))
+      .subscribe((featureFlag) => {
+        this.featureFlag = featureFlag;
+        console.log(this.featureFlag);
+      });
+  }
+  ngOnDestroy() {
+    this.featureFlagSub.unsubscribe();
+    this.featureFlagIdSub.unsubscribe();
+  }
 }
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 7c8075a83f..193cd644ff 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
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
   CommonSectionCardComponent,
   CommonSectionCardTitleHeaderComponent,
@@ -6,6 +6,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
+import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
 
 @Component({
   selector: 'app-feature-flag-exclusions-section-card',
@@ -16,5 +17,6 @@ import { of } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagExclusionsSectionCardComponent {
+  @Input() data: FeatureFlag;
   tableRowCount$ = of(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-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 c32f0d52b0..43f0b955e7 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,5 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { CommonSectionCardComponent } from '../../../../../../../shared-standalone-component-lib/components';
+import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
 
 @Component({
   selector: 'app-feature-flag-exposures-section-card',
@@ -9,4 +10,6 @@ import { CommonSectionCardComponent } from '../../../../../../../shared-standalo
   styleUrl: './feature-flag-exposures-section-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeatureFlagExposuresSectionCardComponent {}
+export class FeatureFlagExposuresSectionCardComponent {
+  @Input() data: FeatureFlag;
+}
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.ts 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.ts
index 22ac6fc326..20bfb06c91 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.ts
+++ 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.ts
@@ -6,6 +6,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { of } from 'rxjs';
+import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
 
 @Component({
   selector: 'app-feature-flag-inclusions-section-card',
@@ -16,5 +17,6 @@ import { of } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagInclusionsSectionCardComponent {
+  @Input() data: FeatureFlag;
   tableRowCount$ = of(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-overview-details-section-card/feature-flag-overview-details-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-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
index d2b23e2925..cd60034c06 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.ts
+++ 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.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
   CommonSectionCardActionButtonsComponent,
   CommonSectionCardComponent,
@@ -25,6 +25,7 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagOverviewDetailsSectionCardComponent {
+  @Input() data: FeatureFlag;
   //temp mock data
   featureFlag: FeatureFlag = {
     createdAt: '2021-09-08T08:00:00.000Z',

From f9114f742b4b918da42f18fc7bc2a93a8e985441 Mon Sep 17 00:00:00 2001
From: Khanjan Dalwadi <17khanjan@gmail.com>
Date: Mon, 10 Jun 2024 13:05:12 +0530
Subject: [PATCH 2/3] FF details fetched on refresh/url hit. Added spinner on
 loading detail. Removed some necessary code

---
 .../feature-flags/feature-flags.service.ts    |  1 -
 .../store/feature-flags.effects.ts            | 21 ------------
 .../store/feature-flags.model.ts              |  1 -
 .../store/feature-flags.reducer.ts            |  6 ++++
 .../store/feature-flags.selectors.ts          |  5 ---
 ...e-flag-details-page-content.component.html | 33 ++++++++++---------
 ...e-flag-details-page-content.component.scss | 10 ++++++
 ...ure-flag-details-page-content.component.ts | 20 +++++------
 ...erview-details-section-card.component.scss |  2 +-
 ...overview-details-section-card.component.ts | 16 ++++-----
 .../feature-flag-details-page.component.html  |  2 +-
 .../feature-flag-details-page.component.scss  |  5 +++
 .../common-section-card.component.scss        |  2 +-
 13 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
index 50fbcc7edc..c6008d2ccd 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
@@ -27,7 +27,6 @@ export class FeatureFlagsService {
   allFeatureFlags$ = this.store$.pipe(select(selectAllFeatureFlagsSortedByDate));
   isAllFlagsFetched$ = this.store$.pipe(select(selectIsAllFlagsFetched));
   isLoadingAddFeatureFlag$ = this.store$.pipe(select(selectIsLoadingAddFeatureFlag));
-  // isLoadingFeatureFlagDetail$ = this.store$.pipe(select(selectIsLoadingFeatureFlagDetail));
 
   featureFlagsListLengthChange$ = this.allFeatureFlags$.pipe(
     pairwise(),
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
index e472e1ae66..aa31c6b097 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
@@ -129,27 +129,6 @@ export class FeatureFlagsEffects {
     { dispatch: false }
   );
 
-  // fetchFeatureFlagById$ = createEffect(() =>
-  //   this.actions$.pipe(
-  //     ofType(FeatureFlagsActions.actionFetchFeatureFlagById),
-  //     mergeMap((action) => {
-  //       console.log('Effect triggered: ', action);
-  //       return this.featureFlagsDataService.fetchFeatureFlagById(action.featureFlagId).pipe(
-  //         map((response: { flags: FeatureFlag; totalFlags: number }) => {
-  //           console.log('API response: ', response);
-  //           return FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess({
-  //             flags: response.flags,
-  //             totalFlags: response.totalFlags,
-  //           });
-  //         }),
-  //         catchError((error) => {
-  //           console.error('API error: ', error);
-  //           return of(FeatureFlagsActions.actionFetchFeatureFlagByIdFailure({ error: error.message || error }));
-  //         })
-  //       );
-  //     })
-  //   )
-  // );
   fetchFeatureFlagById$ = createEffect(() =>
     this.actions$.pipe(
       ofType(FeatureFlagsActions.actionFetchFeatureFlagById),
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
index 7d401cadd8..8a1e510c05 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
@@ -103,7 +103,6 @@ export const FLAG_ROOT_DISPLAYED_COLUMNS = Object.values(FLAG_ROOT_COLUMN_NAMES)
 export interface FeatureFlagState extends EntityState<FeatureFlag> {
   isLoadingAddFeatureFlag: boolean;
   isLoadingFeatureFlags: boolean;
-  // isLoadingFeatureFlagDetail: boolean;
   hasInitialFeatureFlagsDataLoaded: boolean;
   activeDetailsTabIndex: number;
   skipFlags: number;
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
index f13a7d3054..3a1741a8fa 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
@@ -40,6 +40,12 @@ const reducer = createReducer(
     });
   }),
   on(FeatureFlagsActions.actionFetchFeatureFlagsFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
+  on(FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess, (state, { flag }) => {
+    return adapter.addOne(flag, {
+      ...state,
+      isLoadingFeatureFlags: false,
+    });
+  }),
   on(FeatureFlagsActions.actionFetchFeatureFlagByIdFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
   on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
     ...state,
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
index e7926c5385..589fef7a2d 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
@@ -28,11 +28,6 @@ export const selectIsLoadingFeatureFlags = createSelector(
   (state) => state.isLoadingFeatureFlags
 );
 
-// export const selectIsLoadingFeatureFlagDetail = createSelector(
-//   selectFeatureFlagsState,
-//   (state) => state.isLoadingFeatureFlagDetail
-// );
-
 export const selectIsInitialFeatureFlagsLoading = createSelector(
   selectIsLoadingFeatureFlags,
   selectAllFeatureFlagsSortedByDate,
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 6daa84a761..ee60329836 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,15 +1,18 @@
-<app-common-section-card-list>
-  <app-feature-flag-overview-details-section-card
-    [data]="featureFlag"
-    section-card
-  ></app-feature-flag-overview-details-section-card>
-  <app-feature-flag-inclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
-    >inclusions-card</app-feature-flag-inclusions-section-card
-  >
-  <app-feature-flag-exclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
-    >exclusions-card</app-feature-flag-exclusions-section-card
-  >
-  <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card
-    >exposures-card</app-feature-flag-exposures-section-card
-  >
-</app-common-section-card-list>
+<div class="content-container">
+  <mat-spinner *ngIf="!featureFlag"></mat-spinner>
+  <app-common-section-card-list class="common-section-card-list" *ngIf="featureFlag">
+    <app-feature-flag-overview-details-section-card
+      [data]="featureFlag"
+      section-card
+    ></app-feature-flag-overview-details-section-card>
+    <app-feature-flag-inclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
+      >inclusions-card</app-feature-flag-inclusions-section-card
+    >
+    <app-feature-flag-exclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
+      >exclusions-card</app-feature-flag-exclusions-section-card
+    >
+    <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card
+      >exposures-card</app-feature-flag-exposures-section-card
+    >
+  </app-common-section-card-list>
+</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-details-page-content.component.scss 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.scss
index e69de29bb2..457c136adb 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.scss
+++ 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.scss
@@ -0,0 +1,10 @@
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.common-section-card-list {
+  width: 100%;
+}
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.ts 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.ts
index e603e438c1..960ed75abc 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.ts
+++ 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.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { CommonSectionCardListComponent } from '../../../../../../shared-standalone-component-lib/components';
 import { CommonModule } from '@angular/common';
 import { FeatureFlagInclusionsSectionCardComponent } from './feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component';
@@ -9,6 +9,7 @@ import { FeatureFlagsService } from '../../../../../../core/feature-flags/featur
 import { filter, Subscription } from 'rxjs';
 import { FeatureFlag } from '../../../../../../core/feature-flags/store/feature-flags.model';
 import { ActivatedRoute } from '@angular/router';
+import { SharedModule } from '../../../../../../shared/shared.module';
 
 @Component({
   selector: 'app-feature-flag-details-page-content',
@@ -20,6 +21,7 @@ import { ActivatedRoute } from '@angular/router';
     FeatureFlagExclusionsSectionCardComponent,
     FeatureFlagExposuresSectionCardComponent,
     FeatureFlagOverviewDetailsSectionCardComponent,
+    SharedModule,
   ],
   templateUrl: './feature-flag-details-page-content.component.html',
   styleUrl: './feature-flag-details-page-content.component.scss',
@@ -31,18 +33,14 @@ export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy
   featureFlagSub: Subscription;
   featureFlagIdSub: Subscription;
 
-
-  constructor(private featureFlagsService: FeatureFlagsService, private _Activatedroute: ActivatedRoute) {
-    console.log('in the ff content component');
-
-    this.activeTabIndex$.subscribe((activeTabIndex) => {
-      console.log('activeTabIndex', activeTabIndex);
-    });
-  }
+  constructor(
+    private featureFlagsService: FeatureFlagsService,
+    private _Activatedroute: ActivatedRoute,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
   ngOnInit() {
     this.featureFlagIdSub = this._Activatedroute.paramMap.subscribe((params) => {
       const featureFlagIdFromParams = params.get('flagId');
-      console.log(featureFlagIdFromParams);
       this.featureFlagsService.fetchFeatureFlagById(featureFlagIdFromParams);
     });
 
@@ -50,7 +48,7 @@ export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy
       .pipe(filter((featureFlag) => !!featureFlag))
       .subscribe((featureFlag) => {
         this.featureFlag = featureFlag;
-        console.log(this.featureFlag);
+        this.changeDetectorRef.detectChanges();
       });
   }
   ngOnDestroy() {
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.scss 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.scss
index 926168f52e..22540e6467 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.scss
+++ 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.scss
@@ -1,3 +1,3 @@
 .full-width {
   width: 100%; // TODO try not to set here, should be in the common parent...
-}
\ 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-overview-details-section-card/feature-flag-overview-details-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-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
index 96729c1e2a..525c45daa1 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.ts
+++ 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.ts
@@ -62,15 +62,15 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
   constructor(private featureFlagService: FeatureFlagsService) {}
 
   ngOnInit() {
-    this.flagName = this.featureFlag.name;
-    this.flagCreatedAt = this.featureFlag.createdAt;
-    this.flagUpdatedAt = this.featureFlag.updatedAt;
-    this.flagStatus = this.featureFlag.status;
+    this.flagName = this.data.name;
+    this.flagCreatedAt = this.data.createdAt;
+    this.flagUpdatedAt = this.data.updatedAt;
+    this.flagStatus = this.data.status;
     this.flagOverviewDetails = {
-      ['Key']: this.featureFlag.key,
-      ['Description']: this.featureFlag.description,
-      ['App Context']: this.featureFlag.context[0],
-      ['Tags']: this.featureFlag.tags,
+      ['Key']: this.data.key,
+      ['Description']: this.data.description,
+      ['App Context']: this.data.context[0],
+      ['Tags']: this.data.tags,
     };
   }
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html
index a643791269..54304ed04c 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html
@@ -1,4 +1,4 @@
-<app-common-page>
+<app-common-page class="app-common-page">
   <app-feature-flag-details-page-header header></app-feature-flag-details-page-header>
   <app-feature-flag-details-page-content content></app-feature-flag-details-page-content>
 </app-common-page>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss
index e69de29bb2..2ff5186b23 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss
@@ -0,0 +1,5 @@
+app-common-page {
+  display: block;
+  padding: 2px 0;
+  overflow: auto;
+}
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
index 2e07ffd5fe..2990749801 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
@@ -3,7 +3,7 @@
   border: 1px solid var(--light-grey);
   border-radius: 4px;
   background-color: var(--white);
-
+  overflow: hidden;
   .header {
     height: 96px;
     display: flex;

From 6a65bebba2b8305e2dfdabf554acf99460d1a09a Mon Sep 17 00:00:00 2001
From: Khanjan Dalwadi <17khanjan@gmail.com>
Date: Tue, 11 Jun 2024 10:57:46 +0530
Subject: [PATCH 3/3] Updated component by using async pipe to subscribe the
 details and removed the filter pipe

---
 .../store/feature-flags.effects.ts            |  3 +-
 ...e-flag-details-page-content.component.html | 43 ++++++++++++-------
 ...e-flag-details-page-content.component.scss |  2 -
 ...ure-flag-details-page-content.component.ts | 22 +++-------
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
index 9c6d7c3aa5..c35453fa47 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
@@ -2,7 +2,7 @@ import { FeatureFlagsDataService } from '../feature-flags.data.service';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import * as FeatureFlagsActions from './feature-flags.actions';
-import { catchError, switchMap, map, filter, withLatestFrom, tap, first, mergeMap } from 'rxjs/operators';
+import { catchError, switchMap, map, filter, withLatestFrom, tap, first } from 'rxjs/operators';
 import { FeatureFlag, FeatureFlagsPaginationParams, NUMBER_OF_FLAGS } from './feature-flags.model';
 import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
@@ -15,7 +15,6 @@ import {
   selectSortAs,
   selectSearchString,
 } from './feature-flags.selectors';
-import { of } from 'rxjs';
 
 @Injectable()
 export class FeatureFlagsEffects {
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 ee60329836..fb374ba420 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,18 +1,29 @@
 <div class="content-container">
-  <mat-spinner *ngIf="!featureFlag"></mat-spinner>
-  <app-common-section-card-list class="common-section-card-list" *ngIf="featureFlag">
-    <app-feature-flag-overview-details-section-card
-      [data]="featureFlag"
-      section-card
-    ></app-feature-flag-overview-details-section-card>
-    <app-feature-flag-inclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
-      >inclusions-card</app-feature-flag-inclusions-section-card
-    >
-    <app-feature-flag-exclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card
-      >exclusions-card</app-feature-flag-exclusions-section-card
-    >
-    <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card
-      >exposures-card</app-feature-flag-exposures-section-card
-    >
-  </app-common-section-card-list>
+  <ng-container *ngIf="featureFlag$ | async as featureFlag; else loading">
+    <app-common-section-card-list class="common-section-card-list">
+      <app-feature-flag-overview-details-section-card
+        [data]="featureFlag"
+        section-card
+      ></app-feature-flag-overview-details-section-card>
+      <app-feature-flag-inclusions-section-card
+        [data]="featureFlag"
+        *ngIf="(activeTabIndex$ | async) === 0"
+        section-card
+        >inclusions-card</app-feature-flag-inclusions-section-card
+      >
+      <app-feature-flag-exclusions-section-card
+        [data]="featureFlag"
+        *ngIf="(activeTabIndex$ | async) === 0"
+        section-card
+        >exclusions-card</app-feature-flag-exclusions-section-card
+      >
+      <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card
+        >exposures-card</app-feature-flag-exposures-section-card
+      >
+    </app-common-section-card-list>
+  </ng-container>
+
+  <ng-template #loading>
+    <mat-spinner></mat-spinner>
+  </ng-template>
 </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-details-page-content.component.scss 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.scss
index 457c136adb..9339763845 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.scss
+++ 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.scss
@@ -2,9 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
 }
-
 .common-section-card-list {
   width: 100%;
 }
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.ts 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.ts
index 960ed75abc..b352c439df 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.ts
+++ 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.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { CommonSectionCardListComponent } from '../../../../../../shared-standalone-component-lib/components';
 import { CommonModule } from '@angular/common';
 import { FeatureFlagInclusionsSectionCardComponent } from './feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component';
@@ -6,7 +6,7 @@ import { FeatureFlagExclusionsSectionCardComponent } from './feature-flag-exclus
 import { FeatureFlagExposuresSectionCardComponent } from './feature-flag-exposures-section-card/feature-flag-exposures-section-card.component';
 import { FeatureFlagOverviewDetailsSectionCardComponent } from './feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component';
 import { FeatureFlagsService } from '../../../../../../core/feature-flags/feature-flags.service';
-import { filter, Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { FeatureFlag } from '../../../../../../core/feature-flags/store/feature-flags.model';
 import { ActivatedRoute } from '@angular/router';
 import { SharedModule } from '../../../../../../shared/shared.module';
@@ -29,30 +29,20 @@ import { SharedModule } from '../../../../../../shared/shared.module';
 })
 export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy {
   activeTabIndex$ = this.featureFlagsService.activeDetailsTabIndex$;
-  featureFlag: FeatureFlag;
-  featureFlagSub: Subscription;
+  featureFlag$: Observable<FeatureFlag>;
+
   featureFlagIdSub: Subscription;
 
-  constructor(
-    private featureFlagsService: FeatureFlagsService,
-    private _Activatedroute: ActivatedRoute,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  constructor(private featureFlagsService: FeatureFlagsService, private _Activatedroute: ActivatedRoute) {}
   ngOnInit() {
     this.featureFlagIdSub = this._Activatedroute.paramMap.subscribe((params) => {
       const featureFlagIdFromParams = params.get('flagId');
       this.featureFlagsService.fetchFeatureFlagById(featureFlagIdFromParams);
     });
 
-    this.featureFlagSub = this.featureFlagsService.selectedFeatureFlag$
-      .pipe(filter((featureFlag) => !!featureFlag))
-      .subscribe((featureFlag) => {
-        this.featureFlag = featureFlag;
-        this.changeDetectorRef.detectChanges();
-      });
+    this.featureFlag$ = this.featureFlagsService.selectedFeatureFlag$;
   }
   ngOnDestroy() {
-    this.featureFlagSub.unsubscribe();
     this.featureFlagIdSub.unsubscribe();
   }
 }