From 40abfedb32b6f4a38aa97797dbd9bae4c9eee072 Mon Sep 17 00:00:00 2001
From: Thiago Youssef <43591948+thiagoyoussef@users.noreply.github.com>
Date: Tue, 5 Nov 2024 05:03:59 -0300
Subject: [PATCH] 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`
---
 app/components/avo/modal_component.html.erb   |  4 +--
 app/components/avo/modal_component.rb         |  1 +
 .../js/controllers/modal_controller.js        |  8 ++++-
 app/views/avo/actions/show.html.erb           |  2 +-
 lib/avo/base_action.rb                        |  1 +
 spec/dummy/app/avo/actions/export_csv.rb      |  1 +
 spec/system/avo/actions_spec.rb               | 29 +++++++++++++++++++
 7 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/app/components/avo/modal_component.html.erb b/app/components/avo/modal_component.html.erb
index 883937dedb..a074beb9c5 100644
--- a/app/components/avo/modal_component.html.erb
+++ b/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>
-
diff --git a/app/components/avo/modal_component.rb b/app/components/avo/modal_component.rb
index eb40f2470f..29090bf18c 100644
--- a/app/components/avo/modal_component.rb
+++ b/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
diff --git a/app/javascript/js/controllers/modal_controller.js b/app/javascript/js/controllers/modal_controller.js
index 0271a978f9..f071983aa4 100644
--- a/app/javascript/js/controllers/modal_controller.js
+++ b/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'))
diff --git a/app/views/avo/actions/show.html.erb b/app/views/avo/actions/show.html.erb
index 6e37ab3c4a..c56ce68fa3 100644
--- a/app/views/avo/actions/show.html.erb
+++ b/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 %>
diff --git a/lib/avo/base_action.rb b/lib/avo/base_action.rb
index 2be20de445..5a6b3665e4 100644
--- a/lib/avo/base_action.rb
+++ b/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
diff --git a/spec/dummy/app/avo/actions/export_csv.rb b/spec/dummy/app/avo/actions/export_csv.rb
index d5e0b17e5a..9f00c17364 100644
--- a/spec/dummy/app/avo/actions/export_csv.rb
+++ b/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
diff --git a/spec/system/avo/actions_spec.rb b/spec/system/avo/actions_spec.rb
index 4bcff86f5a..da86f312da 100644
--- a/spec/system/avo/actions_spec.rb
+++ b/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"