CLDC-2399: Bulk upload table styling (#2714)

app/components/bulk_upload_error_row_component.html.erb

@@ -13,7 +13,7 @@
     <% if critical_errors.any? %>
       <h2 class="govuk-heading-m">Critical errors</h2>
       <p class="govuk-body">These errors must be fixed to complete your logs.</p>
-      <%= govuk_table do |table| %>
+      <%= govuk_table(html_attributes: { class: potential_errors.any? ? "" : "no-bottom-border" })  do |table| %>
         <%= table.with_head do |head| %>
           <% head.with_row do |row| %>
             <% row.with_cell(header: true, text: "Cell") %>
@@ -39,7 +39,7 @@
     <% if potential_errors.any? %>
       <h2 class="govuk-heading-m">Potential errors</h2>
       <p class="govuk-body">The following groups of cells might have conflicting data. Check the answers and fix any incorrect data.<br><br>If the answers are correct, fix the critical errors and reupload the file. You'll need to confirm that the following data is correct when the file only contains potential errors.</p>
-        <%= govuk_table do |table| %>
+        <%= govuk_table(html_attributes: { class: "no-bottom-border" })  do |table| %>
           <%= table.with_head do |head| %>
             <% head.with_row do |row| %>
               <% row.with_cell(header: true, text: "Cell") %>
@@ -49,24 +49,24 @@
             <% end %>
           <% end %>
 
-          <%= table.with_body do |body| %>
+        <%= table.with_body do |body| %>
-            <% potential_errors.group_by(&:error).each do |error_message, errors| %>
+          <% potential_errors.group_by(&:error).each_with_index do |(error_message, errors), group_index| %>
-              <% errors.each_with_index do |error, index| %>
+            <% total_groups = potential_errors.group_by(&:error).size %>
-                <% row_class = "grouped-rows" %>
+            <% errors.each_with_index do |error, index| %>
-                <% row_class += " first-row" if index.zero? %>
+              <% row_class = row_classes(index, errors.size) %>
-                <% row_class += " last-row" if index == errors.size - 1 %>
+              <% body.with_row(html_attributes: { class: row_class }) do |row| %>
-                <% body.with_row(html_attributes: { class: row_class }) do |row| %>
+                <% row.with_cell(text: error.cell) %>
-                  <% row.with_cell(text: error.cell) %>
+                <% row.with_cell(text: question_for_field(error.field), html_attributes: { class: "govuk-!-width-one-half" }) %>
-                  <% row.with_cell(text: question_for_field(error.field), html_attributes: { class: "govuk-!-width-one-half" }) %>
+                <% if index == 0 %>
-                  <% if index == 0 %>
+                  <% cell_class = cell_classes(group_index, total_groups) %>
-                    <% row.with_cell(text: error_message.html_safe, rowspan: errors.size, html_attributes: { class: "govuk-!-font-weight-bold govuk-!-width-one-half grouped-multirow-cell" }) %>
+                  <% row.with_cell(text: error_message.html_safe, rowspan: errors.size, html_attributes: { class: cell_class }) %>
-                  <% end %>
-                  <% row.with_cell(text: error.field.humanize) %>
                 <% end %>
+                <% row.with_cell(text: error.field.humanize) %>
               <% end %>
             <% end %>
           <% end %>
         <% end %>
+        <% end %>
     <% end %>
   </div>
 </div>

app/components/bulk_upload_error_row_component.rb

@@ -62,4 +62,17 @@ class BulkUploadErrorRowComponent < ViewComponent::Base
   def sales?
     bulk_upload.log_type == "sales"
   end
+
+  def row_classes(index, errors_size)
+    row_class = "grouped-rows"
+    row_class += " first-row" if index.zero?
+    row_class += " last-row" if index == errors_size - 1
+    row_class
+  end
+
+  def cell_classes(group_index, total_groups)
+    cell_class = "govuk-!-font-weight-bold govuk-!-width-one-half"
+    cell_class += " grouped-multirow-cell" unless group_index == total_groups - 1
+    cell_class
+  end
 end

app/frontend/styles/_bulk-uploads.scss

@@ -12,6 +12,11 @@
   border-bottom: 1px solid #b1b4b6;
 }
 
+.no-bottom-border,
+.no-bottom-border > tbody > tr:last-of-type td {
+  border-bottom: none;
+}
+
 .text-normal-break {
   white-space: normal;
   word-break: break-all;