Add email reply address to ID to the page

The first users of multiple email reply to addresses will be using the
API. This means that the need to be able to specify the ID of the reply
to address they want.

We chose to implement it like this instead of by passing the address in
directly because that means deploying code. For some teams deploying
code can take weeks, and we’d like to let teams have the flexibility to
make changes faster than this.

Same as for templates, you shouldn’t have to go to the _edit_ page in
order to get the ID. This means listing them on the page where you see
all the reply to addresses.

Listing the IDs like this means that it’s not really a table any more,
because the information isn’t organised in columns. So I think it makes
sense to reuse the pattern from the manage team page, which has a
similar relationship between the information.

app/templates/components/api-key.html

@@ -1,7 +1,9 @@
-{% macro api_key(key, name, thing="API key") %}
-  <h2 class="api-key-name">
-    {{ name }}
-  </h2>
+{% macro api_key(key, name=None, thing="API key") %}
+  {% if name %}
+    <h2 class="api-key-name">
+      {{ name }}
+    </h2>
+  {% endif %}
   <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
     <span class="api-key-key">{{ key }}</span>
   </div>

app/templates/views/service-settings/email_reply_to.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/textbox.html" import textbox %}
+{% from "components/api-key.html" import api_key %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table %}
 
@@ -19,28 +19,29 @@
 	   <a href="{{ url_for('.service_add_email_reply_to', service_id=current_service.id) }}" class="button align-with-heading">Add email address</a>
 	 </div>
   </div>
-  <div class="bottom-gutter-3-2 body-copy-table">
-    {% call(item, row_number) list_table(
-      reply_to_email_addresses,
-      empty_message="You haven’t added any email reply to addresses yet",
-      caption="Reply to email addresses",
-      caption_visible=false,
-      field_headings=[
-        'Email addresses',
-        'Action'
-      ],
-      field_headings_visible=False
-    ) %}
-        {% call field() %}
-          {{ item.email_address }}
-          {% if item.is_default %}
-            <span class="hint">
-              {{ "(default)" }}
-            </span>
-          {% endif %}
-        {% endcall %}
-		{{ edit_field('Change', url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id)) }}
-    {% endcall %}
+  <div class="user-list">
+    {% if not reply_to_email_addresses %}
+      <div class="user-list-item">
+        <span class="hint">You haven’t added any email reply to addresses yet</span>
+      </div>
+    {% endif %}
+    {% for item in reply_to_email_addresses %}
+      <div class="user-list-item">
+        <h3>
+          <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
+            {%- if item.is_default -%}
+              (default)
+            {% endif %}
+          </span>
+        </h3>
+        <ul class="tick-cross-list">
+          <li class="tick-cross-list-edit-link">
+            <a href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
+          </li>
+        </ul>
+        {{ api_key(item.id, thing="ID") }}
+      </div>
+    {% endfor %}
   </div>
   <div class="grid-row">
     <div class="column-five-sixths">

tests/app/main/views/test_service_settings.py

@@ -693,28 +693,32 @@ def test_default_email_reply_to_address_has_default_hint(
     client_request,
     multiple_reply_to_email_addresses
 ):
-    page = client_request.get(
+    rows = client_request.get(
         'main.service_email_reply_to',
         service_id=SERVICE_ONE_ID
+    ).select(
+        '.user-list-item'
     )
 
-    assert normalize_spaces(page.select('tbody tr')[0].text) == "test@example.com (default) Change"
-    assert normalize_spaces(page.select('tbody tr')[1].text) == "test2@example.com Change"
-    assert normalize_spaces(page.select('tbody tr')[2].text) == "test3@example.com Change"
-    assert len(page.select('tbody tr')) == 3
+    assert normalize_spaces(rows[0].text) == "test@example.com (default) Change 1234"
+    assert normalize_spaces(rows[1].text) == "test2@example.com Change 5678"
+    assert normalize_spaces(rows[2].text) == "test3@example.com Change 9457"
+    assert len(rows) == 3
 
 
 def test_no_reply_to_email_addresses_message_shows(
     client_request,
     no_reply_to_email_addresses
 ):
-    page = client_request.get(
+    rows = client_request.get(
         'main.service_email_reply_to',
         service_id=SERVICE_ONE_ID
+    ).select(
+        '.user-list-item'
     )
 
-    assert normalize_spaces(page.select('tbody tr')[0].text) == "You haven’t added any email reply to addresses yet"
-    assert len(page.select('tbody tr')) == 1
+    assert normalize_spaces(rows[0].text) == "You haven’t added any email reply to addresses yet"
+    assert len(rows) == 1
 
 
 @pytest.mark.parametrize('reply_to_input, expected_error', [