feat(nimbus): Show days count in each status of the timeline (#11912)

Because

* We are currently not showing days count in the draft, preview, and
review sections of the timeline

This commit

* Updates the timeline to display days for each status in the timeline

Fixes #11747


![image](https://github.com/user-attachments/assets/ff5f161b-d05f-45ae-b0a5-f8fc1ed1025a)

![image](https://github.com/user-attachments/assets/f57f2eb3-4571-4e99-af64-0b3bef9eef42)

experimenter/experimenter/experiments/models.py

@@ -814,6 +814,26 @@ def actual_enrollment_end_date(self):
     def computed_end_date(self):
         return self.end_date or self.proposed_end_date
 
+    @property
+    def computed_draft_days(self):
+        if self.draft_date and self.preview_date is not None:
+            return (self.preview_date - self.draft_date).days
+        elif self.draft_date and self.review_date is not None:
+            return (self.review_date - self.draft_date).days
+        return None
+
+    @property
+    def computed_preview_days(self):
+        if self.preview_date and self.review_date is not None:
+            return (self.review_date - self.preview_date).days
+        return None
+
+    @property
+    def computed_review_days(self):
+        if self.review_date and self.enrollment_start_date is not None:
+            return (self.enrollment_start_date - self.review_date).days
+        return None
+
     @property
     def enrollment_duration(self):
         if self.computed_end_date and self.enrollment_start_date is not None:
@@ -846,19 +866,19 @@ def timeline(self):
                 "label": self.Status.DRAFT,
                 "date": self.draft_date,
                 "is_active": self.is_draft,
-                "days": None,
+                "days": self.computed_draft_days,
             },
             {
                 "label": self.Status.PREVIEW,
                 "date": self.preview_date,
                 "is_active": self.is_preview,
-                "days": None,
+                "days": self.computed_preview_days,
             },
             {
                 "label": self.PublishStatus.REVIEW,
                 "date": self.review_date,
                 "is_active": self.is_review,
-                "days": None,
+                "days": self.computed_review_days,
             },
             {
                 "label": NimbusConstants.ENROLLMENT,

experimenter/experimenter/experiments/tests/test_models.py

@@ -1688,52 +1688,107 @@ def test_review_date_returns_none_if_no_review_status(self):
         )
         self.assertIsNone(experiment.review_date)
 
+    def test_computed_draft_and_preview_days_returns_correct_difference(self):
+        experiment = NimbusExperimentFactory.create()
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            new_status=NimbusExperiment.Status.DRAFT,
+            changed_on=datetime.datetime(2023, 1, 1),
+        )
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            old_status=NimbusExperiment.Status.DRAFT,
+            new_status=NimbusExperiment.Status.PREVIEW,
+            changed_on=datetime.datetime(2023, 1, 5),
+        )
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            old_publish_status=NimbusExperiment.Status.PREVIEW,
+            new_publish_status=NimbusExperiment.PublishStatus.REVIEW,
+            changed_on=datetime.datetime(2023, 1, 12),
+        )
+
+        self.assertEqual(experiment.computed_draft_days, 4)
+        self.assertEqual(experiment.computed_preview_days, 7)
+
+    def test_computed_draft_days_returns_correct_difference_if_preview_is_none(self):
+        experiment = NimbusExperimentFactory.create()
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            new_status=NimbusExperiment.Status.DRAFT,
+            changed_on=datetime.datetime(2023, 1, 1),
+        )
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            old_publish_status=NimbusExperiment.Status.DRAFT,
+            new_publish_status=NimbusExperiment.PublishStatus.REVIEW,
+            changed_on=datetime.datetime(2023, 1, 8),
+        )
+        self.assertEqual(experiment.computed_draft_days, 7)
+
+    def test_computed_preview_and_review_days_returns_none_if_none(self):
+        experiment = NimbusExperimentFactory.create()
+        NimbusChangeLogFactory.create(
+            experiment=experiment,
+            new_status=NimbusExperiment.Status.DRAFT,
+            changed_on=datetime.datetime(2023, 1, 1),
+        )
+        self.assertIsNone(experiment.computed_preview_days)
+        self.assertIsNone(experiment.computed_review_days)
+
+    def test_computed_review_days_returns_correct_difference(self):
+        experiment = NimbusExperimentFactory.create_with_lifecycle(
+            lifecycle=NimbusExperimentFactory.Lifecycles.LAUNCH_APPROVE_APPROVE,
+            start_date=datetime.date(2021, 1, 5),
+        )
+        self.assertEqual(experiment.computed_review_days, 3)
+
     def test_timeline_dates_includes_correct_status_dates_and_flags(self):
         experiment = NimbusExperimentFactory.create_with_lifecycle(
             lifecycle=NimbusExperimentFactory.Lifecycles.ENDING_APPROVE_APPROVE,
             proposed_enrollment=2,
-            start_date=datetime.date(2023, 1, 4),
-            _enrollment_end_date=datetime.date(2023, 1, 6),
-            end_date=datetime.date(2023, 1, 8),
+            start_date=datetime.date(2021, 1, 4),
+            _enrollment_end_date=datetime.date(2021, 1, 6),
+            end_date=datetime.date(2021, 1, 8),
         )
         NimbusChangeLogFactory.create(
             experiment=experiment,
             new_status=NimbusExperiment.Status.DRAFT,
-            changed_on=datetime.datetime(2023, 1, 1),
+            changed_on=datetime.datetime(2021, 1, 1),
         )
 
         NimbusChangeLogFactory.create(
             experiment=experiment,
             old_status=NimbusExperiment.Status.DRAFT,
             new_status=NimbusExperiment.Status.PREVIEW,
-            changed_on=datetime.datetime(2023, 1, 2),
+            changed_on=datetime.datetime(2021, 1, 2),
         )
 
         NimbusChangeLogFactory.create(
             experiment=experiment,
             old_publish_status=NimbusExperiment.Status.PREVIEW,
             new_publish_status=NimbusExperiment.PublishStatus.REVIEW,
-            changed_on=datetime.datetime(2023, 1, 3),
+            changed_on=datetime.datetime(2021, 1, 2),
         )
         timeline = experiment.timeline()
         expected_timeline = [
             {
                 "label": "Draft",
                 "date": experiment.draft_date,
                 "is_active": False,
-                "days": None,
+                "days": 1,
             },
             {
                 "label": "Preview",
                 "date": experiment.preview_date,
                 "is_active": False,
-                "days": None,
+                "days": 0,
             },
             {
                 "label": "Review",
                 "date": experiment.review_date,
                 "is_active": False,
-                "days": None,
+                "days": 2,
             },
             {
                 "label": NimbusConstants.ENROLLMENT,

experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html

@@ -9,7 +9,7 @@
   <div class="container-fluid">
     <!-- Experiment Details Card -->
     <div class="row">
-      <div class="col-6">
+      <div class="col-5">
         <h4 class="mb-0">{{ experiment.name }}</h4>
         <span class="{{ experiment.qa_status_badge_class }}">
           QA Status: {{ experiment.qa_status|default:"Not Set"|title }}

experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/timeline.html

@@ -1,4 +1,4 @@
-<div class="col-6">
+<div class="col-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 %}">