Refactor into Search ViewComponent

app/components/search_component.html.erb

@@ -0,0 +1,16 @@
+<%= form_with model: @user, url: path(current_user), 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="search-field">
+      <%= label %>
+    </label>
+
+    <input class="govuk-input app-search__input" id="search-field" name="search-field" type="search" autocomplete="off">
+  </div>
+
+  <button class="govuk-button app-search__button undefined" data-module="govuk-button">
+    Search
+  </button>
+
+</div>
+<% end %>

app/components/search_component.rb

@@ -0,0 +1,13 @@
+class SearchComponent < ViewComponent::Base
+  attr_reader :current_user, :label
+
+  def initialize(current_user:, label:)
+    @current_user = current_user
+    @label = label
+    super
+  end
+
+  def path(current_user)
+    current_user.support? ? users_path : users_organisation_path(current_user.organisation)
+  end
+end

app/controllers/modules/users_filter.rb

@@ -1,6 +1,6 @@
 module Modules::UsersFilter
   def filtered_users(base_collection)
-    search_param = params["user-search-field"]
+    search_param = params["search-field"]
     if search_param.present?
       base_collection.search_by(search_param)
     else

app/controllers/organisations_controller.rb

@@ -19,7 +19,7 @@ class OrganisationsController < ApplicationController
 
   def users
     @pagy, @users = pagy(filtered_users(@organisation.users))
-    @searched = params["user-search-field"].present?
+    @searched = params["search-field"].present?
     render "users/index"
   end
 

app/controllers/users_controller.rb

@@ -11,7 +11,7 @@ class UsersController < ApplicationController
     redirect_to users_organisation_path(current_user.organisation) unless current_user.support?
 
     @pagy, @users = pagy(filtered_users(User.all))
-    @searched = params["user-search-field"].present?
+    @searched = params["search-field"].present?
 
     respond_to do |format|
       format.html

app/views/users/index.html.erb

@@ -8,23 +8,7 @@
   <%= govuk_button_link_to "Invite user", new_user_path, html: { method: :get } %>
 <% end %>
 
-<% path = current_user.support? ? users_path : users_organisation_path(current_user.organisation) %>
+<%= render SearchComponent.new(current_user:, label: "Search by name or email address") %>
-<%= form_with model: @user, url: 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" autocomplete="off">
-  </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| %>

spec/components/search_component_spec.rb

@@ -0,0 +1,19 @@
+require "rails_helper"
+
+RSpec.describe SearchComponent, type: :component do
+  let(:current_user) { FactoryBot.create(:user, :support) }
+  let(:label) { "Search by name or email address" }
+  let(:page) { Capybara::Node::Simple.new(rendered_component) }
+  
+  before do
+    render_inline(described_class.new(current_user:, label:))
+  end
+
+  it "renders a search bar" do
+    expect(page).to have_field("search-field", type: "search")
+  end
+
+  it "renders the given label" do
+    expect(page).to have_content(label)
+  end
+end

spec/requests/users_controller_spec.rb

@@ -359,7 +359,7 @@ RSpec.describe UsersController, type: :request do
 
         it "shows a search bar" do
           follow_redirect!
-          expect(page).to have_field("user-search-field", type: "search")
+          expect(page).to have_field("search-field", type: "search")
         end
       end
 
@@ -369,7 +369,7 @@ RSpec.describe UsersController, type: :request do
         let!(:other_org_user) { FactoryBot.create(:user, name: "User 4", email: "joe@other_example.com") }
 
         before do
-          get "/organisations/#{user.organisation.id}/users?user-search-field=#{search_param}"
+          get "/organisations/#{user.organisation.id}/users?search-field=#{search_param}"
         end
 
         context "when our search string matches case" do
@@ -822,12 +822,12 @@ RSpec.describe UsersController, type: :request do
       end
 
       it "shows a search bar" do
-        expect(page).to have_field("user-search-field", type: "search")
+        expect(page).to have_field("search-field", type: "search")
       end
 
       context "when a search parameter is passed" do
         before do
-          get "/users?user-search-field=#{search_param}"
+          get "/users?search-field=#{search_param}"
         end
 
         context "when our search term matches a name" do