feat(nimbus): add rollout setup progress and issues modal

* adds a setup completion progress bar to the rollout sidebar
* adds an issues modal that lists invalid fields with links to the relevant card
* allows rollouts to set 0% population, 0 enrolled clients, and no reference branch description
* validates the rollout schedule (at least one phase, nonzero first phase) via NimbusRolloutReviewSerializer

Fixes #15927

Author: RJAK11

experimenter/experimenter/experiments/api/v5/serializers.py

@@ -35,6 +35,7 @@
     NimbusExperiment,
     NimbusFeatureConfig,
     NimbusFeatureVersion,
+    NimbusRolloutPhase,
     NimbusVersionedSchema,
 )
 from experimenter.features.manifests.nimbus_fml_loader import NimbusFmlLoader
@@ -1994,6 +1995,39 @@ def validate(self, data):
         return data
 
 
+class NimbusRolloutReviewSerializer(NimbusReviewSerializer):
+    population_percent = serializers.DecimalField(
+        7,
+        4,
+        min_value=0.0,
+        max_value=100.0,
+        required=True,
+        error_messages={"min_value": NimbusConstants.ERROR_POPULATION_PERCENT_MIN},
+    )
+    total_enrolled_clients = serializers.IntegerField(required=False, min_value=0)
+    rollout_phases = serializers.PrimaryKeyRelatedField(
+        many=True,
+        required=False,
+        queryset=NimbusRolloutPhase.objects.all(),
+    )
+
+    def validate_reference_branch(self, value):
+        return value
+
+    def validate_rollout_phases(self, value):
+        if self.instance and not self.instance.is_rollout:
+            return value
+
+        phases = list(value)
+        if not phases:
+            raise serializers.ValidationError(NimbusConstants.ERROR_ROLLOUT_NO_PHASES)
+        if not phases[0].population_percent:
+            raise serializers.ValidationError(
+                NimbusConstants.ERROR_ROLLOUT_FIRST_PHASE_ZERO
+            )
+        return value
+
+
 class LocalizationError(Exception):
     """An error that occurs during localization substitution."""
 

experimenter/experimenter/experiments/constants.py

@@ -721,6 +721,10 @@ class AnalysisWindow(models.TextChoices):
         "Launching experiments has been temporarily disabled by the site administrators."
     )
     ERROR_POPULATION_PERCENT_MIN = "Ensure this value is greater than or equal to 0.0001."
+    ERROR_ROLLOUT_NO_PHASES = "Add at least one rollout phase to the schedule."
+    ERROR_ROLLOUT_FIRST_PHASE_ZERO = (
+        "The first rollout phase must have a population percent greater than 0."
+    )
     ERROR_FIREFOX_VERSION_MIN = (
         "Ensure this value is less than or equal to the maximum version"
     )

experimenter/experimenter/experiments/models.py

@@ -2422,11 +2422,14 @@ def has_results_errors(self):
                     return True
         return False
 
-    def get_invalid_fields_errors(self):
+    def get_invalid_fields_errors(self, serializer_class=None):
         from experimenter.experiments.api.v5.serializers import NimbusReviewSerializer
 
-        serializer_data = NimbusReviewSerializer(self).data
-        serializer = NimbusReviewSerializer(self, data=serializer_data)
+        if serializer_class is None:
+            serializer_class = NimbusReviewSerializer
+
+        serializer_data = serializer_class(self).data
+        serializer = serializer_class(self, data=serializer_data)
 
         errors = {}
         if not serializer.is_valid():

experimenter/experimenter/experiments/tests/api/v5/test_serializers/test_nimbus_ready_for_review_serializer.py

@@ -12,7 +12,10 @@
 from experimenter.base.tests.factories import (
     LocaleFactory,
 )
-from experimenter.experiments.api.v5.serializers import NimbusReviewSerializer
+from experimenter.experiments.api.v5.serializers import (
+    NimbusReviewSerializer,
+    NimbusRolloutReviewSerializer,
+)
 from experimenter.experiments.constants import (
     ApplicationConfig,
     FirefoxLabs,
@@ -31,6 +34,7 @@
     NimbusExperimentFactory,
     NimbusFeatureConfigFactory,
     NimbusFmlErrorDataClass,
+    NimbusRolloutPhaseFactory,
     NimbusVersionedSchemaFactory,
 )
 from experimenter.openidc.tests.factories import UserFactory
@@ -92,6 +96,15 @@ def get_review_serializer(self, experiment):
             context={"user": self.user},
         )
 
+    def get_rollout_review_serializer(self, experiment):
+        return NimbusRolloutReviewSerializer(
+            experiment,
+            data=NimbusRolloutReviewSerializer(
+                experiment, context={"user": self.user}
+            ).data,
+            context={"user": self.user},
+        )
+
 
 class TestNimbusReviewSerializerSingleFeature(
     GetReviewSerializerMixin, MockFmlErrorMixin, TestCase
@@ -104,6 +117,26 @@ def setUp(self):
         self.user = UserFactory()
         self.setup_fml_no_errors()
 
+    def create_rollout(self, **overrides):
+        experiment = NimbusExperimentFactory.create_with_lifecycle(
+            NimbusExperimentFactory.Lifecycles.CREATED,
+            population_percent=0.0,
+            application=NimbusExperiment.Application.DESKTOP,
+            feature_configs=[
+                NimbusFeatureConfigFactory(
+                    application=NimbusExperiment.Application.DESKTOP
+                )
+            ],
+            is_rollout=True,
+            is_sticky=True,
+            firefox_min_version=NimbusExperiment.MIN_REQUIRED_VERSION,
+            **overrides,
+        )
+        for branch in experiment.treatment_branches:
+            branch.delete()
+        experiment.save()
+        return experiment
+
     def test_valid_experiment_with_single_feature(self):
         experiment = NimbusExperimentFactory.create_with_lifecycle(
             NimbusExperimentFactory.Lifecycles.CREATED,
@@ -503,6 +536,49 @@ def test_valid_experiment_minimum_population_percent(self):
         )
         self.assertTrue(serializer.is_valid(), serializer.errors)
 
+    def test_rollout_serializer_allows_relaxed_fields(self):
+        experiment = self.create_rollout(total_enrolled_clients=0)
+        experiment.reference_branch.description = ""
+        experiment.reference_branch.save()
+        NimbusRolloutPhaseFactory.create(experiment=experiment, population_percent=10)
+        serializer = self.get_rollout_review_serializer(experiment)
+        self.assertTrue(serializer.is_valid(), serializer.errors)
+
+    def test_base_serializer_rejects_relaxed_rollout_fields(self):
+        experiment = self.create_rollout(total_enrolled_clients=0)
+        experiment.reference_branch.description = ""
+        experiment.reference_branch.save()
+        serializer = self.get_review_serializer(experiment)
+        self.assertFalse(serializer.is_valid())
+        self.assertIn("population_percent", serializer.errors)
+        self.assertIn("total_enrolled_clients", serializer.errors)
+        self.assertIn("reference_branch", serializer.errors)
+
+    def test_rollout_serializer_requires_phases(self):
+        experiment = NimbusExperimentFactory.create_with_lifecycle(
+            NimbusExperimentFactory.Lifecycles.CREATED,
+            is_rollout=True,
+            public_description="",
+        )
+        serializer = self.get_rollout_review_serializer(experiment)
+        self.assertFalse(serializer.is_valid())
+        self.assertGreater(len(serializer.errors), 1)
+        self.assertEqual(
+            serializer.errors["rollout_phases"],
+            [NimbusConstants.ERROR_ROLLOUT_NO_PHASES],
+        )
+
+    def test_rollout_serializer_requires_nonzero_first_phase(self):
+        experiment = self.create_rollout()
+        NimbusRolloutPhaseFactory.create(experiment=experiment, population_percent=0)
+        NimbusRolloutPhaseFactory.create(experiment=experiment, population_percent=50)
+        serializer = self.get_rollout_review_serializer(experiment)
+        self.assertFalse(serializer.is_valid())
+        self.assertEqual(
+            serializer.errors["rollout_phases"],
+            [NimbusConstants.ERROR_ROLLOUT_FIRST_PHASE_ZERO],
+        )
+
     def test_invalid_experiment_treatment_branch_requires_description(self):
         experiment = NimbusExperimentFactory.create_with_lifecycle(
             NimbusExperimentFactory.Lifecycles.CREATED,

experimenter/experimenter/nimbus_ui/new/views.py

@@ -4,6 +4,7 @@
 from django.views.generic import DetailView
 from django.views.generic.edit import UpdateView
 
+from experimenter.experiments.api.v5.serializers import NimbusRolloutReviewSerializer
 from experimenter.experiments.models import NimbusExperiment, Tag
 from experimenter.nimbus_ui.filtersets import (
     TagSearchFilterSet,
@@ -93,7 +94,86 @@ def post(self, request, *args, **kwargs):
         return super().post(request, *args, **kwargs)
 
 
+class RolloutSetupProgressMixin:
+    SETUP_SECTIONS = {
+        "Overview": {*RolloutOverviewForm.Meta.fields},
+        "Risks": {*RolloutRisksForm.Meta.fields},
+        "Features": {*RolloutFeaturesForm.Meta.fields},
+        "Audience": {*RolloutAudienceForm.Meta.fields},
+    }
+
+    SECTION_CARD_IDS = {
+        "Overview": "overview",
+        "Risks": "risks",
+        "Features": "rollout-features",
+        "Audience": "audience",
+    }
+
+    NON_FIELD_ISSUE_CARDS = {
+        "rollout_phases": {
+            "section": "Rollout schedule",
+            "card_id": "schedule",
+            "label": "Rollout Schedule",
+        },
+    }
+
+    def flatten_errors(self, messages):
+        if isinstance(messages, dict):
+            return [m for value in messages.values() for m in self.flatten_errors(value)]
+        if isinstance(messages, (list, tuple)):
+            return [m for value in messages for m in self.flatten_errors(value)]
+        return [str(messages)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        field_errors = self.object.get_invalid_fields_errors(
+            serializer_class=NimbusRolloutReviewSerializer
+        )
+        error_keys = set(field_errors)
+
+        tracked_fields = set()
+        for fields in self.SETUP_SECTIONS.values():
+            tracked_fields.update(fields)
+        tracked_fields.update(self.NON_FIELD_ISSUE_CARDS)
+        tracked_fields.update(error_keys)
+
+        invalid_tracked = error_keys & tracked_fields
+        context["setup_completion_percent"] = round(
+            100 * (len(tracked_fields) - len(invalid_tracked)) / len(tracked_fields)
+        )
+
+        field_to_section = {
+            field: section
+            for section, fields in self.SETUP_SECTIONS.items()
+            for field in fields
+        }
+        issues = []
+        for field, messages in field_errors.items():
+            if field in self.NON_FIELD_ISSUE_CARDS:
+                meta = self.NON_FIELD_ISSUE_CARDS[field]
+                section = meta["section"]
+                card_id = meta["card_id"]
+                label = meta["label"]
+            else:
+                section = field_to_section.get(field, "Other")
+                card_id = self.SECTION_CARD_IDS.get(section)
+                label = field.replace("_", " ").title()
+            issues.append(
+                {
+                    "section": section,
+                    "card_id": card_id,
+                    "label": label,
+                    "messages": self.flatten_errors(messages),
+                }
+            )
+
+        context["setup_issues"] = issues
+        context["setup_issues_count"] = len(issues)
+        return context
+
+
 class NimbusRolloutDetailView(
+    RolloutSetupProgressMixin,
     NimbusExperimentViewMixin,
     CloneExperimentFormMixin,
     DetailView,
@@ -117,6 +197,7 @@ def get_context_data(self, **kwargs):
 
 
 class NewCardUpdateView(
+    RolloutSetupProgressMixin,
     NimbusExperimentViewMixin,
     RequestFormMixin,
     UpdateRedirectViewMixin,

experimenter/experimenter/nimbus_ui/static/js/index.js

@@ -84,6 +84,30 @@ const cleanupOrphanedModalBackdrops = () => {
   }
 };
 
+const setupSetupIssueNav = () => {
+  document.addEventListener("click", function (event) {
+    const trigger = event.target.closest("[data-setup-issue-target]");
+    if (!trigger) {
+      return;
+    }
+
+    const cardId = trigger.getAttribute("data-setup-issue-target");
+    const card = document.getElementById(`rollout-card-${cardId}`);
+    if (!card) {
+      return;
+    }
+    const scrollToCard = () =>
+      card.scrollIntoView({ behavior: "smooth", block: "start" });
+
+    if (trigger.closest(".modal")) {
+      setTimeout(scrollToCard, 300);
+    } else {
+      scrollToCard();
+    }
+  });
+};
+setupSetupIssueNav();
+
 const setupHTMXLoadingOverlay = () => {
   document.addEventListener("htmx:beforeRequest", function () {
     const loadingOverlay = document.querySelector("#htmx-loading-overlay");

experimenter/experimenter/nimbus_ui/templates/new/common/setup_issues_modal.html

@@ -0,0 +1,47 @@
+<div id="sidebar-setup-issues-modal"
+     {% if oob %}hx-swap-oob="true"{% endif %}>
+  {% if setup_issues_count %}
+    <div class="modal fade" id="setupIssuesModal" tabindex="-1">
+      <div class="modal-dialog modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5 d-flex align-items-center gap-2">Rollout Issues Detected</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body bg-body-tertiary d-flex flex-column gap-2">
+            {% for issue in setup_issues %}
+              <div class="rounded-2 p-3 small"
+                   style="background-color: var(--bs-warning-bg-subtle);
+                          border: 1px solid var(--bs-warning-border-subtle)">
+                <button type="button"
+                        class="rollout-card-toggle btn btn-link small p-0 w-100 d-flex align-items-center gap-2 text-black text-decoration-none collapsed"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#setupIssue{{ forloop.counter }}">
+                  <i class="fa-solid fa-triangle-exclamation"
+                     style="color: var(--bs-orange)"></i>
+                  <span class="flex-grow-1 small text-start fw-semibold">{{ issue.label }}</span>
+                  <i class="fa-solid fa-chevron-right chevron-icon"
+                     style="font-size: 11px"></i>
+                </button>
+                <div class="collapse ms-4" id="setupIssue{{ forloop.counter }}">
+                  {% for message in issue.messages %}<div>{{ message }}</div>{% endfor %}
+                  {% if issue.card_id %}
+                    <button type="button"
+                            class="btn btn-sm mt-2"
+                            style="background-color: var(--bs-warning-border-subtle);
+                                   border: 1px solid var(--bs-warning-border-subtle)"
+                            data-bs-dismiss="modal"
+                            data-setup-issue-target="{{ issue.card_id }}">
+                      Go to {{ issue.section }}
+                      <i class="fa-solid fa-arrow-right ms-1" style="font-size: 10px;"></i>
+                    </button>
+                  {% endif %}
+                </div>
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+</div>

experimenter/experimenter/nimbus_ui/templates/new/common/setup_progress.html

@@ -0,0 +1,27 @@
+<div id="sidebar-setup-progress" {% if oob %}hx-swap-oob="true"{% endif %}>
+  <div class="mb-2">
+    <div class="small mb-1 text-secondary">{{ setup_completion_percent|default:0 }}% complete</div>
+    <div class="rounded-pill bg-secondary-subtle" style="height: 3px;">
+      <div class="rounded-pill bg-primary"
+           style="height: 3px;
+                  width: {{ setup_completion_percent|default:0 }}%"></div>
+    </div>
+  </div>
+  {% if setup_issues_count %}
+    <div class="d-flex align-items-center justify-content-between gap-2 rounded-2 mb-2 p-2 small"
+         style="background-color: var(--bs-warning-bg-subtle);
+                border: 1px solid var(--bs-warning-border-subtle)">
+      <span class="d-flex align-items-center gap-2">
+        <i class="fa-solid fa-triangle-exclamation"
+           style="color: var(--bs-orange)"></i>
+        {{ setup_issues_count }} issue{{ setup_issues_count|pluralize }} detected
+      </span>
+      <button type="button"
+              class="btn btn-sm py-0 px-2 small"
+              style="background-color: var(--bs-warning-border-subtle);
+                     border: 1px solid var(--bs-warning-border-subtle)"
+              data-bs-toggle="modal"
+              data-bs-target="#setupIssuesModal">View</button>
+    </div>
+  {% endif %}
+</div>