Merge pull request #497 from alphagov/api-keys-page-improvements

API keys page improvements

app/templates/views/api-keys.html

@@ -1,5 +1,6 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
+{% from "components/api-key.html" import api_key %}
 
 {% block page_title %}
   API keys – GOV.UK Notify
@@ -7,13 +8,24 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    API keys
-  </h1>
+  <div class="grid-row">
+    <div class="column-two-thirds">
+      <h1 class="heading-large">
+        API keys
+      </h1>
+    </div>
+    <div class="column-one-third">
+      <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}" class="button align-with-heading">Create new API key</a>
+    </div>
+  </div>
 
   <p>
-    To connect to the API you will need to create an API Key. Each service can have multiple API Keys to allow
-    for test and live environments.
+    To connect to the API you need to create an API Key.
+  </p>
+  <p>
+    Each service can have multiple API Keys. This allows you to integrate a
+    number of systems, each with its own key. You can also have separate
+    keys for your development and test environments.
   </p>
 
   <p>
@@ -22,17 +34,11 @@
     developer documentation</a>.
   </p>
 
-  <h2 class="heading-medium">
-    Service ID
-  </h2>
-  <p class="api-key-key">
-    {{ current_service.id }}
-  </p>
-
   {% call(item, row_number) list_table(
     keys,
     empty_message="You haven’t created any API keys yet",
     caption="API keys",
+    caption_visible=False,
     field_headings=['Key name', hidden_field_heading('Action')]
   ) %}
     {% call field() %}
@@ -49,8 +55,6 @@
     {% endif %}
   {% endcall %}
 
-  <p class='table-show-more-link'>
-    <a href="{{ url_for('.create_api_key', service_id=current_service.id) }}">Create a new API key</a>
-  </p>
+  {{ api_key(current_service.id, "Service ID", thing="service ID") }}
 
 {% endblock %}