feat(nimbus): Add tooltips to new experiment timeline

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

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"],
                 },
             )
 

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(

experimenter/experimenter/nimbus_ui_new/constants.py

@@ -28,3 +28,30 @@ class NimbusUIConstants:
     proportion has accounted for this:"""
 
     AUDIENCE_OVERLAP_WARNING = "https://experimenter.info/faq/warnings/#audience-overlap"
+
+    TIMELINE_TOOLTIPS = {
+        "Draft": (
+            "The number of days between when the experiment was first drafted "
+            "and when it moved to either the preview stage or the review stage."
+        ),
+        "Preview": (
+            "The number of days the experiment remained in the preview phase "
+            "before it was reviewed."
+        ),
+        "Review": (
+            "The number of days from when the experiment was reviewed to when "
+            "participant enrollment began."
+        ),
+        "Enrollment": (
+            "The number of days from when the experiment began enrolling participants "
+            "to when the enrollment period ended."
+        ),
+        "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."
+        ),
+    }

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,15 +22,32 @@ <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-toggle="tooltip"
+                   data-placement="top"
+                   title="{{ status.tooltip }}"></i>
+              </div>
+            {% endif %}
           </li>
         {% endfor %}
       </ul>
     </div>
   </div>
 {% endblock %}
+
+{% block extrascripts %}
+  <script>
+    $(document).ready(function () {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
+  </script>
+{% endblock %}