Specify specific image kinds for editions

Rework the previous implementation of edition image partials to accept
an image kind as a parameter. If the image kind supports a single upload
then only show the upload form if no image has been uploaded. Otherwise
show the default (unchanged) edition images view.

Author: patrickpatrickpatrick

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

@@ -1,4 +1,4 @@
-<% if edition.configurable_document_type.present? %>
+<% if edition.configurable_document_type.present? && edition.allows_lead_image? %>
   <%= render "govuk_publishing_components/components/heading", {
     text: "Select a lead image",
     font_size: "l",

app/components/admin/edition_images/uploaded_images_component.rb

@@ -1,17 +1,20 @@
 # frozen_string_literal: true
 
 class Admin::EditionImages::UploadedImagesComponent < ViewComponent::Base
-  def initialize(edition:)
+  def initialize(edition:, image_kind: Whitehall.image_kinds.fetch("default"))
     @edition = edition
+    @image_kind = image_kind
   end
 
 private
 
   attr_reader :edition
 
   def document_images
-    return edition.images unless edition.can_have_custom_lead_image?
+    edition_images = edition.images.select { |image| Whitehall.image_kinds.fetch(image.image_data.image_kind) == @image_kind }
 
-    edition.images - [edition.lead_image].compact
+    return edition_images unless edition.can_have_custom_lead_image?
+
+    edition_images - [edition.lead_image].compact
   end
 end

app/controllers/admin/edition_images_controller.rb

@@ -41,9 +41,7 @@ def update
   def create
     @images = images_params.map { |image| create_image(image) }
 
-    if @images.empty?
-      flash.now.alert = "No images selected. Choose a valid JPEG, PNG, SVG or GIF."
-    elsif @images.all?(&:valid?)
+    if @images.all?(&:valid?)
       @images.each(&:save)
       @edition.update_lead_image if @edition.can_have_custom_lead_image?
       PublishingApiDocumentRepublishingWorker.perform_async(@edition.document_id, false)
@@ -53,7 +51,11 @@ def create
       @images.each { |image| @edition.images.delete(image) }
     end
 
-    render :index
+    if @images.count == 1 && @images.first.valid?
+      redirect_to edit_admin_edition_image_path(@edition, @images.first.id)
+    else
+      render :index
+    end
   end
 
   def create_image(image)
@@ -119,7 +121,7 @@ def enforce_permissions!
   end
 
   def images_params
-    params.fetch(:images, []).map { |image| image.permit(image_data: %i[file]) }
+    params.fetch(:images, []).map { |image| image.permit(image_data: %i[file image_kind]) }
   end
 
   def image_data_params

app/models/concerns/edition/images.rb

@@ -21,7 +21,11 @@ def process_associations_after_save(edition)
   end
 
   included do
-    has_many :images, foreign_key: "edition_id", dependent: :destroy
+    has_many :images, foreign_key: "edition_id", dependent: :destroy do
+      def of_kind(image_kind)
+        joins(:image_data).where(image_data: { image_kind: image_kind })
+      end
+    end
 
     accepts_nested_attributes_for :images, reject_if: :no_substantive_attributes?, allow_destroy: true
 

app/models/edition.rb

@@ -433,6 +433,14 @@ def can_have_custom_lead_image?
     is_a?(Edition::CustomLeadImage)
   end
 
+  def allows_multiple_of_image_kind?(image_kind)
+    image_kind == "govspeak_embed"
+  end
+
+  def permitted_single_upload_image_kinds
+    []
+  end
+
   def images_have_unique_filenames?
     names = images.map(&:filename)
     names.uniq.length == names.length

app/models/image.rb

@@ -9,7 +9,7 @@ class Image < ApplicationRecord
 
   accepts_nested_attributes_for :image_data
 
-  delegate :filename, :content_type, :width, :height, :bitmap?, :svg?, :can_be_cropped?, :requires_crop?, to: :image_data
+  delegate :filename, :content_type, :width, :height, :bitmap?, :svg?, :can_be_cropped?, :requires_crop?, :image_kind, to: :image_data
 
   default_scope -> { order(:id) }
 

app/models/standard_edition.rb

@@ -43,6 +43,10 @@ def body
     block_content["body"]
   end
 
+  def lead_image
+    block_content["image"]
+  end
+
   def body=(_)
     nil
   end
@@ -59,10 +63,24 @@ def locale_can_be_changed?
     translatable? && translations.size <= 1
   end
 
+  def allows_lead_image?
+    type_instance.form["fields"]["image"].present?
+  end
+
   def allows_image_attachments?
     type_instance.settings["images"]["enabled"]
   end
 
+  def allows_multiple_of_image_kind?(image_kind)
+    return if type_instance.settings["images"]["permitted_image_kinds"].blank?
+
+    type_instance_image_kind = type_instance.settings["images"]["permitted_image_kinds"].detect { |permitted_image_kind| permitted_image_kind["kind"] == image_kind }
+
+    return if type_instance_image_kind.blank?
+
+    type_instance_image_kind["multiple"]
+  end
+
   def allows_file_attachments?
     type_instance.settings["file_attachments_enabled"]
   end
@@ -99,6 +117,16 @@ def is_in_valid_state_for_type_conversion?
     %w[draft submitted rejected].include?(state)
   end
 
+  def permitted_single_upload_image_kinds
+    Whitehall.image_kinds.values.select { _1.permitted_uses.intersect?(type_instance.settings["images"]["permitted_image_kinds"].reject { |image| image["multiple"] }.map { |image| image["kind"] }) }
+  end
+
+  def permitted_image_kinds
+    return super unless type_instance.settings["images"]["permitted_image_kinds"]
+
+    Whitehall.image_kinds.values.select { _1.permitted_uses.intersect?(type_instance.settings["images"]["permitted_image_kinds"].map { |image| image["kind"] }) }
+  end
+
 private
 
   def string_for_slug

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

@@ -1,36 +1,29 @@
+<%
+  image_kind ||= Whitehall.image_kinds.fetch("default")
+  text = image_kind.permitted_uses.include?("govspeak_embed") ? "Upload an image" : "Upload #{image_kind.display_name} image"
+%>
+
 <%= form_tag(
   admin_edition_images_path(@edition),
+  id: "#{image_kind.name}_image_upload_form",
   multipart: true,
 ) do %>
   <%= render "govuk_publishing_components/components/file_upload", {
     label: {
-      text: "Upload an image",
+      text:,
     },
     heading_level: 2,
     heading_size: "l",
     javascript: true,
-    multiple: true,
+    multiple: @edition.allows_multiple_of_image_kind?(image_kind.permitted_uses.first),
     name: "images[][image_data][file]",
     id: "edition_images_image_data_file",
     hint: raw('Images can be JPEG, PNG, SVG or GIF files. If you are uploading more than one image, <a class="govuk-link" href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-and-videos">read the image guidance</a> on using unique file names.'),
     error_items: @new_image.present? ? errors_for(@new_image.errors, :"image_data.file") : nil,
     accept: "image/png, image/jpeg, image/gif, image/svg+xml",
   } %>
 
-  <% if @edition.permitted_image_kinds.size == 1 %>
-    <%= hidden_field_tag("image[image_data][image_kind]", @edition.permitted_image_kinds.first.name) %>
-  <% else %>
-    <%= render "govuk_publishing_components/components/radio", {
-      heading: "What kind of image is this?",
-      name: "image[image_data][image_kind]",
-      items: @edition.permitted_image_kinds.map do |image_kind|
-        {
-          value: image_kind.name,
-          text: image_kind.display_name,
-        }
-      end,
-    } %>
-  <% end %>
+  <%= hidden_field_tag("images[][image_data][image_kind]", image_kind.name) %>
 
    <%= render "govuk_publishing_components/components/details", {
       title: "You must use an SVG for charts and diagrams",

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

@@ -10,7 +10,32 @@
       items: secondary_navigation_tabs_items(@edition, request.path),
     } %>
 
-    <%= render "image_upload", edition: @edition %>
-    <%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition) %>
+    <% @edition.permitted_single_upload_image_kinds.each do |image_kind| %>
+
+      <% images_of_image_kind = @edition.images.of_kind(image_kind.name) %>
+
+      <% if images_of_image_kind.count == 0 || @edition.allows_multiple_of_image_kind?(image_kind) %>
+        <%= render "image_upload", edition: @edition, image_kind: %>
+      <% end %>
+
+      <% if images_of_image_kind.count > 0 %>
+        <%= render "govuk_publishing_components/components/heading", {
+          text: "Uploaded #{image_kind.display_name} images",
+          heading_level: 2,
+          font_size: "l",
+          margin_bottom: 2,
+        } %>
+        <ul id="uploaded_<%= image_kind.name %>_image_list" class="govuk-list">
+          <% images_of_image_kind.each do |image| %>
+            <%= render Admin::EditionImages::ImageComponent.new(edition: @edition, image: image, last_image: true) %>
+          <% end %>
+        </ul>
+      <% end %>
+    <% end %>
+
+    <% (@edition.permitted_image_kinds - @edition.permitted_single_upload_image_kinds).each do |image_kind| %>
+      <%= render "image_upload", edition: @edition, image_kind: %>
+      <%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition, image_kind:) %>
+    <% end %>
   </div>
 </div>

features/edition-images-javascript.feature

@@ -11,16 +11,39 @@ Feature: Images tab on edit edition
     When I visit the images tab of the document with images
     Then I should see a list with 2 images
     When I upload a 960x960 image
+    Then I should see the image cropper in the following edit screen
+    When I update the image details and save
     Then I should see a list with 3 images
+    Then I should not see that the image requires cropping
+
+  @javascript
+  Scenario: Images uploaded with cropping required
+    And a draft document with images exists
+    When I visit the images tab of the document with images
+    Then I should see a list with 2 images
+    When I upload multiple images including a 960x960 image
+    Then I should see a list with 4 images
     Then I should see that the image requires cropping
     When I click to edit the details of the image that needs to be cropped
+    Then I should see the image cropper in the following edit screen
     When I update the image details and save
-    Then I should not see that the image requires cropping
+    Then I should see a list with 4 images
+    Then I should not see that the image requires cropping 
+
+  @javascript
+  Scenario: Image uploaded with no cropping required
+    And a draft publication "New Draft Publication" exists
+    When I visit the images tab of the document "New Draft Publication"
+    And I upload a 960x640 image
+    Then I should not see the image cropper in the following edit screen
+    When I update the image details and save
+    Then I should see a list with 1 image      
 
   @javascript
   Scenario: Uploading a file with a duplicated filename
     When a draft document with images exists
     And I visit the images tab of the document with images
     And I upload a 960x960 image
+    When I update the image details and save
     And I upload a 960x960 image
     Then I should get 1 error message