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">