From 187849644269ca7909f9fd29319cb00c14500798 Mon Sep 17 00:00:00 2001
From: andrea longhi <andrea@spaghetticode.it>
Date: Mon, 4 Mar 2024 17:03:08 +0100
Subject: [PATCH] Rework modal component

The component now behaves like a standard dialog:

  * closes on the current page, rather than redirecting elsewhere;
  * the close button is a standard dialog closing form;
  * the `open` attribute is removed, thus allowing ESC keypress
    to close the modal, and creating a focus trap when open. The
    previous behavior (i.e. have the modal open by default) is
    achieved via the new Stimulus controller, which on connect
    opens the dialog via JS.
---
 .../solidus_admin/ui/modal/component.html.erb      | 14 +++++++-------
 .../components/solidus_admin/ui/modal/component.js |  7 +++++++
 .../components/solidus_admin/ui/modal/component.rb |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 admin/app/components/solidus_admin/ui/modal/component.js

diff --git a/admin/app/components/solidus_admin/ui/modal/component.html.erb b/admin/app/components/solidus_admin/ui/modal/component.html.erb
index c9ce14bbf80..8b408161258 100644
--- a/admin/app/components/solidus_admin/ui/modal/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/modal/component.html.erb
@@ -14,13 +14,13 @@
         <h3 class="text-xl font-semibold text-gray-900">
           <%= @title %>
         </h3>
-        <%= render component('ui/button').new(
-          tag: :a,
-          href: @close_path,
-          icon: 'close-line',
-          scheme: :ghost,
-          title: t('.close'),
-        ) %>
+        <form method="dialog">
+          <%= render component('ui/button').new(
+            icon: 'close-line',
+            scheme: :ghost,
+            title: t('.close'),
+          ) %>
+        </form>
       </header>
 
       <div class="p-4 overflow-auto">
diff --git a/admin/app/components/solidus_admin/ui/modal/component.js b/admin/app/components/solidus_admin/ui/modal/component.js
new file mode 100644
index 00000000000..3d9ec5c408e
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/modal/component.js
@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.element.showModal();
+  }
+}
diff --git a/admin/app/components/solidus_admin/ui/modal/component.rb b/admin/app/components/solidus_admin/ui/modal/component.rb
index 86f2401c04c..7dae58a192d 100644
--- a/admin/app/components/solidus_admin/ui/modal/component.rb
+++ b/admin/app/components/solidus_admin/ui/modal/component.rb
@@ -3,7 +3,7 @@
 class SolidusAdmin::UI::Modal::Component < SolidusAdmin::BaseComponent
   renders_one :actions
 
-  def initialize(title:, close_path: nil, open: true, **attributes)
+  def initialize(title:, close_path: nil, open: false, **attributes)
     @title = title
     @close_path = close_path
     @attributes = attributes