feat(2447): removes legacy toast, adds No country option, changes Cancel behavior

Author: ycanales

templates/v3/includes/_button.html

@@ -23,6 +23,9 @@
         - icon-library (uses btn-icon-library styles; ignores btn + btn-* classes)
     - disabled (optional): if truthy, adds disabled attribute to button
     - alpine_disabled (optional): Alpine.js expression for dynamic disabled binding (e.g. "hasErrors")
+    - label_x_text (optional): Alpine.js expression that dynamically overrides the button's visible
+        label (e.g. "saved ? 'Changes Saved' : 'Save changes'"). Requires an ancestor x-data scope.
+        Not compatible with icon_html/icon_name (x-text replaces the button's children).
     - extra_classes (optional) : Any extra classes that the button should have, as a string
     - aria_label (optional): An optional label for assistive technology. Defaults to the button label
     - js_disabled (optional, boolean): If this value is true, the button is hidden unless Javascript is disabled on the page
@@ -67,6 +70,7 @@
           {% if name %}name="{{ name }}" value="true"{% endif %}
           {% if disabled %}disabled{% endif %}
           {% if alpine_disabled %}:disabled="{{ alpine_disabled }}"{% endif %}
+          {% if label_x_text %}x-text="{{ label_x_text }}"{% endif %}
         >
     {% if icon_position|default:'left' == 'left' %}
       {% if icon_html %}

templates/v3/user_profile_edit.html

@@ -11,6 +11,15 @@
   <script type="module" src="{% static 'js/v3/wysiwyg-editor.js' %}"></script>
 {% endblock %}
 
+{% comment %} Section save state is shown on each submit button (see saved_sections)
+instead of the legacy toast; still iterate `messages` so any queued message is
+flushed rather than leaking onto the next page. {% endcomment %}
+{% block messages %}
+  <div id="messages" class="w-full text-center transition-opacity" x-data="{show: true}">
+    {% for message in messages %}{% endfor %}
+  </div>
+{% endblock messages %}
+
 {% block content %}
   <div class="user-profile__container">
     <div class="user-profile__profile-content-area">
@@ -19,7 +28,11 @@
           {% comment %} novalidate: this form still contains required fields (tagline, bio, links) with
           no save handler yet; native constraint validation would silently block "Save changes" for
           sections that are otherwise ready. Server-side validation is authoritative. {% endcomment %}
-          <form method="post" action="{% url 'profile-account' %}?edit=true" class="card__form" enctype="multipart/form-data" novalidate>
+          <form method="post" action="{{ profile_account_edit_url }}" class="card__form" enctype="multipart/form-data" novalidate
+                x-data="createSectionForm({{ saved_sections.v3_update_profile|yesno:'true,false' }})"
+                @submit="handleSubmit($event)"
+                @input="saved = false" @change="saved = false"
+                @reset="saved = {{ saved_sections.v3_update_profile|yesno:'true,false' }}">
           {% csrf_token %}
           <div class="card__header">
             <span class="card__title">Profile</span>
@@ -144,8 +157,8 @@
           </div>
           <hr class="card__hr" aria-hidden="true" />
           <div class="card__cta_section">
-            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_profile' label='Save changes' only %}
-            {% include 'v3/includes/_button.html' with style='secondary' url=profile_account_url label='Cancel' only %}
+            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_profile' label='Save changes' label_x_text="saved ? 'Changes Saved' : 'Save changes'" alpine_disabled='saved' only %}
+            {% include 'v3/includes/_button.html' with style='secondary' type='reset' label='Cancel' only %}
           </div>
           </form>
         </div>
@@ -168,7 +181,10 @@
       </div>
       <div class="user-profile__col">
         <div class="basic-card card user-profile__update-details">
-          <form method="post" action="{% url 'profile-account' %}?edit=true" class="card__form">
+          <form method="post" action="{{ profile_account_edit_url }}" class="card__form"
+                x-data="createSectionForm({{ saved_sections.v3_update_details|yesno:'true,false' }})"
+                @submit="handleSubmit($event)"
+                @input="saved = false" @change="saved = false">
           {% csrf_token %}
           <div class="card__header">
             <span class="card__title">Update Details</span>
@@ -184,7 +200,7 @@
           </div>
           <hr class="card__hr" aria-hidden="true" />
           <div class="card__cta_section">
-            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_details' label='Save details' only %}
+            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_details' label='Save details' label_x_text="saved ? 'Changes Saved' : 'Save details'" alpine_disabled='saved' only %}
           </div>
           </form>
         </div>
@@ -209,7 +225,10 @@
           </div>
         </div>
         <div class="basic-card card user-profile__email-preferences-card">
-          <form method="post" action="{% url 'profile-account' %}?edit=true" class="card__form">
+          <form method="post" action="{{ profile_account_edit_url }}" class="card__form"
+                x-data="createSectionForm({{ saved_sections.v3_update_email_preferences|yesno:'true,false' }})"
+                @submit="handleSubmit($event)"
+                @input="saved = false" @change="saved = false">
           {% csrf_token %}
           <div class="card__header">
             <span class="card__title">Email Preferences</span>
@@ -229,7 +248,7 @@
           </div>
           <hr class="card__hr" aria-hidden="true" />
           <div class="card__cta_section">
-            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_email_preferences' label='Update' only %}
+            {% include 'v3/includes/_button.html' with style='primary' type='submit' name='v3_update_email_preferences' label='Update' label_x_text="saved ? 'Changes Saved' : 'Update'" alpine_disabled='saved' only %}
           </div>
           </form>
         </div>
@@ -283,6 +302,44 @@
 
 
   document.addEventListener('alpine:init', () => {
+    // Submits a section's form via fetch so a successful save can flip its
+    // button to "Changes Saved" without a full-page navigation. On any
+    // non-success outcome (validation error, network failure, JS/fetch
+    // unsupported) it falls back to a real form submission, which the
+    // server renders/redirects exactly as it did before this existed.
+    window.createSectionForm = function (initialSaved) {
+      return {
+        saved: initialSaved,
+        _bypassFetch: false,
+        async handleSubmit(event) {
+          if (this._bypassFetch) {
+            this._bypassFetch = false
+            return
+          }
+          event.preventDefault()
+          const form = event.target
+          const submitter = event.submitter
+          let succeeded = false
+          try {
+            const response = await fetch(form.action, {
+              method: 'POST',
+              body: new FormData(form, submitter),
+              headers: { 'X-Requested-With': 'XMLHttpRequest' },
+            })
+            const contentType = response.headers.get('content-type') || ''
+            if (response.ok && contentType.includes('application/json')) {
+              this.saved = true
+              succeeded = true
+            }
+          } catch (_) {}
+          if (!succeeded) {
+            this._bypassFetch = true
+            form.requestSubmit(submitter)
+          }
+        },
+      }
+    }
+
     window.createTagline = function () {
       const taglineInput = document.querySelector("input[name='{{user_profile_form.tagline.name}}']")
 

users/forms.py

@@ -232,7 +232,7 @@ def __init__(self, *args, **kwargs):
         commit_emails = kwargs.pop("commit_emails", None)
         self._user = kwargs.pop("user", None)
         super().__init__(*args, **kwargs)
-        self.fields["country"].choices = list(countries)
+        self.fields["country"].choices = [("", "No country")] + list(countries)
         if links:
             self.link_formset = V3ProfileLinkFormset(
                 initial=[

users/tests/test_v3_profile_edit.py

@@ -163,6 +163,61 @@ def test_v3_update_details_duplicate_username_shows_inline_error(user, tp):
     assert user.display_name != "taken-name"
 
 
+@waffle.testutils.override_flag("v3", active=True)
+def test_v3_update_profile_redirect_flags_saved_section(user, tp):
+    """The redirect after a successful save carries which section was saved,
+    so that section's submit button can render a "Changes Saved" state
+    instead of the legacy toast."""
+    with tp.login(user):
+        response = tp.post(
+            f"{tp.reverse('profile-account')}?edit=true",
+            data={"v3_update_profile": "true", "hide_github": "on"},
+        )
+        assert response.status_code == 302
+        assert response.url == (
+            f"{tp.reverse('profile-account')}?edit=true&saved=v3_update_profile"
+        )
+
+
+@waffle.testutils.override_flag("v3", active=True)
+def test_v3_update_profile_ajax_save_returns_json_without_redirect(user, tp):
+    """A fetch-based submit (see createSectionForm in user_profile_edit.html)
+    gets a JSON response instead of a redirect, so the button can flip to
+    "Changes Saved" without a full-page navigation."""
+    with tp.login(user):
+        response = tp.post(
+            f"{tp.reverse('profile-account')}?edit=true",
+            data={"v3_update_profile": "true", "hide_github": "on"},
+            extra={"HTTP_X_REQUESTED_WITH": "XMLHttpRequest"},
+        )
+        assert response.status_code == 200
+        assert response["Content-Type"] == "application/json"
+        assert response.json() == {"saved": "v3_update_profile"}
+    user.refresh_from_db()
+    assert user.hide_github_activity is True
+
+
+@waffle.testutils.override_flag("v3", active=True)
+def test_v3_edit_page_marks_only_the_saved_section(user, tp):
+    with tp.login(user):
+        response = tp.get(
+            f"{tp.reverse('profile-account')}?edit=true&saved=v3_update_details"
+        )
+        tp.response_200(response)
+        saved_sections = response.context["saved_sections"]
+        assert saved_sections["v3_update_details"] is True
+        assert saved_sections["v3_update_profile"] is False
+        assert saved_sections["v3_update_email_preferences"] is False
+
+
+@waffle.testutils.override_flag("v3", active=True)
+def test_v3_edit_page_no_section_saved_by_default(user, tp):
+    with tp.login(user):
+        response = tp.get(f"{tp.reverse('profile-account')}?edit=true")
+        tp.response_200(response)
+        assert not any(response.context["saved_sections"].values())
+
+
 @waffle.testutils.override_flag("v3", active=True)
 def test_v3_update_email_preferences_saves(user, tp):
     with tp.login(user):

users/views.py

@@ -6,7 +6,7 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib import auth
 from django.contrib.messages.views import SuccessMessageMixin
-from django.http import HttpResponseRedirect
+from django.http import HttpResponseRedirect, JsonResponse
 from django.urls import reverse, reverse_lazy
 from django.views.generic import DetailView, FormView
 from django.views.generic.base import TemplateView
@@ -135,6 +135,9 @@ def get_v3_edit_initial(self):
             ),
         }
 
+    def get_v3_edit_url(self):
+        return f"{reverse('profile-account')}?edit=true"
+
     def get_v3_edit_context(self, form=None):
         """Context for the v3 edit-profile template. `form` is a bound form
         (with errors) when re-rendering after a failed POST; otherwise a
@@ -145,10 +148,14 @@ def get_v3_edit_context(self, form=None):
                 user_links={"website": "www.example.com"},
                 initial=self.get_v3_edit_initial(),
             )
+        saved_section = self.request.GET.get("saved")
         return {
             "user_profile_form": form,
             "country_options": form.fields["country"].choices,
-            "profile_account_url": reverse("profile-account"),
+            "profile_account_edit_url": self.get_v3_edit_url(),
+            "saved_sections": {
+                key: key == saved_section for key in self.V3_EDIT_SECTIONS
+            },
             "badge_tiers": [
                 {"tier": "1", "name": "Bronze"},
                 {"tier": "2", "name": "Silver"},
@@ -561,15 +568,15 @@ def post_v3(self, request, *args, **kwargs):
         """Handle the v3 edit-profile page's independently-submitted section
         forms. Each section has its own <form>/submit button; only the
         fields owned by that section are validated and persisted."""
-        edit_url = f"{reverse('profile-account')}?edit=true"
+        edit_url = self.get_v3_edit_url()
 
-        section = next(
-            (v for key, v in self.V3_EDIT_SECTIONS.items() if key in request.POST),
+        section_key = next(
+            (key for key in self.V3_EDIT_SECTIONS if key in request.POST),
             None,
         )
-        if section is None:
+        if section_key is None:
             return HttpResponseRedirect(edit_url)
-        section_fields, save_method_name = section
+        section_fields, save_method_name = self.V3_EDIT_SECTIONS[section_key]
 
         form = V3UserProfileForm(
             request.POST,
@@ -592,8 +599,16 @@ def post_v3(self, request, *args, **kwargs):
 
         getattr(self, save_method_name)(request.user, form)
 
-        messages.success(request, self.success_message)
-        return HttpResponseRedirect(edit_url)
+        # The saved section's submit button shows a "Changes Saved" state
+        # instead (see get_v3_edit_context's saved_sections); the legacy
+        # toast is suppressed on this page. JS submits this fetch-style (see
+        # createSectionForm in user_profile_edit.html) so a successful save
+        # can flip the button state without a full-page navigation; a plain
+        # HTML form post (no JS) still gets the redirect it needs to see the
+        # saved state on reload.
+        if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            return JsonResponse({"saved": section_key})
+        return HttpResponseRedirect(f"{edit_url}&saved={section_key}")
 
     def _save_v3_visibility_section(self, user, form):
         user.hide_github_activity = form.cleaned_data["hide_github"]