From e049e691fd5e35cb4690f55a853812cd000a83bb Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 25 Apr 2016 09:48:26 +0100
Subject: [PATCH] Use the API key pattern for showing service ID
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When we show an identifier, like an ID or a key, we have a pattern which
adds a ‘copy to clipboard’ button. We weren’t using this pattern for
service ID.

This commit also moves it under the table, so hopefully people will be
less likely to confuse the service ID for an API key when scanning down
the page.
---
 app/assets/javascripts/apiKey.js  |  2 ++
 app/templates/views/api-keys.html | 11 ++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js
index 2bbfa174c..e7905e2d0 100644
--- a/app/assets/javascripts/apiKey.js
+++ b/app/assets/javascripts/apiKey.js
@@ -33,6 +33,8 @@
             key = $component.data('key'),
             thing = $component.data('thing');
 
+      console.log(thing)
+
       $component
         .html(states.keyVisible(key, thing))
         .attr('aria-live', 'polite')
diff --git a/app/templates/views/api-keys.html b/app/templates/views/api-keys.html
index eca7175cf..5a187d27f 100644
--- a/app/templates/views/api-keys.html
+++ b/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
@@ -22,17 +23,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() %}
@@ -53,4 +48,6 @@
     <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 %}