Replaced repeated code with view component for results table (#673)

* Added repeated code to view component for table in orgs, schemes, users and logs

* linted and changed component file name

* Fixed typos which fixed failing tests

* added unit testing to view component

* defined 'path' variable in view component

* push for review

* fixed hyphons

* fixed

* another fix

* lint

* rubocop

* renamed expectations in test

Co-authored-by: JG <moarpheus@gmail.com>

app/components/search_result_caption_component.html.erb

@@ -0,0 +1,7 @@
+  <span class="govuk-!-margin-right-4">
+    <% if searched.present? %>
+      <strong><%= count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total <%= item %>. <%= govuk_link_to("Clear search", path) %>
+    <% else %>
+      <strong><%= count %></strong> total <%= item %>.
+    <% end %>
+</span>

app/components/search_result_caption_component.rb

@@ -0,0 +1,13 @@
+class SearchResultCaptionComponent < ViewComponent::Base
+  attr_reader :searched, :count, :item_label, :total_count, :item, :path
+
+  def initialize(searched:, count:, item_label:, total_count:, item:, path:)
+    @searched = searched
+    @count = count
+    @item_label = item_label
+    @total_count = total_count
+    @item = item
+    @path = path
+    super
+  end
+end

app/views/case_logs/_log_list.html.erb

@@ -1,13 +1,7 @@
 <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
   <%= govuk_table do |table| %>
     <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %>
-    <span class="govuk-!-margin-right-4">
-      <% if defined?(searched) && searched.present? %>
-        <strong><%= pagy.count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total <%= title.downcase %>. <%= govuk_link_to("Clear search", request.path) %>
-      <% else %>
-        <strong><%= pagy.count %></strong> total <%= title.downcase %>
-      <% end %>
-      </span>
+     <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
       <%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %>
     <% end %>
     <%= table.head do |head| %>

app/views/organisations/_organisation_list.html.erb

@@ -1,12 +1,8 @@
 <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
   <%= govuk_table do |table| %>
     <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular]) do |caption| %>
-      <% if searched.present? %>
-        <strong><%= pagy.count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total organisations. <%= govuk_link_to("Clear search", request.path) %>
-      <% else %>
-        <strong><%= pagy.count %></strong> total organisations.
-      <% end %>
-    <% end %>
+   <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "organisations", path: request.path)) %>
+       <% end %>
     <%= table.head do |head| %>
       <%= head.row do |row| %>
         <% row.cell(header: true, text: "Name", html_attributes: {

app/views/schemes/_scheme_list.html.erb

@@ -1,14 +1,8 @@
 <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
   <%= govuk_table do |table| %>
     <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular]) do |caption| %>
-      <span class="govuk-!-margin-right-4">
-        <% if searched.present? %>
-          <strong><%= pagy.count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total schemes. <%= govuk_link_to("Clear search", request.path) %>
-        <% else %>
-          <strong><%= pagy.count %></strong> total schemes.
-        <% end %>
-      </span>
-    <% end %>
+    <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "schemes", path: request.path)) %>
+      <% end %>
     <%= table.head do |head| %>
       <%= head.row do |row| %>
         <% row.cell(header: true, text: "Code", html_attributes: {

app/views/users/_user_list.html.erb

@@ -1,14 +1,8 @@
 <section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
   <%= govuk_table do |table| %>
     <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular]) do |caption| %>
-      <span class="govuk-!-margin-right-4">
-        <% if searched.present? %>
-          <strong><%= pagy.count %></strong> <%= item_label %> found matching ‘<%= searched %>’ of <strong><%= total_count %></strong> total users. <%= govuk_link_to("Clear search", request.path) %>
-        <% else %>
-          <strong><%= pagy.count %></strong> total users.
-        <% end %>
-      </span>
-      <% if current_user.support? %>
+     <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "users", path: request.path)) %>
+       <% if current_user.support? %>
         <% query = searched.present? ? "?search=#{searched}" : nil %>
         <%= govuk_link_to "Download (CSV)", "/users.csv#{query}", type: "text/csv" %>
       <% end %>

spec/components/search_result_caption_component_spec.rb

@@ -0,0 +1,26 @@
+require "rails_helper"
+
+RSpec.describe SearchResultCaptionComponent, type: :component do
+  let(:page) { Capybara::Node::Simple.new(rendered_component) }
+  let(:searched) { "search item" }
+  let(:count) { 2 }
+  let(:item_label) { "user" }
+  let(:total_count) { 3 }
+  let(:item) { "schemes" }
+  let(:path) { "path" }
+
+  it "renders table caption including the search results and total" do
+    result = render_inline(described_class.new(searched:, count:, item_label:, total_count:, item:, path:))
+    expect(result.to_html).to eq("  <span class=\"govuk-!-margin-right-4\">\n      <strong>#{count}</strong> #{item_label} found matching ‘#{searched}’ of <strong>#{total_count}</strong> total #{item}. <a class=\"govuk-link\" href=\"path\">Clear search</a>\n</span>\n")
+  end
+
+  context "when no search results are found" do
+    let(:searched) { nil }
+
+    it "renders table caption with total count only" do
+      result = render_inline(described_class.new(searched:, count:, item_label:, total_count:, item:, path:))
+
+      expect(result.to_html).to eq("  <span class=\"govuk-!-margin-right-4\">\n      <strong>#{count}</strong> total #{item}.\n</span>\n")
+    end
+  end
+end