Merge branch 'dev' into feature/root-table-date-format-and-chip

CarnegieLearningWeb · Jun 12, 2024 · 7821cff · 7821cff
2 parents 2ae6919 + bcf5903
commit 7821cff
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 53 deletions.
diff --git a/backend/packages/Upgrade/package-lock.json b/backend/packages/Upgrade/package-lock.json
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
@@ -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 } as FeatureFlagsPaginationInfo).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
@@ -10,6 +10,7 @@ import {
   selectSearchString,
   selectIsLoadingAddFeatureFlag,
   selectActiveDetailsTabIndex,
+  selectSelectedFeatureFlag,
   selectSearchFeatureFlagParams,
   selectRootTableState,
 } from './store/feature-flags.selectors';
@@ -31,10 +32,13 @@ export class FeatureFlagsService {
   searchString$ = this.store$.pipe(select(selectSearchString));
   searchKey$ = this.store$.pipe(select(selectSearchKey));
   isLoadingAddFeatureFlag$ = this.store$.pipe(select(selectIsLoadingAddFeatureFlag));
+
   featureFlagsListLengthChange$ = this.allFeatureFlags$.pipe(
     pairwise(),
     filter(([prevEntities, currEntities]) => prevEntities.length !== currEntities.length)
   );
+
+  selectedFeatureFlag$ = this.store$.pipe(select(selectSelectedFeatureFlag));
   searchParams$ = this.store$.pipe(select(selectSearchFeatureFlagParams));
   selectRootTableState$ = this.store$.select(selectRootTableState);
   activeDetailsTabIndex$ = this.store$.pipe(select(selectActiveDetailsTabIndex));
@@ -48,6 +52,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
@@ -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
@@ -3,7 +3,7 @@ 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 { 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';
@@ -98,7 +98,6 @@ export class FeatureFlagsEffects {
     )
   );
 
-
   fetchFeatureFlagsOnSearchString$ = createEffect(
     () =>
       this.actions$.pipe(
@@ -128,5 +127,21 @@ export class FeatureFlagsEffects {
     { dispatch: false }
   );
 
+  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.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,13 @@ 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,
     isLoadingFeatureFlags,
@@ -59,6 +67,10 @@ const reducer = createReducer(
   on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
     ...state,
     activeDetailsTabIndex,
+  })),
+  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+    ...state,
+    isLoadingFeatureFlags: true,
   }))
 );
 

diff --git a/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
@@ -1,12 +1,29 @@
-<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-common-section-card-list>
+<div class="content-container">
+  <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/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss b/...s-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss
@@ -0,0 +1,8 @@
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.common-section-card-list {
+  width: 100%;
+}
diff --git a/...ils-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts b/...ils-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts
@@ -1,11 +1,15 @@
-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';
 import { FeatureFlagExclusionsSectionCardComponent } from './feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component';
 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 { 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';
 
 @Component({
   selector: 'app-feature-flag-details-page-content',
@@ -17,13 +21,28 @@ import { FeatureFlagsService } from '../../../../../../core/feature-flags/featur
     FeatureFlagExclusionsSectionCardComponent,
     FeatureFlagExposuresSectionCardComponent,
     FeatureFlagOverviewDetailsSectionCardComponent,
+    SharedModule,
   ],
   templateUrl: './feature-flag-details-page-content.component.html',
   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$: Observable<FeatureFlag>;
 
-  constructor(private featureFlagsService: FeatureFlagsService) {}
+  featureFlagIdSub: Subscription;
+
+  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.featureFlag$ = this.featureFlagsService.selectedFeatureFlag$;
+  }
+  ngOnDestroy() {
+    this.featureFlagIdSub.unsubscribe();
+  }
 }
diff --git a/...nt/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts b/...nt/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 {
   CommonSectionCardActionButtonsComponent,
   CommonSectionCardComponent,
@@ -7,8 +7,10 @@ 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';
 import { IMenuButtonItem } from 'upgrade_types';
 
+
 @Component({
   selector: 'app-feature-flag-exclusions-section-card',
   standalone: true,
@@ -24,6 +26,7 @@ import { IMenuButtonItem } from 'upgrade_types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagExclusionsSectionCardComponent {
+  @Input() data: FeatureFlag;
   tableRowCount$ = of(1);
   menuButtonItems: IMenuButtonItem[] = [
     { name: 'Edit', disabled: false },

diff --git a/...tent/feature-flag-exposures-section-card/feature-flag-exposures-section-card.component.ts b/...tent/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/...nt/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts b/...nt/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts
@@ -7,8 +7,12 @@ 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';
+
 import { IMenuButtonItem } from 'upgrade_types';
 
+
 @Component({
   selector: 'app-feature-flag-inclusions-section-card',
   standalone: true,
@@ -24,10 +28,14 @@ import { IMenuButtonItem } from 'upgrade_types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagInclusionsSectionCardComponent {
+
+  @Input() data: FeatureFlag;
+
   menuButtonItems: IMenuButtonItem[] = [
     { name: 'Edit', disabled: false },
     { name: 'Delete', disabled: false },
   ];
+
   tableRowCount$ = of(1);
   isSectionCardExpanded = true;
 

diff --git a/...g-overview-details-section-card/feature-flag-overview-details-section-card.component.scss b/...g-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...
-}
+}