Add filters to the pages

app/helpers/filters_helper.rb

@@ -38,6 +38,14 @@ module FiltersHelper
     }.freeze
   end
 
+  def user_status_filters
+    {
+      "active" => "Active",
+      "deactivated" => "Deactivated",
+      "unconfirmed" => "Unconfirmed",
+    }.freeze
+  end
+
   def selected_option(filter, filter_type)
     return false unless session[session_name_for(filter_type)]
 

app/views/organisations/users.html.erb

@@ -15,10 +15,15 @@
 <% if current_user.data_coordinator? || current_user.support? %>
   <%= govuk_button_link_to "Invite user", new_user_path(organisation_id: @organisation.id), html: { method: :get } %>
 <% end %>
+<div class="app-filter-layout" data-controller="filter-layout">
+  <%= render partial: "users/user_filters" %>
+  <div class="app-filter-layout__content">
 
-<%= render SearchComponent.new(current_user:, search_label: "Search by name or email address", value: @searched) %>
+    <%= render SearchComponent.new(current_user:, search_label: "Search by name or email address", value: @searched) %>
 
-<%= govuk_section_break(visible: true, size: "m") %>
+    <%= govuk_section_break(visible: true, size: "m") %>
 
-<%= render partial: "users/user_list", locals: { users: @users, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
-<%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "users" } %>
+    <%= render partial: "users/user_list", locals: { users: @users, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
+    <%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "users" } %>
+  </div>
+</div>

app/views/users/_user_filters.html.erb

@@ -0,0 +1,29 @@
+<div class="app-filter-layout__filter">
+  <div class="app-filter">
+    <div class="app-filter__header">
+      <h2 class="govuk-heading-m">Filters</h2>
+    </div>
+
+    <div class="app-filter__content">
+      <%= form_with url: users_path, html: { method: :get } do |f| %>
+        <div class="govuk-grid-row" style="white-space: nowrap">
+          <p class="govuk-grid-column-one-half">
+            <%= filters_applied_text(@filter_type) %>
+          </p>
+          <p class="govuk-!-text-align-right govuk-grid-column-one-half">
+            <%= reset_filters_link(@filter_type) %>
+          </p>
+        </div>
+
+        <%= render partial: "filters/checkbox_filter",
+                   locals: {
+                    f:,
+                    options: user_status_filters,
+                    label: "Status",
+                    category: "status",
+                  } %>
+        <%= f.govuk_submit "Apply filters", class: "govuk-!-margin-bottom-0" %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/users/index.html.erb

@@ -8,10 +8,14 @@
 <% if current_user.data_coordinator? || current_user.support? %>
   <%= govuk_button_link_to "Invite user", new_user_path, html: { method: :get } %>
 <% end %>
+<div class="app-filter-layout" data-controller="filter-layout">
+  <%= render partial: "users/user_filters" %>
+  <div class="app-filter-layout__content">
+    <%= render SearchComponent.new(current_user:, search_label: "Search by name or email address", value: @searched) %>
 
-<%= render SearchComponent.new(current_user:, search_label: "Search by name or email address", value: @searched) %>
+    <%= govuk_section_break(visible: true, size: "m") %>
 
-<%= govuk_section_break(visible: true, size: "m") %>
-
-<%= render partial: "users/user_list", locals: { users: @users, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
-<%== render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "users" } %>
+    <%= render partial: "users/user_list", locals: { users: @users, title:, pagy: @pagy, searched: @searched, item_label:, total_count: @total_count } %>
+    <%= render partial: "pagy/nav", locals: { pagy: @pagy, item_name: "users" } %>
+  </div>
+</div>

spec/features/user_spec.rb

@@ -228,6 +228,39 @@ RSpec.describe "User Features" do
         expect(page).not_to have_css('[aria-current="page"]', text: "About your organisation")
         expect(page).not_to have_css('[aria-current="page"]', text: "Logs")
       end
+
+      context "when filtering users" do
+        context "when no filters are selected" do
+          it "displays the filters component with no clear button" do
+            expect(page).to have_content("No filters applied")
+            expect(page).not_to have_content("Clear")
+          end
+        end
+
+        context "when I have selected filters" do
+          before do
+            check("Active")
+            check("Deactivated")
+            click_button("Apply filters")
+          end
+
+          it "displays the filters component with a correct count and clear button" do
+            expect(page).to have_content("2 filters applied")
+            expect(page).to have_content("Clear")
+          end
+
+          context "when clearing the filters" do
+            before do
+              click_link("Clear")
+            end
+
+            it "clears the filters and displays the filter component as before" do
+              expect(page).to have_content("No filters applied")
+              expect(page).not_to have_content("Clear")
+            end
+          end
+        end
+      end
     end
 
     context "when viewing your organisation details" do