Implement Status-Based UI Restrictions

[zackcl]

User Story

As a system, I want to enable/disable specific UI elements based on experiment status so that users can only perform valid actions for each status.

Description

Implement status-based restrictions across the experiment details UI including menu items, edit modal fields, and section card actions.

Note: This story can be developed in parallel with the previous stories (#2804, #2805, #2806, #2807).

Implementation Details

1. Update Menu Items Based on Status

Location: experiment-overview-details-section-card.component.ts (menuButtonItems$ observable)

Hide menu items that are not available for the current status.

Status-specific menu items:

• Inactive/Running/Paused: Edit Experiment, Duplicate Experiment, Export Experiment Design, Email Experiment Data, Delete Experiment
• Completed: Same as above + Archive Experiment (only shown in Completed status)

Implementation: Use combineLatest([experiment$, permissions$]) to filter menu items.

2. Edit Experiment Modal Field Restrictions

Location: modals/upsert-experiment-modal/upsert-experiment-modal.component.ts

Disable (gray out) fields based on status:

• Inactive: All fields enabled
• Running/Paused: Only enable Name, Description, Tags, Mooclet Policy Parameters
• Completed: Only enable Name, Description, Tags

3. Section Card Action Button Restrictions

Location: Various section card components in experiment-details-page-content/

Disable action buttons with tooltips explaining why.

Status-specific restrictions:

• Inactive: All section cards enabled
• Running/Paused: Decision Points & Conditions disabled; others enabled
• Completed: All section cards disabled

Visual treatment: Show disabled buttons with tooltip (e.g., "Cannot edit decision points while experiment is running")

Acceptance Criteria

Menu Items:

• Archive menu item only appears when status is Completed
• Unavailable menu items are hidden
• Menu respects both permissions and status

Edit Modal:

• Field restrictions apply correctly per status
• Disabled fields are grayed out and read-only

Section Cards:

• Action buttons disabled when restrictions apply
• Disabled buttons show tooltips explaining why
• Running/Paused: Decision Points & Conditions buttons disabled
• Completed: All section card buttons disabled
• UI updates when status changes

Technical Notes

• Use combineLatest([experiment$, permissions$]) for reactive updates
• Hide menu items, but disable action buttons (so tooltips can be shown)
• Consider helper functions: getVisibleMenuItems(), canEditSectionCard()
• Use translation keys for tooltip messages
• No backend changes needed

Affected Components

• experiment-overview-details-section-card.component.ts/html
• upsert-experiment-modal.component.ts
• Section card components: decision-points, conditions, payloads, inclusions, exclusions, metrics

Screenshots

Inactive Status - All Enabled

Running Status - Decision Points/Conditions Disabled

Paused Status - Decision Points/Conditions Disabled

Completed Status - All Disabled

Latest Design in Figma

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