From eaaca9dd968fcafae02c3b41db0da41ed006b48d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 26 Jan 2018 17:21:06 +0000
Subject: [PATCH] Add search bar to team member list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Another thing we did for templates, when they started to get
unmanageable, was add a find-as-you type search. We’ve observed real
users interacting with this to great effect, so I think it makes sense
for users too.

Like for templates, it only shows up when there are more than 7, so that
it’s not clutter for teams who don’t have a lot of members.
---
 app/main/forms.py                     |  5 +++++
 app/main/views/manage_users.py        |  5 ++++-
 app/templates/views/manage-users.html | 12 ++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index 3ec7e33a8..c7dd469c4 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -735,6 +735,11 @@ class SearchTemplatesForm(StripWhitespaceForm):
     search = SearchField('Search by name')
 
 
+class SearchUsersForm(StripWhitespaceForm):
+
+    search = SearchField('Search by name or email address')
+
+
 class SearchNotificationsForm(StripWhitespaceForm):
 
     to = SearchField('Search by phone number or email address')
diff --git a/app/main/views/manage_users.py b/app/main/views/manage_users.py
index 8f20f1375..de5bf3ec2 100644
--- a/app/main/views/manage_users.py
+++ b/app/main/views/manage_users.py
@@ -17,7 +17,8 @@ from notifications_python_client.errors import HTTPError
 from app.main import main
 from app.main.forms import (
     InviteUserForm,
-    PermissionsForm
+    PermissionsForm,
+    SearchUsersForm,
 )
 from app import (user_api_client, current_service, service_api_client, invite_api_client)
 from app.notify_client.models import roles
@@ -40,6 +41,8 @@ def manage_users(service_id):
         'views/manage-users.html',
         users=users,
         current_user=current_user,
+        show_search_box=(len(users) > 7),
+        form=SearchUsersForm(),
     )
 
 
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index d8ce7da25..5a86710be 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -2,6 +2,7 @@
 {% from "components/table.html" import list_table, row, field, hidden_field_heading %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/tick-cross.html" import tick_cross %}
+{% from "components/textbox.html" import textbox %}
 
 {% set table_options = {
   'field_headings': [
@@ -30,6 +31,17 @@
     {% endif %}
   </div>
 
+  {% if show_search_box %}
+    <div data-module="autofocus">
+      <div class="live-search" data-module="live-search" data-targets=".user-list-item">
+        {{ textbox(
+          form.search,
+          width='1-1'
+        ) }}
+      </div>
+    </div>
+  {% endif %}
+
   <div class="user-list">
     {% for user in users %}
       <div class="user-list-item">