Add a form to filter notifications by recipient

Because manually editing the URL isn’t a great user interface, this
commit adds a search field to do this on the user’s behalf.

For this pass at the story it doesn’t do any validation – the user will
just get no results if they search by something which isn’t a phone
number or email address.

If the user navigates to a different ‘bucket’ of notifications (eg
delivered, failed) then the search term is reset, because they’ve
changed the filter which is at a level above the search term.

app/templates/views/notifications.html

@@ -1,6 +1,8 @@
 {% extends "withnav_template.html" %}
 {% from "components/ajax-block.html" import ajax_block %}
 {% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/textbox.html" import textbox %}
 
 {% block service_page_title %}
   {{ message_count_label(99, message_type, suffix='') | capitalize }}
@@ -18,6 +20,24 @@
     'counts'
   ) }}
 
+  <form
+    method="get"
+    action="{{ url_for('.view_notifications', service_id=current_service.id, message_type=message_type) }}"
+    class="grid-row"
+  >
+    <div class="column-three-quarters">
+      <input type="hidden" name="status" value="{{ status }}">
+      {{ textbox(
+        search_form.to,
+        width='1-1',
+        label='Search by {}'.format('email address' if message_type == 'email' else 'phone number')
+      ) }}
+    </div>
+    <div class="column-one-quarter align-button-with-textbox">
+      <input type="submit" class="button" value="Search">
+    </div>
+  </form>
+
   {{ ajax_block(
     partials,
     url_for('.get_notifications_as_json', service_id=current_service.id, message_type=message_type, status=status, page=page, to=to),