Description
Implement a modal dialog for adding new conditions to experiments. The modal should allow users to select from available conditions for the specific app context and provide a description field.
Changes Required
- Create a new modal component
AddConditionModalComponent following existing modal patterns
- Modal should contain two form fields:
- Condition field: Implement as a combobox/autocomplete dropdown that shows available conditions from
contextMetaData.contextMetadata[appContext].CONDITIONS
- Description field: Text input field for optional condition description
- Integrate with
DialogService to handle modal opening/closing
- Update
onAddConditionClick() method in ExperimentConditionsSectionCardComponent to open the modal
- Handle form validation (Condition is required, Description is optional)
- Return the selected condition data when user confirms the addition
Files to Create/Update
- Create:
features/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.ts
- Create:
features/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.html
- Create:
features/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.scss
- Update:
shared/services/common-dialog.service.ts (add openAddConditionModal method)
- Update:
experiment-conditions-section-card.component.ts (implement onAddConditionClick method)
Acceptance Criteria
- Modal opens when "Add Condition" button is clicked
- Condition field shows available conditions as dropdown options from the app context
- Description field accepts optional text input
- Form validation prevents submission without selecting a condition
- Modal returns the selected condition and description when confirmed
- Modal integrates seamlessly with existing dialog service patterns
References
Description
Implement a modal dialog for adding new conditions to experiments. The modal should allow users to select from available conditions for the specific app context and provide a description field.
Changes Required
AddConditionModalComponentfollowing existing modal patternscontextMetaData.contextMetadata[appContext].CONDITIONSDialogServiceto handle modal opening/closingonAddConditionClick()method inExperimentConditionsSectionCardComponentto open the modalFiles to Create/Update
features/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.tsfeatures/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.htmlfeatures/dashboard/experiments/modals/add-condition-modal/add-condition-modal.component.scssshared/services/common-dialog.service.ts(addopenAddConditionModalmethod)experiment-conditions-section-card.component.ts(implementonAddConditionClickmethod)Acceptance Criteria
References
https://www.figma.com/design/HfwhRB2XUuV7BeUkiNIJzo/UpGrade-UI-Latest-30--Payload-Redesign-?node-id=38266-21375&t=EBfwt4nSBM5oOfMa-1