Implement Stop Button and Modal

[zackcl]

User Story

As an experiment manager, I want to stop a running or paused experiment so that I can permanently end enrollment and mark it as complete.

Description

Implement the Stop button and Stop Experiment modal to transition an experiment from Running or Paused status to Completed status. This is an irreversible action that permanently ends the experiment, so the modal includes a strong warning to the user.

Status Transition: Running/Paused → Completed (ENROLLING/ENROLLMENT_COMPLETE → CANCELLED)

Implementation Details

1. Add Stop Button

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

• Display when experiment.state === EXPERIMENT_STATE.ENROLLING || experiment.state === EXPERIMENT_STATE.ENROLLMENT_COMPLETE
• Button text: "Stop"
• Button color: Warn (red)

2. Create Stop Experiment Modal

New component: modals/stop-experiment-modal/

Follow the existing delete-experiment-modal pattern with:

• Title: "Stop Experiment"
• Message: "Are you sure you want to stop '[Experiment Name]'?"
• Warning (red text): "After stopping, you cannot restart the experiment. No participants will receive experiment conditions. You can still export the experiment data and design."
• Primary button: "Stop" (red/warn color)
• Cancel button: "Cancel"

3. Service Updates

• DialogService: Add openStopExperimentModal() method
• ExperimentService: Add stopExperiment(experimentId) method that dispatches the appropriate action
• API: Reuse existing POST /experiments/state endpoint with state: CANCELLED

Acceptance Criteria

• Stop button appears when experiment status is Running OR Paused
• Stop button has red/warning styling
• Clicking Stop button opens the Stop Experiment modal
• Modal displays experiment name dynamically
• Warning text is styled in red to emphasize irreversibility
• Modal clearly communicates that stopping is permanent (cannot restart)
• Clicking "Stop" transitions experiment to Completed status
• Success notification appears: "Experiment stopped successfully"
• UI updates without page refresh (Stop button disappears, no status change buttons appear)
• After stopping, experiment is in terminal state (Completed status)
• Clicking "Cancel" closes modal without changes
• Error notification appears if transition fails

Technical Notes

• Use color="warn" for red button styling
• Style warning text prominently in modal (red color, bold, or highlighted)
• CANCELLED state is terminal (no further state changes allowed)
• Follow existing NgRx state management pattern
• Use translation keys for all text
• No backend changes needed - UI-only implementation

Screenshots

Running Status with Stop Button

Paused Status with Stop Button

Stop Experiment Modal

Completed Status (After Stop)

Latest Design in Figma

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