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/assets/javascripts/apiKey.js

@@ -6,13 +6,13 @@
   Modules.ApiKey = function() {
 
     const states = {
-      'keyVisible': key => `
+      'keyVisible': (key, thing) => `
         <span class="api-key-key">${key}</span>
-        <input type='button' class='api-key-button-copy' value='Copy API key to clipboard' />
+        <input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
       `,
-      'keyCopied': `
+      'keyCopied': thing => `
         <span class="api-key-key">Copied to clipboard</span>
-        <input type='button' class='api-key-button-show' value='Show API key' />
+        <input type='button' class='api-key-button-show' value='Show ${thing}' />
       `
     };
 
@@ -30,21 +30,22 @@
     this.start = function(component) {
 
       const $component = $(component),
-            key = $component.data('key');
+            key = $component.data('key'),
+            thing = $component.data('thing');
 
       $component
-        .html(states.keyVisible(key))
+        .html(states.keyVisible(key, thing))
         .attr('aria-live', 'polite')
         .on(
           'click', '.api-key-button-copy', () =>
             this.copyKey(
               $('.api-key-key', component)[0], () =>
-                $component.html(states.keyCopied)
+                $component.html(states.keyCopied(thing))
             )
         )
         .on(
           'click', '.api-key-button-show', () =>
-            $component.html(states.keyVisible(key))
+            $component.html(states.keyVisible(key, thing))
         );
 
     };

app/assets/javascripts/highlightTags.js

@@ -25,7 +25,7 @@
       this.initialHeight = this.$textbox.height();
 
       this.$backgroundMaskForeground.css({
-        'width': this.$textbox.width(),
+        'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
 

app/assets/stylesheets/app.scss

@@ -97,6 +97,10 @@ td {
   margin-bottom: 20px;
 }
 
+.heading-medium {
+  margin-top: $gutter;
+}
+
 #footer {
 
   .footer-categories {
@@ -132,3 +136,7 @@ a[rel='external'] {
 .hint {
   color: $secondary-text-colour;
 }
+
+.button {
+  padding: 0.3em 0.6em 0.2em 0.6em;
+}

app/assets/stylesheets/components/api-key.scss

@@ -11,10 +11,7 @@
     margin-bottom: 10px;
   }
 
-  &-button-show {
+  &-button-show,
-    @include button($grey-3);
-  }
-
   &-button-copy {
     @include button($grey-3);
   }

app/assets/stylesheets/components/email-message.scss

@@ -1,4 +1,5 @@
 $white-50-opaque: rgba($white, 0.5);
+$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
 
 .email-message {
 
@@ -63,7 +64,7 @@ $white-50-opaque: rgba($white, 0.5);
       position: absolute;
       left: 50%;
       bottom: -18px;
-      height: 25px;
+      height: 27px;
       display: inline-block;
       padding: 0;
       margin: 0 0 0 -30px;
@@ -75,23 +76,20 @@ $white-50-opaque: rgba($white, 0.5);
       cursor: pointer;
       width: 60px;
       text-decoration: none;
-      background: $grey-1;
+      background: $grey-3;
-      color: $white;
+      color: $text-colour;
       border-style: solid;
       border-width: 3px;
       border-color: $white;
-      border-radius: 6px;
+      box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque;
-      box-shadow: 0 0 0 1px $white-50-opaque;
 
       &:hover {
-        background: $link-hover-colour;
+        background: $grey-2;
       }
 
       &:focus,
       &:active {
-        background: $yellow;
+        border-color: $yellow;
-        border-color: $white;
-        color: $text-colour;
         outline: none;
       }
 

app/assets/stylesheets/components/page-footer.scss

@@ -5,7 +5,6 @@
   &-back-link {
     @include button($grey-1);
     display: inline-block;
-    padding: 0.52632em 0.78947em 0.26316em 0.78947em;
     margin-left: 10px;
   }
 

app/assets/stylesheets/components/pill.scss

@@ -2,7 +2,8 @@
 
   display: flex;
 
-  a, span {
+  a,
+  span {
     display: block;
     padding: 10px;  
     flex-grow: 1;
@@ -38,4 +39,4 @@
     border: 1px solid $grey-1;
     color: $text-colour;
   }
-}
+}

app/assets/stylesheets/components/secondary-button.scss

@@ -0,0 +1,8 @@
+.secondary-button {
+  @include button($grey-1);
+  padding: 0.3em 0.1em 0.2em 0.1em;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+}

app/assets/stylesheets/components/sms-message.scss

@@ -52,6 +52,7 @@
 .sms-message-use-links {
 
   @include copy-19;
+  margin-top: -5px;
 
   a {
     display: block;
@@ -68,7 +69,7 @@
 
 .sms-message-use-links-with-title {
   @extend %sms-message-use-links;
-  margin-top: 52px;
+  margin-top: 55px;
 }
 
 .sms-message-from {

app/assets/stylesheets/components/table.scss

@@ -112,13 +112,12 @@
   @include core-16;
   color: $secondary-text-colour;
   margin-top: -20px;
-  margin-bottom: $gutter * 1.5;
+  margin-bottom: $gutter * 1.3333;
   border-bottom: 1px solid $border-colour;
   padding-bottom: 10px;
   text-align: center;
 }
 
 a.table-show-more-link {
-  @include bold-16;
   color: $link-colour;
 }

app/assets/stylesheets/main.scss

@@ -49,6 +49,7 @@ $path: '/static/images/';
 @import 'components/api-key';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/pill';
+@import 'components/secondary-button';
 
 @import 'views/job';
 @import 'views/edit-template';

app/main/views/send.py

@@ -183,19 +183,16 @@ def send_message_to_self(service_id, template_id):
 @user_has_permissions('manage_api_keys')
 def send_from_api(service_id, template_id):
     template = Template(
-        service_api_client.get_service_template(service_id, template_id)['data']
+        service_api_client.get_service_template(service_id, template_id)['data'],
+        prefix=current_service['name']
     )
-    payload = {
+    personalisation = {
-        "to": current_user.mobile_number,
+        placeholder: "..." for placeholder in template.placeholders
-        "template": template.id,
-        "personalisation": {
-            placeholder: "{} 1".format(placeholder) for placeholder in template.placeholders
-        }
     }
     return render_template(
         'views/send-from-api.html',
         template=template,
-        payload=json.dumps(payload, indent=4)
+        personalisation=json.dumps(personalisation, indent=4) if personalisation else None
     )
 
 

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(
+{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %}
-  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">
+  {% if 'email' == template.template_type %}
-    <div class="column-three-quarters">
+    {{ email_message(
-
+      template.formatted_subject_as_markup,
-      {% if 'email' == template.template_type %}
+      template.formatted_as_markup,
-        {{ email_message(
+    ) }}
-          template.subject,
+  {% elif 'sms' == template.template_type %}
-          template.formatted_as_markup,
+    <div class="grid-row">
-        ) }}
+      <div class="column-two-thirds">
-      {% elif 'sms' == template.template_type %}
         {{ sms_message(
           template.formatted_as_markup,
         ) }}
-      {% endif %}
+      </div>
-
-      <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>
+  {% endif %}
+
+  <div class="bottom-gutter">
+    {{ api_key(template.id, name="Template ID", thing='template ID') }}
   </div>
 
-  <h3 class="heading-small">
+  {% if personalisation %}
-    Example payload for this template
+    <h2 class="heading-small">Personalisation (all fields are required)</h2>
-  </h3>
+    {{ personalisation|syntax_highlight_json }}
-  {{payload|syntax_highlight_json}}
+  {% endif %}
-
-  <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>
 
   <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 %}
+  <h1 class="heading-large">Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}</h1>
-    <div class="grid-row">
+
-      <div class="column-two-thirds">
+  <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 %}
+    <div class="column-one-third">
-    {{ email_message(
+      <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>
-      template.formatted_subject_as_markup,
+    </div>
-      template.formatted_as_markup,
+  </div>
-      from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
-      from_name=current_service.name
-    ) }}
-  {% endif %}
 
   <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,
+      template.formatted_as_markup,
-        name=template.name if show_title else None
+      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_messages", service_id=current_service.id, template_id=template.id) }}">
-      <a href="{{ url_for(".send_message_to_self", service_id=current_service.id, template_id=template.id) }}">Send yourself a test</a>
+      Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}
-    {% endif %}
+      </a>
-    {% 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>
     {% 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>
+  {{ page_footer(
-    <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template.template_type) }}">
+    secondary_link=url_for('.choose_template', service_id=current_service.id, template_type=template.template_type),
-      All
+    secondary_link_text='All {} templates'.format('email' if 'email' == template.template_type else 'text message')
-      {{ 'email' if 'email' == template.template_type else 'text message' }}
+  ) }}
-      templates
-    </a>
-  </p>
 
 {% endblock %}

docs/index.md

@@ -158,7 +158,7 @@ where:
 * `to` is the phone number (required)
 * `template` is the template ID to send (required)
  
-  **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates**, click on **Edit template** and recover the template id from the url eg `/templates/<templateID>/edit` 
+  **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates** or **Email templates** and click on **API info**. 
 
 * `personalisation` (optional) specifies the values for the placeholders in your templates
 

tests/app/main/views/test_send.py

@@ -419,10 +419,6 @@ def test_route_choose_template_send_messages_permissions(mocker,
             "main.send_messages",
             service_id=service_one['id'],
             template_id=template_id) in page
-        assert url_for(
-            "main.send_message_to_self",
-            service_id=service_one['id'],
-            template_id=template_id) in page
         assert url_for(
             "main.edit_service_template",
             service_id=service_one['id'],