Merge pull request #2621 from GSA/2562-search-name-and-email-within-team-settings

Improving the UX on the team members page

app/assets/javascripts/liveSearch.js

@@ -15,6 +15,7 @@
 
     let query = normalize($searchBox.val());
     let results = 0;
+    let $noResultsMessage = $('.js-live-search-no-results');
 
     $targets.each(function() {
 
@@ -39,6 +40,12 @@
 
     });
 
+    if (query !== '' && results === 0) {
+      $noResultsMessage.show();
+    } else {
+      $noResultsMessage.hide();
+    }
+
     if (state === 'loaded') {
       if (query !== '') {
         $searchBox.attr('aria-label', $searchLabel.text().trim() + ', ' + resultsSummary(results));

app/templates/views/manage-users.html

@@ -36,16 +36,21 @@
   {% endif %}
 
   <div class="user-list">
+    <div class="js-live-search-no-results" style="display: none;">
+      <p class="usa-body margin-0">No results found</p>
+    </div>
     {% for user in users %}
       {% if user.status != 'cancelled' %}
         <div class="user-list-item width-full">
           <h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
             {%- if user.name -%}
               <span class="heading-small live-search-relevant">{{ user.name }}</span>
+            {%- else -%}
+              <span class="heading-small live-search-relevant">{{ user.email_address }}</span>
             {%- endif -%}
           </h2>
           <p class="margin-top-0">
-             {%- if user.status == 'pending' -%}
+            {%- if user.status == 'pending' -%}
               <span class="live-search-relevant">{{ user.email_address }}</span>
               <span class="hint">(invited)</span>
             {%- elif user.status == 'expired' -%}
@@ -79,7 +84,7 @@
                     ) }}
                   {% endfor %}
                 </ul>
-                 {% if current_service.all_template_folders %}
+                {% if current_service.all_template_folders %}
                   <p class="usa-body tick-cross-list-hint">
                     {% set folder_count = user.template_folders_for_service(current_service) | length %}
                     {% if folder_count == 0 %}
@@ -105,7 +110,7 @@
 
           {% if current_user.has_permissions('manage_service') %}
             {% if user.status == 'pending' or user.status == 'expired' %}
-              <a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
+              <a class="user-list-edit-link usa-link padding-x-2" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
                 Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span>
               </a>
             {% endif %}
@@ -115,7 +120,7 @@
                 Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span>
               </a>
             {% elif user.is_editable_by(current_user) %}
-              <a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
+              <a class="user-list-edit-link usa-link padding-x-2" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
                 Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span>
               </a>
             {% endif %}

tests/app/main/views/test_manage_users.py

@@ -1239,6 +1239,7 @@ def test_cancel_invited_user_doesnt_work_if_user_not_invited_to_this_service(
         (
             "pending",
             (
+                "invited_user@test.gsa.gov "
                 "invited_user@test.gsa.gov (invited) "
                 "Permissions "
                 "Can See dashboard "