feature: action dynamic backdrop option (#3379)

* feature: action dynamic backdrop option

* style: dynamic_backdrop reader

* code review changes

* rename to `close_modal_on_backdrop_click`

Author: thiagoyoussef

app/components/avo/modal_component.html.erb

@@ -1,8 +1,9 @@
 <div class="modal-container fixed inset-0 w-full min-h-screen z-[100] flex justify-center items-center"
   data-controller="modal"
   data-modal-target="modal"
+  data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
 >
-  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-action="click->modal#close"></div>
+  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close" ></div>
   <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal <%= overflow_classes %> <%= width_classes %> <%= height_classes %>">
     <div class="flex-1 flex flex-col justify-between">
       <div>
@@ -25,4 +26,3 @@
     </div>
   </div>
 </div>
-

app/components/avo/modal_component.rb

@@ -7,6 +7,7 @@ class Avo::ModalComponent < Avo::BaseComponent
   prop :width, default: :md
   prop :body_class
   prop :overflow, default: :auto
+  prop :close_modal_on_backdrop_click, default: true, reader: :public
 
   def width_classes
     case @width.to_sym

app/javascript/js/controllers/modal_controller.js

@@ -1,9 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ['modal']
+  static targets = ['modal', 'backdrop']
+
+  static values = {
+    closeModalOnBackdropClick: true,
+  }
 
   close() {
+    if (event.target === this.backdropTarget && !this.closeModalOnBackdropClickValue) return
+
     this.modalTarget.remove()
 
     document.dispatchEvent(new Event('actions-modal:close'))

app/views/avo/actions/show.html.erb

@@ -21,7 +21,7 @@
         **@action.class.form_data_attributes,
       } do |form|
     %>
-    <%= render Avo::ModalComponent.new do |c| %>
+    <%= render Avo::ModalComponent.new(close_modal_on_backdrop_click: @action.close_modal_on_backdrop_click) do |c| %>
       <% c.with_heading do %>
         <%= @action.action_name %>
       <% end %>

lib/avo/base_action.rb

@@ -14,6 +14,7 @@ class BaseAction
     class_attribute :may_download_file
     class_attribute :turbo
     class_attribute :authorize, default: true
+    class_attribute :close_modal_on_backdrop_click, default: true
 
     attr_accessor :view
     attr_accessor :response

spec/dummy/app/avo/actions/export_csv.rb

@@ -4,6 +4,7 @@ class Avo::Actions::ExportCsv < Avo::BaseAction
   self.name = "Export CSV"
   self.no_confirmation = false
   self.standalone = true
+  self.close_modal_on_backdrop_click = false
 
   def fields
     # Add more fields here for custom user-selected columns

spec/system/avo/actions_spec.rb

@@ -168,6 +168,35 @@
     end
   end
 
+  describe "action close_modal_on_backdrop_click" do
+    it "closes the modal on backdrop click" do
+      Avo::Actions::ExportCsv.close_modal_on_backdrop_click = true
+
+      visit "/admin/resources/projects"
+
+      click_on "Actions"
+      click_on "Export CSV"
+      find('[data-modal-target="backdrop"]').trigger("click")
+
+      expect(page).not_to have_selector '[data-controller="modal"]'
+    end
+
+    it "does not close the modal on backdrop click" do
+      Avo::Actions::ExportCsv.close_modal_on_backdrop_click = false
+
+      visit "/admin/resources/projects"
+
+      click_on "Actions"
+      click_on "Export CSV"
+      find('[data-modal-target="backdrop"]').trigger("click")
+
+      expect(page).to have_selector '[data-controller="modal"]'
+
+      click_on "Cancel"
+      expect(page).not_to have_selector '[data-controller="modal"]'
+    end
+  end
+
   describe "redirects when no confirmation" do
     it "redirects to hey page" do
       visit "/admin/resources/users"