Add a search as you type form

As in other places where we have a long list of things where you might
want to jump to a specific thing. We use this pattern where there are
more than 7 things, per the magical number 7[1]

1. https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two

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" %}
 
@@ -50,10 +51,23 @@
       </div>
     </div>
   </div>
-  <h2 class="heading-small">By service</h2>
+
+  {% 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">
-      <h3 class="govuk-!-font-weight-bold govuk-!-font-size-24 govuk-!-margin-bottom-3 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>
       </h3>
       <div class="govuk-grid-row">

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

@@ -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,