Move product image edit modal to Turbo Stream

Didn't even need to touch the controller, because data-turbo-stream tells it to render the turbo_stream format ✨

But you might notice that it doesn't redirect to the right return_url yet. Let's see if we can use more Turbo to avoid the page refresh..

TODO: also handle empty images

app/reflexes/products_reflex.rb

@@ -49,18 +49,6 @@ 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
-    image = product.image
-
-    image = Spree::Image.new(viewable: product) if product.image.blank?
-
-    morph "#modal-component",
-          render(partial: "admin/products_v3/edit_image",
-                 locals: { product:, image:, return_url: url })
-  end
-
   private
 
   def init_filters_params

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

@@ -1,17 +0,0 @@
-= render ModalComponent.new id: "#modal_edit_product_image_#{image.id}", instant: true, close_button: false, modal_class: :fit do
-  %h2= t(".title")
-
-  -# Display image in the same way it appears in the shopfront popup
-  %p= image_tag image.persisted? ? image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
-
-  -# Submit to controller, because StimulusReflex doesn't support file uploads
-  = form_for [:admin, product, image],
-      html: { multipart: true }, data: { controller: "form" } do |f|
-    %input{ type: :hidden, name: :return_url, value: return_url}
-    = f.hidden_field :viewable_id, value: product.id
-
-    .modal-actions.justify-end
-      %input{ class: "secondary relaxed", type: 'button', value: t('.close'), "data-action": "click->modal#close" }
-      -# 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 relaxed icon-upload-alt"
-      = f.file_field :attachment, accept: "image/*", style: "display: none", "data-action": "change->form#submit"

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

@@ -1,7 +1,8 @@
-%td.with-image
-  %a.image-field{ href: admin_product_images_path(product), data: { controller: "modal", reflex: "click->products#edit_image", "current-id": product.id} }
-    = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
-    .button.secondary.mini= t('admin.products_page.image.edit')
+%td.with-image{ id: "image-#{product.id}" }
+  - if product.image.present? # todo: handle blank img
+    %a.image-field{ href: edit_admin_product_image_path(product.id, product.image.id), 'data-turbo-stream': true }
+      = image_tag product.image&.url(:mini) || Spree::Image.default_image_url(:mini), width: 40, height: 40
+      .button.secondary.mini= t('admin.products_page.image.edit')
 %td.field.align-left.header.naked_inputs
   = f.hidden_field :id
   = f.text_field :name, 'aria-label': t('admin.products_page.columns.name')

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

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

app/views/spree/admin/images/edit.turbo_stream.haml

@@ -0,0 +1,18 @@
+= turbo_stream.update "edit_image_modal" do
+  = render ModalComponent.new id: "#modal_edit_product_image", instant: true, close_button: false, modal_class: :fit do
+    %h2= t(".title")
+
+    -# Display image in the same way it appears in the shopfront popup
+    %p= image_tag @image.persisted? ? @image.url(:large) : Spree::Image.default_image_url(:large), width: 433, height: 433
+
+    -# Submit to controller
+    = form_for [:admin, @product, @image],
+        html: { multipart: true }, data: { controller: "form" } do |f|
+      %input{ type: :hidden, name: :return_url, value: request.referer }
+      = f.hidden_field :viewable_id, value: @product.id
+
+      .modal-actions.justify-end
+        %input{ class: "secondary relaxed", type: 'button', value: t('.close'), "data-action": "click->modal#close" }
+        -# 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 relaxed icon-upload-alt"
+        = f.file_field :attachment, accept: "image/*", style: "display: none", "data-action": "change->form#submit"

config/locales/en.yml

@@ -899,10 +899,6 @@ en:
         new_variant: New variant
       bulk_update:
         success: Changes saved
-      edit_image:
-        title: Edit product photo
-        close: Back
-        upload: Upload photo
       delete_product:
         success: Successfully deleted the product
         error: Unable to delete the product
@@ -4148,6 +4144,11 @@ See the %{link} to find out more about %{sitename}'s features and to start using
       must_be_int: "must be an integer"
 
     admin:
+      images:
+        edit:
+          title: Edit product photo
+          close: Back
+          upload: Upload photo
       mail_methods:
         send_testmail: "Send test email"
         testmail: