Content modelling/659 Preview Host Documents via iFrame

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

@@ -3,12 +3,13 @@
 class ContentBlockManager::ContentBlock::Document::Show::HostEditionsTableComponent < ViewComponent::Base
   TABLE_ID = "host_editions"
 
-  def initialize(caption:, host_content_items:, is_preview: false, current_page: nil, order: nil)
+  def initialize(caption:, host_content_items:, content_block_edition:, is_preview: false, current_page: nil, order: nil)
     @caption = caption
     @host_content_items = host_content_items
     @is_preview = is_preview
     @current_page = current_page.presence || 1
     @order = order.presence || ContentBlockManager::GetHostContentItems::DEFAULT_ORDER
+    @content_block_edition = content_block_edition
   end
 
   def current_page
@@ -25,7 +26,7 @@ def base_pagination_path
 
 private
 
-  attr_reader :caption, :host_content_items, :order
+  attr_reader :caption, :host_content_items, :order, :content_block_edition
 
   def rows
     return [] unless host_content_items
@@ -81,7 +82,7 @@ def users
 
   def frontend_path(content_item)
     if @is_preview
-      Plek.external_url_for("draft-origin") + content_item.base_path
+      helpers.content_block_manager.content_block_manager_content_block_host_content_preview_path(id: content_block_edition.id, host_content_id: content_item.host_content_id)
     else
       Plek.website_root + content_item.base_path
     end

lib/engines/content_block_manager/app/controllers/content_block_manager/content_block/editions/host_content_controller.rb

@@ -0,0 +1,7 @@
+class ContentBlockManager::ContentBlock::Editions::HostContentController < ContentBlockManager::BaseController
+  def preview
+    host_content_id = params[:host_content_id]
+    content_block_edition = ContentBlockManager::ContentBlock::Edition.find(params[:id])
+    @preview_content = ContentBlockManager::PreviewContent.for_content_id(content_id: host_content_id, content_block_edition:)
+  end
+end

lib/engines/content_block_manager/app/models/content_block_manager/host_content_item.rb

@@ -9,6 +9,7 @@ class HostContentItem < Data.define(
     :last_edited_at,
     :unique_pageviews,
     :instances,
+    :host_content_id,
   )
 
     def last_edited_at

lib/engines/content_block_manager/app/services/content_block_manager/get_host_content_items.rb

@@ -30,6 +30,7 @@ def items
           last_edited_at: item["last_edited_at"],
           unique_pageviews: item["unique_pageviews"],
           instances: item["instances"],
+          host_content_id: item["host_content_id"],
         )
       end
 

lib/engines/content_block_manager/app/services/content_block_manager/preview_content.rb

@@ -0,0 +1,67 @@
+require "net/http"
+require "json"
+require "uri"
+
+module ContentBlockManager
+  class PreviewContent < Data.define(:title, :html)
+    class << self
+      def for_content_id(content_id:, content_block_edition:)
+        @content_id = content_id
+        @content_block_edition = content_block_edition
+        PreviewContent.new(title: content_item["title"], html:)
+      end
+
+    private
+
+      def html
+        @html ||= preview_html
+      end
+
+      def content_item
+        @content_item ||= begin
+          response = Services.publishing_api.get_content(@content_id)
+          response.parsed_content
+        end
+      end
+
+      def frontend_base_path
+        Rails.env.development? ? Plek.external_url_for("government-frontend") : Plek.website_root
+      end
+
+      def frontend_path
+        frontend_base_path + content_item["base_path"]
+      end
+
+      def preview_html
+        uri = URI(frontend_path)
+        nokogiri_html = Nokogiri::HTML.parse(Net::HTTP.get(uri))
+        replace_existing_content_blocks(nokogiri_html)
+      end
+
+      def replace_existing_content_blocks(nokogiri_html)
+        replace_blocks(nokogiri_html)
+        style_blocks(nokogiri_html)
+        nokogiri_html
+      end
+
+      def replace_blocks(nokogiri_html)
+        @preview_content_block_render ||= @content_block_edition.render
+        content_block_spans(nokogiri_html).each do |span|
+          span.replace @preview_content_block_render
+        end
+      end
+
+      BLOCK_STYLE = "background-color: yellow;".freeze
+
+      def style_blocks(nokogiri_html)
+        content_block_spans(nokogiri_html).each do |span|
+          span["style"] = BLOCK_STYLE
+        end
+      end
+
+      def content_block_spans(nokogiri_html)
+        nokogiri_html.css("span[data-content-id=\"#{@content_block_edition.document.content_id}\"]")
+      end
+    end
+  end
+end

lib/engines/content_block_manager/app/views/content_block_manager/content_block/documents/show.html.erb

@@ -25,6 +25,7 @@
         host_content_items: @host_content_items,
         current_page: @page,
         order: @order,
+        content_block_edition: @content_block_document.latest_edition,
       ),
     ) %>
   </div>

lib/engines/content_block_manager/app/views/content_block_manager/content_block/editions/host_content/preview.html.erb

@@ -0,0 +1,16 @@
+<% content_for :page_title, "Preview content block in host document" %>
+<% content_for :context, "Preview content block" %>
+<% content_for :title, @preview_content.title %>
+<% content_for :title_margin_bottom, 0 %>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds govuk-body govuk-!-margin-bottom-0">
+    <p><strong>Document title: </strong><%= @preview_content.title %></p>
+  </div>
+</div>
+<hr class="govuk-section-break govuk-!-margin-bottom-8 govuk-section-break--visible">
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+    <iframe id="preview" style="width:100%;height:80vh;" srcdoc="<%= @preview_content.html %>"></iframe>
+  </div>
+</div>

lib/engines/content_block_manager/app/views/content_block_manager/content_block/editions/workflow/review_links.html.erb

@@ -18,6 +18,7 @@
             host_content_items: @host_content_items,
             current_page: @page,
             order: @order,
+            content_block_edition: @content_block_edition,
             ),
           ) %>
   </div>

lib/engines/content_block_manager/config/routes.rb

@@ -12,6 +12,9 @@
       resources :editions, only: %i[new create destroy], path_names: { new: ":block_type/new" } do
         member do
           resources :workflow, only: %i[show update], controller: "editions/workflow", param: :step
+          resources :host_content, only: %i[preview], controller: "editions/host_content", param: :id do
+            get :preview, to: "editions/host_content#preview"
+          end
         end
       end
     end

lib/engines/content_block_manager/features/edit_object.feature

@@ -96,8 +96,10 @@ Feature: Edit a content object
     And I visit the Content Block Manager home page
     Then I should still see the live edition on the homepage
 
+  @javascript
   Scenario: GDS editor can preview a host document
     When I revisit the edit page
     And I fill out the form
     Then I am shown where the changes will take place
-    And the host documents link to the draft content store
+    When I click on the first host document
+    Then The preview page opens in a new tab

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

@@ -437,7 +437,7 @@ def should_show_edit_form_for_email_address_content_block(document_title, email_
     {
       "title" => "Content #{i}",
       "document_type" => "document",
-      "base_path" => "/",
+      "base_path" => "/host-content-path-#{i}",
       "content_id" => SecureRandom.uuid,
       "last_edited_by_editor_id" => SecureRandom.uuid,
       "last_edited_at" => 2.days.ago.to_s,
@@ -486,7 +486,40 @@ def should_show_edit_form_for_email_address_content_block(document_title, email_
 end
 
 When("I click on the first host document") do
-  click_on @dependent_content.first["title"]
+  @current_host_document = @dependent_content.first
+  stub_request(
+    :get,
+    "#{Plek.find('publishing-api')}/v2/content/#{@current_host_document['host_content_id']}",
+  ).to_return(
+    status: 200,
+    body: {
+      details: {
+        body: "<p>title</p>",
+      },
+      title: @current_host_document["title"],
+      document_type: "news_story",
+      base_path: @current_host_document["base_path"],
+      publishing_app: "test",
+    }.to_json,
+  )
+
+  stub_request(
+    :get,
+    Plek.website_root + @current_host_document["base_path"],
+  ).to_return(
+    status: 200,
+    body: "<h1>#{@current_host_document['title']}</h1><p>iframe preview</p>",
+  )
+
+  click_on @current_host_document["title"]
+end
+
+Then("The preview page opens in a new tab") do
+  page.switch_to_window(page.windows.last)
+  assert_text "Preview content block"
+  within_frame "preview" do
+    assert_text @current_host_document["title"]
+  end
 end
 
 When(/^I save and continue$/) do

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

@@ -2,7 +2,7 @@
 
 class ContentBlockManager::ContentBlock::Document::Show::HostEditionsTableComponentTest < ViewComponent::TestCase
   extend Minitest::Spec::DSL
-  include Rails.application.routes.url_helpers
+  include ContentBlockManager::Engine.routes.url_helpers
   include ActionView::Helpers::DateHelper
 
   let(:described_class) { ContentBlockManager::ContentBlock::Document::Show::HostEditionsTableComponent }
@@ -28,6 +28,7 @@ class ContentBlockManager::ContentBlock::Document::Show::HostEditionsTableCompon
       "last_edited_at" => Time.zone.now.to_s,
       "publishing_organisation" => publishing_organisation,
       "unique_pageviews" => unique_pageviews,
+      "host_content_id" => SecureRandom.uuid,
       "instances" => 1,
     )
   end
@@ -40,12 +41,17 @@ class ContentBlockManager::ContentBlock::Document::Show::HostEditionsTableCompon
     )
   end
 
+  let(:content_block_edition) do
+    build(:content_block_edition, :email_address, id: SecureRandom.uuid)
+  end
+
   def self.it_returns_unknown_user
     it "returns Unknown user" do
       render_inline(
         described_class.new(
           caption:,
           host_content_items:,
+          content_block_edition:,
         ),
       )
 
@@ -54,7 +60,7 @@ def self.it_returns_unknown_user
   end
 
   around do |test|
-    with_request_url content_block_manager_path do
+    with_request_url content_block_manager_root_path do
       test.call
     end
   end
@@ -65,6 +71,7 @@ def self.it_returns_unknown_user
         described_class.new(
           caption:,
           host_content_items:,
+          content_block_edition:,
         ),
       )
 
@@ -91,6 +98,7 @@ def self.it_returns_unknown_user
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
         assert_no_selector "tbody .govuk-table__cell a", text: host_content_item.publishing_organisation["title"]
@@ -101,12 +109,13 @@ def self.it_returns_unknown_user
       it "links to the organisation instead of printing the name" do
         organisation = create(:organisation, content_id: host_content_item.publishing_organisation["content_id"], name: host_content_item.publishing_organisation["title"])
 
-        expected_href = admin_organisation_path(organisation)
+        expected_href = Rails.application.routes.url_helpers.admin_organisation_path(organisation)
 
         render_inline(
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
         assert_selector "tbody .govuk-table__cell a",
@@ -130,6 +139,7 @@ def self.it_returns_unknown_user
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
 
@@ -165,6 +175,7 @@ def self.it_returns_unknown_user
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
 
@@ -179,10 +190,11 @@ def self.it_returns_unknown_user
             is_preview: true,
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
 
-        assert_selector "a[href='#{Plek.external_url_for('draft-origin') + host_content_item.base_path}']", text: host_content_item.title
+        assert_selector "a[href='#{content_block_manager_content_block_host_content_preview_path(id: content_block_edition.id, host_content_id: host_content_item.host_content_id)}']", text: host_content_item.title
       end
     end
 
@@ -192,6 +204,7 @@ def self.it_returns_unknown_user
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
 
@@ -203,6 +216,7 @@ def self.it_returns_unknown_user
           described_class.new(
             caption:,
             host_content_items:,
+            content_block_edition:,
           ),
         )
 
@@ -223,6 +237,7 @@ def self.it_returns_unknown_user
               caption:,
               host_content_items:,
               order:,
+              content_block_edition:,
             ),
           )
 
@@ -235,6 +250,7 @@ def self.it_returns_unknown_user
               caption:,
               host_content_items:,
               order: "-#{order}",
+              content_block_edition:,
             ),
           )
 
@@ -259,6 +275,7 @@ def self.it_returns_unknown_user
             described_class.new(
               caption:,
               host_content_items:,
+              content_block_edition:,
             ),
           )
 
@@ -281,6 +298,7 @@ def self.it_returns_unknown_user
             described_class.new(
               caption:,
               host_content_items:,
+              content_block_edition:,
             ),
           )
 
@@ -293,6 +311,7 @@ def self.it_returns_unknown_user
             described_class.new(
               caption:,
               host_content_items:,
+              content_block_edition:,
             ),
           )
 
@@ -306,6 +325,7 @@ def self.it_returns_unknown_user
               caption:,
               host_content_items:,
               current_page: 2,
+              content_block_edition:,
             ),
           )