consolidate add-edit-duplicate modals

frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts

@@ -6,10 +6,10 @@ import {
   FeatureFlag,
   FeatureFlagsPaginationInfo,
   FeatureFlagsPaginationParams,
+  ModifyFeatureFlagRequest,
   UpdateFeatureFlagStatusRequest,
 } from './store/feature-flags.model';
 import { Observable } from 'rxjs';
-import { FEATURE_FLAG_STATUS, FILTER_MODE } from '../../../../../../../types/src';
 
 @Injectable()
 export class FeatureFlagsDataService {
@@ -18,32 +18,30 @@ export class FeatureFlagsDataService {
   fetchFeatureFlagsPaginated(params: FeatureFlagsPaginationParams): Observable<FeatureFlagsPaginationInfo> {
     const url = this.environment.api.getPaginatedFlags;
     return this.http.post<FeatureFlagsPaginationInfo>(url, params);
-    // mock
-    // // return of({ nodes: mockFeatureFlags, total: 2 }).pipe(delay(2000));
   }
 
   fetchFeatureFlagById(id: string) {
     const url = `${this.environment.api.featureFlag}/${id}`;
     return this.http.get(url);
   }
 
+  updateFeatureFlagStatus(params: UpdateFeatureFlagStatusRequest): Observable<FeatureFlag> {
+    const url = this.environment.api.updateFlagStatus;
+    return this.http.post<FeatureFlag>(url, params);
+  }
+
   addFeatureFlag(params: AddFeatureFlagRequest): Observable<FeatureFlag> {
     const url = this.environment.api.featureFlag;
     return this.http.post<FeatureFlag>(url, params);
   }
 
-  updateFeatureFlagStatus(params: UpdateFeatureFlagStatusRequest): Observable<FeatureFlag> {
-    const url = this.environment.api.updateFlagStatus;
-    return this.http.post<FeatureFlag>(url, params);
+  updateFeatureFlag(flag: ModifyFeatureFlagRequest): Observable<FeatureFlag> {
+    const url = `${this.environment.api.featureFlag}/${flag.id}`;
+    return this.http.put<FeatureFlag>(url, flag);
   }
 
   deleteFeatureFlag(id: string) {
     const url = `${this.environment.api.featureFlag}/${id}`;
     return this.http.delete(url);
   }
-
-  updateFeatureFlag(flag: FeatureFlag): Observable<FeatureFlag> {
-    const url = `${this.environment.api.featureFlag}/${flag.id}`;
-    return this.http.put<FeatureFlag>(url, flag);
-  }
 }

frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts

@@ -25,7 +25,11 @@ import {
 import * as FeatureFlagsActions from './store/feature-flags.actions';
 import { actionFetchContextMetaData } from '../experiments/store/experiments.actions';
 import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
-import { AddFeatureFlagRequest, FeatureFlag, UpdateFeatureFlagStatusRequest } from './store/feature-flags.model';
+import {
+  UpdateFeatureFlagStatusRequest,
+  AddFeatureFlagRequest,
+  ModifyFeatureFlagRequest,
+} from './store/feature-flags.model';
 import { ExperimentService } from '../experiments/experiments.service';
 import { filter, map, pairwise } from 'rxjs';
 
@@ -90,11 +94,11 @@ export class FeatureFlagsService {
     map((exclusions) => exclusions.length)
   );
 
-  convertNameStringToKey(name:string):string {
-    let upperCaseString = name.trim().toUpperCase();
-    let key = upperCaseString.replace(/ /g, '_');
+  convertNameStringToKey(name: string): string {
+    const upperCaseString = name.trim().toUpperCase();
+    const key = upperCaseString.replace(/ /g, '_');
     return key;
-}
+  }
 
   fetchFeatureFlags(fromStarting?: boolean) {
     this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlags({ fromStarting }));
@@ -112,7 +116,7 @@ export class FeatureFlagsService {
     this.store$.dispatch(FeatureFlagsActions.actionAddFeatureFlag({ addFeatureFlagRequest }));
   }
 
-  updateFeatureFlag(flag: FeatureFlag) {
+  updateFeatureFlag(flag: ModifyFeatureFlagRequest) {
     this.store$.dispatch(FeatureFlagsActions.actionUpdateFeatureFlag({ flag }));
   }
 

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts

@@ -1,5 +1,10 @@
 import { createAction, props } from '@ngrx/store';
-import { AddFeatureFlagRequest, FeatureFlag, UpdateFeatureFlagStatusRequest } from './feature-flags.model';
+import {
+  FeatureFlag,
+  UpdateFeatureFlagStatusRequest,
+  AddFeatureFlagRequest,
+  ModifyFeatureFlagRequest,
+} from './feature-flags.model';
 import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
 
 export const actionFetchFeatureFlags = createAction(
@@ -48,7 +53,7 @@ export const actionDeleteFeatureFlagFailure = createAction('[Feature Flags] Dele
 
 export const actionUpdateFeatureFlag = createAction(
   '[Feature Flags] Update Feature Flag',
-  props<{ flag: FeatureFlag }>()
+  props<{ flag: ModifyFeatureFlagRequest }>()
 );
 
 export const actionUpdateFeatureFlagSuccess = createAction(

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts

@@ -15,8 +15,7 @@ export interface FeatureFlag {
   filterMode: FILTER_MODE;
   context: string[];
   tags: string[];
-  featureFlagSegmentInclusion: PrivateSegment | EmptyPrivateSegment;
-  featureFlagSegmentExclusion: PrivateSegment | EmptyPrivateSegment;
+  enabled: boolean;
 }
 
 export interface FeatureFlagsPaginationInfo {
@@ -29,20 +28,40 @@ export interface FeatureFlagsPaginationInfo {
 export interface AddFeatureFlagRequest {
   name: string;
   key: string;
-  description: string;
-  status: FEATURE_FLAG_STATUS;
+  description?: string;
   context: string[];
   tags: string[];
-  featureFlagSegmentInclusion: PrivateSegment | EmptyPrivateSegment;
-  featureFlagSegmentExclusion: PrivateSegment | EmptyPrivateSegment;
-  filterMode: FILTER_MODE;
+}
+
+export interface ModifyFeatureFlagRequest {
+  id: string;
+  name?: string;
+  key?: string;
+  description?: string;
+  status?: FEATURE_FLAG_STATUS;
+  filterMode?: FILTER_MODE;
+  context?: string[];
+  tags?: string[];
+  enabled?: boolean;
+}
+
+export enum UpsertModalAction {
+  ADD = 'add',
+  EDIT = 'edit',
+  DUPLICATE = 'duplicate',
+}
+
+export interface UpsertModalParams {
+  sourceFlag: FeatureFlag;
+  action: UpsertModalAction;
 }
 
 export interface UpdateFeatureFlagStatusRequest {
   flagId: string;
   status: FEATURE_FLAG_STATUS;
 }
 
+export const DuplicateFeatureFlagSuffix = '_COPY_CHANGE_ME';
 export interface FeatureFlagFormData {
   name: string;
   key: string;

frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts

@@ -26,6 +26,7 @@ export const initialState: FeatureFlagState = adapter.getInitialState({
 
 const reducer = createReducer(
   initialState,
+  // Feature Flags Fetching Actions
   on(FeatureFlagsActions.actionFetchFeatureFlags, (state) => ({
     ...state,
     isLoadingFeatureFlags: true,
@@ -43,6 +44,12 @@ const reducer = createReducer(
     });
   }),
   on(FeatureFlagsActions.actionFetchFeatureFlagsFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
+
+  // Feature Flag Detail Actions
+  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+    ...state,
+    isLoadingSelectedFeatureFlag: true,
+  })),
   on(FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess, (state, { flag }) => {
     return adapter.upsertOne(flag, {
       ...state,
@@ -53,24 +60,23 @@ const reducer = createReducer(
     ...state,
     isLoadingSelectedFeatureFlag: false,
   })),
-  on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
+
+  // Feature Flag Upsert Actions (Add/Update both = upsert result)
+  on(FeatureFlagsActions.actionAddFeatureFlag, FeatureFlagsActions.actionUpdateFeatureFlag, (state) => ({
     ...state,
-    isLoadingFeatureFlags,
+    isLoadingUpsertFeatureFlag: true,
   })),
-  on(FeatureFlagsActions.actionAddFeatureFlag, (state) => ({ ...state, isLoadingUpsertFeatureFlag: true })),
-  on(FeatureFlagsActions.actionAddFeatureFlagSuccess, (state, { response }) => {
-    return adapter.addOne(response, {
-      ...state,
-      isLoadingUpsertFeatureFlag: false,
-    });
-  }),
-  on(FeatureFlagsActions.actionUpdateFeatureFlag, (state) => ({ ...state, isLoadingUpsertFeatureFlag: true })),
-  on(FeatureFlagsActions.actionUpdateFeatureFlagSuccess, (state, { response }) => {
-    return adapter.upsertOne(response, {
-      ...state,
-      isLoadingUpsertFeatureFlag: false,
-    });
-  }),
+  on(
+    FeatureFlagsActions.actionUpdateFeatureFlagSuccess,
+    FeatureFlagsActions.actionAddFeatureFlagSuccess,
+    (state, { response }) => adapter.upsertOne(response, { ...state, isLoadingUpsertFeatureFlag: false })
+  ),
+  on(FeatureFlagsActions.actionAddFeatureFlagFailure, FeatureFlagsActions.actionUpdateFeatureFlagFailure, (state) => ({
+    ...state,
+    isLoadingUpsertFeatureFlag: false,
+  })),
+
+  // Feature Flag Delete Actions
   on(FeatureFlagsActions.actionDeleteFeatureFlag, (state) => ({ ...state, isLoadingFeatureFlagDelete: true })),
   on(FeatureFlagsActions.actionDeleteFeatureFlagSuccess, (state, { flag }) => {
     return adapter.removeOne(flag.id, {
@@ -82,17 +88,8 @@ const reducer = createReducer(
     ...state,
     isLoadingFeatureFlagDelete: false,
   })),
-  on(FeatureFlagsActions.actionUpdateFeatureFlagFailure, (state) => ({ ...state, isLoadingUpsertFeatureFlag: false })),
-  on(FeatureFlagsActions.actionAddFeatureFlagFailure, (state) => ({ ...state, isLoadingUpsertFeatureFlag: false })),
-  on(FeatureFlagsActions.actionSetSkipFlags, (state, { skipFlags }) => ({ ...state, skipFlags })),
-  on(FeatureFlagsActions.actionSetSearchKey, (state, { searchKey }) => ({ ...state, searchKey })),
-  on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),
-  on(FeatureFlagsActions.actionSetSortKey, (state, { sortKey }) => ({ ...state, sortKey })),
-  on(FeatureFlagsActions.actionSetSortingType, (state, { sortingType }) => ({ ...state, sortAs: sortingType })),
-  on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
-    ...state,
-    activeDetailsTabIndex,
-  })),
+
+  // Feature Flag Status Update Actions
   on(FeatureFlagsActions.actionUpdateFeatureFlagStatus, (state) => ({
     ...state,
     isLoadingUpdateFeatureFlagStatus: true,
@@ -108,9 +105,20 @@ const reducer = createReducer(
     ...state,
     isLoadingUpdateFeatureFlagStatus: true,
   })),
-  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+
+  // UI State Update Actions
+  on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
     ...state,
-    isLoadingSelectedFeatureFlag: true,
+    isLoadingFeatureFlags,
+  })),
+  on(FeatureFlagsActions.actionSetSkipFlags, (state, { skipFlags }) => ({ ...state, skipFlags })),
+  on(FeatureFlagsActions.actionSetSearchKey, (state, { searchKey }) => ({ ...state, searchKey })),
+  on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),
+  on(FeatureFlagsActions.actionSetSortKey, (state, { sortKey }) => ({ ...state, sortKey })),
+  on(FeatureFlagsActions.actionSetSortingType, (state, { sortingType }) => ({ ...state, sortAs: sortingType })),
+  on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
+    ...state,
+    activeDetailsTabIndex,
   }))
 );