Add content block changes table to timeline

lib/engines/content_block_manager/app/assets/stylesheets/content_block_manager/components/_timeline-component.scss

@@ -70,3 +70,13 @@
   display: inline-block !important;
   margin-bottom: 10px !important;
 }
+
+.timeline__diff-table {
+  margin-top: govuk-spacing(1);
+
+  .govuk-details__text {
+    margin-top: govuk-spacing(1);
+    border: none;
+    padding-left: 0;
+  }
+}

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/show/document_timeline_component.html.erb

@@ -16,6 +16,35 @@
       <p class="timeline__date">
         <%= item[:date] %>
       </p>
+
+      <% if item[:table_rows].present? %>
+        <div class="timeline__diff-table">
+          <%= render "govuk_publishing_components/components/details", {
+            title: "Details of changes",
+            open: i == 0,
+          } do %>
+            <% capture do %>
+              <%= render "govuk_publishing_components/components/table", {
+                first_cell_is_header: true,
+                head: [
+                  {
+                    text: tag.span("Fields", class: "govuk-visually-hidden"),
+                  },
+                  {
+                    text: "Previous version",
+                    format: "string",
+                  },
+                  {
+                    text: "This version",
+                    format: "string",
+                  },
+                ],
+                rows: item[:table_rows],
+              } %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
     </div>
   <% end %>
 </div>

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/show/document_timeline_component.rb

@@ -14,6 +14,7 @@ def items
         title: title(version),
         byline: User.find_by_id(version.whodunnit)&.then { |user| helpers.linked_author(user, { class: "govuk-link" }) } || "unknown user",
         date: time_html(version.created_at),
+        table_rows: table_rows(version),
       }
     end
   end
@@ -34,4 +35,14 @@ def time_html(date_time)
       lang: "en",
     )
   end
+
+  def table_rows(version)
+    if version.field_diffs.present?
+      rows = []
+      version.field_diffs.each do |field|
+        rows.append([{ text: field["field_name"].humanize }, { text: field["previous_value"] }, { text: field["new_value"] }])
+      end
+      rows
+    end
+  end
 end

lib/engines/content_block_manager/features/edit_object.feature

@@ -35,6 +35,7 @@ Feature: Edit a content object
     Then the edition should have been updated successfully
     And I should be taken back to the document page
     And I should see 2 publish events on the timeline
+    And I should see the edition diff in a table
 
   Scenario: GDS editor cancels the creation of an object when reviewing links
     When I visit the Content Block Manager home page

lib/engines/content_block_manager/features/step_definitions/timeline_steps.rb

@@ -16,3 +16,8 @@
   expect(page).to have_selector(".timeline__title", text: "Email address scheduled")
   expect(page).to have_selector(".timeline__byline", text: "by #{@user.name}")
 end
+
+And("I should see the edition diff in a table") do
+  expect(page).to have_selector(".govuk-table__cell", text: "Changed title")
+  expect(page).to have_selector(".govuk-table__cell", text: @content_block.document.title)
+end

lib/engines/content_block_manager/test/components/content_block/document/show/document_timeline_component_test.rb

@@ -40,5 +40,46 @@ class ContentBlockManager::ContentBlock::Document::Show::DocumentTimelineCompone
     assert_equal "by #{linked_author(@user, { class: 'govuk-link' })}", page.all(".timeline__byline")[1].native.inner_html
     assert_equal  I18n.l(@version_2.created_at, format: :long_ordinal),
                   page.all("time[datetime='#{@version_2.created_at.iso8601}']")[1].text
+
+    assert_no_selector ".govuk-table"
+  end
+
+  test "renders the edition diff table in correct order" do
+    field_diffs = [
+      {
+        "field_name": "title",
+        "new_value": "new title",
+        "previous_value": "old title",
+      },
+      {
+        "field_name": "email_address",
+        "new_value": "[email protected]",
+        "previous_value": "[email protected]",
+      },
+      {
+        "field_name": "instructions_to_publishers",
+        "new_value": "new instructions",
+        "previous_value": "old instructions",
+      },
+    ]
+    @user = create(:user)
+    @version = create(
+      :content_block_version,
+      event: "updated",
+      whodunnit: @user.id,
+      state: "scheduled",
+      field_diffs: field_diffs,
+    )
+
+    render_inline(ContentBlockManager::ContentBlock::Document::Show::DocumentTimelineComponent.new(
+                    content_block_versions: [@version],
+                  ))
+
+    assert_equal "old title", page.all("td")[0].text
+    assert_equal "new title", page.all("td")[1].text
+    assert_equal "[email protected]", page.all("td")[2].text
+    assert_equal "[email protected]", page.all("td")[3].text
+    assert_equal "old instructions", page.all("td")[4].text
+    assert_equal "new instructions", page.all("td")[5].text
   end
 end