Add an index page for the API integration

This commit adds a placeholder page which, for now, just has links to
the API keys page and links to the clients.

There’s more stuff to come on this page, but this commit just does the
reorganising so that it’s easier to review.

app/main/views/api_keys.py

@@ -7,6 +7,15 @@ from app.utils import user_has_permissions
 from app.notify_client.api_key_api_client import KEY_TYPE_NORMAL, KEY_TYPE_TEST, KEY_TYPE_TEAM
 
 
+@main.route("/services/<service_id>/api")
+@login_required
+@user_has_permissions('manage_api_keys')
+def api_integration(service_id):
+    return render_template(
+        'views/api/index.html'
+    )
+
+
 @main.route("/services/<service_id>/api/keys")
 @login_required
 @user_has_permissions('manage_api_keys')

app/templates/main_nav.html

@@ -58,7 +58,7 @@
     <li><a href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
   {% endif %}
   {% if current_user.has_permissions(['manage_api_keys']) %}
-    <li><a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API integration</a></li>
+    <li><a href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li>
   {% endif %}
   </ul>
 </nav>

app/templates/views/api/index.html

@@ -0,0 +1,32 @@
+{% 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 integration – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    API integration
+  </h1>
+
+  <a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
+
+  <h2 class="heading-medium">API clients</h2>
+  <ul class="list list-bullet">
+    {% for name, url in [
+      ('Java', 'https://github.com/alphagov/notifications-java-client'),
+      ('Node JS', 'https://github.com/alphagov/notifications-node-client'),
+      ('PHP', 'https://github.com/alphagov/notifications-php-client'),
+      ('Python', 'https://quis.github.io/govuk_documentation_prototype/'),
+      ('Ruby', 'https://github.com/alphagov/notifications-ruby-client')
+    ] %}
+    <li>
+      <a href="{{ url }}">{{ name }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+
+{% endblock %}

app/templates/views/api/keys.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -11,7 +12,7 @@
   <div class="grid-row bottom-gutter-1-2">
     <div class="column-two-thirds">
       <h1 class="heading-large">
-        API integration
+        API keys
       </h1>
     </div>
     <div class="column-one-third">
@@ -26,8 +27,9 @@
     caption_visible=false,
     field_headings=[
       'API keys',
-      hidden_field_heading('Action')
+      'Action'
     ],
+    field_headings_visible=False
   ) %}
     {% call field() %}
       <div class="file-list">
@@ -58,19 +60,9 @@
     {{ api_key(current_service.id, "Service ID", thing="service ID") }}
   </div>
 
-  <h2 class="heading-medium">API clients</h2>
-  <ul class="list list-bullet">
-    {% for name, url in [
-      ('Java', 'https://github.com/alphagov/notifications-java-client'),
-      ('Node JS', 'https://github.com/alphagov/notifications-node-client'),
-      ('PHP', 'https://github.com/alphagov/notifications-php-client'),
-      ('Python', 'https://github.com/alphagov/notifications-python-client'),
-      ('Ruby', 'https://github.com/alphagov/notifications-ruby-client')
-    ] %}
-    <li>
-      <a href="{{ url }}">{{ name }}</a>
-    </li>
-    {% endfor %}
-  </ul>
+  {{ page_footer(
+    secondary_link=url_for('.api_integration', service_id=current_service.id),
+    secondary_link_text='Back to API integration'
+  ) }}
 
 {% endblock %}