Add a new banner for telling you about trial mode

We’ve found in research that developers have no idea they’re in trial
mode until they hit an error. And even then they don’t really know what
trial mode means.

So this commit:
- adds a message to the API integration page about trial mode
- puts it in a really yellow banner to draw attention to it
- adds the same banner to the settings page

app/assets/stylesheets/components/banner.scss

@@ -221,3 +221,30 @@
   }
 
 }
+
+.banner-warning {
+
+  @extend %banner;
+  @include bold-19;
+  background: $yellow;
+  color: $text-colour;
+  border: 5px solid $text-colour;
+  margin: $gutter 0 $gutter 0;
+  text-align: left;
+  padding: 20px;
+
+  .heading-medium {
+    @include bold-24;
+    margin: 0 0 $gutter-half 0;
+  }
+
+  .list {
+    margin-bottom: 10px;
+  }
+
+  a:link,
+  a:visited {
+    color: $text-colour;
+  }
+
+}

app/templates/views/api/index.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/banner.html" import banner_wrapper %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -12,6 +13,15 @@
     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.
+      </p>
+    {% endcall %}
+  {% endif %}
+
   <nav class="grid-row">
     <div class="column-half">
       <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>

app/templates/views/service-settings.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/banner.html" import banner_wrapper %}
 {% from "components/browse-list.html" import browse_list %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, field %}
 
@@ -10,6 +11,23 @@
 
     <h1 class="heading-large">Settings</h1>
 
+    {% if current_service.restricted %}
+      {% call banner_wrapper(type='warning') %}
+        <h2 class="heading-medium">Your service is in trial mode</h2>
+
+        <ul class='list list-bullet'>
+          <li>you can only send messages to yourself</li>
+          <li>you can add people to your team, then you can send messages to them too</li>
+          <li>you can only send 50 messages per day</li>
+        </ul>
+
+        <p>
+          To remove these restrictions
+          <a href="{{ url_for('.service_request_to_go_live', service_id=current_service.id) }}">request to go live</a>.
+        </p>
+      {% endcall %}
+    {% endif %}
+
     <div class="bottom-gutter-2">
 
       {% call mapping_table(
@@ -39,25 +57,6 @@
       {% endcall %}
     </div>
 
-    {% if current_service.restricted %}
-      <div class="bottom-gutter-2">
-
-        <h2 class="heading-medium">Your service is in trial mode</h2>
-
-        <ul class='list list-bullet'>
-          <li>you can only send messages to yourself</li>
-          <li>you can add people to your team, then you can send messages to them too</li>
-          <li>you can only send 50 messages per day</li>
-        </ul>
-
-        <p>
-          To remove these restrictions
-          <a href="{{ url_for('.service_request_to_go_live', service_id=current_service.id) }}">request to go live</a>.
-        </p>
-
-      </div>
-    {% endif %}
-
     {% if current_user.has_permissions([], admin_override=True) %}
 
       <h2 class="heading-medium">Platform admin settings</h2>

tests/app/main/views/test_api_keys.py

@@ -19,6 +19,21 @@ 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
+
+
+def test_should_show_api_page_for_live_service(
+    app_,
+    mock_login,
+    api_user_active,
+    mock_get_live_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_integration', service_id=str(uuid.uuid4())))
+        page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
+        assert 'Your service is in trial mode' not in page.find('main').text
 
 
 def test_should_show_api_documentation_page(