support: Add CSS grid for confirmation objects in query results.

corporate/tests/test_support_views.py

@@ -622,13 +622,13 @@ class TestSupportEndpoint(ZulipTestCase):
         ) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">preregistration user</span>\n',
+                    '<span class="label">confirmation</span>\n',
                     f"<b>Email</b>: {email}",
                 ],
                 result,
             )
             if invite:
-                self.assert_in_success_response(['<span class="label">invite</span>'], result)
+                self.assert_in_success_response(["<h3>Invite</h3>"], result)
                 self.assert_in_success_response(
                     [
                         "<b>Expires in</b>: 1\xa0week, 3\xa0days",
@@ -638,7 +638,7 @@ class TestSupportEndpoint(ZulipTestCase):
                 )
                 self.assert_in_success_response([], result)
             else:
-                self.assert_not_in_success_response(['<span class="label">invite</span>'], result)
+                self.assert_not_in_success_response(["<h3>Invite</h3>"], result)
                 self.assert_in_success_response(
                     [
                         "<b>Expires in</b>: 1\xa0day",
@@ -650,8 +650,8 @@ class TestSupportEndpoint(ZulipTestCase):
         def check_realm_creation_query_result(result: "TestHttpResponse", email: str) -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">preregistration user</span>\n',
-                    '<span class="label">realm creation</span>\n',
+                    '<span class="label">confirmation</span>\n',
+                    "<h3>Realm creation</h3>\n",
                     "<b>Link</b>: http://testserver/accounts/do_confirm/",
                     "<b>Expires in</b>: 1\xa0day",
                 ],
@@ -661,7 +661,8 @@ class TestSupportEndpoint(ZulipTestCase):
         def check_multiuse_invite_link_query_result(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">multiuse invite</span>\n',
+                    '<span class="label">confirmation</span>\n',
+                    "<h3>Multiuse invite</h3>\n",
                     "<b>Link</b>: http://zulip.testserver/join/",
                     "<b>Expires in</b>: 1\xa0week, 3\xa0days",
                 ],
@@ -671,7 +672,8 @@ class TestSupportEndpoint(ZulipTestCase):
         def check_realm_reactivation_link_query_result(result: "TestHttpResponse") -> None:
             self.assert_in_success_response(
                 [
-                    '<span class="label">realm reactivation</span>\n',
+                    '<span class="label">confirmation</span>\n',
+                    "<h3>Realm reactivation</h3>\n",
                     "<b>Link</b>: http://zulip.testserver/reactivate/",
                     "<b>Expires in</b>: 1\xa0day",
                 ],

templates/corporate/support/support.html

@@ -70,62 +70,60 @@
 
         {% for confirmation in confirmations %}
         {% set object = confirmation.object %}
-        <div class="support-query-result">
-            {% if confirmation.type == Confirmation.USER_REGISTRATION %}
-            <span class="label">preregistration user</span>
-            {% set email = object.email %}
-            {% set realm = object.realm %}
-            {% set show_realm_details = True %}
-            {% elif confirmation.type == Confirmation.REALM_CREATION %}
-            <span class="label">preregistration user</span>
-            <span class="label">realm creation</span>
-            {% set email = object.email %}
-            {% set show_realm_details = False %}
-            {% elif confirmation.type == Confirmation.INVITATION %}
-            <span class="label">preregistration user</span>
-            <span class="label">invite</span>
-            {% set email = object.email %}
-            {% set realm = object.realm %}
-            {% set show_realm_details = True %}
-            {% elif confirmation.type == Confirmation.MULTIUSE_INVITE %}
-            <span class="label">multiuse invite</span>
-            {% set realm = object.realm %}
-            {% set show_realm_details = False %}
-            {% elif confirmation.type == Confirmation.REALM_REACTIVATION %}
-            <span class="label">realm reactivation</span>
-            {% set realm = object %}
-            {% set show_realm_details = False %}
-            {% endif %}
-            <br />
-            <br />
-            {% if email %}
-            <b>Email</b>: {{ email }}<br />
-            {% endif %}
-            <b>Link</b>: {{ confirmation.url }}
-            <a title="Copy link" class="copy-button" data-copytext="{{ confirmation.url }}">
-                <i class="fa fa-copy"></i>
-            </a><br />
-            <b>Expires in</b>: {{ confirmation.expires_in }}<br />
-            {% if confirmation.link_status %}
-            <b>Status</b>: {{ confirmation.link_status  }}
-            {% endif %}
-            <br />
-            {% if show_realm_details %}
-            <hr />
-            <div>
-                {% with %}
-                    {% set format_discount = format_discount %}
-                    {% set dollar_amount = dollar_amount %}
-                    {% include "corporate/support/realm_details.html" %}
-                {% endwith %}
+        <div class="support-query-result confirmation-container">
+            <div class="confirmation-information-section">
+                <span class="label">confirmation</span>
+                {% if confirmation.type == Confirmation.USER_REGISTRATION %}
+                <h3>Pre-registration user</h3>
+                {% set email = object.email %}
+                {% set realm = object.realm %}
+                {% set show_realm_details = True %}
+                {% elif confirmation.type == Confirmation.REALM_CREATION %}
+                <h3>Realm creation</h3>
+                {% set email = object.email %}
+                {% set show_realm_details = False %}
+                {% elif confirmation.type == Confirmation.INVITATION %}
+                <h3>Invite</h3>
+                {% set email = object.email %}
+                {% set realm = object.realm %}
+                {% set show_realm_details = True %}
+                {% elif confirmation.type == Confirmation.MULTIUSE_INVITE %}
+                <h3>Multiuse invite</h3>
+                {% set realm = object.realm %}
+                {% set show_realm_details = False %}
+                {% elif confirmation.type == Confirmation.REALM_REACTIVATION %}
+                <h3>Realm reactivation</h3>
+                {% set realm = object %}
+                {% set show_realm_details = False %}
+                {% endif %}
+                {% if email %}
+                <b>Email</b>: {{ email }}<br />
+                {% endif %}
+                <b>Link</b>: {{ confirmation.url }}
+                <a title="Copy link" class="copy-button" data-copytext="{{ confirmation.url }}">
+                    <i class="fa fa-copy"></i>
+                </a><br />
+                <b>Expires in</b>: {{ confirmation.expires_in }}<br />
+                {% if confirmation.link_status %}
+                <b>Status</b>: {{ confirmation.link_status  }}<br />
+                {% endif %}
+            </div>
+            <div class="confirmation-realm-section">
+                {% if show_realm_details %}
+                    {% with %}
+                        {% set format_discount = format_discount %}
+                        {% set dollar_amount = dollar_amount %}
+                        {% include "corporate/support/realm_details.html" %}
+                    {% endwith %}
+                {% elif realm %}
+                    <span class="label">realm</span>
+                    <h3>{{ realm.string_id }}</h3>
+                {% else %}
+                    <span class="label">realm</span>
+                    <h3>N/A</h3>
+                {% endif %}
             </div>
-            {% elif realm %}
-            <b>Realm</b>: {{ realm.string_id }}
-            <br />
-            {% endif %}
-            <br />
         </div>
-        <br />
         {% endfor %}
     </div>
 </div>

web/styles/portico/activity.css

@@ -355,6 +355,23 @@ tr.admin td:first-child {
     grid-area: realm;
 }
 
+.confirmation-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas: "confirmation-realm confirmation";
+}
+
+.confirmation-information-section {
+    grid-area: confirmation;
+}
+
+.confirmation-realm-section {
+    grid-area: confirmation-realm;
+}
+
+.confirmation-information-section,
+.confirmation-realm-section,
 .user-information-section,
 .user-realm-information-section,
 .remote-realms-section,
@@ -364,11 +381,13 @@ tr.admin td:first-child {
     padding: 10px;
 }
 
+.confirmation-realm-section,
 .user-realm-information-section,
 .remote-server-section {
     background-color: hsl(60deg 11% 86%);
 }
 
+.confirmation-information-section,
 .user-information-section,
 .remote-realms-section {
     background-color: hsl(60deg 12% 90%);