Add search by name for users

Co-authored-by: baarkerlounger  <baarkerlounger@users.noreply.github.com>

app/controllers/users_controller.rb

@@ -9,7 +9,7 @@ class UsersController < ApplicationController
   def index
     redirect_to users_organisation_path(current_user.organisation) unless current_user.support?
 
-    @pagy, @users = pagy(User.all.where(active: true).includes(:organisation))
+    @pagy, @users = pagy(filtered_users)
 
     respond_to do |format|
       format.html
@@ -77,6 +77,15 @@ class UsersController < ApplicationController
 
 private
 
+  def filtered_users
+    search_param = params["user-search-field"]
+    if search_param
+      User.where("name LIKE ?", "%#{search_param}%").where(active: true).includes(:organisation)
+    else
+      User.all.where(active: true).includes(:organisation)
+    end
+  end
+
   def format_error_messages
     errors = @user.errors.to_hash
     @user.errors.clear

app/frontend/styles/_search.scss

@@ -0,0 +1,24 @@
+.app-search {
+    @include govuk-responsive-margin(6, "bottom");
+    display: flex;
+    align-items: end;
+  }
+  
+  .app-search__form-group {
+    flex: 1;
+    margin-bottom: 0;
+  }
+  
+  .app-search__input {
+    background-image: url("data:image/svg+xml,%3Csvg class='app-search__icon' width='20' height='20' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3E%3Ccircle cx='12.0161' cy='11.0161' r='8.51613' stroke='currentColor' stroke-width='3'%3E%3C/circle%3E%3Cline x1='17.8668' y1='17.3587' x2='26.4475' y2='25.9393' stroke='currentColor' stroke-width='3'%3E%3C/line%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: 1em 1em;
+    background-position: 7px center;
+    padding-left: govuk-spacing(6);
+  }
+  
+  .app-search__button {
+    margin-left: govuk-spacing(1);
+    margin-bottom: 2px;
+    width: auto;
+  }

app/frontend/styles/application.scss

@@ -39,6 +39,7 @@ $govuk-breakpoints: (
 @import "pagination";
 @import "panel";
 @import "primary-navigation";
+@import "search";
 
 // App utilities
 .app-\!-colour-muted {

app/views/users/index.html.erb

@@ -7,6 +7,24 @@
 <% if current_user.data_coordinator? || current_user.support? %>
   <%= govuk_button_link_to "Invite user", new_user_path, html: { method: :get } %>
 <% end %>
+
+<%= form_with model: @user, url: users_path(), method: "get", local: true do |f| %>
+<div class="app-search govuk-!-margin-bottom-4">
+  <div class="govuk-form-group app-search__form-group">
+    <label class="govuk-label govuk-!-margin-bottom-2" for="user-search-field">
+      Search by name or email address
+    </label>
+
+    <input class="govuk-input app-search__input" id="user-search-field" name="user-search-field" type="search">
+  </div>
+
+  <button class="govuk-button app-search__button undefined" data-module="govuk-button">
+    Search
+  </button>
+
+</div>
+<% end %>
+
 <%= govuk_table do |table| %>
   <%= table.caption(size: "s", classes: %w[govuk-!-text-align-left govuk-!-margin-top-4 govuk-!-margin-bottom-4]) do |caption| %>
     <span class="govuk-!-margin-right-4">

spec/requests/users_controller_spec.rb

@@ -750,6 +750,23 @@ RSpec.describe UsersController, type: :request do
       it "shows the download csv link" do
         expect(page).to have_link("Download (CSV)", href: "/users.csv")
       end
+
+      it "shows a search bar" do
+        expect(page).to have_field("user-search-field", type: "search")
+      end
+
+      context "when a search parameter is passed" do
+        before do
+          get "/users?user-search-field=Danny"
+        end
+
+        it "returns only matching results" do
+          expect(page).to have_content(user.name)
+          expect(page).not_to have_content(other_user.name)
+          expect(page).not_to have_content(inactive_user.name)
+          expect(page).not_to have_content(other_org_user.name)
+        end
+      end
     end
 
     describe "CSV download" do