Surface contact management panel

Author: alexeygrigorev

mailing/tests/test_operator_ui.py

@@ -915,10 +915,16 @@ def test_contact_detail_renders_summary_before_management_and_debug_sections(
     assert "Last sent" in html
     assert "Long Newsletter Audience Tag" in html
     assert "Recent Activity" in html
+    assert "Manage contact" in html
+    assert "Manage contact state, subscriptions, and tags" not in html
     assert "Campaign: Weekly update" in html
     assert f"/campaigns/{campaign.id}/#recipient-{recipient.id}" in html
-    assert html.index("Send Eligibility") < html.index("Membership and Tags") < html.index("Recent Activity")
-    assert html.index("Recent Activity") < html.index("Manage contact state, subscriptions, and tags")
+    assert html.index('id="sendability">Send Eligibility') < html.index('id="membership">Membership and Tags')
+    assert html.index('id="membership">Membership and Tags') < html.index('id="manage-contact-heading">Manage contact')
+    assert html.index('id="manage-contact-heading">Manage contact') < html.index('id="recent-activity">Recent Activity')
+    manage_html = html[html.index('<section class="detail-section manage-contact-panel"') :]
+    assert manage_html.index("Subscription") < manage_html.index("State") < manage_html.index("Add tag")
+    assert manage_html.index("Add tag") < manage_html.index("Remove tag")
     assert html.index("Full event timeline and audit details") > html.index("Recent Activity")
 
 

static/mailing/css/app.css

@@ -611,6 +611,16 @@ a.stat-link:focus {
   gap: var(--dm-space-3);
 }
 
+.manage-form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--dm-space-3);
+}
+
+.manage-form h3 {
+  margin-top: 0;
+}
+
 .compact-row {
   display: grid;
   gap: var(--dm-space-2);

templates/mailing/operator/contact_detail.html

@@ -127,6 +127,41 @@ <h3>Tags</h3>
     </div>
   </section>
 
+  <section class="detail-section manage-contact-panel" id="manage-contact" aria-labelledby="manage-contact-heading">
+    <div class="section-header">
+      <h2 id="manage-contact-heading">Manage contact</h2>
+    </div>
+    <div class="manage-form-grid">
+      <form class="summary-panel manage-form" method="post" action="{% url 'mailing:contact_subscription_update' contact.normalized_email %}">
+        {% csrf_token %}
+        <h3>Subscription</h3>
+        {% include "mailing/operator/_form_fields.html" with form=subscription_form %}
+        <div class="toolbar"><button type="submit">Update subscription</button></div>
+      </form>
+
+      <form class="summary-panel manage-form" method="post" action="{% url 'mailing:contact_state_update' contact.normalized_email %}">
+        {% csrf_token %}
+        <h3>State</h3>
+        {% include "mailing/operator/_form_fields.html" with form=contact_state_form %}
+        <div class="toolbar"><button type="submit">Update state</button></div>
+      </form>
+
+      <form class="summary-panel manage-form" method="post" action="{% url 'mailing:contact_tag_add' contact.normalized_email %}">
+        {% csrf_token %}
+        <h3>Add tag</h3>
+        {% include "mailing/operator/_form_fields.html" with form=tag_add_form %}
+        <div class="toolbar"><button type="submit">Add tag</button></div>
+      </form>
+
+      <form class="summary-panel manage-form" method="post" action="{% url 'mailing:contact_tag_remove' contact.normalized_email %}">
+        {% csrf_token %}
+        <h3>Remove tag</h3>
+        {% include "mailing/operator/_form_fields.html" with form=tag_remove_form %}
+        <div class="toolbar"><button type="submit">Remove tag</button></div>
+      </form>
+    </div>
+  </section>
+
   <section class="detail-section" aria-labelledby="recent-activity">
     <div class="section-header">
       <h2 id="recent-activity">Recent Activity</h2>
@@ -158,35 +193,6 @@ <h2 id="recent-activity">Recent Activity</h2>
     {% endif %}
   </section>
 
-  <details class="detail-section secondary-section" id="manage-contact">
-    <summary>Manage contact state, subscriptions, and tags</summary>
-    <div class="form-stack">
-      <form method="post" action="{% url 'mailing:contact_state_update' contact.normalized_email %}">
-        <h3>State</h3>
-        {% include "mailing/operator/_form_fields.html" with form=contact_state_form %}
-        <div class="toolbar"><button type="submit">Update state</button></div>
-      </form>
-
-      <form method="post" action="{% url 'mailing:contact_subscription_update' contact.normalized_email %}">
-        <h3>Subscription</h3>
-        {% include "mailing/operator/_form_fields.html" with form=subscription_form %}
-        <div class="toolbar"><button type="submit">Update subscription</button></div>
-      </form>
-
-      <form method="post" action="{% url 'mailing:contact_tag_add' contact.normalized_email %}">
-        <h3>Add tag</h3>
-        {% include "mailing/operator/_form_fields.html" with form=tag_add_form %}
-        <div class="toolbar"><button type="submit">Add tag</button></div>
-      </form>
-
-      <form method="post" action="{% url 'mailing:contact_tag_remove' contact.normalized_email %}">
-        <h3>Remove tag</h3>
-        {% include "mailing/operator/_form_fields.html" with form=tag_remove_form %}
-        <div class="toolbar"><button type="submit">Remove tag</button></div>
-      </form>
-    </div>
-  </details>
-
   <details class="detail-section secondary-section">
     <summary>Full send eligibility by scope</summary>
     {% if eligibility %}