Show image update form in modal

It submits to the existing controller. I wanted to submit it with StimulusReflex, but it [doesn't support file uploads](https://docs.stimulusreflex.com/guide/working-with-forms.html#a-note-about-file-uploads). Perhaps we'll enhance this with javascript later.

app/components/modal_component/modal_component.scss

@@ -6,6 +6,16 @@
   &.in {
     padding: 1.2rem;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-bottom: 0.5em;
+  }
 }
 
 /* prevent arrow on selected admin menu item appearing above modal */

app/controllers/spree/admin/images_controller.rb

@@ -76,7 +76,7 @@ module Spree
       end
 
       def location_after_save
-        spree.admin_product_images_url(params[:product_id], @url_filters)
+        params[:return_url] || spree.admin_product_images_url(params[:product_id], @url_filters)
       end
 
       def load_data

app/reflexes/products_reflex.rb

@@ -74,6 +74,15 @@ class ProductsReflex < ApplicationReflex
     fetch_and_render_products_with_flash
   end
 
+  def edit_image
+    id = current_id_from_element(element)
+    product = product_finder(id).find_product
+
+    morph "#modal-component",
+          render(partial: "admin/products_v3/edit_image",
+                 locals: { product:, image: product.image, return_url: url })
+  end
+
   private
 
   def init_filters_params
@@ -232,4 +241,10 @@ class ProductsReflex < ApplicationReflex
   def current_id_from_element(element)
     element.dataset.current_id
   end
+
+  def image_params
+    params.require(:image).permit(
+      :attachment, :viewable_id
+    )
+  end
 end

app/views/admin/products_v3/_edit_image.html.haml

@@ -0,0 +1,16 @@
+= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true do
+  %h2= t(".title")
+
+  %p= image_tag image.variant(:product)
+
+  -# Submit to controller, because StimulusReflex doesn't support file uploads
+  = form_for [:admin, product, image], url: admin_product_image_path(product, image),
+      html: { multipart: true } do |f|
+    %input{ type: :hidden, name: :return_url, value: return_url}
+    = f.hidden_field :viewable_id, value: product.id
+
+    %p
+      -# label.button provides a handy shortcut to open the file selector on click. Unfortunately this trick isn't keyboard accessible though..
+      = f.label :attachment, t(".upload"), class: "button primary icon-upload-alt"
+      = f.file_field :attachment, style: "display: none"
+      = f.submit # todo: submit automatically

app/views/admin/products_v3/_table.html.haml

@@ -52,7 +52,7 @@
               .image-field
                 = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
                 - if product.image.present?
-                  = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini"
+                  = link_to t('admin.products_page.image.edit'), edit_admin_product_image_path(product, product.image), class: "button secondary mini", "data-controller": "modal", "data-reflex": "click->products#edit_image", "data-current-id": product.id
             %td.field.align-left.header
               = product_form.hidden_field :id
               = product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name')

app/views/admin/products_v3/index.html.haml

@@ -19,3 +19,5 @@
   #products-content
   - %w[product variant].each do |object_type|
     = render partial: 'delete_modal', locals: { object_type: }
+  #modal-component
+

config/locales/en.yml

@@ -872,6 +872,9 @@ en:
         reset: Discard changes
       bulk_update:
         success: Changes saved
+      edit_image:
+        title: Edit product photo
+        upload: Upload photo
       delete_product:
         success: Successfully deleted the product
         error: Unable to delete the product