Add list details page for managing include/exclude list values

packages/frontend/projects/upgrade/src/app/core/experiments/store/experiments.effects.spec.ts

@@ -51,6 +51,10 @@ import {
   actionFetchRewardsDataForExperiment,
   actionFetchRewardsDataForExperimentSuccess,
   actionFetchRewardsDataForExperimentFailure,
+  actionAddExperimentInclusionList,
+  actionAddExperimentInclusionListSuccess,
+  actionAddExperimentExclusionList,
+  actionAddExperimentExclusionListSuccess,
 } from './experiments.actions';
 import { ExperimentEffects } from './experiments.effects';
 import {
@@ -67,6 +71,8 @@ import { actionExecuteQuery, actionFetchMetrics } from '../../analysis/store/ana
 import { selectCurrentUser } from '../../auth/store/auth.selectors';
 import { UserRole } from '../../users/store/users.model';
 import { Environment } from '../../../../environments/environment-types';
+import { LIST_FILTER_MODE, SEGMENT_TYPE } from 'upgrade_types';
+import { ExperimentSegmentListRequest, LIST_OPTION_TYPE } from '../../segments/store/segments.model';
 
 describe('ExperimentEffects', () => {
   let service: ExperimentEffects;
@@ -1376,6 +1382,108 @@ describe('ExperimentEffects', () => {
     }));
   });
 
+  describe('add experiment lists', () => {
+    const experimentId = 'experiment-id';
+    const listId = 'list-id';
+    const listResponse = { segment: { id: listId } } as any;
+
+    const createListRequest = (listType: string): ExperimentSegmentListRequest => ({
+      experimentId,
+      list: {
+        name: 'Test list',
+        description: '',
+        context: 'test',
+        type: SEGMENT_TYPE.PRIVATE,
+        userIds: [],
+        groups: [],
+        subSegmentIds: [],
+        listType,
+      },
+    });
+
+    describe('addExperimentInclusionList$', () => {
+      it('should navigate a direct-value list to its List Details page', fakeAsync(() => {
+        const list = createListRequest(LIST_OPTION_TYPE.INDIVIDUAL);
+        experimentDataService.addInclusionList = jest.fn().mockReturnValue(of(listResponse));
+
+        const expectedAction = actionAddExperimentInclusionListSuccess({ listResponse });
+
+        service.addExperimentInclusionList$.subscribe((result) => {
+          expect(result).toEqual(expectedAction);
+          expect(router.navigate).toHaveBeenCalledWith([
+            '/home',
+            'detail',
+            experimentId,
+            'list',
+            LIST_FILTER_MODE.INCLUSION,
+            listId,
+          ]);
+        });
+
+        actions$.next(actionAddExperimentInclusionList({ list }));
+
+        tick(0);
+      }));
+
+      it('should keep a Segment-backed list on the owner page', fakeAsync(() => {
+        const list = createListRequest(LIST_OPTION_TYPE.SEGMENT);
+        experimentDataService.addInclusionList = jest.fn().mockReturnValue(of(listResponse));
+
+        const expectedAction = actionAddExperimentInclusionListSuccess({ listResponse });
+
+        service.addExperimentInclusionList$.subscribe((result) => {
+          expect(result).toEqual(expectedAction);
+          expect(router.navigate).not.toHaveBeenCalled();
+        });
+
+        actions$.next(actionAddExperimentInclusionList({ list }));
+
+        tick(0);
+      }));
+    });
+
+    describe('addExperimentExclusionList$', () => {
+      it('should navigate a direct-value list to its List Details page', fakeAsync(() => {
+        const list = createListRequest(LIST_OPTION_TYPE.INDIVIDUAL);
+        experimentDataService.addExclusionList = jest.fn().mockReturnValue(of(listResponse));
+
+        const expectedAction = actionAddExperimentExclusionListSuccess({ listResponse });
+
+        service.addExperimentExclusionList$.subscribe((result) => {
+          expect(result).toEqual(expectedAction);
+          expect(router.navigate).toHaveBeenCalledWith([
+            '/home',
+            'detail',
+            experimentId,
+            'list',
+            LIST_FILTER_MODE.EXCLUSION,
+            listId,
+          ]);
+        });
+
+        actions$.next(actionAddExperimentExclusionList({ list }));
+
+        tick(0);
+      }));
+
+      it('should keep a Segment-backed list on the owner page', fakeAsync(() => {
+        const list = createListRequest(LIST_OPTION_TYPE.SEGMENT);
+        experimentDataService.addExclusionList = jest.fn().mockReturnValue(of(listResponse));
+
+        const expectedAction = actionAddExperimentExclusionListSuccess({ listResponse });
+
+        service.addExperimentExclusionList$.subscribe((result) => {
+          expect(result).toEqual(expectedAction);
+          expect(router.navigate).not.toHaveBeenCalled();
+        });
+
+        actions$.next(actionAddExperimentExclusionList({ list }));
+
+        tick(0);
+      }));
+    });
+  });
+
   describe('fetchRewardsDataForExperiment$', () => {
     it('should dispatch actionFetchRewardsDataForExperimentSuccess on successful fetch', fakeAsync(() => {
       const experimentId = 'test-experiment-123';

packages/frontend/projects/upgrade/src/app/core/experiments/store/experiments.effects.ts

@@ -34,6 +34,8 @@ import JSZip from 'jszip';
 import { TranslateService } from '@ngx-translate/core';
 import { CommonModalEventsService } from '../../../shared/services/common-modal-event.service';
 import { CommonExportHelpersService } from '../../../shared/services/common-export-helpers.service';
+import { LIST_FILTER_MODE } from 'upgrade_types';
+import { LIST_OPTION_TYPE } from '../../segments/store/segments.model';
 @Injectable()
 export class ExperimentEffects {
   constructor(
@@ -560,6 +562,16 @@ export class ExperimentEffects {
           map((listResponse) => {
             this.notificationService.showSuccess(this.translate.instant('experiments.inclusions.add-success.text'));
             this.commonModalEvents.forceCloseModal();
+            if (action.list.list.listType?.toLowerCase() !== LIST_OPTION_TYPE.SEGMENT.toLowerCase()) {
+              this.router.navigate([
+                '/home',
+                'detail',
+                action.list.experimentId,
+                'list',
+                LIST_FILTER_MODE.INCLUSION,
+                listResponse.segment.id,
+              ]);
+            }
             return experimentAction.actionAddExperimentInclusionListSuccess({ listResponse });
           }),
           catchError((error) => {
@@ -617,6 +629,16 @@ export class ExperimentEffects {
           map((listResponse) => {
             this.notificationService.showSuccess(this.translate.instant('experiments.exclusions.add-success.text'));
             this.commonModalEvents.forceCloseModal();
+            if (action.list.list.listType?.toLowerCase() !== LIST_OPTION_TYPE.SEGMENT.toLowerCase()) {
+              this.router.navigate([
+                '/home',
+                'detail',
+                action.list.experimentId,
+                'list',
+                LIST_FILTER_MODE.EXCLUSION,
+                listResponse.segment.id,
+              ]);
+            }
             return experimentAction.actionAddExperimentExclusionListSuccess({ listResponse });
           }),
           catchError((error) => {

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

@@ -13,7 +13,8 @@ import { selectSearchString, selectFeatureFlagPaginationParams } from './feature
 import { selectCurrentUser } from '../../auth/store/auth.selectors';
 import { CommonExportHelpersService } from '../../../shared/services/common-export-helpers.service';
 import { of } from 'rxjs';
-import { SERVER_ERROR } from 'upgrade_types';
+import { LIST_FILTER_MODE, SERVER_ERROR } from 'upgrade_types';
+import { LIST_OPTION_TYPE } from '../../segments/store/segments.model';
 import { CommonModalEventsService } from '../../../shared/services/common-modal-event.service';
 
 @Injectable()
@@ -189,6 +190,16 @@ export class FeatureFlagsEffects {
           map((listResponse) => {
             this.notificationService.showSuccess(this.translate.instant('feature-flags.inclusions.add-success.text'));
             this.commonModalEvents.forceCloseModal();
+            if (action.list.listType?.toLowerCase() !== LIST_OPTION_TYPE.SEGMENT.toLowerCase()) {
+              this.router.navigate([
+                '/featureflags',
+                'detail',
+                action.list.id,
+                'list',
+                LIST_FILTER_MODE.INCLUSION,
+                listResponse.segment.id,
+              ]);
+            }
             return FeatureFlagsActions.actionAddFeatureFlagInclusionListSuccess({ listResponse });
           }),
           catchError((error) => {
@@ -270,6 +281,16 @@ export class FeatureFlagsEffects {
           map((listResponse) => {
             this.notificationService.showSuccess(this.translate.instant('feature-flags.exclusions.add-success.text'));
             this.commonModalEvents.forceCloseModal();
+            if (action.list.listType?.toLowerCase() !== LIST_OPTION_TYPE.SEGMENT.toLowerCase()) {
+              this.router.navigate([
+                '/featureflags',
+                'detail',
+                action.list.id,
+                'list',
+                LIST_FILTER_MODE.EXCLUSION,
+                listResponse.segment.id,
+              ]);
+            }
             return FeatureFlagsActions.actionAddFeatureFlagExclusionListSuccess({ listResponse });
           }),
           catchError((error) => {