Use confirmation banner for revoking API keys

Currently revoking an API key takes you to a separate page. It should
work the same way as other destructive actions, ie staying on the same
page but with a banner asking you to confirm the action.

app/main/views/api_keys.py

@@ -110,8 +110,9 @@ def revoke_api_key(service_id, key_id):
     key_name = api_key_api_client.get_api_keys(service_id=service_id, key_id=key_id)['apiKeys'][0]['name']
     if request.method == 'GET':
         return render_template(
-            'views/api/keys/revoke.html',
+            'views/api/keys.html',
-            key_name=key_name
+            revoke_key=key_name,
+            keys=api_key_api_client.get_api_keys(service_id=service_id)['apiKeys'],
         )
     elif request.method == 'POST':
         api_key_api_client.revoke_api_key(service_id=service_id, key_id=key_id)

app/templates/views/api/keys.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/banner.html" import banner_wrapper %}
 {% 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 %}
@@ -9,6 +10,22 @@
 
 {% block maincolumn_content %}
 
+  {% if revoke_key %}
+    <div class="bottom-gutter">
+      {% call banner_wrapper(type='dangerous', subhead='Are you sure you want to revoke this API key?') %}
+        <p>
+          ‘{{ revoke_key }}’ will no longer let you connect to GOV.UK Notify.
+        </p>
+        <form method='post'>
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+          <input type="submit" class="button" name="delete" value="Confirm" />
+        </form>
+      {% endcall %}
+    </div>
+  {% else %}
+
+  {% endif %}
+
   <div class="grid-row">
     <div class="column-two-thirds">
       <h1 class="heading-large">

app/templates/views/api/keys/revoke.html

@@ -1,31 +0,0 @@
-{% extends "withnav_template.html" %}
-{% from "components/page-footer.html" import page_footer %}
-{% from "components/api-key.html" import api_key %}
-
-{% block service_page_title %}
-  Revoke API key
-{% endblock %}
-
-{% block maincolumn_content %}
-
-    <h1 class="heading-large">
-      Revoke API key
-    </h1>
-
-    <p>
-      ‘{{ key_name }}’ will no longer let you connect to GOV.UK Notify.
-    </p>
-    <p>
-      You can’t undo this.
-    </p>
-
-    <form method="post">
-      {{ page_footer(
-        'Revoke this API key',
-        back_link=url_for('.api_keys', service_id=current_service.id),
-        back_link_text='Back to API keys',
-        destructive=True
-      ) }}
-    </form>
-
-{% endblock %}

tests/app/main/views/test_api_keys.py

@@ -4,8 +4,10 @@ from collections import OrderedDict
 import pytest
 from flask import url_for
 from bs4 import BeautifulSoup
+from unittest.mock import call
 
 from tests import validate_route_permission
+from tests.conftest import normalize_spaces, SERVICE_ONE_ID
 
 
 def test_should_show_api_page(
@@ -196,18 +198,27 @@ def test_cant_create_normal_api_key_in_trial_mode(
 
 
 def test_should_show_confirm_revoke_api_key(
-    logged_in_client,
+    client_request,
-    api_user_active,
-    mock_login,
     mock_get_api_keys,
-    mock_get_service,
-    mock_has_permissions,
     fake_uuid,
 ):
-    response = logged_in_client.get(url_for('main.revoke_api_key', service_id=fake_uuid, key_id=fake_uuid))
+    page = client_request.get(
-    assert response.status_code == 200
+        'main.revoke_api_key', service_id=SERVICE_ONE_ID, key_id=fake_uuid,
-    assert 'some key name' in response.get_data(as_text=True)
+        _test_page_title=False,
-    mock_get_api_keys.assert_called_once_with(service_id=fake_uuid, key_id=fake_uuid)
+    )
+    assert normalize_spaces(page.select('.banner-dangerous')[0].text) == (
+        'Are you sure you want to revoke this API key? '
+        '‘some key name’ will no longer let you connect to GOV.UK Notify.'
+    )
+    assert mock_get_api_keys.call_args_list == [
+        call(
+            key_id=fake_uuid,
+            service_id='596364a0-858e-42c8-9062-a8fe822260eb',
+        ),
+        call(
+            service_id='596364a0-858e-42c8-9062-a8fe822260eb'
+        ),
+    ]
 
 
 def test_should_redirect_after_revoking_api_key(