From c8f0664bf73cebcda6efbfae2392c62121d1fe08 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 22 Sep 2020 14:52:15 +0100
Subject: [PATCH] Show an indication that a broadcast service is live
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want it to be very clear whether you’re in live or training mode
because:
- you may be switching back and forth between them
- doing something in live mode when you think you’re in training mode
  would have… consequences

By adding a label next to the service name you’ll will have some
indication, on every page, which mode you are in.

Style of the label is based on the ‘Tag’ component from the Design
System:
https://design-system.service.gov.uk/components/tag/#showing-multiple-statuses
---
 .../stylesheets/components/navigation.scss    | 22 ++++++----
 app/templates/withnav_template.html           |  8 +++-
 tests/app/main/views/test_broadcast.py        | 42 +++++++++++++++++++
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 67c6395d1..44e12e53b 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -20,19 +20,27 @@
 
   &-service-type {
 
+    @include bold-16;
+    position: relative;
+    display: inline-block;
+    margin-left: govuk-spacing(2);
+    padding: 0 govuk-spacing(1);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
     &--training {
-      @include bold-16;
-      position: relative;
-      display: inline-block;
-      margin-left: govuk-spacing(2);
-      padding: 0 govuk-spacing(1);
       background: $grey-3;
       color: mix($grey-1, $text-colour);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
       box-shadow: 0 -3px 0 0 $grey-3;
     }
 
+    &--live {
+      // This uses new Design System colours to match .govuk-tag--red
+      background: #F6D7D2;
+      color: #942514;
+      box-shadow: 0 -3px 0 0 #F6D7D2;
+    }
+
   }
 
   &-service-switch,
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
index b87b31ab8..81917b052 100644
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -17,8 +17,12 @@
       {% endif %}
       <div class="navigation-service-name govuk-!-font-weight-bold">
         {{ current_service.name }}
-        {% if current_service.has_permission('broadcast') and current_service.trial_mode %}
-          <span class="navigation-service-type--training navigation-service-type--training--with-arrow">Training</span>
+        {% if current_service.has_permission('broadcast') %}
+          {% if current_service.trial_mode %}
+            <span class="navigation-service-type navigation-service-type--training">Training</span>
+          {% else %}
+            <span class="navigation-service-type navigation-service-type--live">Live</span>
+          {% endif %}
         {% endif %}
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 01ee22919..e254eab27 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -184,6 +184,48 @@ def test_broadcast_tour_page_4_shows_service_name(
     )
 
 
+@pytest.mark.parametrize('trial_mode, selector, expected_text, expected_tagged_text', (
+    (
+        True,
+        '.navigation-service-type.navigation-service-type--training',
+        'service one Training Switch service',
+        'Training',
+    ),
+    (
+        False,
+        '.navigation-service-type.navigation-service-type--live',
+        'service one Live Switch service',
+        'Live',
+    ),
+))
+def test_broadcast_service_shows_live_or_training(
+    client_request,
+    service_one,
+    mock_get_no_broadcast_messages,
+    mock_get_service_templates_when_no_templates_exist,
+    trial_mode,
+    selector,
+    expected_text,
+    expected_tagged_text,
+):
+    service_one['permissions'] += ['broadcast']
+    service_one['restricted'] = trial_mode
+    page = client_request.get(
+        '.broadcast_dashboard',
+        service_id=SERVICE_ONE_ID,
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').text
+    ) == (
+        expected_text
+    )
+    assert normalize_spaces(
+        page.select_one('.navigation-service').select_one(selector).text
+    ) == (
+        expected_tagged_text
+    )
+
+
 @pytest.mark.parametrize('step_index', (0, 7))
 def test_broadcast_tour_page_404s_out_of_range(
     client_request,