Add a separate page for linking to documentation

It’s going to get too cluttered to have these links on the API index
page.

app/main/views/api_keys.py

@@ -16,6 +16,15 @@ def api_integration(service_id):
     )
 
 
+@main.route("/services/<service_id>/api/documentation")
+@login_required
+@user_has_permissions('manage_api_keys')
+def api_documentation(service_id):
+    return render_template(
+        'views/api/documentation.html'
+    )
+
+
 @main.route("/services/<service_id>/api/keys")
 @login_required
 @user_has_permissions('manage_api_keys')

app/templates/views/api/documentation.html

@@ -0,0 +1,35 @@
+{% 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
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    Documentation
+  </h1>
+
+  <ul class="list list-bullet">
+    {% for name, url in [
+      ('Java client', 'https://github.com/alphagov/notifications-java-client'),
+      ('Node JS client', 'https://github.com/alphagov/notifications-node-client'),
+      ('PHP client', 'https://github.com/alphagov/notifications-php-client'),
+      ('Python client', 'https://github.com/alphagov/notifications-python-client'),
+      ('Ruby client', '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 %}

app/templates/views/api/index.html

@@ -13,20 +13,6 @@
   </h1>
 
   <a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
-
+  <a href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</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 %}

tests/app/main/views/test_api_keys.py

@@ -21,6 +21,21 @@ def test_should_show_api_page(
         assert page.h1.string.strip() == 'API integration'
 
 
+def test_should_show_api_documentation_page(
+    app_,
+    mock_login,
+    api_user_active,
+    mock_get_service,
+    mock_has_permissions
+):
+    with app_.test_request_context(), app_.test_client() as client:
+        client.login(api_user_active)
+        response = client.get(url_for('main.api_documentation', service_id=str(uuid.uuid4())))
+        assert response.status_code == 200
+        page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
+        assert page.h1.string.strip() == 'Documentation'
+
+
 def test_should_show_empty_api_keys_page(app_,
                                          api_user_pending,
                                          mock_login,