feat(nimbus): Draft/Preview/Review workflow

experimenter/experimenter/experiments/constants.py

@@ -829,6 +829,13 @@ class FirefoxLabsGroups(models.TextChoices):
     ENROLLMENT = "Enrollment"
 
 
+EXTERNAL_URLS = {
+    "SIGNOFF_QA": "https://experimenter.info/qa-sign-off",
+    "TRAINING_AND_PLANNING_DOC": "https://experimenter.info/for-product",
+    "PREVIEW_LAUNCH_DOC": "https://mana.mozilla.org/wiki/display/FJT/Nimbus",
+}
+
+
 RISK_QUESTIONS = {
     "BRAND": (
         "If the public, users or press, were to discover this experiment and "

experimenter/experimenter/experiments/models.py

@@ -658,10 +658,10 @@ def is_draft(self):
 
     @property
     def is_review(self):
-        return self.status == self.Status.DRAFT and self.publish_status in [
-            self.PublishStatus.REVIEW,
-            self.PublishStatus.WAITING,
-        ]
+        return (
+            self.status == self.Status.DRAFT
+            and self.publish_status == self.PublishStatus.REVIEW
+        )
 
     @property
     def is_preview(self):
@@ -683,6 +683,22 @@ def is_observation(self):
     def is_started(self):
         return self.status in (self.Status.LIVE, self.Status.COMPLETE)
 
+    @property
+    def can_draft_to_preview(self):
+        return self.is_draft and not self.is_review
+
+    @property
+    def can_draft_to_review(self):
+        return self.can_draft_to_preview
+
+    @property
+    def can_preview_to_draft(self):
+        return self.is_preview
+
+    @property
+    def can_preview_to_review(self):
+        return self.is_preview
+
     @property
     def draft_date(self):
         if change := self.changes.all().order_by("changed_on").first():

experimenter/experimenter/nimbus_ui_new/forms.py

@@ -518,3 +518,66 @@ def save(self, commit=True):
 
     def get_changelog_message(self):
         return f"{self.request.user} removed subscriber"
+
+
+class UpdateStatusForm(NimbusChangeLogFormMixin, forms.ModelForm):
+    status = None
+    status_next = None
+    publish_status = None
+
+    class Meta:
+        model = NimbusExperiment
+        fields = []
+
+    def save(self, commit=True):
+        experiment = super().save(commit=commit)
+        experiment.status = self.status
+        experiment.status_next = self.status_next
+        experiment.publish_status = self.publish_status
+        experiment.save()
+        return experiment
+
+
+class DraftToPreviewForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.PREVIEW
+    status_next = NimbusExperiment.Status.PREVIEW
+    publish_status = NimbusExperiment.PublishStatus.IDLE
+
+    def get_changelog_message(self):
+        return f"{self.request.user} launched experiment to Preview"
+
+
+class DraftToReviewForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = NimbusExperiment.Status.LIVE
+    publish_status = NimbusExperiment.PublishStatus.REVIEW
+
+    def get_changelog_message(self):
+        return f"{self.request.user} requested launch without Preview"
+
+
+class PreviewToReviewForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = NimbusExperiment.Status.LIVE
+    publish_status = NimbusExperiment.PublishStatus.REVIEW
+
+    def get_changelog_message(self):
+        return f"{self.request.user} requested launch from Preview"
+
+
+class PreviewToDraftForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = NimbusExperiment.Status.DRAFT
+    publish_status = NimbusExperiment.PublishStatus.IDLE
+
+    def get_changelog_message(self):
+        return f"{self.request.user} moved the experiment back to Draft"
+
+
+class ReviewToDraftForm(UpdateStatusForm):
+    status = NimbusExperiment.Status.DRAFT
+    status_next = NimbusExperiment.Status.DRAFT
+    publish_status = NimbusExperiment.PublishStatus.IDLE
+
+    def get_changelog_message(self):
+        return f"{self.request.user} cancelled the review"

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

@@ -0,0 +1,14 @@
+window.showRecommendation = function () {
+  const defaultControls = document.getElementById("default-controls");
+  const recommendationMessage = document.getElementById(
+    "recommendation-message",
+  );
+  defaultControls.classList.add("d-none");
+  recommendationMessage.classList.remove("d-none");
+};
+window.toggleSubmitButton = function () {
+  const checkbox1 = document.getElementById("checkbox-1");
+  const checkbox2 = document.getElementById("checkbox-2");
+  const submitButton = document.getElementById("request-launch-button");
+  submitButton.disabled = !(checkbox1.checked && checkbox2.checked);
+};

experimenter/experimenter/nimbus_ui_new/static/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
   entry: {
     app: "./js/index.js",
     experiment_list: "./js/experiment_list.js",
+    review_controls: "./js/review_controls.js",
     edit_audience: "./js/edit_audience.js",
   },
   output: {

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

@@ -22,6 +22,9 @@
       </div>
     {% endfor %}
   {% endif %}
+  <!-- Launch Controls Card-->
+  {% include "nimbus_experiments/launch_controls.html" %}
+
   <!-- Takeaways Card -->
   {% include "nimbus_experiments/takeaways_card.html" %}
 
@@ -363,4 +366,5 @@ <h6>
 {% block extrascripts %}
   {{ block.super }}
   <script src="{% static 'nimbus_ui_new/setup_selectpicker.bundle.js' %}"></script>
+  <script src="{% static 'nimbus_ui_new/review_controls.bundle.js' %}"></script>
 {% endblock %}

experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/experiment_base.html

@@ -7,7 +7,8 @@
 
 {% block main_content_header %}
   <div class="row mb-2">
-    <div class="col-md-12 col-xl-5">
+    <!-- Experiment Details -->
+    <div class="col-md-12 col-xl-6">
       <h4 class="mb-0">{{ experiment.name }}</h4>
       <span class="{{ experiment.qa_status_badge_class }}">
         QA Status: {{ experiment.qa_status|default:"Not Set"|title }}
@@ -22,24 +23,10 @@ <h4 class="mb-0">{{ experiment.name }}</h4>
         </p>
       {% endif %}
     </div>
-    <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>
+    <!-- Experiment Timeline -->
+    <div class="col-md-12 col-xl-6" id="experiment-timeline">
+      {% include "nimbus_experiments/timeline.html" %}
+
     </div>
   </div>
 {% endblock %}

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

@@ -0,0 +1,130 @@
+<div id="launch-controls">
+  <form>
+    {% csrf_token %}
+    <!-- Draft Mode Controls -->
+    {% if experiment.is_draft %}
+      <div id="default-controls" class="alert alert-secondary">
+        <p>
+          Do you want to test this experiment before launching to production?
+          <a href="{{ EXTERNAL_URLS.PREVIEW_LAUNCH_DOC }}"
+             target="_blank"
+             class="mr-1">Learn more</a>
+        </p>
+        {% if experiment.can_draft_to_preview %}
+          <button type="button"
+                  class="btn btn-primary"
+                  hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
+                  hx-select="#content"
+                  hx-target="#content"
+                  hx-swap="outerHTML">Preview for Testing</button>
+        {% endif %}
+        {% if experiment.can_draft_to_review %}
+          <button type="button"
+                  class="btn btn-secondary"
+                  onclick="showRecommendation()">Request Launch without Preview</button>
+        {% endif %}
+      </div>
+      <!-- Recommendation Message -->
+      <div id="recommendation-message" class="d-none">
+        <div class="alert alert-warning">
+          <p>
+            <strong>We recommend previewing before launch</strong>
+            <button type="button"
+                    class="btn btn-primary"
+                    hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
+                    hx-select="#content"
+                    hx-target="#content"
+                    hx-swap="outerHTML">Preview Now</button>
+          </p>
+          <div class="form-check">
+            <input type="checkbox"
+                   class="form-check-input"
+                   id="checkbox-1"
+                   onchange="toggleSubmitButton()">
+            <label class="form-check-label" for="checkbox-1">I understand the risks associated with launching an experiment</label>
+          </div>
+          <div class="form-check">
+            <input type="checkbox"
+                   class="form-check-input"
+                   id="checkbox-2"
+                   onchange="toggleSubmitButton()">
+            <label class="form-check-label" for="checkbox-2">
+              I have gone through the <a href="{{ EXTERNAL_URLS.TRAINING_AND_PLANNING_DOC }}" target="_blank">experiment onboarding program</a>
+            </label>
+          </div>
+          <button type="button"
+                  class="btn btn-primary"
+                  id="request-launch-button"
+                  hx-post="{% url 'nimbus-new-draft-to-review' slug=experiment.slug %}"
+                  hx-select="#content"
+                  hx-target="#content"
+                  hx-swap="outerHTML"
+                  disabled>Request Launch</button>
+          <button type="button"
+                  class="btn btn-secondary"
+                  hx-post="{% url 'nimbus-new-review-to-draft' slug=experiment.slug %}"
+                  hx-select="#content"
+                  hx-target="#content"
+                  hx-swap="outerHTML">Cancel</button>
+        </div>
+      </div>
+      <!-- Preview Mode Controls -->
+    {% elif experiment.is_preview %}
+      <div class="alert alert-success bg-transparent text-success">
+        <p class="my-1">All set! Your experiment is in Preview mode and you can test it now.</p>
+      </div>
+      <div class="alert alert-secondary">
+        <p class="my-1">
+          This experiment is currently <strong>live for testing</strong>, but you will need to let QA know in your
+          <a href="{{ EXTERNAL_URLS.SIGNOFF_QA }}" target="_blank">PI request</a>. When you have received a sign-off, click “Request Launch” to launch the experiment.
+          <strong>Note: It can take up to an hour before clients receive a preview experiment.</strong>
+        </p>
+        <div class="form-check">
+          <input type="checkbox"
+                 class="form-check-input"
+                 id="checkbox-1"
+                 onchange="toggleSubmitButton()">
+          <label class="form-check-label" for="checkbox-1">I understand the risks associated with launching an experiment</label>
+        </div>
+        <div class="form-check">
+          <input type="checkbox"
+                 class="form-check-input"
+                 id="checkbox-2"
+                 onchange="toggleSubmitButton()">
+          <label class="form-check-label" for="checkbox-2">
+            I have gone through the <a href="{{ EXTERNAL_URLS.TRAINING_AND_PLANNING_DOC }}" target="_blank">experiment onboarding program</a>
+          </label>
+        </div>
+        {% if experiment.can_preview_to_review %}
+          <button type="button"
+                  class="btn btn-primary"
+                  id="request-launch-button"
+                  hx-post="{% url 'nimbus-new-preview-to-review' slug=experiment.slug %}"
+                  hx-select="#content"
+                  hx-target="#content"
+                  hx-swap="outerHTML"
+                  disabled>Request Launch</button>
+        {% endif %}
+        {% if experiment.can_preview_to_draft %}
+          <button type="button"
+                  class="btn btn-secondary"
+                  hx-post="{% url 'nimbus-new-preview-to-draft' slug=experiment.slug %}"
+                  hx-select="#content"
+                  hx-target="#content"
+                  hx-swap="outerHTML">Go back to Draft</button>
+        {% endif %}
+      </div>
+      <!-- Review Mode Controls -->
+    {% elif experiment.is_review %}
+      <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"
+                class="btn btn-primary"
+                hx-post="{% url 'nimbus-new-review-to-draft' slug=experiment.slug %}"
+                hx-select="#content"
+                hx-target="#content"
+                hx-swap="outerHTML">Cancel Review</button>
+      </div>
+    {% endif %}
+  </form>
+</div>

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

@@ -1,11 +1,17 @@
-<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 %}">
-        <strong>{{ status.label }}</strong>
-        <small>{{ status.date|default:'---' }}</small>
-        {% if status.days is not None %}<small>{{ status.days }} day{{ status.days|pluralize }}</small>{% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-</div>
+<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>