work on upload screen

Author: patrickpatrickpatrick

app/components/admin/edition_images/image_component.rb

@@ -7,6 +7,10 @@ def initialize(edition:, image:, last_image:)
     @last_image = last_image
   end
 
+  def embeddable_image?
+    Whitehall.image_kinds.fetch(@image.image_data.image_kind).permitted_uses.include?("govspeak_embed")
+  end
+
 private
 
   attr_reader :edition, :image, :last_image

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

@@ -1,4 +1,4 @@
-<% if edition.configurable_document_type.present? && @edition.type_instance.form("images").present? %>
+<% if edition.configurable_document_type.present? %>
   <%= 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,24 @@
 # 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
+
+  def embeddable_image?
+    @image_kind.permitted_uses.include?("govspeak_embed")
   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 }
+
+    return edition_images unless edition.can_have_custom_lead_image?
 
-    edition.images - [edition.lead_image].compact
+    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/edition.rb

@@ -433,6 +433,10 @@ 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 images_have_unique_filenames?
     names = images.map(&:filename)
     names.uniq.length == names.length

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
@@ -63,6 +67,16 @@ 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

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

@@ -3,53 +3,57 @@
   text = image_kind.permitted_uses.include?("govspeak_embed") ? "Upload an image" : "Upload an #{image_kind.display_name} image"
 %>
 
-<%= form_tag(
-  admin_edition_images_path(@edition),
-  multipart: true,
-) do %>
-  <%= render "govuk_publishing_components/components/file_upload", {
-    label: {
-      text:,
-    },
-    heading_level: 2,
-    heading_size: "l",
-    javascript: true,
-    multiple: true,
-    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 image_kind.present? %>
-    <%= 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,
+<% unless !@edition.allows_multiple_of_image_kind?(image_kind.permitted_uses.first) && @edition.images.select { |image| Whitehall.image_kinds.fetch(image.image_data.image_kind) == image_kind }.count == 1 %>
+  <%= form_tag(
+    admin_edition_images_path(@edition),
+    multipart: true,
+  ) do %>
+    <%= render "govuk_publishing_components/components/file_upload", {
+      label: {
+        text:,
+      },
+      heading_level: 2,
+      heading_size: "l",
+      javascript: 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",
     } %>
-  <% end %>
 
-   <%= 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://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-and-videos#creating-an-svg-file",
-      class: "govuk-link",
-      target: "_blank",
-      rel: "noopener" %>.
+    <% if image_kind.present? %>
+      <%= hidden_field_tag("images[][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: "images[][image_data][image_kind]",
+        items: @edition.permitted_image_kinds.map do |image_kind|
+          {
+            value: image_kind.name,
+            text: image_kind.display_name,
+          }
+        end,
+      } %>
     <% end %>
 
-  <%= render "govuk_publishing_components/components/button", {
-    text: "Upload",
-    margin_bottom: 10,
-  } %>
+     <%= 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://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-and-videos#creating-an-svg-file",
+        class: "govuk-link",
+        target: "_blank",
+        rel: "noopener" %>.
+      <% end %>
+
+    <%= render "govuk_publishing_components/components/button", {
+      text: "Upload",
+      margin_bottom: 10,
+    } %>
+  <% end %>
 <% end %>
+
+<%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition, image_kind:) %>

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

@@ -10,14 +10,8 @@
       items: secondary_navigation_tabs_items(@edition, request.path),
     } %>
 
-    <% if @edition.is_a?(StandardEdition) %>
-      <% @edition.permitted_image_kinds.each do |image_kind| %>
-        <%= render "image_upload", edition: @edition, image_kind: %>
-      <% end %>
-    <% else %>
-      <%= render "image_upload", edition: @edition %>
+    <% @edition.permitted_image_kinds.each do |image_kind| %>
+      <%= render "image_upload", edition: @edition, image_kind: %>
     <% end %>
-
-    <%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition) %>
   </div>
 </div>

config/image_kinds.yml

@@ -112,7 +112,7 @@ topical_event_header:
   permitted_uses:
     - header
   versions:
-    - name: hero_desktop_2x
+    - name: s800_header
       width: 800
       height: 800
 topical_event_logo:
@@ -122,6 +122,6 @@ topical_event_logo:
   permitted_uses:
     - logo
   versions:
-    - name: hero_desktop_2x
+    - name: s800_logo
       width: 800
       height: 800

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