From 2315aee22964d7e3d14746a59a9b5ad93cb758a2 Mon Sep 17 00:00:00 2001
From: Rana Al-Khulaidi <ralkhulaidi@gmail.com>
Date: Sun, 16 Aug 2026 03:53:30 -0400
Subject: [PATCH] fix(nimbus): Improve rollout card actions and save feedback

Because

* Edit actions should be replaced with a cancel action while a card is in edit mode
* Successful saves should provide clear user feedback
* Cards should be temporarily disabled while changes are being saved

This commit

* Updates card actions to show a cancel control during edit mode
* Adds toast notifications for successful saves
* Disables cards while save requests are in progress

Fixes #16700
---
 .../experimenter/nimbus_ui/constants.py       | 16 ++++
 .../experimenter/nimbus_ui/new/views.py       | 33 +++++--
 .../nimbus_ui/static/css/style.scss           | 13 +++
 .../nimbus_ui/static/js/new/rollout_cards.js  | 52 +++++++++++
 .../nimbus_ui/static/webpack.config.js        |  1 +
 .../nimbus_ui/templates/new/common/base.html  | 13 +++
 .../templates/new/common/card_actions.html    | 12 +++
 .../new/common/card_cancel_button.html        | 14 +++
 .../new/common/card_form_actions.html         | 13 +++
 .../common/slack_notifications_toggle.html    |  1 +
 .../templates/new/common/subscribe_bell.html  |  2 +
 .../new/rollouts/audience/edit_form.html      | 14 +--
 .../templates/new/rollouts/detail_card.html   | 90 ++++++++++---------
 .../rollouts/overview/cancel_response.html    |  2 +-
 .../new/rollouts/overview/edit_form.html      | 14 +--
 .../templates/new/rollouts/qa/edit_form.html  | 14 +--
 .../new/rollouts/risks/edit_form.html         | 14 +--
 .../new/rollouts/rollout_detail.html          | 54 ++++-------
 .../rollouts/rollout_features/edit_form.html  | 14 +--
 .../new/rollouts/schedule/edit_form.html      | 14 +--
 .../new/rollouts/signoff/edit_form.html       | 14 +--
 .../nimbus_ui/tests/test_new_views.py         | 60 +++++++++++++
 22 files changed, 316 insertions(+), 158 deletions(-)
 create mode 100644 experimenter/experimenter/nimbus_ui/static/js/new/rollout_cards.js
 create mode 100644 experimenter/experimenter/nimbus_ui/templates/new/common/card_actions.html
 create mode 100644 experimenter/experimenter/nimbus_ui/templates/new/common/card_cancel_button.html
 create mode 100644 experimenter/experimenter/nimbus_ui/templates/new/common/card_form_actions.html

diff --git a/experimenter/experimenter/nimbus_ui/constants.py b/experimenter/experimenter/nimbus_ui/constants.py
index 5b1b3cddad..294b92ee35 100644
--- a/experimenter/experimenter/nimbus_ui/constants.py
+++ b/experimenter/experimenter/nimbus_ui/constants.py
@@ -400,6 +400,22 @@ class NimbusUIConstants:
         "phase again, or cancel and add a new phase in the rollout schedule."
     )
 
+    TOAST_SAVED = "toast-saved"
+    TOAST_SUBSCRIBED = "toast-subscribed"
+    TOAST_UNSUBSCRIBED = "toast-unsubscribed"
+    TOAST_SLACK_ENABLED = "toast-slack-enabled"
+    TOAST_SLACK_DISABLED = "toast-slack-disabled"
+    TOAST_EDIT_CANCELLED = "toast-edit-cancelled"
+
+    TOASTS = {
+        TOAST_SAVED: "Changes saved",
+        TOAST_SUBSCRIBED: "Subscribed to this experiment",
+        TOAST_UNSUBSCRIBED: "Unsubscribed from this experiment",
+        TOAST_SLACK_ENABLED: "Review Slack notifications enabled",
+        TOAST_SLACK_DISABLED: "Review Slack notifications disabled",
+        TOAST_EDIT_CANCELLED: "Edit cancelled",
+    }
+
     class RolloutPhaseStatus:
         NOT_STARTED = "not_started"
         IN_PROGRESS = "in_progress"
diff --git a/experimenter/experimenter/nimbus_ui/new/views.py b/experimenter/experimenter/nimbus_ui/new/views.py
index d1a037af1b..e2f0bf7630 100644
--- a/experimenter/experimenter/nimbus_ui/new/views.py
+++ b/experimenter/experimenter/nimbus_ui/new/views.py
@@ -1,3 +1,5 @@
+import json
+
 from django import forms
 from django.conf import settings
 from django.http import HttpResponse, HttpResponseRedirect
@@ -8,6 +10,7 @@
 from experimenter.experiments.api.v5.serializers import NimbusRolloutReviewSerializer
 from experimenter.experiments.constants import EXTERNAL_URLS, RISK_QUESTIONS
 from experimenter.experiments.models import NimbusExperiment, Tag
+from experimenter.nimbus_ui.constants import NimbusUIConstants
 from experimenter.nimbus_ui.filtersets import (
     TagSearchFilterSet,
     UserSearchFilterSet,
@@ -55,6 +58,11 @@
 )
 
 
+def trigger_toast(response, toast_id):
+    response.headers["HX-Trigger"] = json.dumps({"showToast": {"id": toast_id}})
+    return response
+
+
 class CloneExperimentFormMixin:
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
@@ -316,6 +324,7 @@ class NewCardUpdateView(
     UpdateView,
 ):
     display_template = None
+    save_toast_id = NimbusUIConstants.TOAST_SAVED
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
@@ -331,10 +340,13 @@ def form_valid(self, form):
 
     def render_valid_response(self):
         context = self.get_context_data()
-        return self.response_class(
-            request=self.request,
-            template=self.display_template,
-            context=context,
+        return trigger_toast(
+            self.response_class(
+                request=self.request,
+                template=self.display_template,
+                context=context,
+            ),
+            self.save_toast_id,
         )
 
 
@@ -730,14 +742,18 @@ class NewSubscribeView(NimbusExperimentViewMixin, RequestFormMixin, UpdateView):
     model = NimbusExperiment
     form_class = SubscribeForm
     template_name = "new/common/subscribe_bell.html"
+    toast_id = NimbusUIConstants.TOAST_SUBSCRIBED
 
     def form_valid(self, form):
         self.object = form.save()
-        return self.render_to_response(self.get_context_data())
+        return trigger_toast(
+            self.render_to_response(self.get_context_data()), self.toast_id
+        )
 
 
 class NewUnsubscribeView(NewSubscribeView):
     form_class = UnsubscribeForm
+    toast_id = NimbusUIConstants.TOAST_UNSUBSCRIBED
 
 
 class NewCloneView(NimbusExperimentViewMixin, RequestFormMixin, UpdateView):
@@ -784,4 +800,9 @@ class NewToggleReviewSlackNotificationsView(
 
     def form_valid(self, form):
         self.object = form.save()
-        return self.render_to_response(self.get_context_data())
+        toast_id = (
+            NimbusUIConstants.TOAST_SLACK_ENABLED
+            if self.object.enable_review_slack_notifications
+            else NimbusUIConstants.TOAST_SLACK_DISABLED
+        )
+        return trigger_toast(self.render_to_response(self.get_context_data()), toast_id)
diff --git a/experimenter/experimenter/nimbus_ui/static/css/style.scss b/experimenter/experimenter/nimbus_ui/static/css/style.scss
index a544407418..9eda0525ed 100644
--- a/experimenter/experimenter/nimbus_ui/static/css/style.scss
+++ b/experimenter/experimenter/nimbus_ui/static/css/style.scss
@@ -358,6 +358,19 @@
   cursor: not-allowed;
 }
 
+.card-edit-form .card-edit-spinner {
+  display: none;
+}
+
+.card-edit-form.htmx-request {
+  opacity: 0.55;
+  pointer-events: none;
+
+  .card-edit-spinner {
+    display: inline-block;
+  }
+}
+
 .rollout-page {
   .cm-editor .cm-scroller {
     font-family: var(--bs-font-monospace);
diff --git a/experimenter/experimenter/nimbus_ui/static/js/new/rollout_cards.js b/experimenter/experimenter/nimbus_ui/static/js/new/rollout_cards.js
new file mode 100644
index 0000000000..2a8215664e
--- /dev/null
+++ b/experimenter/experimenter/nimbus_ui/static/js/new/rollout_cards.js
@@ -0,0 +1,52 @@
+const showToast = (toastId) => {
+  const toastEl = document.getElementById(toastId);
+  if (toastEl) {
+    window.bootstrap?.Toast.getOrCreateInstance(toastEl).show();
+  }
+};
+
+const syncCardEditActions = () => {
+  document.querySelectorAll(".rollout-card").forEach((card) => {
+    const editing = card.querySelector(".card-edit-form") !== null;
+    card
+      .querySelectorAll("[data-card-action='edit']")
+      .forEach((button) => button.classList.toggle("d-none", editing));
+    card
+      .querySelectorAll("[data-card-action='cancel']")
+      .forEach((button) => button.classList.toggle("d-none", !editing));
+  });
+};
+
+document.addEventListener("showToast", (event) => {
+  showToast(event.detail?.id);
+});
+
+document.addEventListener("click", (event) => {
+  const trigger = event.target.closest?.("[data-toast-id]");
+  if (trigger) {
+    showToast(trigger.dataset.toastId);
+  }
+});
+
+let pendingCardId = null;
+
+document.addEventListener("htmx:beforeRequest", (event) => {
+  const card = event.detail.elt.closest?.(".rollout-card");
+  pendingCardId = card ? card.id : null;
+});
+
+document.addEventListener("htmx:afterSwap", syncCardEditActions);
+
+document.addEventListener("htmx:afterSettle", () => {
+  const cardId = pendingCardId;
+  pendingCardId = null;
+  if (!cardId) {
+    return;
+  }
+  const card = document.getElementById(cardId);
+  if (card) {
+    card.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }
+});
+
+document.addEventListener("DOMContentLoaded", syncCardEditActions);
diff --git a/experimenter/experimenter/nimbus_ui/static/webpack.config.js b/experimenter/experimenter/nimbus_ui/static/webpack.config.js
index ba8779e64e..08e6f2dd72 100644
--- a/experimenter/experimenter/nimbus_ui/static/webpack.config.js
+++ b/experimenter/experimenter/nimbus_ui/static/webpack.config.js
@@ -13,6 +13,7 @@ module.exports = {
     new_edit_branches: "./js/new/edit_branches.js",
     new_tooltips: "./js/new/tooltips.js",
     new_htmx_failure: "./js/new/htmx_failure.js",
+    new_rollout_cards: "./js/new/rollout_cards.js",
     experiment_detail: "./js/experiment_detail.js",
     branch_detail: "./js/branch_detail.js",
     features_page: "./js/features_page.js",
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/base.html b/experimenter/experimenter/nimbus_ui/templates/new/common/base.html
index 52a25d1811..7465a0293f 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/common/base.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/base.html
@@ -14,6 +14,7 @@
     <script src="{% static 'nimbus_ui/app.bundle.js' %}"></script>
     <script src="{% static 'nimbus_ui/new_tooltips.bundle.js' %}"></script>
     <script src="{% static 'nimbus_ui/new_htmx_failure.bundle.js' %}"></script>
+    <script src="{% static 'nimbus_ui/new_rollout_cards.bundle.js' %}"></script>
     {% block extra_head %}{% endblock %}
   </head>
   <body class="m-0 p-0 rollout-page bg-body-tertiary"
@@ -136,6 +137,18 @@ <h1 id="experiment-header-name" class="mb-0 fw-semibold fs-4 text-body">{{ exper
                 JSON copied to clipboard!
               </div>
             </div>
+            {% for toast_id, toast_message in NimbusUIConstants.TOASTS.items %}
+              <div id="{{ toast_id }}"
+                   class="toast hide text-bg-primary mb-1"
+                   role="alert"
+                   aria-live="assertive"
+                   aria-atomic="true">
+                <div class="toast-body">
+                  <i class="fa-regular fa-circle-check"></i>
+                  {{ toast_message }}
+                </div>
+              </div>
+            {% endfor %}
           </div>
         </div>
         <template id="template-toast">
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/card_actions.html b/experimenter/experimenter/nimbus_ui/templates/new/common/card_actions.html
new file mode 100644
index 0000000000..056d28a017
--- /dev/null
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/card_actions.html
@@ -0,0 +1,12 @@
+{% with 'nimbus-ui-new-update-'|add:card_id as url_name %}
+  <button class="btn p-0 border-0 text-secondary"
+          type="button"
+          data-card-action="edit"
+          aria-label="Edit {{ card_id }}"
+          hx-get="{% url url_name experiment.slug %}"
+          hx-target="#rollout-{{ card_id }}-body"
+          hx-swap="outerHTML">
+    <i class="fa-regular fa-pen-to-square"></i>
+  </button>
+{% endwith %}
+{% include "new/common/card_cancel_button.html" with icon_only=True %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/card_cancel_button.html b/experimenter/experimenter/nimbus_ui/templates/new/common/card_cancel_button.html
new file mode 100644
index 0000000000..e8569844b9
--- /dev/null
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/card_cancel_button.html
@@ -0,0 +1,14 @@
+<button type="button"
+        class="{% if icon_only %}btn p-0 border-0 text-secondary d-none{% else %}btn btn-outline-secondary btn-sm{% endif %}"
+        {% if icon_only %}data-card-action="cancel" aria-label="Cancel editing {{ card_id }}"{% endif %}
+        data-toast-id="{{ NimbusUIConstants.TOAST_EDIT_CANCELLED }}"
+        {% if card_id == "overview" %} hx-post="{% url 'nimbus-ui-new-cancel-overview' experiment.slug %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' {% else %} hx-get="{% url 'new-nimbus-ui-rollout-detail' experiment.slug %}" {% endif %}
+        hx-select="#rollout-card-{{ card_id }}"
+        hx-target="#rollout-card-{{ card_id }}"
+        hx-swap="outerHTML">
+  {% if icon_only %}
+    <i class="fa-solid fa-xmark"></i>
+  {% else %}
+    Cancel
+  {% endif %}
+</button>
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/card_form_actions.html b/experimenter/experimenter/nimbus_ui/templates/new/common/card_form_actions.html
new file mode 100644
index 0000000000..a2be02ac32
--- /dev/null
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/card_form_actions.html
@@ -0,0 +1,13 @@
+<div class="d-flex align-items-center gap-2">
+  <button type="submit"
+          id="rollout-{{ card_id }}-save"
+          {% if submit_name %}name="{{ submit_name }}" value="True"{% endif %}
+          class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2">
+    <span class="spinner-border spinner-border-sm card-edit-spinner"
+          role="status"
+          aria-hidden="true"></span>
+    Save
+  </button>
+  {% include "new/common/card_cancel_button.html" %}
+
+</div>
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/slack_notifications_toggle.html b/experimenter/experimenter/nimbus_ui/templates/new/common/slack_notifications_toggle.html
index d6025caa03..6a2611b9a9 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/common/slack_notifications_toggle.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/slack_notifications_toggle.html
@@ -3,6 +3,7 @@
       hx-trigger="change"
       hx-target="#slack-notifications-toggle-form"
       hx-swap="outerHTML"
+      hx-sync="this:drop"
       class="d-flex align-items-center">
   {% csrf_token %}
   <div class="form-check form-switch d-flex align-items-center m-0">
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/common/subscribe_bell.html b/experimenter/experimenter/nimbus_ui/templates/new/common/subscribe_bell.html
index e73094a433..0ca5000c4a 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/common/subscribe_bell.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/common/subscribe_bell.html
@@ -2,6 +2,7 @@
   <form id="subscribe-bell"
         hx-post="{% url 'nimbus-ui-new-unsubscribe' experiment.slug %}"
         hx-swap="outerHTML"
+        hx-sync="this:drop"
         class="d-inline">
     {% csrf_token %}
     <button type="submit"
@@ -16,6 +17,7 @@
   <form id="subscribe-bell"
         hx-post="{% url 'nimbus-ui-new-subscribe' experiment.slug %}"
         hx-swap="outerHTML"
+        hx-sync="this:drop"
         class="d-inline">
     {% csrf_token %}
     <button type="submit"
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/audience/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/audience/edit_form.html
index 63e5c2e916..82edc12ca7 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/audience/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/audience/edit_form.html
@@ -14,7 +14,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-audience' experiment.slug %}"
         hx-target="#rollout-audience-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-audience-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     <div class="row g-3">
       <div class="col">
@@ -162,15 +163,8 @@
     </div>
   </div>
   {# Action buttons #}
-  <div class="d-flex align-items-center gap-2">
-    <button type="submit" name="save" value="True" class="btn btn-primary btn-sm">Save</button>
-    <button type="button"
-            class="btn btn-outline-secondary btn-sm"
-            hx-get="{{ cancel_url }}"
-            hx-select="#rollout-card-audience"
-            hx-target="#rollout-card-audience"
-            hx-swap="outerHTML">Cancel</button>
-  </div>
+  {% include "new/common/card_form_actions.html" with card_id="audience" submit_name="save" %}
+
 </form>
 </div>
 {% block extrascripts %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/detail_card.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/detail_card.html
index 0099f7ebf7..6618d94671 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/detail_card.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/detail_card.html
@@ -1,46 +1,52 @@
-<div id="rollout-card-{{ card_id }}"
-     class="rollout-card accordion accordion-flush rounded-3 border bg-body">
-  <div class="accordion-item border-0 bg-transparent">
-    <h2 class="accordion-header">
-      <div class="d-flex align-items-center justify-content-between pe-4">
-        <button class="accordion-button bg-transparent shadow-none fw-semibold small text-body collapsed px-4 py-4 rollout-card-toggle"
-                style="--bs-accordion-btn-icon: none;
-                       --bs-accordion-btn-active-icon: none;
-                       --bs-accordion-btn-active-color: var(--bs-body-color);
-                       --bs-accordion-btn-active-bg: transparent"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#collapse-{{ card_id }}"
-                aria-expanded="true"
-                aria-controls="collapse-{{ card_id }}">
-          <i class="fa-solid fa-chevron-right chevron-icon small text-secondary flex-shrink-0 me-2 align-self-start mt-1"></i>
-          <span>
-            {{ title }}
-            {% if subtitle %}<div class="text-secondary fw-normal mt-2 small">{{ subtitle }}</div>{% endif %}
-          </span>
-        </button>
-        {% if show_edit_btn %}
-          {% with 'nimbus-ui-new-update-'|add:card_id as url_name %}
-            <button class="btn p-0 border-0 text-secondary"
-                    type="button"
-                    aria-label="Edit {{ card_id }}"
-                    hx-get="{% url url_name experiment.slug %}"
-                    hx-target="#rollout-{{ card_id }}-body"
-                    hx-swap="outerHTML">
-              <i class="fa-regular fa-pen-to-square"></i>
-            </button>
-          {% endwith %}
-        {% endif %}
-      </div>
-    </h2>
-    <div class="accordion-collapse collapse show" id="collapse-{{ card_id }}">
-      <hr class="m-0 text-body-tertiary">
-      <div class="accordion-body">
-        {% if body_template %}
-          {% include body_template %}
+{% load nimbus_extras %}
+
+{% with card_status=card_summaries|dict_get:card_id %}
+  <div id="rollout-card-{{ card_id }}"
+       class="rollout-card accordion accordion-flush rounded-3 border bg-body">
+    <div class="accordion-item border-0 bg-transparent">
+      <h2 class="accordion-header">
+        <div class="d-flex align-items-start justify-content-between pe-4">
+          <button class="accordion-button bg-transparent shadow-none fw-semibold small text-body collapsed px-4 py-4 rollout-card-toggle"
+                  style="--bs-accordion-btn-icon: none;
+                         --bs-accordion-btn-active-icon: none;
+                         --bs-accordion-btn-active-color: var(--bs-body-color);
+                         --bs-accordion-btn-active-bg: transparent"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapse-{{ card_id }}"
+                  aria-expanded="true"
+                  aria-controls="collapse-{{ card_id }}">
+            <i class="fa-solid fa-chevron-right chevron-icon small text-secondary flex-shrink-0 me-2 align-self-start mt-1"></i>
+            <span>
+              {% with card_icon=NimbusUIConstants.ROLLOUT_CARD_ICONS|dict_get:card_id %}
+                {% if card_icon %}<i class="{{ card_icon }} mx-1 text-secondary"></i>{% endif %}
+              {% endwith %}
+              {{ title }}
+              {% if card_status %}
+                {% include "new/rollouts/card_subtitle.html" with card_status=card_status card_id=card_id %}
+
+              {% elif subtitle %}
+                <div class="card-collapsed-subtitle text-secondary fw-normal mt-2 small">{{ subtitle }}</div>
+              {% endif %}
+            </span>
+          </button>
+          <div class="d-flex align-items-center align-self-start gap-3 flex-shrink-0 pt-4">
+            {% if show_edit_btn %}
+              {% include "new/common/card_actions.html" %}
+
+            {% endif %}
+          </div>
+        </div>
+      </h2>
+      <div class="accordion-collapse collapse show" id="collapse-{{ card_id }}">
+        <hr class="m-0 text-body-tertiary">
+        <div class="accordion-body">
+          {% if body_template %}
+            {% include body_template %}
 
-        {% endif %}
+          {% endif %}
+        </div>
       </div>
     </div>
   </div>
-</div>
+{% endwith %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/cancel_response.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/cancel_response.html
index 89d11dd0fd..523d2c64cb 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/cancel_response.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/cancel_response.html
@@ -1 +1 @@
-{% include "new/rollouts/detail_card.html" with card_id="overview" title="Overview" subtitle="Name · Observations & Problem Space · Public Description · Application · Important Links · Project Tags · Subscribers" show_edit_btn=experiment.is_draft body_template="new/rollouts/overview/card.html" %}
+{% include "new/rollouts/detail_card.html" with card_id="overview" title="Overview" show_edit_btn=experiment.is_draft body_template="new/rollouts/overview/card.html" %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/edit_form.html
index dbec53e4c2..8da51e937d 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/overview/edit_form.html
@@ -5,7 +5,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-overview' experiment.slug %}"
         hx-target="#rollout-overview-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-overview-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     <div class="d-flex flex-column gap-4">
       {# Name #}
@@ -108,15 +109,8 @@
 
     </div>
     {# Action buttons #}
-    <div class="d-flex align-items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm">Save</button>
-      <button type="button"
-              class="btn btn-outline-secondary btn-sm"
-              hx-post="{% url 'nimbus-ui-new-cancel-overview' experiment.slug %}"
-              hx-select="#rollout-card-overview"
-              hx-target="#rollout-card-overview"
-              hx-swap="outerHTML">Cancel</button>
-    </div>
+    {% include "new/common/card_form_actions.html" with card_id="overview" %}
+
   </form>
 </div>
 {% include "new/common/sidebar_links.html" with hx_swap_oob=True %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/qa/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/qa/edit_form.html
index 4ba11954fc..8f6964010d 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/qa/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/qa/edit_form.html
@@ -7,7 +7,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-qa' experiment.slug %}"
         hx-target="#rollout-qa-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-qa-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     <div class="d-flex flex-column gap-4">
       {# QA method #}
@@ -46,14 +47,7 @@
       </div>
     </div>
     {# Action buttons #}
-    <div class="d-flex align-items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm">Save</button>
-      <button type="button"
-              class="btn btn-outline-secondary btn-sm"
-              hx-get="{{ cancel_url }}"
-              hx-select="#rollout-card-qa"
-              hx-target="#rollout-card-qa"
-              hx-swap="outerHTML">Cancel</button>
-    </div>
+    {% include "new/common/card_form_actions.html" with card_id="qa" %}
+
   </form>
 </div>
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/risks/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/risks/edit_form.html
index d844fd5fc8..b01e0dea6e 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/risks/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/risks/edit_form.html
@@ -5,7 +5,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-risks' experiment.slug %}"
         hx-target="#rollout-risks-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-risks-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     {% comment %} These hidden fields are required for the form to submit correctly {% endcomment %}
     <input type="hidden" name="name" value="{{ experiment.name }}">
@@ -80,14 +81,7 @@
       </div>
     </div>
     {# Action buttons #}
-    <div class="d-flex align-items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm">Save</button>
-      <button type="button"
-              class="btn btn-outline-secondary btn-sm"
-              hx-get="{{ cancel_url }}"
-              hx-select="#rollout-card-risks"
-              hx-target="#rollout-card-risks"
-              hx-swap="outerHTML">Cancel</button>
-    </div>
+    {% include "new/common/card_form_actions.html" with card_id="risks" %}
+
   </form>
 </div>
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_detail.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_detail.html
index 59cc77d0fc..33afc4c1ce 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_detail.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_detail.html
@@ -12,10 +12,6 @@
     {% if experiment.monitoring_data %}
       {% include "new/rollouts/detail_card.html" with card_id="monitoring" title=NimbusUIConstants.MONITORING_CARD_TITLE subtitle="Enrollment funnel and branch health" show_edit_btn=False body_template="new/rollouts/monitoring/card.html" %}
 
-    {% endif %}
-    {% if experiment.is_rolling_out %}
-      {% include "new/rollouts/detail_card.html" with card_id="schedule" title="Rollout schedule" subtitle="Gradually increase the rollout population in phases" show_edit_btn=True body_template="new/rollouts/schedule/card.html" %}
-
     {% endif %}
     {% if experiment.is_preview %}
       <div class="d-flex flex-column gap-2" id="rollout-preview-section">
@@ -23,40 +19,20 @@
 
       </div>
     {% endif %}
-    {# ── Define ── #}
-    <div class="d-flex flex-column gap-2">
-      <div class="small fw-medium mb-1 text-secondary">Define</div>
-      {# EXP-6681: Rollout Overview Form/Card #}
-      {% include "new/rollouts/detail_card.html" with card_id="overview" title="Overview" subtitle="Name · Observations & Problem Space · Public Description · Application · Important Links · Project Tags · Subscribers" show_edit_btn=experiment.is_draft body_template="new/rollouts/overview/card.html" %}
-
-      {# TODO EXP-6682: Rollout Risks Form/Card #}
-      {% include "new/rollouts/detail_card.html" with card_id="risks" title="Risks" subtitle="Consider possible risks if the public interacts with your experiment" show_edit_btn=experiment.is_draft body_template="new/rollouts/risks/card.html" %}
-      {% include "new/rollouts/detail_card.html" with card_id="signoff" title="Sign-Offs" subtitle="QA, VP, and Legal Sign-offs" show_edit_btn=True body_template="new/rollouts/signoff/card.html" %}
-
-    </div>
-    {# ── Configure ── #}
-    <div class="d-flex flex-column gap-2">
-      <div class="small fw-medium mb-1 text-secondary">Configure</div>
-      {# TODO EXP-6683: Rollout Audience Form/Card #}
-      {% include "new/rollouts/detail_card.html" with card_id="audience" title="Audience" subtitle="Branch treatment details" show_edit_btn=experiment.is_draft body_template="new/rollouts/audience/card.html" %}
-
-    </div>
-    {# ── Build ── #}
-    <div class="d-flex flex-column gap-2">
-      <div class="small fw-medium mb-1 text-secondary">Build</div>
-      {# TODO EXP-6685: Rollout Features Form/Card #}
-      {% include "new/rollouts/detail_card.html" with card_id="rollout-features" title="Rollout Features" subtitle="Describe the rollout experience" show_edit_btn=experiment.is_draft body_template="new/rollouts/rollout_features/card.html" %}
-
-      {% if not experiment.is_rolling_out %}
-        {% include "new/rollouts/detail_card.html" with card_id="schedule" title="Rollout schedule" subtitle="Gradually increase the rollout population in phases" show_edit_btn=experiment.is_draft body_template="new/rollouts/schedule/card.html" %}
-
-      {% endif %}
-    </div>
-    {# ── Check ── #}
-    <div class="d-flex flex-column gap-2">
-      <div class="small fw-medium mb-1 text-secondary">Check</div>
-      {% include "new/rollouts/detail_card.html" with card_id="qa" title="Quality Assurance Checks (QA)" subtitle="Request a QA or do a Self QA" show_edit_btn=True body_template="new/rollouts/qa/card.html" %}
-
-    </div>
+    {% include "new/rollouts/detail_card.html" with card_id="overview" title="Overview" show_edit_btn=experiment.is_draft body_template="new/rollouts/overview/card.html" %}
+
+    {% if experiment.is_rolling_out %}
+      {% include "new/rollouts/detail_card.html" with card_id="schedule" title="Rollout schedule" show_edit_btn=True body_template="new/rollouts/schedule/card.html" %}
+
+    {% else %}
+      {% include "new/rollouts/detail_card.html" with card_id="schedule" title="Rollout schedule" show_edit_btn=experiment.is_draft body_template="new/rollouts/schedule/card.html" %}
+
+    {% endif %}
+    {% include "new/rollouts/detail_card.html" with card_id="audience" title="Audience" show_edit_btn=experiment.is_draft body_template="new/rollouts/audience/card.html" %}
+    {% include "new/rollouts/detail_card.html" with card_id="rollout-features" title="Rollout Features" show_edit_btn=experiment.is_draft body_template="new/rollouts/rollout_features/card.html" %}
+    {% include "new/rollouts/detail_card.html" with card_id="signoff" title="Sign-Offs" show_edit_btn=True body_template="new/rollouts/signoff/card.html" %}
+    {% include "new/rollouts/detail_card.html" with card_id="risks" title="Risks" show_edit_btn=experiment.is_draft body_template="new/rollouts/risks/card.html" %}
+    {% include "new/rollouts/detail_card.html" with card_id="qa" title="Quality Assurance Checks (QA)" show_edit_btn=True body_template="new/rollouts/qa/card.html" %}
+
   </div>
 {% endblock %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_features/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_features/edit_form.html
index 7d54a4b66d..25cb537066 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_features/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/rollout_features/edit_form.html
@@ -11,7 +11,8 @@
         hx-target="#rollout-rollout-features-body"
         hx-swap="outerHTML"
         hx-encoding="multipart/form-data"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-rollout-features-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     <div class="d-flex flex-column gap-4">
       {#  Brand perception impact  #}
@@ -218,15 +219,8 @@
   </div>
 </div>
 {# Action buttons #}
-<div class="d-flex align-items-center gap-2">
-  <button type="submit" name="save" value="True" class="btn btn-primary btn-sm">Save</button>
-  <button type="button"
-          class="btn btn-outline-secondary btn-sm"
-          hx-get="{{ cancel_url }}"
-          hx-select="#rollout-card-rollout-features"
-          hx-target="#rollout-card-rollout-features"
-          hx-swap="outerHTML">Cancel</button>
-</div>
+{% include "new/common/card_form_actions.html" with card_id="rollout-features" submit_name="save" %}
+
 </form>
 </div>
 {% block extrascripts %}
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/schedule/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/schedule/edit_form.html
index bbe9d327de..aa9143b471 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/schedule/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/schedule/edit_form.html
@@ -7,7 +7,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-schedule' experiment.slug %}"
         hx-target="#rollout-schedule-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-schedule-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     {# Choose rollout plan #}
     <div>
@@ -146,14 +147,7 @@
 
     </div>
     {# Action buttons #}
-    <div class="d-flex align-items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm">Save</button>
-      <button type="button"
-              class="btn btn-outline-secondary btn-sm"
-              hx-get="{{ cancel_url }}"
-              hx-select="#rollout-card-schedule"
-              hx-target="#rollout-card-schedule"
-              hx-swap="outerHTML">Cancel</button>
-    </div>
+    {% include "new/common/card_form_actions.html" with card_id="schedule" %}
+
   </form>
 </div>
diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/signoff/edit_form.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/signoff/edit_form.html
index 89ba27eb5d..49003993a7 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/signoff/edit_form.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/signoff/edit_form.html
@@ -5,7 +5,8 @@
   <form hx-post="{% url 'nimbus-ui-new-update-signoff' experiment.slug %}"
         hx-target="#rollout-signoff-body"
         hx-swap="outerHTML"
-        class="d-flex flex-column gap-4">
+        hx-disabled-elt="#rollout-signoff-save"
+        class="card-edit-form d-flex flex-column gap-4">
     {% csrf_token %}
     <div class="d-flex flex-column gap-3">
       {# QA sign-off #}
@@ -60,14 +61,7 @@
 
     </div>
     {# Action buttons #}
-    <div class="d-flex align-items-center gap-2">
-      <button type="submit" class="btn btn-primary btn-sm">Save</button>
-      <button type="button"
-              class="btn btn-outline-secondary btn-sm"
-              hx-get="{{ cancel_url }}"
-              hx-select="#rollout-card-signoff"
-              hx-target="#rollout-card-signoff"
-              hx-swap="outerHTML">Cancel</button>
-    </div>
+    {% include "new/common/card_form_actions.html" with card_id="signoff" %}
+
   </form>
 </div>
diff --git a/experimenter/experimenter/nimbus_ui/tests/test_new_views.py b/experimenter/experimenter/nimbus_ui/tests/test_new_views.py
index a017a22604..ab8bb47181 100644
--- a/experimenter/experimenter/nimbus_ui/tests/test_new_views.py
+++ b/experimenter/experimenter/nimbus_ui/tests/test_new_views.py
@@ -1,4 +1,5 @@
 import datetime
+import json
 from decimal import Decimal
 from unittest import mock
 from unittest.mock import patch
@@ -2253,3 +2254,62 @@ def test_post_disables_slack_notifications(self):
         self.assertEqual(response.status_code, 200)
         experiment.refresh_from_db()
         self.assertFalse(experiment.enable_review_slack_notifications)
+
+
+class TestToastTriggers(AuthTestCase):
+    def assertToastTriggered(self, response, toast_id):
+        self.assertEqual(
+            json.loads(response.headers["HX-Trigger"]),
+            {"showToast": {"id": toast_id}},
+        )
+        self.assertIn(toast_id, NimbusUIConstants.TOASTS)
+
+    def test_saving_a_card_triggers_the_saved_toast(self):
+        experiment = NimbusExperimentFactory.create_with_lifecycle(
+            NimbusExperimentFactory.Lifecycles.CREATED, is_rollout=True
+        )
+
+        response = self.client.post(
+            reverse("nimbus-ui-new-update-signoff", kwargs={"slug": experiment.slug}),
+            {"qa_signoff": "on", "vp_signoff": "on", "legal_signoff": "on"},
+        )
+
+        self.assertToastTriggered(response, NimbusUIConstants.TOAST_SAVED)
+
+    def test_subscribing_and_unsubscribing_trigger_toasts(self):
+        experiment = NimbusExperimentFactory.create()
+
+        response = self.client.post(
+            reverse("nimbus-ui-new-subscribe", kwargs={"slug": experiment.slug})
+        )
+        self.assertToastTriggered(response, NimbusUIConstants.TOAST_SUBSCRIBED)
+
+        response = self.client.post(
+            reverse("nimbus-ui-new-unsubscribe", kwargs={"slug": experiment.slug})
+        )
+        self.assertToastTriggered(response, NimbusUIConstants.TOAST_UNSUBSCRIBED)
+
+    def test_toggling_slack_notifications_triggers_toasts(self):
+        experiment = NimbusExperimentFactory.create()
+        url = reverse(
+            "nimbus-ui-new-toggle-review-slack-notifications",
+            kwargs={"slug": experiment.slug},
+        )
+
+        response = self.client.post(url, {"enable_review_slack_notifications": "on"})
+        self.assertToastTriggered(response, NimbusUIConstants.TOAST_SLACK_ENABLED)
+
+        response = self.client.post(url, {})
+        self.assertToastTriggered(response, NimbusUIConstants.TOAST_SLACK_DISABLED)
+
+    def test_every_toast_id_has_markup_on_the_page(self):
+        experiment = NimbusExperimentFactory.create_with_lifecycle(
+            NimbusExperimentFactory.Lifecycles.CREATED, is_rollout=True
+        )
+
+        response = self.client.get(
+            reverse("new-nimbus-ui-rollout-detail", kwargs={"slug": experiment.slug})
+        )
+
+        for toast_id in NimbusUIConstants.TOASTS:
+            self.assertContains(response, f'<div id="{toast_id}"')