Merge pull request #4833 from consul/admin_images

Add more images to admin site customization

app/assets/stylesheets/layout.scss

@@ -998,7 +998,7 @@ footer {
 }
 
 .auth-image {
-  background: $brand image-url("auth_bg.jpg");
+  background-color: $brand;
   background-repeat: no-repeat;
   background-size: cover;
   color: $white;

app/components/budgets/executions/image_component.html.erb

@@ -1,9 +1,7 @@
-<% milestone = first_milestone_with_image(investment) %>
-
 <% if milestone&.image.present? %>
   <%= image_tag milestone.image.variant(:large), alt: milestone.image.title %>
 <% elsif investment.image.present? %>
   <%= image_tag investment.image.variant(:large), alt: investment.image.title %>
 <% else %>
-  <%= image_tag "budget_execution_no_image.jpg", alt: investment.title %>
+  <%= image_tag image_path_for("budget_execution_no_image.jpg"), alt: investment.title %>
 <% end %>

app/components/budgets/executions/image_component.rb

@@ -0,0 +1,15 @@
+class Budgets::Executions::ImageComponent < ApplicationComponent
+  attr_reader :investment
+  delegate :image_path_for, to: :helpers
+
+  def initialize(investment)
+    @investment = investment
+  end
+
+  private
+
+    def milestone
+      investment.milestones.order_by_publication_date
+                           .select { |milestone| milestone.image.present? }.last
+    end
+end

app/components/budgets/investment_component.html.erb

@@ -2,7 +2,7 @@
   <% if investment.image.present? %>
     <%= image_tag investment.image.variant(:large), alt: investment.image.title.unicode_normalize %>
   <% else %>
-    <%= image_tag "budget_investment_no_image.jpg", alt: investment.title %>
+    <%= image_tag(image_path_for("budget_investment_no_image.jpg"), alt: investment.title) %>
   <% end %>
 
   <% if investment.should_show_vote_count? || investment.should_show_price? %>

app/components/budgets/investment_component.rb

@@ -1,5 +1,5 @@
 class Budgets::InvestmentComponent < ApplicationComponent
-  delegate :locale_and_user_status, :namespaced_budget_investment_path, to: :helpers
+  delegate :locale_and_user_status, :namespaced_budget_investment_path, :image_path_for, to: :helpers
   attr_reader :investment
 
   def initialize(investment)

app/components/widget/feeds/process_component.html.erb

@@ -1,7 +1,7 @@
 <div class="legislation-process card">
   <%= link_to url_for(process) do %>
     <figure class="figure-card">
-      <%= image_tag("welcome_process.png", alt: "") %>
+      <%= image_tag(image_path_for("welcome_process.png"), alt: "") %>
       <figcaption>
         <span><%= t("welcome.feed.process_label") %></span><br>
         <h3><%= process.title %></h3>

app/components/widget/feeds/process_component.rb

@@ -1,4 +1,5 @@
 class Widget::Feeds::ProcessComponent < ApplicationComponent
+  delegate :image_path_for, to: :helpers
   attr_reader :process
 
   def initialize(process)

app/helpers/budget_executions_helper.rb

@@ -1,6 +0,0 @@
-module BudgetExecutionsHelper
-  def first_milestone_with_image(investment)
-    investment.milestones.order_by_publication_date
-                         .select { |milestone| milestone.image.present? }.last
-  end
-end

app/models/site_customization/image.rb

@@ -6,15 +6,26 @@ class SiteCustomization::Image < ApplicationRecord
     "social_media_icon" => [470, 246],
     "social_media_icon_twitter" => [246, 246],
     "apple-touch-icon-200" => [200, 200],
+    "auth_bg" => [1280, 1500],
     "budget_execution_no_image" => [800, 600],
+    "budget_investment_no_image" => [800, 600],
+    "favicon" => [16, 16],
     "map" => [420, 500],
-    "logo_email" => [400, 80]
+    "logo_email" => [400, 80],
+    "welcome_process" => [370, 185]
   }.freeze
 
+  VALID_MIME_TYPES = %w[
+    image/jpeg
+    image/png
+    image/vnd.microsoft.icon
+    image/x-icon
+  ].freeze
+
   has_attachment :image
 
   validates :name, presence: true, uniqueness: true, inclusion: { in: ->(*) { VALID_IMAGES.keys }}
-  validates :image, file_content_type: { allow: ["image/png", "image/jpeg"], if: -> { image.attached? }}
+  validates :image, file_content_type: { allow: ->(*) { VALID_MIME_TYPES }, if: -> { image.attached? }}
   validate :check_image
 
   def self.all_images

app/views/budgets/executions/_investments.html.erb

@@ -7,7 +7,7 @@
         <div class="small-12 medium-6 large-4 column end margin-bottom">
           <div class="budget-execution">
             <%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %>
-              <%= render "image", investment: investment %>
+              <%= render Budgets::Executions::ImageComponent.new(investment) %>
               <div class="budget-execution-info">
                 <div class="budget-execution-content">
                   <h5><%= investment.title %></h5>

app/views/layouts/_common_head.html.erb

@@ -10,4 +10,4 @@
 <% end %>
 <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
 <%= csrf_meta_tags %>
-<%= favicon_link_tag "favicon.ico" %>
+<%= favicon_link_tag image_path_for("favicon.ico") %>

app/views/layouts/dashboard.html.erb

@@ -1,16 +1,9 @@
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>" data-current-user-id="<%= current_user&.id %>">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <%= render "layouts/common_head", default_title: setting["org_name"] %>
     <%= render "layouts/meta_tags" %>
-    <title><%= content_for?(:title) ? yield(:title) : setting["org_name"] %></title>
     <%= content_for :canonical %>
-    <%= stylesheet_link_tag "application" %>
-    <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
-    <%= csrf_meta_tags %>
-    <%= favicon_link_tag "favicon.ico" %>
     <%= favicon_link_tag image_path_for("apple-touch-icon-200.png"),
                      rel: "icon apple-touch-icon",
                      sizes: "200x200",

app/views/layouts/devise.html.erb

@@ -9,7 +9,8 @@
   <body class="auth-page">
     <%= raw setting["html.per_page_code_body"] %>
     <div class="wrapper">
-      <div class="auth-image small-12 medium-3 column">
+      <div class="auth-image small-12 medium-3 column"
+           style="background-image: url(<%= asset_url(image_path_for("auth_bg.jpg")) %>)">
         <h1 class="logo margin">
           <%= link_to root_path do %>
             <%= image_tag(image_path_for("logo_header.png"), class: "float-left", alt: setting["org_name"]) %>

spec/components/budgets/executions/image_component_spec.rb

@@ -0,0 +1,25 @@
+require "rails_helper"
+
+describe Budgets::Executions::ImageComponent do
+  context "investment and milestone without image" do
+    let(:component) { Budgets::Executions::ImageComponent.new(Budget::Investment.new) }
+
+    it "shows the default image" do
+      render_inline component
+
+      expect(page).to have_css "img[src*='budget_execution_no_image']"
+    end
+
+    it "shows a custom default image when available" do
+      stub_const("#{SiteCustomization::Image}::VALID_IMAGES", { "budget_execution_no_image" => [260, 80] })
+      create(:site_customization_image,
+             name: "budget_execution_no_image",
+             image: fixture_file_upload("logo_header-260x80.png"))
+
+      render_inline component
+
+      expect(page).to have_css "img[src$='logo_header-260x80.png']"
+      expect(page).not_to have_css "img[src*='budget_execution_no_image']"
+    end
+  end
+end

spec/components/budgets/investment_component_spec.rb

@@ -11,11 +11,26 @@ describe Budgets::InvestmentComponent do
     expect(page).to have_css "img[alt='#{investment.image.title}']"
   end
 
-  it "shows the default image when investment has not an image defined" do
-    investment = create(:budget_investment)
-    render_inline Budgets::InvestmentComponent.new(investment)
+  context "investment without an image" do
+    let(:component) { Budgets::InvestmentComponent.new(create(:budget_investment)) }
 
-    expect(page).to have_css "img[src*='budget_investment_no_image']"
+    it "shows the default image" do
+      render_inline component
+
+      expect(page).to have_css "img[src*='budget_investment_no_image']"
+    end
+
+    it "shows a custom default image when available" do
+      stub_const("#{SiteCustomization::Image}::VALID_IMAGES", { "budget_investment_no_image" => [260, 80] })
+      create(:site_customization_image,
+             name: "budget_investment_no_image",
+             image: fixture_file_upload("logo_header-260x80.png"))
+
+      render_inline component
+
+      expect(page).to have_css "img[src$='logo_header-260x80.png']"
+      expect(page).not_to have_css "img[src*='budget_investment_no_image']"
+    end
   end
 
   it "shows supports count when budget is valuating" do

spec/components/widget/feeds/process_component_spec.rb

@@ -20,4 +20,24 @@ describe Widget::Feeds::ProcessComponent do
 
     expect(page).to have_css("img[alt='1. No Poverty']")
   end
+
+  describe "image" do
+    it "shows the default image" do
+      render_inline component
+
+      expect(page).to have_css "img[src*='welcome_process']"
+    end
+
+    it "shows a custom default image when available" do
+      stub_const("#{SiteCustomization::Image}::VALID_IMAGES", { "welcome_process" => [260, 80] })
+      create(:site_customization_image,
+             name: "welcome_process",
+             image: fixture_file_upload("logo_header-260x80.png"))
+
+      render_inline component
+
+      expect(page).to have_css "img[src$='logo_header-260x80.png']"
+      expect(page).not_to have_css "img[src*='welcome_process']"
+    end
+  end
 end

spec/models/site_customization/image_spec.rb

@@ -44,4 +44,18 @@ describe SiteCustomization::Image do
       expect(map).not_to be_valid
     end
   end
+
+  it "dynamically validates the valid mime types" do
+    stub_const("#{SiteCustomization::Image}::VALID_MIME_TYPES", ["image/gif"])
+
+    gif = build(:site_customization_image,
+                name: "logo_header",
+                image: fixture_file_upload("logo_header.gif"))
+    expect(gif).to be_valid
+
+    png = build(:site_customization_image,
+                name: "logo_header",
+                image: fixture_file_upload("logo_header.png"))
+    expect(png).not_to be_valid
+  end
 end

spec/system/site_customization/images_spec.rb

@@ -0,0 +1,23 @@
+require "rails_helper"
+
+describe "Site customization images" do
+  scenario "Custom favicon" do
+    create(:site_customization_image, name: "favicon", image: fixture_file_upload("favicon_custom.ico"))
+
+    visit root_path
+
+    expect(page).to have_css("link[rel='shortcut icon'][href$='favicon_custom.ico']", visible: :hidden)
+  end
+
+  scenario "Custom auth background" do
+    stub_const("#{SiteCustomization::Image}::VALID_IMAGES", { "auth_bg" => [260, 80] })
+    create(:site_customization_image,
+           name: "auth_bg",
+           image: fixture_file_upload("logo_header-260x80.png"))
+
+    visit new_user_session_path
+
+    expect(page).to have_css "[style*='background-image:'][style*='logo_header-260x80.png']"
+    expect(page).not_to have_css "[style*='auth_bg']"
+  end
+end