Add row URL proc and standardize parameter naming ui/table component

This commit introduces the capability of navigational rows within
the `ui/table` component through the addition of a `row_url` proc.
The `fade_row_proc` parameter is renamed to `row_fade` to maintain a consistent
naming style throughout the component.

The `row_url` proc accepts a row object as a parameter and returns a URL string.
This URL is utilized to redirect the user when a particular row is clicked.
However, this navigation is deliberately disabled in "batch" mode to maintain the
row selection in that mode.

Example of usage:
```ruby
  row_url: ->(order) { spree.edit_admin_order_path(order) }
```

admin/app/components/solidus_admin/orders/index/component.html.erb

@@ -19,7 +19,8 @@
     id: 'orders-list',
     model_class: Spree::Order,
     rows: @page.records,
-    fade_row_proc: fade_row_proc,
+    row_fade: row_fade,
+    row_url: ->(order) { spree.edit_admin_order_path(order) },
     search_key: SolidusAdmin::Config[:order_search_key],
     search_url: solidus_admin.orders_path,
     batch_actions: batch_actions,

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

@@ -5,7 +5,7 @@ def initialize(page:)
     @page = page
   end
 
-  class_attribute :fade_row_proc, default: ->(order) { order.paid? && order.shipped? }
+  class_attribute :row_fade, default: ->(order) { order.paid? && order.shipped? }
 
   def title
     Spree::Order.model_name.human.pluralize
@@ -105,12 +105,10 @@ def number_column
     {
       header: :order,
       data: ->(order) do
-        order_path = spree.edit_admin_order_path(order)
-
-        if !fade_row_proc.call(order)
-          link_to order.number, order_path, class: 'font-semibold'
+        if !row_fade.call(order)
+          content_tag :div, order.number, class: 'font-semibold'
         else
-          link_to order.number, order_path
+          content_tag :div, order.number
         end
       end
     }

admin/app/components/solidus_admin/products/index/component.html.erb

@@ -19,6 +19,7 @@
     id: 'products-list',
     model_class: Spree::Product,
     rows: @page.records,
+    row_url: ->(product) { solidus_admin.product_path(product) },
     search_key: SolidusAdmin::Config[:product_search_key],
     search_url: solidus_admin.products_path,
     batch_actions: batch_actions,

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

@@ -74,11 +74,11 @@ def image_column
       data: ->(product) do
         image = product.gallery.images.first or return
 
-        link_to(
-          render(component('ui/thumbnail').new(src: image.url(:small), alt: product.name)),
-          solidus_admin.product_path(product),
-          class: 'inline-flex overflow-hidden',
-          tabindex: -1,
+        render(
+          component('ui/thumbnail').new(
+            src: image.url(:small),
+            alt: product.name
+          )
         )
       end
     }
@@ -88,7 +88,7 @@ def name_column
     {
       header: :name,
       data: ->(product) do
-        link_to product.name, solidus_admin.product_path(product)
+        content_tag :div, product.name
       end
     }
   end

admin/app/components/solidus_admin/ui/table/component.html.erb

@@ -116,8 +116,9 @@
       <tbody class="bg-white text-3.5 line-[150%] text-black">
         <% @rows.each do |row| %>
           <tr
-            class="border-b border-gray-100 last:border-0 <%= 'bg-gray-15 text-gray-700' if @fade_row_proc&.call(row) %>"
+            class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @row_fade&.call(row) %>"
             data-action="click-><%= stimulus_id %>#rowClicked"
+            data-primary-url="<%= @row_url&.call(row) %>"
           >
             <% @columns.each do |column| %>
               <%= render_data_cell(column.data, row) %>

admin/app/components/solidus_admin/ui/table/component.js

@@ -82,14 +82,29 @@ export default class extends Controller {
     if (event.target.closest('a') || event.target.tagName === 'BUTTON' || event.target.type === 'checkbox') return
 
     const row = event.currentTarget
+
+    if (this.modeValue === 'batch') {
+      this.toggleCheckbox(row)
+    } else {
+      this.navigateToRow(row)
+    }
+  }
+
+  toggleCheckbox(row) {
     const checkbox = this.checkboxTargets.find(selection => row.contains(selection))
 
     if (checkbox) {
-        checkbox.checked = !checkbox.checked
-        this.selectRow()
+      checkbox.checked = !checkbox.checked
+      this.selectRow()
     }
   }
 
+  navigateToRow(row) {
+    const url = row.dataset.primaryUrl
+
+    if (url) window.location.href = url
+  }
+
   render() {
     const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
 

admin/app/components/solidus_admin/ui/table/component.rb

@@ -4,7 +4,8 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   # @param id [String] A unique identifier for the table component.
   # @param model_class [ActiveModel::Translation] The model class used for translations.
   # @param rows [Array] The collection of objects that will be passed to columns for display.
-  # @param fade_row_proc [Proc, nil] A proc determining if a row should have a faded appearance.
+  # @param row_fade [Proc, nil] A proc determining if a row should have a faded appearance.
+  # @param row_url [Proc, nil] A proc that takes a row object as a parameter and returns the URL to navigate to when the row is clicked.
   # @param search_param [Symbol] The param for searching.
   # @param search_key [Symbol] The key for searching.
   # @param search_url [String] The base URL for searching.
@@ -36,7 +37,8 @@ def initialize(
     model_class:,
     rows:,
     search_key:, search_url:, search_param: :q,
-    fade_row_proc: nil,
+    row_fade: nil,
+    row_url: nil,
     columns: [],
     batch_actions: [],
     filters: [],
@@ -49,7 +51,8 @@ def initialize(
     @id = id
     @model_class = model_class
     @rows = rows
-    @fade_row_proc = fade_row_proc
+    @row_fade = row_fade
+    @row_url = row_url
     @search_param = search_param
     @search_key = search_key
     @search_url = search_url

admin/spec/features/products_spec.rb

@@ -14,7 +14,7 @@
     expect(page).to have_content("$19.99")
     expect(page).to be_axe_clean
 
-    click_on "Just a product"
+    find('table tbody tr', text: 'Just a product').click
 
     expect(page).to have_current_path("/admin/products/just-a-prod")
     expect(page).to have_content("Manage images")