feat(nimbus): add clear visual indication of future states while organizing experiment (#13486)

Because

- Users found it unclear about the current state while managing
experiments

This commit

- Adds visual indication for future states

Fixes #13135

Author: moibra05

experimenter/experimenter/experiments/models.py

@@ -1135,34 +1135,39 @@ def sidebar_links(self, current_path):
     def timeline(self):
         timeline_entries = [
             {
+                "step": NimbusUIConstants.EXPERIMENT_ORDERING["Draft"],
                 "label": self.Status.DRAFT,
                 "date": self.draft_date,
                 "is_active": self.is_draft,
                 "days": self.computed_draft_days,
                 "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Draft"],
             },
             {
+                "step": NimbusUIConstants.EXPERIMENT_ORDERING["Preview"],
                 "label": self.Status.PREVIEW,
                 "date": self.preview_date,
                 "is_active": self.is_preview,
                 "days": self.computed_preview_days,
                 "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Preview"],
             },
             {
+                "step": NimbusUIConstants.EXPERIMENT_ORDERING["Review"],
                 "label": self.PublishStatus.REVIEW,
                 "date": self.review_date,
                 "is_active": self.is_review_timeline,
                 "days": self.computed_review_days,
                 "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Review"],
             },
             {
+                "step": NimbusUIConstants.EXPERIMENT_ORDERING["Enrollment"],
                 "label": NimbusConstants.ENROLLMENT,
                 "date": self.start_date,
                 "is_active": self.is_enrolling,
                 "days": self.computed_enrollment_days,
                 "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Enrollment"],
             },
             {
+                "step": NimbusUIConstants.EXPERIMENT_ORDERING["Complete"],
                 "label": self.Status.COMPLETE,
                 "date": self.computed_end_date,
                 "is_active": self.is_complete,
@@ -1174,6 +1179,7 @@ def timeline(self):
             timeline_entries.insert(
                 4,
                 {
+                    "step": NimbusUIConstants.EXPERIMENT_ORDERING["Observation"],
                     "label": NimbusConstants.OBSERVATION,
                     "date": self._enrollment_end_date,
                     "is_active": self.is_observation,
@@ -1184,6 +1190,13 @@ def timeline(self):
 
         return timeline_entries
 
+    @property
+    def experiment_active_status(self):
+        timeline = self.timeline()
+        for item in timeline:
+            if item["is_active"]:
+                return item["step"]
+
     @property
     def should_end(self):
         if self.proposed_end_date:

experimenter/experimenter/nimbus_ui/constants.py

@@ -66,6 +66,14 @@ class NimbusUIConstants:
             "period ended."
         ),
     }
+    EXPERIMENT_ORDERING = {
+        "Draft": 1,
+        "Preview": 2,
+        "Review": 3,
+        "Enrollment": 4,
+        "Observation": 5,
+        "Complete": 6,
+    }
     HOME_PAGE_LINKS = {
         "welcome_learn_more_url": "https://experimenter.info/workflow/overview/"
     }

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/timeline.html

@@ -1,6 +1,6 @@
 <ul class="list-group list-group-horizontal justify-content-between mb-3">
   {% for status in experiment.timeline %}
-    <li class="list-group-item flex-fill text-center d-flex flex-column justify-content-center {% if status.is_active %}bg-primary text-white{% endif %}">
+    <li class="list-group-item flex-fill text-center d-flex flex-column justify-content-center {% if status.is_active %}bg-primary text-white{% endif %} {% if status.step > experiment.experiment_active_status %}bg-secondary text-muted{% endif %}">
       <strong>{{ status.label }}</strong>
       <small>{{ status.date|default:'---' }}</small>
       {% if status.days is not None %}