Implement Pause Button and Modal

[zackcl]

User Story

As an experiment manager, I want to pause a running experiment so that I can stop new enrollments while deciding on next steps, and configure how existing enrollments should be handled.

Description

Implement the Pause button and Pause Experiment modal to transition an experiment from Running status to Paused status. The modal includes Post Experiment Rule selection to control behavior for existing enrollments (Continue in current condition or Assign to a specific condition).

Status Transition: Running → Paused (ENROLLING → ENROLLMENT_COMPLETE)

Implementation Details

1. Add Pause Button

Location: experiment-overview-details-section-card.component (header-right section)

• Display only when experiment.state === EXPERIMENT_STATE.ENROLLING
• Button text: "Pause"
• Button color: #6478C8

2. Create Pause Experiment Modal

New component: modals/pause-experiment-modal/

Follow the existing delete-experiment-modal pattern with:

• Title: "Pause Experiment"
• Message: "Are you sure you want to pause '[Experiment Name]'?"
• Info text: "After pausing, you can restart or complete the experiment. While paused, the experiment will continue to collect data for existing enrollments according to the defined pause behavior."
• Post Experiment Rule Section:
  • Radio button 1: "Continue" (default selected)
    • Label: "Students will remain in their current assigned conditions without any changes."
  • Radio button 2: "Assign"
    • Label: "All students will receive a specified condition moving forward."
    • Conditional dropdown: "Condition *" (appears when Assign is selected)
• Primary button: "Pause"
• Cancel button: "Cancel"

3. Post Experiment Rule Handling

Note: "Post Experiment Rule" is the existing field in the codebase.

• Use reactive forms for radio button selection
• Conditionally show condition dropdown when "Assign" is selected
• Load conditions from experiment state
• Update experiment's postExperimentRule field with selected behavior
• If "Assign" selected, also store the selected condition ID

4. Service Updates

• DialogService: Add openPauseExperimentModal() method
• ExperimentService: Add pauseExperiment(experimentId, postExperimentRule, conditionId?) method
• API Payload:
  • state: ENROLLMENT_COMPLETE
  • postExperimentRule: 'continue' | 'assign'
  • conditionId: string (if Assign selected)

Acceptance Criteria

• Pause button appears ONLY when experiment status is Running
• Clicking Pause button opens the Pause Experiment modal
• Modal displays experiment name dynamically
• "Continue" is selected by default for Post Experiment Rule
• Condition dropdown appears ONLY when "Assign" is selected
• Condition dropdown is populated with the experiment's conditions
• "Pause" button is disabled until valid selection is made (including condition if Assign selected)
• Clicking "Pause" transitions experiment to Paused status with the selected Post Experiment Rule
• Post Experiment Rule is stored with the experiment
• Success notification appears: "Experiment paused successfully"
• UI updates without page refresh (Pause button disappears, Resume/Stop buttons appear)
• Clicking "Cancel" closes modal without changes
• Error notification appears if transition fails

Technical Notes

• Reuse existing postExperimentRule field from experiment entity (UI-only change, no backend schema changes)
• Use *ngIf to conditionally show condition dropdown based on radio selection
• Use form validation to ensure condition is selected when "Assign" is chosen
• Follow existing NgRx state management pattern
• Use translation keys for all text

Screenshots

Running Status with Pause Button

Pause Experiment Modal - Continue Option

Pause Experiment Modal - Assign Option with Condition Dropdown

Latest Design in Figma

https://www.figma.com/design/4a5EYBzojcVNwjlsBcRya2/UpGrade-UI-Latest-32--Experiment-Status-?node-id=38266-21375&t=Jv71JMRWtRvngRMk-1