Refine Feature Flags and Segments List Sorting (#1992)

Co-authored-by: Yagnik Hingrajiya <[email protected]> Co-authored-by: Pratik Prajapati <[email protected]>
CarnegieLearningWeb · Oct 1, 2024 · a2dad5a · a2dad5a
1 parent 9d64a6b
commit a2dad5a
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 8 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
@@ -36,15 +36,17 @@ import {
   UpdateFeatureFlagRequest,
   UpdateFilterModeRequest,
   UpdateFeatureFlagStatusRequest,
+  FeatureFlagLocalStorageKeys,
 } from './store/feature-flags.model';
 import { filter, map, pairwise } from 'rxjs';
 import isEqual from 'lodash.isequal';
 import { selectCurrentUserEmail } from '../auth/store/auth.selectors';
 import { AddPrivateSegmentListRequest, EditPrivateSegmentListRequest } from '../segments/store/segments.model';
+import { LocalStorageService } from '../local-storage/local-storage.service';
 
 @Injectable()
 export class FeatureFlagsService {
-  constructor(private store$: Store<AppState>) {}
+  constructor(private store$: Store<AppState>, private localStorageService: LocalStorageService) {}
 
   currentUserEmailAddress$ = this.store$.pipe(select(selectCurrentUserEmail));
   allFeatureFlagsIds$ = this.store$.pipe(select(selectFeatureFlagIds));
@@ -163,18 +165,22 @@ export class FeatureFlagsService {
   }
 
   setSearchKey(searchKey: FLAG_SEARCH_KEY) {
+    this.localStorageService.setItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SEARCH_KEY, searchKey);
     this.store$.dispatch(FeatureFlagsActions.actionSetSearchKey({ searchKey }));
   }
 
   setSearchString(searchString: string) {
+    this.localStorageService.setItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SEARCH_STRING, searchString);
     this.store$.dispatch(FeatureFlagsActions.actionSetSearchString({ searchString }));
   }
 
   setSortKey(sortKey: FLAG_SORT_KEY) {
+    this.localStorageService.setItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SORT_KEY, sortKey);
     this.store$.dispatch(FeatureFlagsActions.actionSetSortKey({ sortKey }));
   }
 
   setSortingType(sortingType: SORT_AS_DIRECTION) {
+    this.localStorageService.setItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SORT_TYPE, sortingType);
     this.store$.dispatch(FeatureFlagsActions.actionSetSortingType({ sortingType }));
   }
 

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
@@ -10,6 +10,13 @@ export interface GeneralCRUDResponseFields {
   versionNumber: number;
 }
 
+export enum FeatureFlagLocalStorageKeys {
+  FEATURE_FLAG_SEARCH_STRING = 'FEATURE_FLAG_SEARCH_STRING',
+  FEATURE_FLAG_SEARCH_KEY = 'FEATURE_FLAG_KEY_STRING',
+  FEATURE_FLAG_SORT_KEY = 'FEATURE_FLAG_SORT_KEY',
+  FEATURE_FLAG_SORT_TYPE = 'FEATURE_FLAG_SORT_TYPE',
+}
+
 export interface CoreFeatureFlagDetails {
   id?: string;
   name: string;

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
@@ -2,7 +2,7 @@ import { createReducer, Action, on } from '@ngrx/store';
 import { createEntityAdapter, EntityAdapter } from '@ngrx/entity';
 import { FeatureFlagState, FeatureFlag } from './feature-flags.model';
 import * as FeatureFlagsActions from './feature-flags.actions';
-import { FLAG_SEARCH_KEY } from 'upgrade_types';
+import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
 
 export const adapter: EntityAdapter<FeatureFlag> = createEntityAdapter<FeatureFlag>({
   selectId: (featureFlag: FeatureFlag) => featureFlag.id,
@@ -26,8 +26,8 @@ export const initialState: FeatureFlagState = adapter.getInitialState({
   totalFlags: null,
   searchKey: FLAG_SEARCH_KEY.ALL,
   searchValue: null,
-  sortKey: null,
-  sortAs: null,
+  sortKey: FLAG_SORT_KEY.NAME,
+  sortAs: SORT_AS_DIRECTION.ASCENDING,
 });
 
 const reducer = createReducer(

diff --git a/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts b/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts
@@ -6,7 +6,8 @@ import {
   EXPERIMENT_SORT_KEY,
 } from '../experiments/store/experiments.model';
 import { SegmentLocalStorageKeys, SegmentState } from '../segments/store/segments.model';
-import { SEGMENT_SEARCH_KEY, SORT_AS_DIRECTION, SEGMENT_SORT_KEY } from 'upgrade_types';
+import { SEGMENT_SEARCH_KEY, SORT_AS_DIRECTION, SEGMENT_SORT_KEY, FLAG_SEARCH_KEY, FLAG_SORT_KEY } from 'upgrade_types';
+import { FeatureFlagLocalStorageKeys, FeatureFlagState } from '../feature-flags/store/feature-flags.model';
 
 const APP_PREFIX = 'UPGRADE-';
 
@@ -20,6 +21,11 @@ export class LocalStorageService {
     const experimentSearchKey = this.getItem(ExperimentLocalStorageKeys.EXPERIMENT_SEARCH_KEY);
     const experimentSearchString = this.getItem(ExperimentLocalStorageKeys.EXPERIMENT_SEARCH_STRING);
 
+    const featureFlagSortKey = this.getItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SORT_KEY);
+    const featureFlagSortType = this.getItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SORT_TYPE);
+    const featureFlagSearchKey = this.getItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SEARCH_KEY);
+    const featureFlagSearchString = this.getItem(FeatureFlagLocalStorageKeys.FEATURE_FLAG_SEARCH_STRING);
+
     const segmentSortKey = this.getItem(SegmentLocalStorageKeys.SEGMENT_SORT_KEY);
     const segmentSortType = this.getItem(SegmentLocalStorageKeys.SEGMENT_SORT_TYPE);
     const segmentSearchKey = this.getItem(SegmentLocalStorageKeys.SEGMENT_SEARCH_KEY);
@@ -51,6 +57,27 @@ export class LocalStorageService {
       currentUserSelectedContext: null,
     };
 
+    const featureFlagState: FeatureFlagState = {
+      ids: [],
+      entities: {},
+      isLoadingUpsertFeatureFlag: false,
+      isLoadingImportFeatureFlag: false,
+      isLoadingSelectedFeatureFlag: false,
+      isLoadingFeatureFlags: false,
+      isLoadingUpdateFeatureFlagStatus: false,
+      isLoadingFeatureFlagDelete: false,
+      isLoadingUpsertPrivateSegmentList: false,
+      hasInitialFeatureFlagsDataLoaded: false,
+      duplicateKeyFound: false,
+      activeDetailsTabIndex: 0,
+      skipFlags: 0,
+      totalFlags: null,
+      searchKey: featureFlagSearchKey as FLAG_SEARCH_KEY,
+      searchValue: featureFlagSearchString || null,
+      sortKey: (featureFlagSortKey as FLAG_SORT_KEY) || FLAG_SORT_KEY.NAME,
+      sortAs: (featureFlagSortType as SORT_AS_DIRECTION) || SORT_AS_DIRECTION.ASCENDING,
+    };
+
     const segmentState: SegmentState = {
       ids: [],
       entities: {},
@@ -66,7 +93,8 @@ export class LocalStorageService {
     };
 
     const state = {
-      experiments: experimentState, // experiment state,
+      experiments: experimentState,
+      featureFlagState: featureFlagState,
       segments: segmentState,
     };
     return state;

diff --git a/...rd/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts b/...rd/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
@@ -104,7 +104,16 @@ export class FeatureFlagRootSectionCardTableComponent implements OnInit {
   }
 
   changeSorting(event) {
-    this.featureFlagsService.setSortingType(event.direction ? event.direction.toUpperCase() : null);
-    this.featureFlagsService.setSortKey(event.direction ? event.active : null);
+    if (event.direction) {
+      this.featureFlagsService.setSortingType(event.direction.toUpperCase());
+      this.featureFlagsService.setSortKey(event.active);
+    } else {
+      // When sorting is cleared, revert to default sorting
+      this.featureFlagsService.setSortingType(null);
+      this.featureFlagsService.setSortKey(null);
+      this.dataSource$.data = this.dataSource$.data.sort(
+        (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+      );
+    }
   }
 }
diff --git a/...e/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts b/...e/src/app/features/dashboard/segments/components/segments-list/segments-list.component.ts
@@ -75,6 +75,7 @@ export class SegmentsListComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.segmentSortKey$ = this.segmentsService.selectSegmentSortKey$;
     this.segmentSortAs$ = this.segmentsService.selectSegmentSortAs$;
+    this.segmentsService.fetchSegments(true);
 
     this.segmentsService.selectSearchSegmentParams().subscribe((searchParams: any) => {
       // Used when user clicks on context from view segment page