Fix issue with uploading images

There was an issue in which multiple forms were being created and this
make image uploading failed. This fixes the issue by making sure only
one form is created.

app/components/mcm/banner_component/banner_component.html+admin.haml

@@ -1,31 +1,30 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    .row
-      .col-6= metadata_form.text_field :title, required: true
-      .col-6= metadata_form.select :title_color, available_text_colors, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  .row
+    .col-6= metadata_form.text_field :title, required: true
+    .col-6= metadata_form.select :title_color, available_text_colors, required: true
 
-    = metadata_form.label :content
-    = metadata_form.hidden_field :content, required: true
-    %trix-editor{ input: 'components_page_metadata_content' }
+  = metadata_form.label :content
+  = metadata_form.hidden_field :content, required: true
+  %trix-editor{ input: 'components_page_metadata_content' }
 
-    .row.mt-3
-      .col-6
-        = metadata_form.select :content_color, available_text_colors
-      .col-6
-        = metadata_form.select :content_alignment, text_alignments, required: true
-    .row
-      .col-6
-        = metadata_form.text_field :cta, required: true, label: 'CTA'
-      .col-6
-        = metadata_form.text_field :cta_url, required: true, label: 'URL'
-    .row
-      .col-6
-        = metadata_form.select :button_color, available_button_colors
+  .row.mt-3
+    .col-6
+      = metadata_form.select :content_color, available_text_colors
+    .col-6
+      = metadata_form.select :content_alignment, text_alignments, required: true
+  .row
+    .col-6
+      = metadata_form.text_field :cta, required: true, label: 'CTA'
+    .col-6
+      = metadata_form.text_field :cta_url, required: true, label: 'URL'
+  .row
+    .col-6
+      = metadata_form.select :button_color, available_button_colors
 
-  - 2.times { @component.assets.build } if @component.assets.empty?
-  - component_form.fields_for :assets do |assets_form|
-    = assets_form.hidden_field :position, value: assets_form.index + 1
-    = render Mcm::ImageComponent.new(form: assets_form,
-                                     styles: image_preview_styles(variant_for(assets_form.index)),
-                                     variant: variant_for(assets_form.index),
-                                     label: t("custom_pages.components.banner.image_#{assets_form.index + 1}"))
+- 2.times { @component.assets.build } if @component.assets.empty?
+- @component_form.fields_for :assets do |assets_form|
+  = assets_form.hidden_field :position, value: assets_form.index + 1
+  = render Mcm::ImageComponent.new(form: assets_form,
+                                    styles: image_preview_styles(variant_for(assets_form.index)),
+                                    variant: variant_for(assets_form.index),
+                                    label: t("custom_pages.components.banner.image_#{assets_form.index + 1}"))

app/components/mcm/base_component.rb

@@ -4,8 +4,9 @@ def self.component_type
       "content"
     end
 
-    def initialize(component:)
+    def initialize(component:, component_form: )
       @component = component
+      @component_form = component_form
     end
 
     def defaults

app/components/mcm/columns_component/columns_component.html+admin.haml

@@ -1,15 +1,14 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.text_field :section_title, help: t('custom_pages.messages.leave_empty')
-    .row
-      .col-6
-        = metadata_form.select :section_title_alignment, text_alignments, required: true
-      .col-6
-        = metadata_form.select :section_title_color, available_text_colors, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.text_field :section_title, help: t('custom_pages.messages.leave_empty')
+  .row
+    .col-6
+      = metadata_form.select :section_title_alignment, text_alignments, required: true
+    .col-6
+      = metadata_form.select :section_title_color, available_text_colors, required: true
 
-    .row
-      .col-6
-        = metadata_form.text_field :background_color, label: t('custom_pages.components.background_color'), help: '#ffffff'
-      .col-6
-        = metadata_form.number_field :height, label: t('custom_pages.components.height.label'), help: t('custom_pages.components.height.help')
-    = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch
+  .row
+    .col-6
+      = metadata_form.text_field :background_color, label: t('custom_pages.components.background_color'), help: '#ffffff'
+    .col-6
+      = metadata_form.number_field :height, label: t('custom_pages.components.height.label'), help: t('custom_pages.components.height.help')
+  = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch

app/components/mcm/columns_component/columns_component.html.haml

@@ -2,7 +2,7 @@
   - if @component.metadata.section_title.present?
     %h2{ class: title_classes }= @component.metadata.section_title
 
-  .d-flex.align-content-center{ style: "height:#{height}px" }
+  .d-flex.align-content-center{ style: "height:#{height}" }
     - @component.children.active.each do |component|
       .d-flex.align-items-center.flex-wrap
         = render "mcm/child_component", component: component

app/components/mcm/hero_image_component/hero_image_component.html+admin.haml

@@ -1,4 +1,3 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - @component.assets.first_or_initialize
-  - component_form.fields_for :assets do |assets_form|
-    = render Mcm::ImageComponent.new(form: assets_form, variant: :desktop, styles: image_preview_styles)
+- @component.assets.first_or_initialize
+- @component_form.fields_for :assets do |assets_form|
+  = render Mcm::ImageComponent.new(form: assets_form, variant: :desktop, styles: image_preview_styles)

app/components/mcm/hero_image_title_content_cta_component/hero_image_title_content_cta_component.html+admin.haml

@@ -1,36 +1,35 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - @component.assets.first_or_initialize
-  - component_form.fields_for :assets do |assets_form|
-    = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles)
+- @component.assets.first_or_initialize
+- @component_form.fields_for :assets do |assets_form|
+  = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles)
 
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    .row
-      .col-6
-        = metadata_form.text_field :title, required: true
-      .col-6
-        = metadata_form.select :title_color, available_text_colors, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  .row
+    .col-6
+      = metadata_form.text_field :title, required: true
+    .col-6
+      = metadata_form.select :title_color, available_text_colors, required: true
 
-    = metadata_form.label :content
-    = metadata_form.hidden_field :content, required: true
-    %trix-editor{ input: 'components_page_metadata_content' }
+  = metadata_form.label :content
+  = metadata_form.hidden_field :content, required: true
+  %trix-editor{ input: 'components_page_metadata_content' }
 
-    .row.mt-3
-      .col-6
-        = metadata_form.select :content_alignment, text_alignments, required: true
-      .col-6
-        = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true
-    .row
-      .col-6
-        = metadata_form.select :content_color, available_text_colors, required: true
-      .col-6
-        = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true
-    .row
-      .col-6
-        = metadata_form.text_field :cta
-      .col-6
-        = metadata_form.text_field :cta_url
-    .row
-      .col-6
-        = metadata_form.select :button_color, available_button_colors
-      .col-6
-        = metadata_form.select :button_alignment, text_alignments, required: true
+  .row.mt-3
+    .col-6
+      = metadata_form.select :content_alignment, text_alignments, required: true
+    .col-6
+      = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true
+  .row
+    .col-6
+      = metadata_form.select :content_color, available_text_colors, required: true
+    .col-6
+      = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true
+  .row
+    .col-6
+      = metadata_form.text_field :cta
+    .col-6
+      = metadata_form.text_field :cta_url
+  .row
+    .col-6
+      = metadata_form.select :button_color, available_button_colors
+    .col-6
+      = metadata_form.select :button_alignment, text_alignments, required: true

app/components/mcm/hero_slider_component/hero_slider_component.html+admin.haml

@@ -1,4 +1,3 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.number_field :height, required: true
-    = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.number_field :height, required: true
+  = metadata_form.check_box :full_width, label: t('custom_pages.components.full_width'), custom: :switch

app/components/mcm/hero_slider_component/hero_slider_component.html.haml

@@ -1,5 +1,5 @@
 %div{ class: @component.full_width? ? 'container-fluid p-0' : 'container' }
-  .carousel.slide.w-100{ data: { ride: 'carousel' }, id: "hero-slide-#{@component.id}", style: "height: #{height}px;" }
+  .carousel.slide.w-100{ data: { ride: 'carousel' }, id: "hero-slide-#{@component.id}", style: "height: #{height};" }
     .carousel-inner
       - @component.children.active.each_with_index do |slide, index|
         .carousel-item{ class: index.zero? ? 'active' : '' }= render "mcm/child_component", component: slide

app/components/mcm/image_component.rb

@@ -12,7 +12,7 @@ def initialize(opts = {})
     protected
 
     def image_src
-      return unless @asset.persisted?
+      return unless @asset && @asset.attachment.attached?
 
       @asset.attachment.variant(@variant).processed.url
     end

app/components/mcm/image_title_description_cta_component/image_title_description_cta_component.html+admin.haml

@@ -1,24 +1,23 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - @component.assets.first_or_initialize
-  - component_form.fields_for :assets do |assets_form|
-    = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles, variant: :small)
+- @component.assets.first_or_initialize
+- @component_form.fields_for :assets do |assets_form|
+  = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles, variant: :small)
 
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.text_field :title, required: true, help: 'Always centered'
-    = metadata_form.select :title_color, available_text_colors, required: true
-    = metadata_form.text_area :content, required: true
-    .row
-      .col-6
-        = metadata_form.select :content_color, available_text_colors, required: true
-      .col-6
-        = metadata_form.select :content_alignment, text_alignments, required: true
-    .row
-      .col-6
-        = metadata_form.text_field :cta, label: "Call to Action"
-      .col-6
-        = metadata_form.text_field :cta_url, label: "Call to Action URL"
-    .row
-      .col-6
-        = metadata_form.select :button_color, available_button_colors
-      .col-6
-        = metadata_form.select :button_alignment, text_alignments, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.text_field :title, required: true, help: 'Always centered'
+  = metadata_form.select :title_color, available_text_colors, required: true
+  = metadata_form.text_area :content, required: true
+  .row
+    .col-6
+      = metadata_form.select :content_color, available_text_colors, required: true
+    .col-6
+      = metadata_form.select :content_alignment, text_alignments, required: true
+  .row
+    .col-6
+      = metadata_form.text_field :cta, label: "Call to Action"
+    .col-6
+      = metadata_form.text_field :cta_url, label: "Call to Action URL"
+  .row
+    .col-6
+      = metadata_form.select :button_color, available_button_colors
+    .col-6
+      = metadata_form.select :button_alignment, text_alignments, required: true

app/components/mcm/rich_text_component/rich_text_component.html+admin.haml

@@ -1,5 +1,4 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    %trix-editor{ input: 'components_page_metadata_body' }
-    = metadata_form.hidden_field :body
-    = metadata_form.select :content_color, available_text_colors, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  %trix-editor{ input: 'components_page_metadata_body' }
+  = metadata_form.hidden_field :body
+  = metadata_form.select :content_color, available_text_colors, required: true

app/components/mcm/square_image_component/square_image_component.html+admin.haml

@@ -1,8 +1,7 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.select :vertical_alignment, vertical_alignment_options, required: true
-    = metadata_form.select :horizontal_alignment, horizontal_alignment_options, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.select :vertical_alignment, vertical_alignment_options, required: true
+  = metadata_form.select :horizontal_alignment, horizontal_alignment_options, required: true
 
-  - @component.assets.first_or_initialize
-  - component_form.fields_for :assets do |assets_form|
-    = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles, variant: :small)
+- @component.assets.first_or_initialize
+- @component_form.fields_for :assets do |assets_form|
+  = render Mcm::ImageComponent.new(form: assets_form, styles: image_preview_styles, variant: :small)

app/components/mcm/title_content_cta_component/title_content_cta_component.html+admin.haml

@@ -1,26 +1,25 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.text_field :title, required: true
-    .row
-      .col-6
-        = metadata_form.select :title_alignment, text_alignments, required: true
-      .col-6
-        = metadata_form.select :title_color, available_text_colors, required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.text_field :title, required: true
+  .row
+    .col-6
+      = metadata_form.select :title_alignment, text_alignments, required: true
+    .col-6
+      = metadata_form.select :title_color, available_text_colors, required: true
 
-    = metadata_form.hidden_field :content, required: true
-    %trix-editor{ input: 'components_page_metadata_content' }
+  = metadata_form.hidden_field :content, required: true
+  %trix-editor{ input: 'components_page_metadata_content' }
 
-    .row.mt-3
-      .col-6
-        = metadata_form.select :content_alignment, text_alignments, required: true
-      .col-6
-        = metadata_form.select :content_color, available_text_colors, required: true
-    .row
-      .col-6
-        = metadata_form.text_field :cta_title, label: t('.cta.title')
-        = metadata_form.text_field :cta_url, label: t('.cta.url')
-        = metadata_form.select :button_color, available_button_colors, label: t('.cta.button')
-        = metadata_form.select :button_alignment, text_alignments, required: true
-      .col-6
-        = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true, label: t('.position.vertical')
-        = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true, label: t('.position.horizontal')
+  .row.mt-3
+    .col-6
+      = metadata_form.select :content_alignment, text_alignments, required: true
+    .col-6
+      = metadata_form.select :content_color, available_text_colors, required: true
+  .row
+    .col-6
+      = metadata_form.text_field :cta_title, label: t('.cta.title')
+      = metadata_form.text_field :cta_url, label: t('.cta.url')
+      = metadata_form.select :button_color, available_button_colors, label: t('.cta.button')
+      = metadata_form.select :button_alignment, text_alignments, required: true
+    .col-6
+      = metadata_form.select :content_vertical_alignment, vertical_alignment_options, required: true, label: t('.position.vertical')
+      = metadata_form.select :content_horizontal_alignment, horizontal_alignment_options, required: true, label: t('.position.horizontal')

app/components/mcm/youtube_video_component/youtube_video_component.html+admin.haml

@@ -1,4 +1,3 @@
-- render "mcm/component_form", component: @component do |component_form|
-  - component_form.fields_for :metadata, @component.metadata do |metadata_form|
-    = metadata_form.number_field :height, required: true
-    = metadata_form.text_field :youtube_video_id, placeholder: 'vlDzyIIMYma', help: 'Youtube video id', required: true
+- @component_form.fields_for :metadata, @component.metadata do |metadata_form|
+  = metadata_form.number_field :height, required: true
+  = metadata_form.text_field :youtube_video_id, placeholder: 'vlDzyIIMYma', help: 'Youtube video id', required: true

app/models/mcm/components_page.rb

@@ -33,7 +33,7 @@ class ComponentsPage < Mcm::ApplicationRecord
     before_destroy :update_related_positions
 
     def view_component(component_form: nil)
-      "::Mcm::#{component_name.camelize}Component".constantize.new(component: self)
+      "::Mcm::#{component_name.camelize}Component".constantize.new(component: self, component_form:)
     end
 
     # rubocop:disable Rails/SkipsModelValidations

app/views/mcm/admin/components/edit.html.haml

@@ -13,10 +13,9 @@
 - if @component.draft?
   .alert.alert-warning= t('custom_pages.messages.draft')
 
-= bootstrap_form_for @component, as: :components_page,
-    url: main_app.admin_component_path(@component), method: :put do |f|
-  = f.text_field :name, required: true
+= bootstrap_form_for @component, as: :components_page, url: main_app.admin_component_path(@component), method: :put do |f|
   .form-group
+    = f.text_field :name, required: true
     = f.check_box :active, label: t('custom_pages.components.status'), custom: :switch
 
   = render @component.view_component(component_form: f)

app/views/mcm/pages/show.html.haml

@@ -9,8 +9,7 @@
       - Rails.logger.error(e)
       .container
         %h4= t('custom_pages.messages.something_went_wrong')
-        = link_to(t('custom_pages.actions.edit_component'),
-            main_app.edit_admin_component_path(component))
+        = link_to(t('custom_pages.actions.edit_component'), main_app.edit_admin_component_path(component))
 
 - if @page.metadata.background_color.present?
   :css