feat(admin/shipping_categories): Load modal remotely

This is actual links to open the new and edit forms in the modal dialog
remotely.

admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :edit_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :edit_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_category_path(@shipping_category), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,4 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("shipping_categories/index").new(page: @page) %>

admin/app/components/solidus_admin/shipping_categories/index/component.rb

@@ -5,35 +5,20 @@ def model_class
     Spree::ShippingCategory
   end
 
-  def actions
-    render component("ui/button").new(
-      tag: :a,
-      text: t('.add'),
-      href: spree.new_admin_shipping_category_path,
-      icon: "add-line",
-      class: "align-self-end w-full",
-    )
-  end
-
   def page_actions
     render component("ui/button").new(
       tag: :a,
       text: t('.add'),
-      href: solidus_admin.new_shipping_category_path, data: { turbo_frame: :new_shipping_category_modal },
+      href: solidus_admin.new_shipping_category_path, data: {
+        action: "click->ui--pages--index#openModal"
+      },
       icon: "add-line",
       class: "align-self-end w-full",
     )
   end
 
-  def turbo_frames
-    %w[
-      new_shipping_category_modal
-      edit_shipping_category_modal
-    ]
-  end
-
-  def row_url(shipping_category)
-    spree.edit_admin_shipping_category_path(shipping_category, _turbo_frame: :edit_shipping_category_modal)
+  def edit_url(shipping_category)
+    spree.edit_admin_shipping_category_path(shipping_category)
   end
 
   def search_key
@@ -57,7 +42,14 @@ def batch_actions
 
   def columns
     [
-      :name
+      {
+        header: :name,
+        data: ->(shipping_category) do
+          link_to shipping_category.name, edit_url(shipping_category),
+            data: { action: "click->ui--pages--index#openModal" },
+            class: "body-link"
+        end
+      },
     ]
   end
 end

admin/app/components/solidus_admin/shipping_categories/new/component.html.erb

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :new_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :new_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_categories_path(page: params[:page], q: params[:q]), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,5 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-
-<%= render component("shipping_categories/index").new(page: @page) %>

admin/app/controllers/solidus_admin/shipping_categories_controller.rb

@@ -12,7 +12,9 @@ def new
       set_index_page
 
       respond_to do |format|
-        format.html { render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category) }
+        format.html do
+          render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category), layout: false
+        end
       end
     end
 
@@ -57,7 +59,9 @@ def edit
       set_index_page
 
       respond_to do |format|
-        format.html { render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category) }
+        format.html do
+          render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category), layout: false
+        end
       end
     end
 

admin/spec/features/shipping_categories_spec.rb

@@ -65,15 +65,15 @@
     before do
       Spree::ShippingCategory.create(name: "Letter Mail")
       visit "/admin/shipping_categories#{query}"
-      find_row("Letter Mail").click
-      expect(page).to have_css("dialog", wait: 5)
+      click_on "Letter Mail"
+      expect(page).to have_css("dialog")
       expect(page).to have_content("Edit Shipping Category")
       expect(page).to be_axe_clean
     end
 
     it "closing the modal keeps query params" do
       within("dialog") { click_on "Cancel" }
-      expect(page).not_to have_selector("dialog", wait: 5)
+      expect(page).not_to have_selector("dialog")
       expect(page.current_url).to include(query)
     end