Implement Add Include List Modal for Experiments

[zackcl]

Description

Implement support for Add/Edit Include List modals for experiments, reusing the existing UpsertPrivateSegmentListModalComponent. This requires refactoring existing feature flag methods in DialogService and adding new experiment-specific methods.

Requirements

Refactoring Tasks

1. Rename existing feature flag methods in common-dialog.service.ts:

   • openAddIncludeListModal → openFeatureFlagAddIncludeListModal
   • openEditIncludeListModal → openFeatureFlagEditIncludeListModal
   • openAddExcludeListModal → openFeatureFlagAddExcludeListModal
   • openEditExcludeListModal → openFeatureFlagEditExcludeListModal
   • Update all references in FeatureFlagInclusionsSectionCardComponent and FeatureFlagExclusionsSectionCardComponent

2. Add new experiment methods in common-dialog.service.ts:

   • openExperimentAddIncludeListModal(appContext: string, experimentId: string)
   • openExperimentEditIncludeListModal(sourceList: ParticipantListTableRow, appContext: string, experimentId: string)
   • openExperimentAddExcludeListModal(appContext: string, experimentId: string)
   • openExperimentEditExcludeListModal(sourceList: ParticipantListTableRow, appContext: string, experimentId: string)

3. Add new UPSERT actions in segments.model.ts:

   export enum UPSERT_PRIVATE_SEGMENT_LIST_ACTION {
     // existing...
     ADD_EXPERIMENT_INCLUDE_LIST = 'add_experiment_include',
     EDIT_EXPERIMENT_INCLUDE_LIST = 'edit_experiment_include',
     ADD_EXPERIMENT_EXCLUDE_LIST = 'add_experiment_exclude',
     EDIT_EXPERIMENT_EXCLUDE_LIST = 'edit_experiment_exclude',
   }

Implementation Details

1. DialogService Methods:

   openExperimentAddIncludeListModal(appContext: string, experimentId: string) {
     const commonModalConfig: CommonModalConfig<UpsertPrivateSegmentListParams> = {
       title: 'Add Include List',
       nameHint: 'experiments.upsert-include-list-modal.name-hint.text',
       valuesLabel: 'experiments.upsert-list-modal.values-label.text',
       valuesPlaceholder: 'experiments.upsert-list-modal.values-placeholder.text',
       primaryActionBtnLabel: 'Create',
       primaryActionBtnColor: 'primary',
       cancelBtnLabel: 'Cancel',
       params: {
         sourceList: null,
         sourceAppContext: appContext,
         action: UPSERT_PRIVATE_SEGMENT_LIST_ACTION.ADD_EXPERIMENT_INCLUDE_LIST,
         id: experimentId,
       },
     };
     return this.openUpsertPrivateSegmentListModal(commonModalConfig);
   }

2. Integration in ExperimentInclusionsSectionCardComponent:

   • Update onAddIncludeListClick() (line 85) to call dialogService.openExperimentAddIncludeListModal()
   • Handle modal response similar to FeatureFlagInclusionsSectionCardComponent

3. Modal Behavior (already implemented in UpsertPrivateSegmentListModalComponent):

   • Type dropdown with options: Segment, Individual, Group types (classId, instructorId, schoolId)
   • Dynamic form fields based on selected type
   • List name and description fields
   • Values input for individuals/groups
   • Segment selection for segment type

Acceptance Criteria

• Existing feature flag modals continue to work after method rename
• New experiment include list modal opens from ExperimentInclusionsSectionCardComponent
• Modal displays correct type dropdown options based on context
• Form validation works correctly for all list types
• Successful creation adds include list to experiment
• Edit modal pre-populates with existing data
• Cancel closes without changes
• Translation keys updated for experiment-specific text
• Service calls use correct experiment endpoints

Technical Notes

• The UpsertPrivateSegmentListModalComponent is already generic and handles different actions
• Need to ensure experiment service has corresponding methods for handling include/exclude lists
• Consider creating a helper method to reduce duplication between feature flag and experiment modal configs

References

• Screenshot:

• Figma link:
  https://www.figma.com/design/SN58AVPDU5DMO5WP2COt5Y/UpGrade-UI-Latest-28--Refinement-?t=zQdZ1BRm5SLNqqhV-1