Merge pull request #3336 from alphagov/org-usage-tweaks

Tweak the appearance of the org usage page

app/main/views/organisations.py

@@ -143,6 +143,7 @@ def organisation_dashboard(org_id):
             end=current_financial_year + 1,
         ),
         selected_year=year,
+        search_form=SearchByNameForm() if len(services) > 7 else None,
         **{
             f'total_{key}': sum(service[key] for service in services)
             for key in ('emails_sent', 'sms_cost', 'letter_cost')

app/templates/views/organisations/organisation/index.html

@@ -1,4 +1,5 @@
 {% from "components/big-number.html" import big_number %}
+{% from "components/live-search.html" import live_search %}
 {% from "components/pill.html" import pill %}
 {% extends "org_template.html" %}
 
@@ -12,46 +13,63 @@
     Usage
   </h1>
 
-  <div class="bottom-gutter-3-2">
+  <div class="bottom-gutter">
     {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
   </div>
 
   <div class="govuk-grid-row bottom-gutter">
     <div class="govuk-grid-column-one-third">
+      <h2 class="heading-small">Emails</h2>
       <div class="keyline-block">
         {{ big_number(
           total_emails_sent,
-          label='emails sent',
+          label='sent',
           smaller=True
         ) }}
       </div>
     </div>
     <div class="govuk-grid-column-one-third">
+      <h2 class="heading-small">Text messages</h2>
       <div class="keyline-block">
         {{ big_number(
           total_sms_cost,
-          'spent on text messages',
+          'spent',
           currency="£",
           smaller=True
         ) }}
       </div>
     </div>
     <div class="govuk-grid-column-one-third">
+      <h2 class="heading-small">Letters</h2>
       <div class="keyline-block">
         {{ big_number(
           total_letter_cost,
-          'spent on letters',
+          'spent',
           currency="£",
           smaller=True
         ) }}
       </div>
     </div>
   </div>
+
+  {% if search_form %}
+    <div class="govuk-!-margin-bottom-5">
+      {{ live_search(
+        target_selector='.organisation-service',
+        show=True,
+        form=search_form,
+        label='Search by service'
+      ) }}
+    </div>
+  {% endif %}
+
+  <h2 class="heading-small {% if search_form %}visually-hidden{% endif %}">By service</h2>
+
   {% for service in services %}
-    <div class="keyline-block govuk-!-margin-top-2">
+    <div class="keyline-block govuk-!-margin-top-2 organisation-service">
-      <h2 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-1 govuk-!-margin-top-1">
+      <h3 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-3 govuk-!-margin-top-1 live-search-relevant">
         <a href="{{ url_for('main.usage', service_id=service.service_id) }}" class="govuk-link govuk-link--no-visited-state browse-list-link">{{ service.service_name  }}</a>
-      </h2>
+      </h3>
       <div class="govuk-grid-row">
         <div class="govuk-grid-column-one-third">
           {{ big_number(
@@ -70,7 +88,7 @@
             ) }}
           {% else %}
             {{ big_number(
-              service.free_sms_limit - service.sms_remainder,
+              service.sms_billable_units,
               'free text messages sent',
               smallest=True
             ) }}

tests/app/main/views/organisations/test_organisation.py

@@ -402,7 +402,7 @@ def test_organisation_services_shows_live_services_and_usage(
         'app.organisations_client.get_services_and_usage',
         return_value={"services": [
             {'service_id': SERVICE_ONE_ID, 'service_name': '1', 'chargeable_billable_sms': 250122, 'emails_sent': 13000,
-             'free_sms_limit': 250000, 'letter_cost': 30.50, 'sms_billable_units': 122, 'sms_cost': 1.93,
+             'free_sms_limit': 250000, 'letter_cost': 30.50, 'sms_billable_units': 122, 'sms_cost': 0,
              'sms_remainder': None},
             {'service_id': SERVICE_TWO_ID, 'service_name': '5', 'chargeable_billable_sms': 0, 'emails_sent': 20000,
              'free_sms_limit': 250000, 'letter_cost': 0, 'sms_billable_units': 2500, 'sms_cost': 42.0,
@@ -414,21 +414,21 @@ def test_organisation_services_shows_live_services_and_usage(
     page = client_request.get('.organisation_dashboard', org_id=ORGANISATION_ID)
     mock.assert_called_once_with(ORGANISATION_ID, 2019)
 
-    services = page.select('main h2')
+    services = page.select('main h3')
     usage_rows = page.select('main .govuk-grid-column-one-third')
     assert len(services) == 2
 
     # Totals
-    assert normalize_spaces(usage_rows[0].text) == "33,000 emails sent"
+    assert normalize_spaces(usage_rows[0].text) == "Emails 33,000 sent"
-    assert normalize_spaces(usage_rows[1].text) == "£43.93 spent on text messages"
+    assert normalize_spaces(usage_rows[1].text) == "Text messages £42.00 spent"
-    assert normalize_spaces(usage_rows[2].text) == "£30.50 spent on letters"
+    assert normalize_spaces(usage_rows[2].text) == "Letters £30.50 spent"
 
     assert normalize_spaces(services[0].text) == '1'
     assert normalize_spaces(services[1].text) == '5'
     assert services[0].find('a')['href'] == url_for('main.usage', service_id=SERVICE_ONE_ID)
 
     assert normalize_spaces(usage_rows[3].text) == "13,000 emails sent"
-    assert normalize_spaces(usage_rows[4].text) == "£1.93 spent on text messages"
+    assert normalize_spaces(usage_rows[4].text) == "122 free text messages sent"
     assert normalize_spaces(usage_rows[5].text) == "£30.50 spent on letters"
     assert services[1].find('a')['href'] == url_for('main.usage', service_id=SERVICE_TWO_ID)
     assert normalize_spaces(usage_rows[6].text) == "20,000 emails sent"
@@ -471,6 +471,86 @@ def test_organisation_services_filters_by_financial_year(
     )
 
 
+@freeze_time("2020-02-20 20:20")
+def test_organisation_services_shows_search_bar(
+    client_request,
+    mock_get_organisation,
+    mocker,
+    active_user_with_permissions,
+    fake_uuid,
+):
+    mocker.patch(
+        'app.organisations_client.get_services_and_usage',
+        return_value={"services": [
+            {
+                'service_id': SERVICE_ONE_ID,
+                'service_name': 'Service 1',
+                'chargeable_billable_sms': 250122,
+                'emails_sent': 13000,
+                'free_sms_limit': 250000,
+                'letter_cost': 30.50,
+                'sms_billable_units': 122,
+                'sms_cost': 1.93,
+                'sms_remainder': None
+            },
+        ] * 8}
+    )
+
+    client_request.login(active_user_with_permissions)
+    page = client_request.get('.organisation_dashboard', org_id=ORGANISATION_ID)
+
+    services = page.select('.organisation-service')
+    assert len(services) == 8
+
+    assert page.select_one('.live-search')['data-targets'] == '.organisation-service'
+    assert [
+        normalize_spaces(service_name.text)
+        for service_name in page.select('.live-search-relevant')
+    ] == [
+        'Service 1',
+        'Service 1',
+        'Service 1',
+        'Service 1',
+        'Service 1',
+        'Service 1',
+        'Service 1',
+        'Service 1',
+    ]
+
+
+@freeze_time("2020-02-20 20:20")
+def test_organisation_services_hides_search_bar_for_7_or_fewer_services(
+    client_request,
+    mock_get_organisation,
+    mocker,
+    active_user_with_permissions,
+    fake_uuid,
+):
+    mocker.patch(
+        'app.organisations_client.get_services_and_usage',
+        return_value={"services": [
+            {
+                'service_id': SERVICE_ONE_ID,
+                'service_name': 'Service 1',
+                'chargeable_billable_sms': 250122,
+                'emails_sent': 13000,
+                'free_sms_limit': 250000,
+                'letter_cost': 30.50,
+                'sms_billable_units': 122,
+                'sms_cost': 1.93,
+                'sms_remainder': None
+            },
+        ] * 7}
+    )
+
+    client_request.login(active_user_with_permissions)
+    page = client_request.get('.organisation_dashboard', org_id=ORGANISATION_ID)
+
+    services = page.select('.organisation-service')
+    assert len(services) == 7
+    assert not page.select_one('.live-search')
+
+
 def test_organisation_trial_mode_services_shows_all_non_live_services(
     client_request,
     platform_admin_user,