Merge pull request #8445 from alphagov/add-ability-for-user-to-select…

…-lead-image

Add ability for user to select lead image for case studies and news articles

app/assets/stylesheets/admin/views/_edition-resource.scss

@@ -15,4 +15,8 @@
 .app-view-edition-resource__actions {
   margin-top: govuk-spacing(2);
   margin-bottom: 0;
+
+  .app-view-edition-resource__actions__link {
+    align-self: center;
+  }
 }

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

@@ -16,9 +16,18 @@
     } %>
   </div>
 
-  <div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
-    <% links.each do |link| %>
-      <%= link %>
+  <div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group govuk-!-margin-top-4">
+    <%= link_to("Edit details", edit_admin_edition_image_path(edition, image), class: "govuk-link govuk-!-margin-top-2 app-view-edition-resource__actions__link") %>
+    <%= link_to("Delete image", confirm_destroy_admin_edition_image_path(edition, image), class: "govuk-link gem-link--destructive govuk-!-margin-top-2 app-view-edition-resource__actions__link") %>
+
+    <% if edition.can_have_custom_lead_image? %>
+      <%= form_with url: admin_edition_lead_image_path(edition, image), method: :patch do |form| %>
+        <%= render "govuk_publishing_components/components/button", {
+          text: "Select as lead image",
+          secondary_solid: true,
+          margin_bottom: 4,
+        } %>
+      <% end %>
     <% end %>
   </div>
 </li>

app/components/admin/edition_images/image_component.rb

@@ -38,11 +38,4 @@ def find_index_from_non_lead_images
   def find_image_index
     edition.images.find_index(image)
   end
-
-  def links
-    links = []
-    links << link_to("Edit details", edit_admin_edition_image_path(@edition, image), class: "govuk-link")
-    links << link_to("Delete image", confirm_destroy_admin_edition_image_path(@edition, image), class: "govuk-link gem-link--destructive")
-    links
-  end
 end

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

@@ -10,24 +10,35 @@
   <% lead_image_guidance %>
 <% end %>
 
-<% if lead_image.present? || case_study? %>
-  <div class="govuk-grid-row">
-    <% if lead_image.present? %>
-      <div class="app-c-edition-images-lead-image-component__lead_image">
-        <div class="govuk-grid-column-one-third">
-          <img src="<%= lead_image.url %>" alt="Lead image" class="app-view-edition-resource__preview">
-          <% unless lead_image.image_data&.all_asset_variants_uploaded? %>
-            <span class="govuk-tag govuk-tag--green">Processing</span>
-          <% end %>
-        </div>
+<% if lead_image.present? %>
+  <div class="app-c-edition-images-lead-image-component__lead_image">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <img src="<%= lead_image.url %>" alt="Lead image" class="app-view-edition-resource__preview">
+        <% unless lead_image.image_data&.all_asset_variants_uploaded? %>
+          <span class="govuk-tag govuk-tag--green">Processing</span>
+        <% end %>
+      </div>
 
-        <div class="govuk-grid-column-two-thirds">
-          <p class="govuk-body"><strong>Caption: </strong><%= caption %></p>
-          <p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p>
-        </div>
+      <div class="govuk-grid-column-two-thirds">
+        <p class="govuk-body"><strong>Caption: </strong><%= caption %></p>
+        <p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p>
       </div>
-    <% end %>
+    </div>
+  </div>
+<% elsif show_default_lead_image? %>
+  <div class="app-c-edition-images-lead-image-component__default_lead_image">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <img src="<%= edition.lead_image_url %>" alt="Default organisation image" class="app-view-edition-resource__preview">
+      </div>
+    </div>
+    <p class="govuk-hint govuk-!-margin-top-2">Default image for your organisation</p>
+  </div>
+<% end %>
 
+<% if render_resource_actions? %>
+  <div class="govuk-grid-row">
     <div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
       <% if case_study? %>
         <%= form_with(url: update_image_display_option_admin_edition_path(edition), method: :patch) do |form| %>
@@ -38,18 +49,13 @@
             secondary_solid: true,
             margin_bottom: 4,
           } %>
-
-          <% if lead_image.present? %>
-            <% links.each do |link| %>
-              <%= link %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% elsif lead_image.present? %>
-        <% links.each do |link| %>
-          <%= link %>
         <% end %>
       <% end %>
+
+      <% if lead_image.present? %>
+        <%= link_to("Edit details", edit_admin_edition_image_path(edition, lead_image), class: "govuk-link app-view-edition-resource__actions__link") %>
+        <%= link_to("Delete image", confirm_destroy_admin_edition_image_path(edition, lead_image), class: "govuk-link gem-link--destructive app-view-edition-resource__actions__link") %>
+      <% end %>
     </div>
   </div>
 <% end %>

app/components/admin/edition_images/lead_image_component.rb

@@ -15,16 +15,22 @@ def render?
 
   def lead_image_guidance
     if case_study?
-      tag.p("Using a lead image is optional and can be shown or hidden. The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
+      tag.p("Using a lead image is optional. To use a lead image either select the default image for your organisation or upload an image and select it as the lead image.", class: "govuk-body") +
+        tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
     else
-      tag.p("The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
+      tag.p("Any image you upload can be selected as the lead image. If you do not select a new lead image, the default image for your organisation will be used.", class: "govuk-body") +
+        tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
     end
   end
 
   def case_study?
     edition.type == "CaseStudy"
   end
 
+  def news_article?
+    edition.type == "NewsArticle"
+  end
+
   def lead_image
     @lead_image ||= edition.lead_image
   end
@@ -37,50 +43,35 @@ def alt_text
     lead_image.alt_text.presence || "None"
   end
 
+  def show_default_lead_image?
+    if case_study?
+      edition.emphasised_organisation_default_image_available? && [nil, "organisation_image"].include?(edition.image_display_option)
+    elsif news_article?
+      edition.has_lead_image?
+    end
+  end
+
   def new_image_display_option
-    @new_image_display_option ||= if image_display_option_is_no_image? && edition_has_images?
-                                    "custom_image"
-                                  elsif image_display_option_is_no_image?
-                                    "organisation_image"
-                                  else
-                                    "no_image"
-                                  end
+    @new_image_display_option ||= image_display_option_is_no_image? ? "organisation_image" : "no_image"
   end
 
   def image_display_option_is_no_image?
     edition.image_display_option == "no_image"
   end
 
   def update_image_display_option_button_text
-    return image_display_option_button_text_when_image_has_been_uploaded if edition_has_images?
-
-    image_display_option_button_text_when_no_images_uploaded
-  end
-
-  def image_display_option_button_text_when_image_has_been_uploaded
-    return "Hide lead image" if new_image_display_option_is_no_image?
-
-    "Show lead image"
-  end
-
-  def image_display_option_button_text_when_no_images_uploaded
-    return "Remove lead image" if new_image_display_option_is_no_image?
-
-    "Use default image"
+    new_image_display_option_is_no_image? ? "Remove lead image" : "Use default image"
   end
 
   def new_image_display_option_is_no_image?
     new_image_display_option == "no_image"
   end
 
-  def edition_has_images?
-    edition.images.present?
+  def render_resource_actions?
+    case_study? || lead_image.present?
   end
 
-  def links
-    links = []
-    links << link_to("Edit details", edit_admin_edition_image_path(edition, lead_image), class: "govuk-link")
-    links << link_to("Delete image", confirm_destroy_admin_edition_image_path(edition, lead_image), class: "govuk-link gem-link--destructive")
-    links
+  def edition_has_images?
+    edition.images.present?
   end
 end

app/controllers/admin/edition_lead_images_controller.rb

@@ -0,0 +1,45 @@
+class Admin::EditionLeadImagesController < Admin::BaseController
+  before_action :find_edition, :find_image, :enforce_permissions!
+  layout "design_system"
+
+  def update
+    edition_lead_image = @edition.edition_lead_image || @edition.build_edition_lead_image
+    edition_lead_image.assign_attributes(edition_lead_image_params)
+
+    if updater.can_perform? && edition_lead_image.save!
+      updater.perform!
+      redirect_to admin_edition_images_path(@edition), notice: "Lead image updated to #{@image.image_data.carrierwave_image}"
+    else
+      redirect_to admin_edition_images_path(@edition), alert: updater.failure_reason
+    end
+  end
+
+private
+
+  def find_edition
+    edition = Edition.find(params[:edition_id])
+    @edition = LocalisedModel.new(edition, edition.primary_locale)
+  end
+
+  def find_image
+    @image = @edition.images.find(params[:id])
+  end
+
+  def enforce_permissions!
+    enforce_permission!(:update, @edition)
+  end
+
+  def edition_lead_image_params
+    {
+      image_id: @image.id,
+      edition_attributes: {
+        id: @edition.id,
+        image_display_option: "custom_image",
+      },
+    }
+  end
+
+  def updater
+    @updater ||= Whitehall.edition_services.draft_updater(@edition)
+  end
+end

app/models/case_study.rb

@@ -32,4 +32,8 @@ def base_path
   def publishing_api_presenter
     PublishingApi::CaseStudyPresenter
   end
+
+  def emphasised_organisation_default_image_available?
+    lead_organisations.first&.default_news_image.present?
+  end
 end

app/models/edition/custom_lead_image.rb

@@ -34,12 +34,12 @@ def remove_lead_image
   end
 
   def body_does_not_contain_lead_image
-    return if lead_image.blank? || images.none?
+    return if edition_lead_image.blank? || images.none?
 
     html = Whitehall::GovspeakRenderer.new.govspeak_edition_to_html(self)
     doc = Nokogiri::HTML::DocumentFragment.parse(html)
 
-    if doc.css("img").any? { |img| img[:src] == lead_image.url }
+    if doc.css("img").any? { |img| img[:src] == edition_lead_image.image.url }
       errors.add(:body, "cannot have a reference to the lead image in the text")
     end
   end

app/models/edition_lead_image.rb

@@ -1,4 +1,6 @@
 class EditionLeadImage < ApplicationRecord
   belongs_to :edition
   belongs_to :image
+
+  accepts_nested_attributes_for :edition
 end

app/presenters/publishing_api/case_study_presenter.rb

@@ -81,15 +81,11 @@ def image_details
     end
 
     def image_available?
-      item.lead_image.present? || emphasised_organisation_default_image_available?
+      item.lead_image.present? || item.emphasised_organisation_default_image_available?
     end
 
     def image_required?
       item.image_display_option != "no_image"
     end
-
-    def emphasised_organisation_default_image_available?
-      item.lead_organisations.first.default_news_image.present?
-    end
   end
 end

config/routes.rb

@@ -234,6 +234,7 @@ def redirect(path, options = { prefix: Whitehall.router_prefix })
         resources :images, controller: "edition_images", only: %i[create destroy edit update index] do
           get :confirm_destroy, on: :member
         end
+        resources :lead_images, controller: "edition_lead_images", only: %i[update]
       end
 
       get "/editions/:id" => "editions#show"

features/edition-images.feature

@@ -26,10 +26,21 @@ Feature: Images tab on edit edition
     Then I should see the updated image details
 
   Scenario: Lead image setting can be updated from the images tab
-    And a draft case study with images exists
+    And an organisation with a default news image exists
+    And the organisation has a draft case study with images
     When I visit the images tab of the document with images
-    And I click to hide the lead image
-    Then I should see a button to show the lead image
+    Then I should see the organisations default news image
+    When I click to hide the lead image
+    Then I should see a button to select a custom lead image
+    And I should see a button to choose to use the default image
+
+  Scenario: User selects a new lead image
+    And a draft case study with images with the alt text "First image uploaded" and "Second image uploaded" exists
+    When I visit the images tab of the document with images
+    And I make the image with alt text "First image uploaded" the lead image
+    Then I can see that the image with alt text "First image uploaded" is the lead image
+    And I make the image with alt text "Second image uploaded" the lead image
+    Then I can see that the image with alt text "Second image uploaded" is the lead image
 
   Scenario: Image uploaded with no cropping required
     And I start drafting a new publication "Standard Beard Lengths"