Always show live key, reword key labels

This is trying to resolve these confusions:

- that you’re in trial mode, which means you can’t have a live key yet (
  or you can but it wont work, which is what we used to have)
- what does simulate mean

The create key page is the right place to resolve these confusions
because it’s where users are actively reading.

This commit also removes the trial mode banner from API integration
page because this where users _aren’t_ actively reading. A whole bunch
of users weren’t seeing this banner at all.

The implementation of the disabled API key options is kinda clunky
because WTForms doesn’t have a native way of doing this.

¯\_(ツ)_/¯

app/assets/stylesheets/app.scss

@@ -214,3 +214,12 @@ summary::-webkit-details-marker {
 details .arrow {
   font-size: 16px;
 }
+
+.block-label-hint {
+  @include core-16;
+  margin-top: 5px;
+}
+
+.block-label input[disabled] {
+  opacity: 0.5;
+}

app/main/views/api_keys.py

@@ -1,4 +1,4 @@
-from flask import request, render_template, redirect, url_for, flash
+from flask import request, render_template, redirect, url_for, flash, Markup, abort
 from flask_login import login_required
 from app.main import main
 from app.main.forms import CreateKeyForm, Whitelist
@@ -68,13 +68,22 @@ def create_api_key(service_id):
         key['name'] for key in api_key_api_client.get_api_keys(service_id=service_id)['apiKeys']
     ]
     form = CreateKeyForm(key_names)
-    form.key_type.choices = filter(None, [
+    form.key_type.choices = [
-        (KEY_TYPE_NORMAL, 'Send messages to anyone')
+        (KEY_TYPE_NORMAL, 'Send messages to anyone'),
-        if not current_service['restricted'] else None,
+        (KEY_TYPE_TEAM, 'Send messages to anyone on my whitelist'),
-        (KEY_TYPE_TEST, 'Simulate sending messages to anyone'),
+        (KEY_TYPE_TEST, 'Pretend to send messages to anyone'),
-        (KEY_TYPE_TEAM, 'Only send messages to your team or whitelist')
+    ]
-    ])
+    if current_service['restricted']:
+        disabled_options = [KEY_TYPE_NORMAL]
+        option_hints = {KEY_TYPE_NORMAL: Markup(
+            'This option is not available because your service is in '
+            '<a href="{}">trial mode</a>'.format(url_for(".trial_mode"))
+        )}
+    else:
+        disabled_options, option_hints = [], {}
     if form.validate_on_submit():
+        if form.key_type.data in disabled_options:
+            abort(400)
         secret = api_key_api_client.create_api_key(
             service_id=service_id,
             key_name=form.key_name.data,
@@ -88,7 +97,9 @@ def create_api_key(service_id):
         )
     return render_template(
         'views/api/keys/create.html',
-        form=form
+        form=form,
+        disabled_options=disabled_options,
+        option_hints=option_hints
     )
 
 

app/templates/components/radios.html

@@ -1,6 +1,8 @@
 {% macro radios(
   field,
-  hint=None
+  hint=None,
+  disable=[],
+  option_hints={}
 ) %}
   <div class="form-group {% if field.errors %} error{% endif %}">
     <fieldset>
@@ -14,8 +16,21 @@
       </legend>
       {% for option in field %}
         <label class="block-label" for="{{ option.id }}">
-          {{ option }}
+          <input
+            id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
+            {% if option.data in disable %}
+              disabled
+            {% endif %}
+            {% if option.checked %}
+              checked
+            {% endif %}
+          >
           {{ option.label.text }}
+          {% if option_hints[option.data] %}
+            <div class="block-label-hint">
+              {{ option_hints[option.data] }}
+            </div>
+          {% endif %}
         </label>
       {% endfor %}
     </fieldset>

app/templates/views/api/index.html

@@ -13,15 +13,6 @@
     API integration
   </h1>
 
-  {% if current_service.restricted %}
-    {% call banner_wrapper(type='warning') %}
-      <h2 class="heading-medium">Your service is in trial mode</h2>
-      <p>
-        You can only send messages to people in your team or whitelist.
-      </p>
-    {% endcall %}
-  {% endif %}
-
   <nav class="grid-row bottom-gutter-1-2">
     <div class="column-one-third">
       <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>

app/templates/views/api/keys.html

@@ -37,9 +37,9 @@
           {% if item.key_type == 'normal' %}
             <span class="visually-hidden">Normal</span>
           {% elif item.key_type == 'team' %}
-            Only sends to team members or whitelist
+            Sends to anyone on your whitelist
           {% elif item.key_type == 'test' %}
-            Simulates sending messages
+            Pretends to send messages
           {% endif %}
         </span>
       </div>

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

@@ -2,6 +2,7 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/radios.html" import radios %}
+{% from "components/banner.html" import banner_wrapper %}
 
 {% block page_title %}
   Create an API key – GOV.UK Notify
@@ -14,8 +15,8 @@
   </h1>
 
   <form method="post">
-    {{ radios(form.key_type) }}
     {{ textbox(form.key_name, label='Name for this key') }}
+    {{ radios(form.key_type, disable=disabled_options, option_hints=option_hints) }}
     {{ page_footer('Continue') }}
   </form>
 

tests/app/main/views/test_api_keys.py

@@ -21,7 +21,6 @@ def test_should_show_api_page(
         assert response.status_code == 200
         page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
         assert page.h1.string.strip() == 'API integration'
-        assert 'Your service is in trial mode' in page.find('div', {'class': 'banner-warning'}).text
         rows = page.find_all('details')
         assert len(rows) == 5
         for index, row in enumerate(rows):
@@ -201,10 +200,7 @@ def test_cant_create_normal_api_key_in_trial_mode(
             'key_type': 'normal'
         }
     )
-    assert response.status_code == 200
+    assert response.status_code == 400
-    page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
-    assert page.find('span', {'class': 'error-message'}).text.strip() == 'Not a valid choice'
-
     mock_post.assert_not_called()