Import feature flag validation API and related UI changes, validation table

backend/packages/Upgrade/src/api/controllers/FeatureFlagController.ts

@@ -4,7 +4,11 @@ import { FeatureFlag } from '../models/FeatureFlag';
 import { FeatureFlagSegmentExclusion } from '../models/FeatureFlagSegmentExclusion';
 import { FeatureFlagSegmentInclusion } from '../models/FeatureFlagSegmentInclusion';
 import { FeatureFlagStatusUpdateValidator } from './validators/FeatureFlagStatusUpdateValidator';
-import { FeatureFlagPaginatedParamsValidator } from './validators/FeatureFlagsPaginatedParamsValidator';
+import {
+  FeatureFlagFile,
+  FeatureFlagPaginatedParamsValidator,
+  ValidatedFeatureFlagsError,
+} from './validators/FeatureFlagsPaginatedParamsValidator';
 import { AppRequest, PaginationResponse } from '../../types';
 import { SERVER_ERROR } from 'upgrade_types';
 import { FeatureFlagValidation, IdValidator, UserParamsValidator } from './validators/FeatureFlagValidator';
@@ -613,4 +617,98 @@ export class FeatureFlagsController {
   ): Promise<Segment> {
     return this.featureFlagService.deleteList(id, request.logger);
   }
+
+  /**
+   * @swagger
+   * /experiments/{validation}:
+   *    post:
+   *       description: Validating Experiment
+   *       consumes:
+   *         - application/json
+   *       parameters:
+   *         - in: body
+   *           name: experiments
+   *           required: true
+   *           schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 fileContent:
+   *                   type: string
+   *           description: Experiment Files
+   *       tags:
+   *         - Experiments
+   *       produces:
+   *         - application/json
+   *       responses:
+   *          '200':
+   *            description: Validations are completed
+   *            schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 error:
+   *                   type: string
+   *          '401':
+   *            description: AuthorizationRequiredError
+   *          '500':
+   *            description: Internal Server Error
+   */
+
+  /**
+   * @swagger
+   * /flags/{validation}:
+   *    post:
+   *       description: Validating Feature Flag
+   *       consumes:
+   *         - application/json
+   *       parameters:
+   *         - in: body
+   *           name: featureFlags
+   *           required: true
+   *           schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 fileContent:
+   *                   type: string
+   *           description: Import FeatureFlag Files
+   *       tags:
+   *         - Feature Flags
+   *       produces:
+   *         - application/json
+   *       responses:
+   *          '200':
+   *            description: Validations are completed
+   *            schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 compatibilityType:
+   *                   type: string
+   *                   enum: [compatible, warning, incompatible]
+   *          '401':
+   *            description: AuthorizationRequiredError
+   *          '500':
+   *            description: Internal Server Error
+   */
+  @Post('/import/validation')
+  public async validateImportFeatureFlags(
+    @Body({ validate: true }) featureFlags: FeatureFlagFile[],
+    @Req() request: AppRequest
+  ): Promise<ValidatedFeatureFlagsError[]> {
+    return await this.featureFlagService.validateImportFeatureFlags(featureFlags, request.logger);
+  }
 }

backend/packages/Upgrade/src/api/controllers/validators/FeatureFlagsPaginatedParamsValidator.ts

@@ -12,6 +12,22 @@ export interface IFeatureFlagSortParams {
   sortAs: SORT_AS_DIRECTION;
 }
 
+export interface FeatureFlagFile {
+  fileName: string;
+  fileContent: string;
+}
+
+export interface ValidatedFeatureFlagsError {
+  fileName: string;
+  compatibilityType: FF_COMPATIBILITY_TYPE;
+}
+
+export enum FF_COMPATIBILITY_TYPE {
+  COMPATIBLE = 'compatible',
+  WARNING = 'warning',
+  INCOMPATIBLE = 'incompatible',
+}
+
 export enum FLAG_SORT_KEY {
   NAME = 'name',
   KEY = 'key',

backend/packages/Upgrade/src/api/services/FeatureFlagService.ts

@@ -13,6 +13,9 @@ import {
   IFeatureFlagSearchParams,
   IFeatureFlagSortParams,
   FLAG_SEARCH_KEY,
+  ValidatedFeatureFlagsError,
+  FF_COMPATIBILITY_TYPE,
+  FeatureFlagFile,
 } from '../controllers/validators/FeatureFlagsPaginatedParamsValidator';
 import { FeatureFlagListValidator } from '../controllers/validators/FeatureFlagListValidator';
 import { SERVER_ERROR, FEATURE_FLAG_STATUS, FILTER_MODE, SEGMENT_TYPE } from 'upgrade_types';
@@ -274,12 +277,12 @@ export class FeatureFlagService {
       if (filterType === 'inclusion') {
         existingRecord = await this.featureFlagSegmentInclusionRepository.findOne({
           where: { featureFlag: { id: listInput.flagId }, segment: { id: listInput.list.id } },
-          relations: ['featureFlag', 'segment']
+          relations: ['featureFlag', 'segment'],
         });
       } else {
         existingRecord = await this.featureFlagSegmentExclusionRepository.findOne({
           where: { featureFlag: { id: listInput.flagId }, segment: { id: listInput.list.id } },
-          relations: ['featureFlag', 'segment']
+          relations: ['featureFlag', 'segment'],
         });
       }
 
@@ -397,4 +400,68 @@ export class FeatureFlagService {
     const includedFeatureFlags = featureFlags.filter(({ id }) => includedFeatureFlagIds.includes(id));
     return includedFeatureFlags;
   }
+
+  public async validateImportFeatureFlags(
+    featureFlagFiles: FeatureFlagFile[],
+    logger: UpgradeLogger
+  ): Promise<ValidatedFeatureFlagsError[]> {
+    logger.info({ message: 'Validate feature flags' });
+    const validationErrors = await Promise.allSettled(
+      featureFlagFiles.map(async (featureFlagFile) => {
+        let featureFlag: FeatureFlag;
+        try {
+          featureFlag = JSON.parse(featureFlagFile.fileContent);
+        } catch (parseError) {
+          logger.error({ message: 'Error in parsing feature flag file', details: parseError });
+          return {
+            fileName: featureFlagFile.fileName,
+            compatibilityType: FF_COMPATIBILITY_TYPE.INCOMPATIBLE,
+          };
+        }
+
+        const error = await this.validateImportFeatureFlag(featureFlagFile.fileName, featureFlag);
+        return error;
+      })
+    );
+    // Filter out the files that have no promise rejection errors
+    return validationErrors
+      .map((result) => {
+        if (result.status === 'fulfilled') {
+          return result.value;
+        } else {
+          const { fileName, compatibilityType } = result.reason;
+          return { fileName: fileName, compatibilityType: compatibilityType };
+        }
+      })
+      .filter((error) => error !== null);
+  }
+
+  private async validateImportFeatureFlag(fileName: string, flag: FeatureFlag) {
+    let compatibilityType = FF_COMPATIBILITY_TYPE.COMPATIBLE;
+
+    if (!flag.name || !flag.key || !flag.context) {
+      compatibilityType = FF_COMPATIBILITY_TYPE.INCOMPATIBLE;
+    } else {
+      const segmentIds = [
+        ...flag.featureFlagSegmentInclusion.flatMap((segmentInclusion) =>
+          segmentInclusion.segment.subSegments.map((subSegment) => subSegment.id)
+        ),
+        ...flag.featureFlagSegmentExclusion.flatMap((segmentExclusion) =>
+          segmentExclusion.segment.subSegments.map((subSegment) => subSegment.id)
+        ),
+      ];
+
+      const segments = await this.segmentService.getSegmentByIds(segmentIds);
+      segments.forEach((segment) => {
+        if (segment == undefined) {
+          compatibilityType = FF_COMPATIBILITY_TYPE.WARNING;
+        }
+      });
+    }
+
+    return {
+      fileName: fileName,
+      compatibilityType: compatibilityType,
+    };
+  }
 }

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

@@ -4,6 +4,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import {
   AddFeatureFlagRequest,
   FeatureFlag,
+  FeatureFlagFile,
   FeatureFlagSegmentListDetails,
   FeatureFlagsPaginationInfo,
   FeatureFlagsPaginationParams,
@@ -43,6 +44,11 @@ export class FeatureFlagsDataService {
     return this.http.put<FeatureFlag>(url, flag);
   }
 
+  validateFeatureFlag(featureFlag: FeatureFlagFile[]) {
+    const url = this.environment.api.validateFeatureFlag;
+    return this.http.post(url, featureFlag);
+  }
+
   emailFeatureFlagData(flagId: string, email: string){
     let featureFlagInfoParams = new HttpParams();
     featureFlagInfoParams = featureFlagInfoParams.append('experimentId', flagId);

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

@@ -22,6 +22,7 @@ import {
   selectSortKey,
   selectSortAs,
   selectAppContexts,
+  selectIsLoadingImportFeatureFlag,
   selectFeatureFlagIds,
 } from './store/feature-flags.selectors';
 import * as FeatureFlagsActions from './store/feature-flags.actions';
@@ -47,7 +48,8 @@ export class FeatureFlagsService {
   isLoadingFeatureFlags$ = this.store$.pipe(select(selectIsLoadingFeatureFlags));
   isLoadingSelectedFeatureFlag$ = this.store$.pipe(select(selectIsLoadingSelectedFeatureFlag));
   isLoadingUpsertFeatureFlag$ = this.store$.pipe(select(selectIsLoadingUpsertFeatureFlag));
-  IsLoadingFeatureFlagDelete$ = this.store$.pipe(select(selectIsLoadingFeatureFlagDelete));
+  isLoadingFeatureFlagDelete$ = this.store$.pipe(select(selectIsLoadingFeatureFlagDelete));
+  isLoadingImportFeatureFlag$ = this.store$.pipe(select(selectIsLoadingImportFeatureFlag));
   isLoadingUpdateFeatureFlagStatus$ = this.store$.pipe(select(selectIsLoadingUpdateFeatureFlagStatus));
   isLoadingUpsertPrivateSegmentList$ = this.store$.pipe(select(selectIsLoadingUpsertFeatureFlag));
   allFeatureFlags$ = this.store$.pipe(select(selectAllFeatureFlagsSortedByDate));
@@ -57,6 +59,7 @@ export class FeatureFlagsService {
   searchKey$ = this.store$.pipe(select(selectSearchKey));
   sortKey$ = this.store$.pipe(select(selectSortKey));
   sortAs$ = this.store$.pipe(select(selectSortAs));
+
 
   hasFeatureFlagsCountChanged$ = this.allFeatureFlags$.pipe(
     pairwise(),
@@ -128,6 +131,10 @@ export class FeatureFlagsService {
     this.store$.dispatch(FeatureFlagsActions.actionDeleteFeatureFlag({ flagId }));
   }
 
+  setIsLoadingImportFeatureFlag(isLoadingImportFeatureFlag: boolean) {
+    this.store$.dispatch(FeatureFlagsActions.actionSetIsLoadingImportFeatureFlag({ isLoadingImportFeatureFlag }));
+  }
+
   emailFeatureFlagData(featureFlagId: string) {
     this.store$.dispatch(FeatureFlagsActions.actionEmailFeatureFlagData({ featureFlagId }));
   }

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

@@ -65,6 +65,12 @@ export const actionUpdateFeatureFlagSuccess = createAction(
 
 export const actionUpdateFeatureFlagFailure = createAction('[Feature Flags] Update Feature Flag Failure');
 
+export const actionSetIsLoadingImportFeatureFlag = createAction(
+  '[Feature Flags] Set Is Loading for Flag Import',
+  props<{ isLoadingImportFeatureFlag: boolean }>()
+);
+
+
 export const actionEmailFeatureFlagData = createAction(
   '[Feature Flags] Email Feature Flag Data',
   props<{ featureFlagId: string }>()

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

@@ -58,6 +58,16 @@ export enum UPSERT_FEATURE_FLAG_LIST_ACTION {
   EDIT = 'edit',
 }
 
+export interface FeatureFlagFile {
+  fileName: string;
+  fileContent: string | ArrayBuffer;
+}
+
+export interface ValidateFeatureFlagError {
+  fileName: string;
+  compatibilityType: string;
+}
+
 export interface FeatureFlagsPaginationInfo {
   nodes: FeatureFlag[];
   total: number;
@@ -170,6 +180,7 @@ export const FLAG_ROOT_DISPLAYED_COLUMNS = Object.values(FLAG_ROOT_COLUMN_NAMES)
 
 export interface FeatureFlagState extends EntityState<FeatureFlag> {
   isLoadingUpsertFeatureFlag: boolean;
+  isLoadingImportFeatureFlag: boolean;
   isLoadingSelectedFeatureFlag: boolean;
   isLoadingFeatureFlags: boolean;
   isLoadingUpdateFeatureFlagStatus: boolean;

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

@@ -11,6 +11,7 @@ export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.get
 
 export const initialState: FeatureFlagState = adapter.getInitialState({
   isLoadingUpsertFeatureFlag: false,
+  isLoadingImportFeatureFlag: false,
   isLoadingFeatureFlags: false,
   isLoadingUpdateFeatureFlagStatus: false,
   isLoadingFeatureFlagDetail: false,
@@ -109,6 +110,10 @@ const reducer = createReducer(
     ...state,
     isLoadingFeatureFlags,
   })),
+  on(FeatureFlagsActions.actionSetIsLoadingImportFeatureFlag, (state, { isLoadingImportFeatureFlag }) => ({
+    ...state,
+    isLoadingImportFeatureFlag,
+  })),
   on(FeatureFlagsActions.actionSetSkipFlags, (state, { skipFlags }) => ({ ...state, skipFlags })),
   on(FeatureFlagsActions.actionSetSearchKey, (state, { searchKey }) => ({ ...state, searchKey })),
   on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),

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

@@ -115,6 +115,11 @@ export const selectFeatureFlagsListLength = createSelector(
   (featureFlags) => featureFlags.length
 );
 
+export const selectIsLoadingImportFeatureFlag = createSelector(
+  selectFeatureFlagsState,
+  (state) => state.isLoadingImportFeatureFlag
+);
+
 export const selectIsLoadingUpdateFeatureFlagStatus = createSelector(
   selectFeatureFlagsState,
   (state) => state.isLoadingUpdateFeatureFlagStatus

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.ts

@@ -41,15 +41,15 @@ export class DeleteFeatureFlagModalComponent {
   inputValue = '';
   subscriptions = new Subscription();
   isSelectedFeatureFlagRemoved$ = this.featureFlagsService.isSelectedFeatureFlagRemoved$;
-  IsLoadingFeatureFlagDelete$ = this.featureFlagsService.IsLoadingFeatureFlagDelete$;
+  isLoadingFeatureFlagDelete$ = this.featureFlagsService.isLoadingFeatureFlagDelete$;
   private inputSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');
 
   // Observable that emits true if inputValue is 'delete', false otherwise
   isDeleteNotTyped$: Observable<boolean> = this.inputSubject.pipe(map((value) => value.toLowerCase() !== 'delete'));
 
   isDeleteActionBtnDisabled$: Observable<boolean> = combineLatest([
     this.isDeleteNotTyped$,
-    this.IsLoadingFeatureFlagDelete$,
+    this.isLoadingFeatureFlagDelete$,
   ]).pipe(map(([isDeleteNotTyped, isLoading]) => isDeleteNotTyped || isLoading));
 
   constructor(