Merge pull request #5106 from consul/fix_budget_background_image

Render background images with brackets in their names

app/components/budgets/budget_component.html.erb

@@ -1,6 +1,6 @@
 <% if budget.image.present? %>
   <div class="budget-header with-background-image"
-       style="background-image: url(<%= polymorphic_path(budget.image.variant(:large)) %>);">
+       style="<%= attached_background_css polymorphic_path(budget.image.variant(:large)) %>">
 <% else %>
   <div class="budget-header">
 <% end %>

app/components/budgets/budget_component.rb

@@ -1,5 +1,6 @@
 class Budgets::BudgetComponent < ApplicationComponent
   attr_reader :budget
+  delegate :attached_background_css, to: :helpers
 
   def initialize(budget)
     @budget = budget

app/helpers/images_helper.rb

@@ -14,4 +14,8 @@ module ImagesHelper
                            version: (version if image.persisted?),
                            show_caption: show_caption
   end
+
+  def attached_background_css(path)
+    "background-image: url('#{j path}');"
+  end
 end

app/views/dashboard/poster/index.html.erb

@@ -18,7 +18,7 @@
         </p>
         <div class="proposal-image">
           <% if proposal.image.present? %>
-            <div class="overflow-image" style="background-image: url(<%= polymorphic_path(proposal.image.variant(:large)) %>);"></div>
+            <div class="overflow-image" style="<%= attached_background_css polymorphic_path(proposal.image.variant(:large)) %>"></div>
           <% else %>
             <div class="overflow-image" style="background-image: url(<%= asset_url "default_mailing.jpg" %>);"></div>
           <% end %>

app/views/dashboard/poster/index.pdf.erb

@@ -23,7 +23,7 @@
     </p>
     <div class="proposal-image">
       <% if proposal.image.present? %>
-        <div class="overflow-image" style="background-image: url(<%= polymorphic_url(proposal.image.variant(:large)) %>);"></div>
+        <div class="overflow-image" style="<%= attached_background_css polymorphic_url(proposal.image.variant(:large)) %>"></div>
       <% else %>
         <div class="overflow-image" style="background-image:url('<%= "file://#{Rails.root.join("app","assets","images","default_mailing.jpg")}" %>');"></div>
       <% end %>

app/views/layouts/devise.html.erb

@@ -10,7 +10,7 @@
     <%= raw setting["html.per_page_code_body"] %>
     <div class="wrapper">
       <div class="auth-image small-12 medium-3 column"
-           style="background-image: url(<%= asset_url(image_path_for("auth_bg.jpg")) %>)">
+           style="<%= attached_background_css 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/budget_component_spec.rb

@@ -36,4 +36,43 @@ describe Budgets::BudgetComponent do
       end
     end
   end
+
+  describe "budget image" do
+    it "does not show a background image when the budget has no image" do
+      render_inline Budgets::BudgetComponent.new(budget)
+
+      expect(page).to have_css ".budget-header"
+      expect(page).not_to have_css ".with-background-image"
+      expect(page).not_to have_css ".budget-header[style*='background-image:']"
+    end
+
+    it "shows a background image when the bugdet image is defined" do
+      budget = create(:budget, :with_image)
+
+      render_inline Budgets::BudgetComponent.new(budget)
+
+      expect(page).to have_css ".budget-header.with-background-image"
+      expect(page).to have_css ".budget-header[style*='background-image:'][style*='clippy.jpg']"
+    end
+
+    it "quotes the background image filename so it works with filenames with brackets" do
+      budget.update!(image: create(:image, attachment: fixture_file_upload("clippy(with_brackets).jpg")))
+
+      render_inline Budgets::BudgetComponent.new(budget)
+
+      expect(page).to have_css ".budget-header.with-background-image"
+      expect(page).to have_css ".budget-header[style*='background-image:']"\
+                               "[style*='url(\\''][style*='clippy(with_brackets).jpg\\'']"
+    end
+
+    it "escapes single quotes in the background image filename" do
+      budget.update!(image: create(:image, attachment: fixture_file_upload("clippy_with_'quotes'.jpg")))
+
+      render_inline Budgets::BudgetComponent.new(budget)
+
+      expect(page).to have_css ".budget-header.with-background-image"
+      expect(page).to have_css ".budget-header[style*='background-image:']"\
+                               "[style*='url(\\''][style*='clippy_with_\\\\\'quotes\\\\\'.jpg']"
+    end
+  end
 end

spec/factories/budgets.rb

@@ -65,6 +65,10 @@ FactoryBot.define do
       voting_style { "approval" }
     end
 
+    trait :with_image do
+      after(:create) { |budget| create(:image, imageable: budget) }
+    end
+
     trait :with_winner do
       after(:create) { |budget| create(:budget_investment, :winner, budget: budget) }
     end

spec/factories/files.rb

@@ -8,6 +8,10 @@ FactoryBot.define do
       association :imageable, factory: :proposal
     end
 
+    trait :budget_image do
+      association :imageable, factory: :budget
+    end
+
     trait :budget_investment_image do
       association :imageable, factory: :budget_investment
     end

spec/helpers/images_helper_spec.rb

@@ -0,0 +1,13 @@
+require "rails_helper"
+
+describe ImagesHelper do
+  describe "#attached_background_css" do
+    it "adds quotes around the path" do
+      expect(attached_background_css("myurl")).to eq "background-image: url('myurl');"
+    end
+
+    it "escapes quotes inside the path" do
+      expect(attached_background_css("url_'quotes'")).to eq "background-image: url('url_\\'quotes\\'');"
+    end
+  end
+end

spec/models/budget_spec.rb

@@ -6,6 +6,7 @@ describe Budget do
   it_behaves_like "sluggable", updatable_slug_trait: :drafting
   it_behaves_like "reportable"
   it_behaves_like "globalizable", :budget
+  it_behaves_like "acts as imageable", :budget_image
 
   describe "scopes" do
     describe ".open" do

spec/models/image_spec.rb

@@ -2,6 +2,7 @@ require "rails_helper"
 
 describe Image do
   it_behaves_like "image validations", "budget_investment_image"
+  it_behaves_like "image validations", "budget_image"
   it_behaves_like "image validations", "proposal_image"
 
   it "stores attachments with Active Storage" do