Merge pull request #12504 from dacook/buu/edit-image-turbo-12399

[BUU] Remove StimulusReflex from Image Edit

Gemfile

@@ -105,6 +105,8 @@ gem 'sidekiq-scheduler'
 gem "cable_ready"
 gem "stimulus_reflex"
 
+gem "turbo-rails"
+
 gem 'combine_pdf'
 gem 'wicked_pdf'
 gem 'wkhtmltopdf-binary'

Gemfile.lock

@@ -783,6 +783,10 @@ GEM
     timecop (0.9.8)
     timeout (0.4.1)
     ttfunk (1.7.0)
+    turbo-rails (2.0.5)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
@@ -971,6 +975,7 @@ DEPENDENCIES
   stringex (~> 2.8.5)
   stripe
   timecop
+  turbo-rails
   valid_email2
   validates_lengths_from_database
   vcr

app/controllers/admin/products_v3_controller.rb

@@ -2,6 +2,8 @@
 
 module Admin
   class ProductsV3Controller < Spree::Admin::BaseController
+    helper ProductsHelper
+
     before_action :init_filters_params
     before_action :init_pagination_params
 

app/controllers/spree/admin/images_controller.rb

@@ -3,6 +3,8 @@
 module Spree
   module Admin
     class ImagesController < ::Admin::ResourceController
+      helper ::Admin::ProductsHelper
+
       # This will make resource controller redirect correctly after deleting product images.
       # This can be removed after upgrading to Spree 2.1.
       # See here https://github.com/spree/spree/commit/334a011d2b8e16355e4ae77ae07cd93f7cbc8fd1
@@ -17,7 +19,10 @@ module Spree
       def new
         @url_filters = ::ProductFilters.new.extract(request.query_parameters)
 
-        render layout: !request.xhr?
+        respond_with do |format|
+          format.turbo_stream { render :edit }
+          format.all { render layout: !request.xhr? }
+        end
       end
 
       def edit
@@ -47,7 +52,11 @@ module Spree
 
         if @object.update(permitted_resource_params)
           flash[:success] = flash_message_for(@object, :successfully_updated)
-          redirect_to location_after_save
+
+          respond_with do |format|
+            format.html { redirect_to location_after_save }
+            format.turbo_stream
+          end
         else
           respond_with(@object)
         end

app/helpers/admin/products_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Admin
+  module ProductsHelper
+    def product_image_form_path(product)
+      if product.image.present?
+        edit_admin_product_image_path(product.id, product.image.id)
+      else
+        new_admin_product_image_path(product.id)
+      end
+    end
+  end
+end

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_image.html.haml

@@ -0,0 +1,3 @@
+%a.image-field{ href: product_image_form_path(product), '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')

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

@@ -1,7 +1,5 @@
-%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}" }
+  = render partial: "product_image", locals: { product: }
 %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,19 @@
+= 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 as turbo stream to avoid full page reload.
+    -# TODO: show loading indicator.
+    = 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 change->modal#close"

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

@@ -0,0 +1,3 @@
+= turbo_stream.update "image-#{@product.id}" do
+  = render partial: "admin/products_v3/product_image", locals: { product: @product }
+  = render partial: "admin/shared/flashes", locals: { flashes: flash } if defined? flash

app/webpacker/controllers/form_controller.js

@@ -2,6 +2,8 @@ import { Controller } from "stimulus";
 
 export default class FormController extends Controller {
   submit() {
-    this.element.submit();
+    // Validate and submit the form, using the default submit button. Raises JS events.
+    // Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
+    this.element.requestSubmit();
   }
 }

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: