Log summary (#795)

* Tweak search result caption component

* Add log summary component

* Add tests for log summary component

* Indentation

Co-authored-by: baarkerlounger <db@slothlife.xyz>

app/components/log_summary_component.html.erb

@@ -0,0 +1,67 @@
+<article class="app-log-summary">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-half">
+      <header class="app-log-summary__header">
+        <h2 class="app-log-summary__title">
+          <%= govuk_link_to case_log_path(log) do %>
+            <span class="govuk-visually-hidden">Log </span><%= log.id %>
+          <% end %>
+        </h2>
+        <% if log.tenancycode? or log.propcode? %>
+          <dl class="app-metadata app-metadata--inline">
+            <% if log.tenancycode? %>
+              <div class="app-metadata__item">
+                <dt class="app-metadata__term">Tenant</dt>
+                <dd class="app-metadata__definition"><%= log.tenancycode %></dd>
+              </div>
+            <% end %>
+            <% if log.propcode? %>
+              <div class="app-metadata__item">
+                <dt class="app-metadata__term">Property</dt>
+                <dd class="app-metadata__definition"><%= log.propcode %></dd>
+              </div>
+            <% end %>
+          </dl>
+        <% end %>
+      </header>
+
+      <% if log.needstype? or log.startdate? %>
+        <p class="govuk-body govuk-!-margin-bottom-2">
+          <% if log.needstype? %>
+            <%= log.is_general_needs? ? "General needs" : "Supported housing" %><br>
+          <% end %>
+          <% if log.startdate? %>
+            Tenancy starts <time datetime="<%= log.startdate.iso8601 %>"><%= log.startdate.to_formatted_s(:govuk_date) %></time>
+          <% end %>
+        </p>
+      <% end %>
+
+      <% if current_user.support? %>
+        <% if log.owning_organisation or log.managing_organisation %>
+          <dl class="app-metadata">
+            <div class="app-metadata__item">
+              <dt class="app-metadata__term">Owned by</dt>
+              <dd class="app-metadata__definition"><%= log.owning_organisation&.name %></dd>
+            </div>
+            <div class="app-metadata__item">
+              <dt class="app-metadata__term">Managed by</dt>
+              <dd class="app-metadata__definition"><%= log.managing_organisation&.name %></dd>
+            </div>
+          </dl>
+        <% end %>
+      <% end %>
+    </div>
+
+    <footer class="govuk-grid-column-one-half app-log-summary__footer">
+      <p class="govuk-body govuk-!-margin-bottom-2">
+        <%= log_status %>
+      </p>
+      <p class="govuk-body">
+        Created <time datetime="<%= log.created_at.iso8601 %>"><%= log.created_at.to_formatted_s(:govuk_date) %></time>
+        <% if log.created_by %>
+          <span class="app-log-summary__footer--actor">by <%= log.created_by.name || log.created_by.email %></span>
+        <% end %>
+      </p>
+    </footer>
+  </div>
+</article>

app/components/log_summary_component.rb

@@ -0,0 +1,13 @@
+class LogSummaryComponent < ViewComponent::Base
+  attr_reader :current_user, :log
+
+  def initialize(current_user:, log:)
+    @current_user = current_user
+    @log = log
+    super
+  end
+
+  def log_status
+    helpers.status_tag(log.status)
+  end
+end

app/components/search_result_caption_component.html.erb

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

app/frontend/styles/_log.scss

@@ -0,0 +1,23 @@
+.app-log-summary {
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
+}
+
+.app-log-summary__header {
+  align-items: baseline;
+  display: flex;
+}
+
+.app-log-summary__title {
+  margin: 0 govuk-spacing(3) govuk-spacing(2) 0;
+}
+
+@include govuk-media-query(tablet) {
+  .app-log-summary__footer {
+    text-align: right;
+  }
+
+  .app-log-summary__footer--actor {
+    display: block;
+  }
+}

app/frontend/styles/_metadata.scss

@@ -0,0 +1,23 @@
+.app-metadata {
+  @include govuk-font($size: 16, $tabular: true);
+  color: $govuk-secondary-text-colour;
+  margin-top: 0;
+
+  &--inline {
+    display: flex;
+    gap: govuk-spacing(3);
+    margin: 0;
+  }
+
+  &__item {
+    display: flex;
+  }
+
+  &__term {
+    margin-right: govuk-spacing(1);
+  }
+
+  &__definition {
+    margin-left: 0;
+  }
+}

app/frontend/styles/application.scss

@@ -30,6 +30,8 @@ $govuk-breakpoints: (
 @import "filter-layout";
 @import "header";
 @import "input";
+@import "log";
+@import "metadata";
 @import "related-navigation";
 @import "section-skip-link";
 @import "table-group";

app/views/case_logs/_log_list.html.erb

@@ -1,68 +1,8 @@
-<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
+<h2 class="govuk-body">
-  <%= govuk_table do |table| %>
+  <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
-    <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %>
+  <%= govuk_link_to "Download (CSV)", "#{request.path}.csv", type: "text/csv" %>
-     <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
+</h2>
-      <%= govuk_link_to "Download (CSV)", "#{request.path}.csv", type: "text/csv" %>
+
-    <% end %>
+<% case_logs.map do |log| %>
-    <%= table.head do |head| %>
+  <%= render(LogSummaryComponent.new(current_user:, log:)) %>
-      <%= head.row do |row| %>
+<% end %>
-        <% row.cell(header: true, text: "Log", html_attributes: {
-          scope: "col",
-        }) %>
-        <% row.cell(header: true, text: "Tenant", html_attributes: {
-          scope: "col",
-        }) %>
-        <% row.cell(header: true, text: "Property", html_attributes: {
-          scope: "col",
-        }) %>
-        <% row.cell(header: true, text: "Tenancy starts", html_attributes: {
-          scope: "col",
-        }) %>
-        <% row.cell(header: true, text: "Log created", html_attributes: {
-          scope: "col",
-        }) %>
-        <% row.cell(header: true, text: "Log status", html_attributes: {
-          scope: "col",
-        }) %>
-        <% if current_user.support? %>
-          <% row.cell(header: true, text: "Owning organisation", html_attributes: {
-            scope: "col",
-          }) %>
-          <% row.cell(header: true, text: "Managing organisation", html_attributes: {
-            scope: "col",
-          }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <%= table.body do |body| %>
-      <% case_logs.map do |log| %>
-        <%= body.row do |row| %>
-          <% row.cell(header: true, html_attributes: {
-            scope: "row",
-          }) do %>
-            <%= govuk_link_to case_log_path(log) do %>
-              <span class="govuk-visually-hidden">Log </span><%= log.id %>
-            <% end %>
-          <% end %>
-          <% row.cell(
-            text: log.tenancycode? ? log.tenancycode : "–",
-            classes: "app-!-font-tabular",
-          ) %>
-          <% row.cell(
-            text: log.propcode? ? log.propcode : "–",
-            classes: "app-!-font-tabular",
-          ) %>
-          <% row.cell(text: log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–") %>
-          <% row.cell(text: log.created_at.to_formatted_s(:govuk_date)) %>
-          <% row.cell do %>
-            <%= status_tag(log.status) %>
-          <% end %>
-          <% if current_user.support? %>
-            <% row.cell(text: log.owning_organisation&.name) %>
-            <% row.cell(text: log.managing_organisation&.name) %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-</section>

spec/components/log_summary_component_spec.rb

@@ -0,0 +1,33 @@
+require "rails_helper"
+
+RSpec.describe LogSummaryComponent, type: :component do
+  let(:support_user) { FactoryBot.create(:user, :support) }
+  let(:coordinator_user) { FactoryBot.create(:user) }
+  let!(:log) { FactoryBot.create(:case_log, needstype: 1, startdate: Time.utc(2022, 1, 1)) }
+
+  context "when rendering log for a support user" do
+    it "show the log summary with organisational relationships" do
+      result = render_inline(described_class.new(current_user: support_user, log:))
+
+      expect(result).to have_link(log.id.to_s)
+      expect(result).to have_text(log.tenancycode)
+      expect(result).to have_text(log.propcode)
+      expect(result).to have_text(log.propcode)
+      expect(result).to have_text("General needs")
+      expect(result).to have_text("Tenancy starts 1 January 2022")
+      expect(result).to have_text("Created 8 February 2022")
+      expect(result).to have_text("by Danny Rojas")
+      expect(result).to have_content("Owned by\n              DLUHC")
+      expect(result).to have_content("Managed by\n              DLUHC")
+    end
+  end
+
+  context "when rendering log for a data coordinator user" do
+    it "show the log summary" do
+      result = render_inline(described_class.new(current_user: coordinator_user, log:))
+
+      expect(result).not_to have_content("Owned by\n              DLUHC")
+      expect(result).not_to have_content("Managed by\n              DLUHC")
+    end
+  end
+end

spec/components/search_result_caption_component_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe SearchResultCaptionComponent, type: :component do
 
   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")
+    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
@@ -19,7 +19,7 @@ RSpec.describe SearchResultCaptionComponent, type: :component do
     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")
+      expect(result.to_html).to eq("<span class=\"govuk-!-margin-right-4\">\n    <strong>#{count}</strong> total #{item}\n</span>\n")
     end
   end
 end

spec/requests/case_logs_controller_spec.rb

@@ -172,10 +172,10 @@ RSpec.describe CaseLogsController, type: :request do
           sign_in user
         end
 
-        it "does have organisation columns" do
+        it "does have organisation values" do
           get "/logs", headers: headers, params: {}
-          expect(page).to have_content("Owning organisation")
+          expect(page).to have_content("Owned by")
-          expect(page).to have_content("Managing organisation")
+          expect(page).to have_content("Managed by")
         end
 
         it "shows case logs for all organisations" do
@@ -449,7 +449,7 @@ RSpec.describe CaseLogsController, type: :request do
           end
 
           it "shows a table of logs" do
-            expect(CGI.unescape_html(response.body)).to match(/<table class="govuk-table">/)
+            expect(CGI.unescape_html(response.body)).to match(/<article class="app-log-summary">/)
             expect(CGI.unescape_html(response.body)).to match(/logs/)
           end
 

spec/requests/organisations_controller_spec.rb

@@ -892,7 +892,7 @@ RSpec.describe OrganisationsController, type: :request do
             end
 
             it "shows the total organisations count" do
-              expect(CGI.unescape_html(response.body)).to match("<strong>#{total_organisations_count}</strong> total organisations.")
+              expect(CGI.unescape_html(response.body)).to match("<strong>#{total_organisations_count}</strong> total organisations")
             end
 
             it "has pagination links" do

spec/requests/schemes_controller_spec.rb

@@ -90,7 +90,7 @@ RSpec.describe SchemesController, type: :request do
       end
 
       it "shows the total organisations count" do
-        expect(CGI.unescape_html(response.body)).to match("<strong>#{schemes.count}</strong> total schemes.")
+        expect(CGI.unescape_html(response.body)).to match("<strong>#{schemes.count}</strong> total schemes")
       end
 
       context "when params scheme_id is present" do
@@ -113,7 +113,7 @@ RSpec.describe SchemesController, type: :request do
           end
 
           it "shows the total schemes count" do
-            expect(CGI.unescape_html(response.body)).to match("<strong>#{total_schemes_count}</strong> total schemes.")
+            expect(CGI.unescape_html(response.body)).to match("<strong>#{total_schemes_count}</strong> total schemes")
           end
 
           it "shows which schemes are being shown on the current page" do
@@ -138,7 +138,7 @@ RSpec.describe SchemesController, type: :request do
           end
 
           it "shows the total schemes count" do
-            expect(CGI.unescape_html(response.body)).to match("<strong>#{total_schemes_count}</strong> total schemes.")
+            expect(CGI.unescape_html(response.body)).to match("<strong>#{total_schemes_count}</strong> total schemes")
           end
 
           it "has pagination links" do