feat(nimbus): Approval and rejection flow (#12090)

Because

- We want to add approval and rejection flow on the new summary page

This commit

- Add option to approve and Launch
- Add the option to reject the experiment with the message
- Shows the timeout message 

Fixes #12072 
Note: This currently does not show the rejection reason-which I will add
in the separate PR

Approval flow



https://github.com/user-attachments/assets/84731825-e241-43fd-b9d0-f9dc2922c85c


Rejection flow



https://github.com/user-attachments/assets/9d201e88-cfc7-49f3-b6ba-3fd110488237


Timeout message
<img width="1687" alt="Screenshot 2025-01-22 at 10 27 54 AM"
src="https://github.com/user-attachments/assets/b2d07515-15d2-40d5-882e-edbf67032cda"
/>

---------

Co-authored-by: Jared Lockhart <[email protected]>

Author: yashikakhurana

experimenter/experimenter/experiments/models.py

@@ -673,6 +673,17 @@ def is_review(self):
             and self.publish_status == self.PublishStatus.REVIEW
         )
 
+    @property
+    def is_review_timeline(self):
+        return self.status in {
+            self.Status.DRAFT,
+            self.Status.PREVIEW,
+        } and self.publish_status in {
+            self.PublishStatus.REVIEW,
+            self.PublishStatus.APPROVED,
+            self.PublishStatus.WAITING,
+        }
+
     @property
     def is_preview(self):
         return self.status == self.Status.PREVIEW
@@ -709,6 +720,16 @@ def can_preview_to_draft(self):
     def can_preview_to_review(self):
         return self.is_preview
 
+    def should_show_remote_settings_pending(self, reviewer):
+        return self.publish_status in (
+            self.PublishStatus.APPROVED,
+            self.PublishStatus.WAITING,
+        ) and self.can_review(reviewer)
+
+    @property
+    def should_show_timeout_message(self):
+        return self.changes.latest_timeout()
+
     @property
     def draft_date(self):
         if change := self.changes.all().order_by("changed_on").first():
@@ -925,7 +946,7 @@ def timeline(self):
             {
                 "label": self.PublishStatus.REVIEW,
                 "date": self.review_date,
-                "is_active": self.is_review,
+                "is_active": self.is_review_timeline,
                 "days": self.computed_review_days,
                 "tooltip": NimbusUIConstants.TIMELINE_TOOLTIPS["Review"],
             },

experimenter/experimenter/nimbus_ui_new/forms.py

@@ -12,6 +12,10 @@
     NimbusExperimentBranchThroughExcluded,
     NimbusExperimentBranchThroughRequired,
 )
+from experimenter.kinto.tasks import (
+    nimbus_check_kinto_push_queue_by_collection,
+    nimbus_synchronize_preview_experiments_in_kinto,
+)
 from experimenter.nimbus_ui_new.constants import NimbusUIConstants
 from experimenter.outcomes import Outcomes
 from experimenter.projects.models import Project
@@ -546,6 +550,12 @@ class DraftToPreviewForm(UpdateStatusForm):
     def get_changelog_message(self):
         return f"{self.request.user} launched experiment to Preview"
 
+    def save(self, commit=True):
+        experiment = super().save(commit=commit)
+        experiment.allocate_bucket_range()
+        nimbus_synchronize_preview_experiments_in_kinto.apply_async(countdown=5)
+        return experiment
+
 
 class DraftToReviewForm(UpdateStatusForm):
     status = NimbusExperiment.Status.DRAFT
@@ -573,6 +583,11 @@ class PreviewToDraftForm(UpdateStatusForm):
     def get_changelog_message(self):
         return f"{self.request.user} moved the experiment back to Draft"
 
+    def save(self, commit=True):
+        experiment = super().save(commit=commit)
+        nimbus_synchronize_preview_experiments_in_kinto.apply_async(countdown=5)
+        return experiment
+
 
 class ReviewToDraftForm(UpdateStatusForm):
     status = NimbusExperiment.Status.DRAFT
@@ -581,3 +596,33 @@ class ReviewToDraftForm(UpdateStatusForm):
 
     def get_changelog_message(self):
         return f"{self.request.user} cancelled the review"
+
+
+class ReviewToApproveForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = NimbusExperiment.Status.LIVE
+    publish_status = NimbusExperiment.PublishStatus.APPROVED
+
+    def get_changelog_message(self):
+        return f"{self.request.user} approved the review."
+
+    def save(self, commit=True):
+        experiment = super().save(commit=commit)
+        experiment.allocate_bucket_range()
+        nimbus_check_kinto_push_queue_by_collection.apply_async(
+            countdown=5, args=[experiment.kinto_collection]
+        )
+        return experiment
+
+
+class ReviewToRejectForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = None
+    publish_status = NimbusExperiment.PublishStatus.IDLE
+    changelog_message = forms.CharField(
+        required=True, label="Reason for Rejection", max_length=1000
+    )
+
+    def get_changelog_message(self):
+        changelog_message = self.cleaned_data.get("changelog_message", "")
+        return f"{self.request.user} rejected the review with reason: {changelog_message}"

experimenter/experimenter/nimbus_ui_new/static/js/review_controls.js

@@ -12,3 +12,32 @@ window.toggleSubmitButton = function () {
   const submitButton = document.getElementById("request-launch-button");
   submitButton.disabled = !(checkbox1.checked && checkbox2.checked);
 };
+
+function initializeRejectApproveListeners() {
+  const rejectButton = document.getElementById("reject-button");
+  const reviewControls = document.getElementById("review-controls");
+  const rejectFormContainer = document.getElementById("reject-form-container");
+  const cancelReject = document.getElementById("cancel-reject");
+
+  if (rejectButton) {
+    rejectButton.addEventListener("click", () => {
+      reviewControls.classList.add("d-none");
+      rejectFormContainer.classList.remove("d-none");
+    });
+  }
+
+  if (cancelReject) {
+    cancelReject.addEventListener("click", () => {
+      rejectFormContainer.classList.add("d-none");
+      reviewControls.classList.remove("d-none");
+    });
+  }
+}
+
+// Initialize listeners on initial load
+document.addEventListener("DOMContentLoaded", initializeRejectApproveListeners);
+
+// Reinitialize listeners after HTMX content swaps
+document.body.addEventListener("htmx:afterSwap", () => {
+  initializeRejectApproveListeners();
+});

experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/launch_controls.html

@@ -1,3 +1,5 @@
+{% load nimbus_extras %}
+
 <div id="launch-controls">
   <form>
     {% csrf_token %}
@@ -116,6 +118,45 @@
       </div>
       <!-- Review Mode Controls -->
     {% elif experiment.is_review %}
+      {% if experiment.should_show_timeout_message %}
+        <div class="alert alert-danger" role="alert">
+          <p>
+            <span role="img" aria-label="red X emoji">❌</span>
+            Remote Settings request has timed out, please go through the approval flow to launch this experiment again.
+          </p>
+        </div>
+      {% endif %}
+      <div id="review-controls" class="alert alert-primary">
+        <p>
+          <strong>{{ experiment.changes.latest_review_request.changed_by.email }}</strong> requested to Launch this experiment.
+        </p>
+        <button type="button"
+                class="btn btn-success"
+                hx-post="{% url 'nimbus-new-review-to-approve' slug=experiment.slug %}"
+                hx-select="#content"
+                hx-target="#content"
+                hx-swap="outerHTML">Approve and Launch Experiment</button>
+        <button type="button" class="btn btn-danger" id="reject-button">Reject</button>
+      </div>
+      <!-- Rejection Form -->
+      <div id="reject-form-container" class="d-none alert alert-warning">
+        <label for="changelog_message">
+          <strong>You are rejecting the request to launch this experiment.</strong> Please add some comments:
+        </label>
+        <textarea id="changelog_message"
+                  name="changelog_message"
+                  class="form-control"
+                  rows="4"
+                  required></textarea>
+        <button type="submit"
+                class="btn btn-danger mt-2"
+                hx-post="{% url 'nimbus-new-review-to-reject' slug=experiment.slug %}"
+                hx-select="#content"
+                hx-target="#content"
+                hx-swap="outerHTML"
+                hx-include="#changelog_message">Submit</button>
+        <button type="button" class="btn btn-secondary mt-2" id="cancel-reject">Cancel</button>
+      </div>
       <div class="alert alert-warning">
         <p>The experiment is currently under review. If you wish to cancel the review, click the button below:</p>
         <button type="button"
@@ -125,6 +166,16 @@
                 hx-target="#content"
                 hx-swap="outerHTML">Cancel Review</button>
       </div>
+    {% elif experiment|should_show_remote_settings_pending:user %}
+      <div class="alert alert-primary">
+        <p>
+          <strong>Action required:</strong> Please review this change in Remote Settings to launch this experiment.
+        </p>
+        <a href="{{ experiment.review_url }}"
+           class="btn btn-primary"
+           target="_blank"
+           rel="noopener noreferrer">Open Remote Settings</a>
+      </div>
     {% endif %}
   </form>
 </div>

experimenter/experimenter/nimbus_ui_new/templatetags/nimbus_extras.py

@@ -81,3 +81,8 @@ def format_json(value):
         f'<pre class="text-monospace" style="white-space: pre-wrap; '
         f'word-wrap: break-word;">{parsed_json}</pre>'
     )
+
+
+@register.filter
+def should_show_remote_settings_pending(experiment, reviewer):
+    return experiment.should_show_remote_settings_pending(reviewer)

experimenter/experimenter/nimbus_ui_new/tests/test_forms.py

@@ -1,3 +1,5 @@
+from unittest.mock import patch
+
 from django.test import RequestFactory, TestCase
 from django.urls import reverse
 
@@ -15,6 +17,10 @@
     NimbusDocumentationLinkFactory,
     NimbusExperimentFactory,
 )
+from experimenter.kinto.tasks import (
+    nimbus_check_kinto_push_queue_by_collection,
+    nimbus_synchronize_preview_experiments_in_kinto,
+)
 from experimenter.nimbus_ui_new.constants import NimbusUIConstants
 from experimenter.nimbus_ui_new.forms import (
     AudienceForm,
@@ -28,7 +34,9 @@
     PreviewToDraftForm,
     PreviewToReviewForm,
     QAStatusForm,
+    ReviewToApproveForm,
     ReviewToDraftForm,
+    ReviewToRejectForm,
     SignoffForm,
     SubscribeForm,
     TakeawaysForm,
@@ -337,6 +345,18 @@ def setUp(self):
         super().setUp()
         self.experiment = NimbusExperimentFactory.create()
 
+        self.mock_preview_task = patch.object(
+            nimbus_synchronize_preview_experiments_in_kinto, "apply_async"
+        ).start()
+        self.mock_push_task = patch.object(
+            nimbus_check_kinto_push_queue_by_collection, "apply_async"
+        ).start()
+        self.mock_allocate_bucket_range = patch.object(
+            NimbusExperiment, "allocate_bucket_range"
+        ).start()
+
+        self.addCleanup(patch.stopall)
+
     def test_draft_to_preview_form(self):
         self.experiment.status = NimbusExperiment.Status.DRAFT
         self.experiment.status_next = None
@@ -353,6 +373,8 @@ def test_draft_to_preview_form(self):
         changelog = experiment.changes.latest("changed_on")
         self.assertEqual(changelog.changed_by, self.user)
         self.assertIn("launched experiment to Preview", changelog.message)
+        self.mock_preview_task.assert_called_once_with(countdown=5)
+        self.mock_allocate_bucket_range.assert_called_once()
 
     def test_draft_to_review_form(self):
         self.experiment.status = NimbusExperiment.Status.DRAFT
@@ -376,6 +398,7 @@ def test_preview_to_review_form(self):
         self.experiment.status_next = NimbusExperiment.Status.PREVIEW
         self.experiment.publish_status = NimbusExperiment.PublishStatus.IDLE
         self.experiment.save()
+
         form = PreviewToReviewForm(
             data={}, instance=self.experiment, request=self.request
         )
@@ -395,6 +418,7 @@ def test_preview_to_draft_form(self):
         self.experiment.status_next = NimbusExperiment.Status.PREVIEW
         self.experiment.publish_status = NimbusExperiment.PublishStatus.IDLE
         self.experiment.save()
+
         form = PreviewToDraftForm(data={}, instance=self.experiment, request=self.request)
         self.assertTrue(form.is_valid(), form.errors)
 
@@ -406,6 +430,7 @@ def test_preview_to_draft_form(self):
         changelog = experiment.changes.latest("changed_on")
         self.assertEqual(changelog.changed_by, self.user)
         self.assertIn("moved the experiment back to Draft", changelog.message)
+        self.mock_preview_task.assert_called_once_with(countdown=5)
 
     def test_review_to_draft_form(self):
         self.experiment.status = NimbusExperiment.Status.DRAFT
@@ -425,6 +450,57 @@ def test_review_to_draft_form(self):
         self.assertEqual(changelog.changed_by, self.user)
         self.assertIn("cancelled the review", changelog.message)
 
+    def test_review_to_approve_form(self):
+        self.experiment.status = NimbusExperiment.Status.DRAFT
+        self.experiment.status_next = NimbusExperiment.Status.LIVE
+        self.experiment.publish_status = NimbusExperiment.PublishStatus.REVIEW
+        self.experiment.save()
+
+        form = ReviewToApproveForm(
+            data={}, instance=self.experiment, request=self.request
+        )
+        self.assertTrue(form.is_valid(), form.errors)
+
+        experiment = form.save()
+        self.assertEqual(experiment.status, NimbusExperiment.Status.DRAFT)
+        self.assertEqual(experiment.status_next, NimbusExperiment.Status.LIVE)
+        self.assertEqual(
+            experiment.publish_status, NimbusExperiment.PublishStatus.APPROVED
+        )
+
+        changelog = experiment.changes.latest("changed_on")
+        self.assertEqual(changelog.changed_by, self.user)
+        self.assertIn(f"{self.user} approved the review.", changelog.message)
+        self.mock_push_task.assert_called_once_with(
+            countdown=5, args=[experiment.kinto_collection]
+        )
+        self.mock_allocate_bucket_range.assert_called_once()
+
+    def test_review_to_reject_form_with_reason(self):
+        self.experiment.status = NimbusExperiment.Status.DRAFT
+        self.experiment.status_next = NimbusExperiment.Status.LIVE
+        self.experiment.publish_status = NimbusExperiment.PublishStatus.REVIEW
+        self.experiment.save()
+
+        form = ReviewToRejectForm(
+            data={"changelog_message": "Needs more work."},
+            instance=self.experiment,
+            request=self.request,
+        )
+        self.assertTrue(form.is_valid(), form.errors)
+
+        experiment = form.save()
+        self.assertEqual(experiment.status, NimbusExperiment.Status.DRAFT)
+        self.assertEqual(experiment.status_next, None)
+        self.assertEqual(experiment.publish_status, NimbusExperiment.PublishStatus.IDLE)
+
+        changelog = experiment.changes.latest("changed_on")
+        self.assertEqual(changelog.changed_by, self.user)
+        self.assertIn(
+            f"{self.user} rejected the review with reason: Needs more work.",
+            changelog.message,
+        )
+
 
 class TestOverviewForm(RequestFormTestCase):
     def test_valid_form_saves(self):