Add search bar to team member list

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

@@ -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')

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(),
     )
 
 

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">