Make the flow of using templates better

For users who:
- want to send messages from a template
- want to edit templates

For developers:
- who need to get the ID of a template

This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.

This means:
- moving ‘send yourself a test’ onto the send messages page, and making
  it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
  obvious what the template ID is

app/templates/components/api-key.html

@@ -1,8 +1,8 @@
-{% macro api_key(key, name) %}
+{% macro api_key(key, name, thing="API key") %}
   <h2 class="api-key-name">
     {{ name }}
   </h2>
-  <div data-module="api-key" data-key="{{ key }}">
+  <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}">
     <span class="api-key-key">{{ key }}</span>
   </div>
 {% endmacro %}

app/templates/components/sms-message.html

@@ -1,6 +1,4 @@
-{% macro sms_message(
-  body, recipient=None, name=None, id=None, edit_link=None, from=None
-) %}
+{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}

app/templates/views/send-from-api.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/email-message.html" import email_message %}
 {% from "components/sms-message.html" import sms_message %}
+{% from "components/api-key.html" import api_key %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -9,50 +10,32 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-      API integration
+      API info
   </h1>
 
-  <div class="grid-row">
-    <div class="column-three-quarters">
-
-      {% if 'email' == template.template_type %}
-        {{ email_message(
-          template.subject,
-          template.formatted_as_markup,
-        ) }}
-      {% elif 'sms' == template.template_type %}
+  {% if 'email' == template.template_type %}
+    {{ email_message(
+      template.formatted_subject_as_markup,
+      template.formatted_as_markup,
+    ) }}
+  {% elif 'sms' == template.template_type %}
+    <div class="grid-row">
+      <div class="column-two-thirds">
         {{ sms_message(
           template.formatted_as_markup,
         ) }}
-      {% endif %}
-
-      <p>
-        You can send this message from your existing apps or systems by
-        connecting them to GOV.UK Notify.
-      </p>
-      <p>
-        You’ll need to work with a developer to do this.
-      </p>
-
+      </div>
     </div>
+  {% endif %}
+
+  <div class="bottom-gutter">
+    {{ api_key(template.id, name="Template ID", thing='template ID') }}
   </div>
 
-  <h3 class="heading-small">
-    Example payload for this template
-  </h3>
-  {{payload|syntax_highlight_json}}
-
-  <h3 class="heading-small">
-    Endpoint
-  </h3>
-
-  <div class="highlight" style="background: #f8f8f8">
-    <pre style="line-height: 125%">
-      {{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
-        template.template_type
-      ) -}}
-    </pre>
-  </div>
+  {% if personalisation %}
+    <h2 class="heading-small">Personalisation (all fields are required)</h2>
+    {{ personalisation|syntax_highlight_json }}
+  {% endif %}
 
   <p>
     <br />See the <a href="{{ url_for(".documentation") }}">developer documentation</a> for full details.

app/templates/views/send.html

@@ -11,32 +11,34 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Send from a CSV file</h1>
 
-  {% if 'sms' == template.template_type %}
-    <div class="grid-row">
-      <div class="column-two-thirds">
+  <h1 class="heading-large">Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}</h1>
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+      {% if 'sms' == template.template_type %}
         {{ sms_message(template.formatted_as_markup) }}
-      </div>
+      {% elif 'email' == template.template_type %}
+        {{ email_message(
+          template.formatted_subject_as_markup,
+          template.formatted_as_markup
+        ) }}
+      {% endif %}
     </div>
-  {% elif 'email' == template.template_type %}
-    {{ email_message(
-      template.formatted_subject_as_markup,
-      template.formatted_as_markup,
-      from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
-      from_name=current_service.name
-    ) }}
-  {% endif %}
+    <div class="column-one-third">
+      <a href="{{ url_for(".send_message_to_self", service_id=current_service.id, template_id=template.id) }}" class='secondary-button'>Send yourself a test</a>
+    </div>
+  </div>
 
   <h2 class="heading-medium">
-    You need
+    Make a CSV file with
     {{ template.placeholders|length + 1 }}
     {% if template.placeholders %}
-      columns
+      columns,
     {% else %}
-      column
+      column,
     {% endif %}
-    in your file, like this:
+    like this:
   </h2>
 
   {% call(item, row_number) list_table(

app/templates/views/templates/_template.html

@@ -10,22 +10,21 @@
     ) }}
   {% elif 'sms' == template.template_type %}
     {{ sms_message(
-        template.formatted_as_markup,
-        name=template.name if show_title else None
-      ) }}
+      template.formatted_as_markup,
+      name=template.name if show_title else None
+    ) }}
   {% endif %}
 </div>
 <div class="column-one-third">
   <div class="sms-message-use-links{% if show_title %}-with-title{% endif %}">
     {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
-      <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}">Send from a CSV file</a>
-      <a href="{{ url_for(".send_message_to_self", service_id=current_service.id, template_id=template.id) }}">Send yourself a test</a>
-    {% endif %}
-    {% if current_user.has_permissions(permissions=['manage_api_keys']) %}
-      <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API integration</a>
+      <a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}">
+      Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}
+      </a>
     {% endif %}
     {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
        <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
     {% endif %}
+    <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API info</a>
   </div>
 </div>

app/templates/views/templates/template.html

@@ -14,15 +14,14 @@
   <h1 class="heading-large">{{ template.name }}</h1>
 
   <div class="grid-row">
-    {% include 'views/templates/_template.html' %}
+    {% with show_title=False %}
+      {% include 'views/templates/_template.html' %}
+    {% endwith %}
   </div>
 
-  <p>
-    <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template.template_type) }}">
-      All
-      {{ 'email' if 'email' == template.template_type else 'text message' }}
-      templates
-    </a>
-  </p>
+  {{ page_footer(
+    secondary_link=url_for('.choose_template', service_id=current_service.id, template_type=template.template_type),
+    secondary_link_text='All {} templates'.format('email' if 'email' == template.template_type else 'text message')
+  ) }}
 
 {% endblock %}