Remove PfC code and consolidate onto ImageCardComponent [WHIT-3983]

app/assets/javascripts/admin/modules/image-processing-checker.js

@@ -75,7 +75,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
 
     updateImageStatus(replacementEl) {
       if (replacementEl) {
-        this.$root.replaceChild(replacementEl, this.imageStatus)
+        this.imageStatus.replaceWith(replacementEl)
       } else {
         this.imageStatus.remove()
       }

app/components/admin/edition_images/image_card_component.html.erb

@@ -1,15 +1,28 @@
-<%= render "govuk_publishing_components/components/summary_card", {
-  id: "uploaded_#{image_usage.key}_image_card",
-  summary_card_actions: summary_card_actions,
-  title: image_usage.title.upcase_first,
-  rows: [
-    {
-      key: "Image",
-      value: thumbnail,
-    },
-    image_usage.caption_enabled? ? {
-      key: "Caption",
-      value: caption,
-    } : nil,
-  ].compact,
-} %>
+<div
+  data-module="image-processing-checker"
+  data-variant="s960"
+  <%= "data-image-link=#{admin_edition_image_path(edition, image)}" if image.present? %>>
+  <template class="js-image-preview">
+    <img src="" alt="" class="app-view-edition-resource__preview">
+  </template>
+
+  <%= render "govuk_publishing_components/components/summary_card", {
+    id: "uploaded_#{image_usage.key}_image_card",
+    summary_card_actions: summary_card_actions,
+    title: image_usage.title.upcase_first,
+    rows: [
+      {
+        key: "Image",
+        value: thumbnail,
+      },
+      image_usage.caption_enabled? ? {
+        key: "Caption",
+        value: caption,
+      } : nil,
+      image_usage.embeddable? ? {
+        key: "Markdown code",
+        value: markdown_code,
+      } : nil,
+    ].compact,
+  } %>
+</div>

app/components/admin/edition_images/image_card_component.rb

@@ -1,8 +1,16 @@
 # frozen_string_literal: true
 
-class Admin::EditionImages::ImageCardComponent < Admin::EditionImages::ImageComponent
+class Admin::EditionImages::ImageCardComponent < ViewComponent::Base
+  def initialize(edition:, image:, image_usage:)
+    @edition = edition
+    @image = image
+    @image_usage = image_usage
+  end
+
 private
 
+  attr_reader :edition, :image, :image_usage
+
   def summary_card_actions
     return [] unless edition.editable?
 
@@ -38,10 +46,26 @@ def caption
   def thumbnail
     return "Not set" if image.blank?
 
-    return "<span class=\"govuk-tag govuk-tag--green\">Processing</span>".html_safe unless image.image_data&.original_uploaded? && image.thumbnail
+    return "<div class=\"js-image-processing-status\"><span class=\"govuk-tag govuk-tag--green\">Processing</span></div>".html_safe unless image.image_data&.original_uploaded? && image.thumbnail
 
     return "<span class=\"govuk-tag govuk-tag--red\">Requires cropping</span>".html_safe if image.requires_crop?
 
     sanitize("<img style=\"width: 100%;\" src=\"#{image.thumbnail}\" alt=\"\" class=\"app-view-edition-resource__preview\">")
   end
+
+  def markdown_code
+    render("govuk_publishing_components/components/copy_to_clipboard", {
+      label: tag.span("Markdown code:", class: "govuk-visually-hidden"),
+      copyable_content: image_markdown,
+      button_text: "Copy Markdown",
+    })
+  end
+
+  def image_markdown
+    edition.images_have_unique_filenames? ? "[Image: #{image.filename}]" : "!!#{find_image_index + 1}"
+  end
+
+  def find_image_index
+    edition.images.find_index(image)
+  end
 end

app/components/admin/edition_images/image_upload_component.html.erb

@@ -29,32 +29,18 @@
   } %>
 
   <%= hidden_field_tag("usage", image_usage.key) %>
+  <%= hidden_field_tag("image_kind", image_kind.name) %>
 
-  <% if image_usage.kinds.size > 1 %>
-    <%= render "govuk_publishing_components/components/radio", {
-      heading: "What kind of image is this?",
-      name: "image_kind",
-      items: image_usage.kinds.map do |image_kind|
-        {
-          value: image_kind.name,
-          text: image_kind.display_name,
-        }
-      end,
-    } %>
-  <% else %>
-    <%= hidden_field_tag("image_kind", image_kind.name) %>
-
-    <% if image_kind.allowed_formats.include?("svg") %>
-      <%= render "govuk_publishing_components/components/details", {
-        title: "You must use an SVG for charts and diagrams",
-      } do %>
-        SVGs allow users to magnify images without losing quality.
-        Find out <%= link_to "how to create an SVG file (opens in new tab)",
-                            "https://guidance.publishing.service.gov.uk/formatting-content/images-videos/formatting-images/#how-to-create-an-svg-file",
-                            class: "govuk-link",
-                            target: "_blank",
-                            rel: "noopener" %>.
-      <% end %>
+  <% if image_kind.allowed_formats.include?("svg") %>
+    <%= render "govuk_publishing_components/components/details", {
+      title: "You must use an SVG for charts and diagrams",
+    } do %>
+      SVGs allow users to magnify images without losing quality.
+      Find out <%= link_to "how to create an SVG file (opens in new tab)",
+                          "https://guidance.publishing.service.gov.uk/formatting-content/images-videos/formatting-images/#how-to-create-an-svg-file",
+                          class: "govuk-link",
+                          target: "_blank",
+                          rel: "noopener" %>.
     <% end %>
   <% end %>
 

app/models/image_usage.rb

@@ -23,7 +23,7 @@ def lead?
   end
 
   def title
-    return "image" if embeddable?
+    return "Embeddable image" if embeddable?
 
     label || "#{key} image"
   end

app/uploaders/image_uploader.rb

@@ -7,12 +7,6 @@ class ImageUploader < WhitehallUploader
     config.validate_integrity = true
   end
 
-  def downloader
-    # this overloads the downloader from Carrierwave::Uploader::Base
-    # so that `download!` can be used in development and test environments
-    WhitehallDownloader
-  end
-
   def extension_allowlist
     model.image_kind_config.allowed_formats
   end

app/views/admin/edition_images/index.html.erb

@@ -24,7 +24,7 @@
       <%= image_usage.lead? ? render(Admin::EditionImages::LeadImageCardComponent.new(edition: @edition, image:, image_usage:)) : render(Admin::EditionImages::ImageCardComponent.new(edition: @edition, image:, image_usage:)) %>
     <% end %>
 
-    <% @edition.permitted_image_usages.select { |usage| usage.multiple? }.each_with_index do |usage, multiple_upload_section_index| %>
+    <% @edition.permitted_image_usages.select { |usage| usage.multiple? }.each do |usage| %>
       <% if @edition.editable? %>
         <%= render Admin::EditionImages::ImageUploadComponent.new(edition: @edition, failed_images: @failed_images, image_usage: usage) %>
       <% end %>
@@ -50,33 +50,14 @@
           } %>
         <% end %>
 
-        <div id="uploaded_<%= usage.label || usage.key %>_image_list" class="govuk-list">
-          <% current_images.group_by(&:image_kind).each do |kind, images| %>
-            <%= render "govuk_publishing_components/components/heading", {
-              text: Whitehall.image_kinds.fetch(kind).display_name_without_dimensions,
-              heading_level: 3,
-              font_size: "m",
-              padding: true,
-            } if usage.kinds.size > 1 %>
-            <ul id="uploaded_<%= usage.label || usage.key %>_<%= kind %>_image_list" class="govuk-list">
-              <% images.each_with_index do |image, idx| %>
-                <%= render Admin::EditionImages::ImageComponent.new(edition: @edition, image: image, image_usage: usage) %>
-                <% unless (idx + 1) == images.size %>
-                  <li aria-hidden="true">
-                    <hr class="app-view-edition-resource__section-break govuk-section-break govuk-section-break--visible">
-                  </li>
-                <% end %>
-              <% end %>
-            </ul>
+        <div id="uploaded_embeddable_image_list">
+          <% current_images.each do |image| %>
+            <%= render(Admin::EditionImages::ImageCardComponent.new(edition: @edition, image:, image_usage: usage)) %>
           <% end %>
         </div>
       <% else %>
         <p class="govuk-body">No images uploaded</p>
       <% end %>
-
-      <% unless multiple_upload_section_index == @edition.permitted_image_usages.select { |usage| usage.multiple? }.count - 1 %>
-        <hr aria-hidden="true" class="app-view-edition-resource__section-break govuk-section-break govuk-section-break--visible govuk-!-margin-top-6 govuk-!-margin-bottom-6">
-      <% end %>
     <% end %>
   </div>
 </div>

features/step_definitions/image_steps.rb

@@ -84,7 +84,7 @@ def upload_file(width = nil, height = nil, image_usage_key = "govspeak_embed", f
 end
 
 Then(/^I should see a list with (\d+) image/) do |count|
-  expect(page).to have_selector("ul .app-view-edition-resource__preview", count:)
+  expect(page).to have_selector("#uploaded_embeddable_image_list .gem-c-summary-card", count:)
 end
 
 Then(/^I should see a list with (\d+) (.*) image/) do |_count, image_usage_key|
@@ -113,20 +113,28 @@ def upload_file(width = nil, height = nil, image_usage_key = "govspeak_embed", f
 end
 
 When("I click to delete an image") do
-  first("a", text: "Delete image").click
+  within "#uploaded_embeddable_image_list" do
+    first("a", text: "Delete").click
+  end
 end
 
 When("I click to edit the details of an image") do
   io_object = fixture_file_upload(jpg_image, "image/jpeg").tempfile.to_io
 
   stub_request(:get, %r{.*/media/.*/*.jpg}).to_return(status: 200, body: io_object, headers: {})
-  first("a", text: "Edit details").click
+
+  within "#uploaded_embeddable_image_list" do
+    first("a", text: "Edit").click
+  end
 end
 
 When("I click to edit the details of the image that needs to be cropped") do
   io_object = fixture_file_upload(Rails.root.join("test/fixtures/images/960x960_jpeg.jpg"), "image/jpeg").tempfile.to_io
   stub_request(:get, %r{.*/media/.*/960x960_jpeg.jpg}).to_return(status: 200, body: io_object, headers: {})
-  find_all("a", text: "Edit details").last.click
+
+  within "#uploaded_embeddable_image_list" do
+    find_all("a", text: "Edit").last.click
+  end
 end
 
 Then("I should I see the processing status tag") do

lib/whitehall/image_kinds.rb

@@ -41,10 +41,6 @@ def deconstruct_keys(_keys)
     def version_names
       versions.map(&:prefixed_name)
     end
-
-    def display_name_without_dimensions
-      display_name.split("(").first.strip
-    end
   end
 
   class ImageKinds