feat(nimbus): Add tooltips to new experiment timeline (#11991)

Because - The new UI is missing the tooltips on the timeline This commit - Adds tooltips to the new experiment timeline explaining what each count of days on the timeline means Fixes #11748 Cursor does not show up in the screenshots. ![image](https://github.com/user-attachments/assets/a917adc0-5023-4cc5-9f2a-45db870a6d82) ![image](https://github.com/user-attachments/assets/20087025-f8a6-4726-b282-d78834fc76a6) ![image](https://github.com/user-attachments/assets/31fb1ba3-12d5-4a17-a4ab-347ff0a8b8dd) ![image](https://github.com/user-attachments/assets/038c34e7-96b5-4abe-adbd-e9033d1fd3f2) ![image](https://github.com/user-attachments/assets/5b48dbef-c0b9-44c2-84ea-044090aa10ee) ![image](https://github.com/user-attachments/assets/ca8e185f-e7cb-4425-bfc1-6b949391fb67)
mozilla · Jan 8, 2025 · d23284d · d23284d
1 parent 7b39a9d
commit d23284d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/experimenter/experimenter/experiments/models.py b/experimenter/experimenter/experiments/models.py
@@ -876,30 +876,35 @@ def timeline(self):
                 "date": self.draft_date,
                 "is_active": self.is_draft,
                 "days": self.computed_draft_days,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Draft"],
             },
             {
                 "label": self.Status.PREVIEW,
                 "date": self.preview_date,
                 "is_active": self.is_preview,
                 "days": self.computed_preview_days,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Preview"],
             },
             {
                 "label": self.PublishStatus.REVIEW,
                 "date": self.review_date,
                 "is_active": self.is_review,
                 "days": self.computed_review_days,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Review"],
             },
             {
                 "label": NimbusConstants.ENROLLMENT,
                 "date": self.start_date,
                 "is_active": self.is_enrollment,
                 "days": self.computed_enrollment_days,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Enrollment"],
             },
             {
                 "label": self.Status.COMPLETE,
                 "date": self.computed_end_date,
                 "is_active": self.is_complete,
                 "days": self.computed_duration_days,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Complete"],
             },
         ]
         if not self.is_rollout:
@@ -910,6 +915,7 @@ def timeline(self):
                     "date": self._enrollment_end_date,
                     "is_active": self.is_observation,
                     "days": self.computed_observations_days,
+                    "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Observation"],
                 },
             )
 

diff --git a/experimenter/experimenter/experiments/tests/test_models.py b/experimenter/experimenter/experiments/tests/test_models.py
@@ -1777,36 +1777,42 @@ def test_timeline_dates_includes_correct_status_dates_and_flags(self):
                 "date": experiment.draft_date,
                 "is_active": False,
                 "days": 1,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Draft"],
             },
             {
                 "label": "Preview",
                 "date": experiment.preview_date,
                 "is_active": False,
                 "days": 0,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Preview"],
             },
             {
                 "label": "Review",
                 "date": experiment.review_date,
                 "is_active": False,
                 "days": 2,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Review"],
             },
             {
                 "label": NimbusConstants.ENROLLMENT,
                 "date": experiment.start_date,
                 "is_active": False,
                 "days": 2,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Enrollment"],
             },
             {
                 "label": NimbusConstants.OBSERVATION,
                 "date": experiment._enrollment_end_date,
                 "is_active": False,
                 "days": 2,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Observation"],
             },
             {
                 "label": "Complete",
                 "date": experiment.computed_end_date,
                 "is_active": True,
                 "days": 4,
+                "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Complete"],
             },
         ]
 
@@ -1815,6 +1821,7 @@ def test_timeline_dates_includes_correct_status_dates_and_flags(self):
             self.assertEqual(timeline[i]["date"], expected["date"])
             self.assertEqual(timeline[i]["is_active"], expected["is_active"])
             self.assertEqual(timeline[i].get("days"), expected["days"])
+            self.assertEqual(timeline[i].get("tooltip"), expected["tooltip"])
 
     def test_timeline_dates_complete_is_active_when_status_is_complete(self):
         experiment = NimbusExperimentFactory.create_with_lifecycle(

diff --git a/experimenter/experimenter/nimbus_ui_new/constants.py b/experimenter/experimenter/nimbus_ui_new/constants.py
@@ -28,3 +28,24 @@ class NimbusUIConstants:
     proportion has accounted for this:"""
 
     AUDIENCE_OVERLAP_WARNING = "https://experimenter.info/faq/warnings/#audience-overlap"
+
+    TIMELINE_TOOLTIPS = {
+        "Draft": (
+            "The duration from the initial draft of the experiment to its entry "
+            "into either the preview or review stage."
+        ),
+        "Preview": ("The number of days the experiment has spent in the preview stage."),
+        "Review": ("The number of days the experiment has spent in the review stage."),
+        "Enrollment": (
+            "The duration from the start to the end of the participant enrollment "
+            "period."
+        ),
+        "Complete": (
+            "The total number of days from the start of participant enrollment "
+            "to the end of the experiment."
+        ),
+        "Observation": (
+            "The number of days the experiment was observed after the enrollment "
+            "period ended."
+        ),
+    }
diff --git a/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html b/experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html
@@ -7,7 +7,7 @@
 
 {% block main_content_header %}
   <div class="row mb-2">
-    <div class="col-md-12 col-xl-6">
+    <div class="col-md-12 col-xl-5">
       <h4 class="mb-0">{{ experiment.name }}</h4>
       <span class="{{ experiment.qa_status_badge_class }}">
         QA Status: {{ experiment.qa_status|default:"Not Set"|title }}
@@ -22,12 +22,21 @@ <h4 class="mb-0">{{ experiment.name }}</h4>
         </p>
       {% endif %}
     </div>
-    <div class="col-md-12 col-xl-6">
+    <div class="col-md-12 col-xl-7">
       <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 %}">
             <strong>{{ status.label }}</strong>
             <small>{{ status.date|default:'---' }}</small>
+            {% if status.days is not None %}
+              <div class="d-flex justify-content-center align-items-center">
+                <small class="mr-2">{{ status.days }} day{{ status.days|pluralize }}</small>
+                <i class="fa-regular fa-circle-question fa-sm ps-1"
+                   data-bs-toggle="tooltip"
+                   data-bs-placement="bottom"
+                   title="{{ status.tooltip }}"></i>
+              </div>
+            {% endif %}
           </li>
         {% endfor %}
       </ul>