Use semantic UI elements in admin table rows

All over the new admin we use divs or simply text to display the resource and rely on a complex Stimulus click event handler to open the edit route. This is not semantic at all and makes it necessary to use a fully JS enabled browser under all circumstances to test the new admin interface which leads to flaky and slow tests. We should use links instead and probably remove the stimulus click event handler. Also, links are not visually highlighted, which leads to a11y issues. solidusio#5944
MadelineCollier · Nov 25, 2024 · 4afa17c · 4afa17c
1 parent c560453
commit 4afa17c
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 36 deletions.
diff --git a/admin/app/components/solidus_admin/option_types/index/component.rb b/admin/app/components/solidus_admin/option_types/index/component.rb
@@ -55,7 +55,7 @@ def name_column
     {
       header: :name,
       data: ->(option_type) do
-        content_tag :div, option_type.name
+        content_tag :a, option_type.name, href: row_url(option_type)
       end
     }
   end
@@ -64,7 +64,7 @@ def presentation_column
     {
       header: :presentation,
       data: ->(option_type) do
-        content_tag :div, option_type.presentation
+        content_tag :a, option_type.presentation, href: row_url(option_type)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/orders/index/component.rb b/admin/app/components/solidus_admin/orders/index/component.rb
@@ -133,7 +133,7 @@ def date_column
     {
       header: :date,
       data: ->(order) do
-        content_tag :div, l(order.created_at, format: :short)
+        content_tag :a, l(order.created_at, format: :short), href: row_url(order)
       end
     }
   end
@@ -144,7 +144,7 @@ def customer_column
       header: :customer,
       data: ->(order) do
         customer_email = order.user&.email
-        content_tag :div, String(customer_email)
+        content_tag :a, String(customer_email), href: row_url(order)
       end
     }
   end
@@ -153,7 +153,7 @@ def total_column
     {
       header: :total,
       data: ->(order) do
-        content_tag :div, number_to_currency(order.total)
+        content_tag :a, number_to_currency(order.total), href: row_url(order)
       end
     }
   end
@@ -162,7 +162,7 @@ def items_column
     {
       header: :items,
       data: ->(order) do
-        content_tag :div, t('.columns.items', count: order.line_items.sum(:quantity))
+        content_tag :a, t('.columns.items', count: order.line_items.sum(:quantity)), href: row_url(order)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/payment_methods/index/component.rb b/admin/app/components/solidus_admin/payment_methods/index/component.rb
@@ -59,13 +59,13 @@ def columns
       {
         header: :name,
         data: ->(payment_method) do
-          content_tag :div, payment_method.name
+          content_tag :a, payment_method.name, href: row_url(payment_method)
         end
       },
       {
         header: :type,
         data: ->(payment_method) do
-          content_tag :div, payment_method.model_name.human
+          content_tag :a, payment_method.model_name.human, href: row_url(payment_method)
         end
       },
       {

diff --git a/admin/app/components/solidus_admin/products/index/component.rb b/admin/app/components/solidus_admin/products/index/component.rb
@@ -106,7 +106,7 @@ def name_column
     {
       header: :name,
       data: ->(product) do
-        content_tag :div, product.name
+        content_tag :a, product.name, href: row_url(product)
       end
     }
   end
@@ -129,7 +129,7 @@ def price_column
     {
       header: :price,
       data: ->(product) do
-        content_tag :div, product.master.display_price&.to_html
+        content_tag :a, product.master.display_price&.to_html, href: row_url(product)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/properties/index/component.rb b/admin/app/components/solidus_admin/properties/index/component.rb
@@ -48,7 +48,7 @@ def name_column
     {
       header: :name,
       data: ->(property) do
-        content_tag :div, property.name
+        content_tag :a, property.name, href: row_url(property)
       end
     }
   end
@@ -57,7 +57,7 @@ def presentation_column
     {
       header: :presentation,
       data: ->(property) do
-        content_tag :div, property.presentation
+        content_tag :a, property.presentation, href: row_url(property)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/stock_items/index/component.rb b/admin/app/components/solidus_admin/stock_items/index/component.rb
@@ -90,7 +90,7 @@ def name_column
     {
       header: :name,
       data: ->(stock_item) do
-        content_tag :div, stock_item.variant.name
+        content_tag :a, stock_item.variant.name, href: row_url(stock_item)
       end
     }
   end
@@ -99,7 +99,7 @@ def sku_column
     {
       header: :sku,
       data: ->(stock_item) do
-        content_tag :div, stock_item.variant.sku
+        content_tag :a, stock_item.variant.sku, href: row_url(stock_item)
       end
     }
   end
@@ -162,7 +162,7 @@ def count_on_hand_column
     {
       header: :count_on_hand,
       data: ->(stock_item) do
-        content_tag :div, stock_item.count_on_hand
+        content_tag :a, stock_item.count_on_hand, href: row_url(stock_item)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/stores/index/component.rb b/admin/app/components/solidus_admin/stores/index/component.rb
@@ -44,7 +44,7 @@ def columns
       {
         header: :slug,
         data: ->(store) do
-          content_tag :div, store.code
+          content_tag :a, store.code, href: row_url(store)
         end
       },
       {

diff --git a/admin/app/components/solidus_admin/taxonomies/index/component.rb b/admin/app/components/solidus_admin/taxonomies/index/component.rb
@@ -46,7 +46,7 @@ def name_column
     {
       header: :name,
       data: ->(taxonomy) do
-        content_tag :div, taxonomy.name
+        content_tag :a, taxonomy.name, href: row_url(taxonomy)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/users/items/component.rb b/admin/app/components/solidus_admin/users/items/component.rb
@@ -68,7 +68,7 @@ def date_column
       col: { class: "w-[8%]" },
       header: :date,
       data: ->(item) do
-        content_tag :div, l(item.order.created_at, format: :short), class: "text-sm"
+        content_tag :a, l(item.order.created_at, format: :short), href: row_url(item.order), class: "text-sm"
       end
     }
   end
@@ -103,7 +103,7 @@ def price_column
       col: { class: "w-[10%]" },
       header: :price,
       data: ->(item) do
-        content_tag :div, item.single_money.to_html
+        content_tag :a, item.single_money.to_html, href: row_url(item.order)
       end
     }
   end
@@ -113,7 +113,7 @@ def quantity_column
       col: { class: "w-[7%]" },
       header: :qty,
       data: ->(item) do
-        content_tag :div, item.quantity
+        content_tag :a, item.quantity, href: row_url(item.order)
       end
     }
   end
@@ -123,7 +123,7 @@ def total_column
       col: { class: "w-[10%]" },
       header: t(".total_column_header"),
       data: ->(item) do
-        content_tag :div, item.money.to_html
+        content_tag :a, item.money.to_html, href: row_url(item.order)
       end
     }
   end
@@ -149,7 +149,7 @@ def number_column
       col: { class: "w-[18%]" },
       header: t(".number_column_header"),
       data: ->(item) do
-        content_tag :div, item.order.number, class: "font-semibold text-sm"
+        content_tag :a, item.order.number, href: row_url(item.order), class: "font-semibold text-sm"
       end
     }
   end
@@ -164,7 +164,7 @@ def item_name_with_variant_and_sku(item)
 
     # The `.html_safe` is required for the description to display as desired.
     # rubocop:disable Rails/OutputSafety
-    safe_join([content_tag(:div, content.join("<br>").html_safe, class: "text-sm")])
+    safe_join([content_tag(:a, content.join("<br>").html_safe, href: row_url(item.order), class: "text-sm")])
     # rubocop:enable Rails/OutputSafety
   end
 end
diff --git a/admin/app/components/solidus_admin/users/orders/component.rb b/admin/app/components/solidus_admin/users/orders/component.rb
@@ -70,9 +70,9 @@ def number_column
       header: :order,
       data: ->(order) do
         if !row_fade(order)
-          content_tag :div, order.number, class: 'font-semibold'
+          content_tag :a, order.number, href: row_url(order), class: 'font-semibold'
         else
-          content_tag :div, order.number
+          content_tag :a, order.number, href: row_url(order)
         end
       end
     }
@@ -97,7 +97,7 @@ def date_column
     {
       header: :date,
       data: ->(order) do
-        content_tag :div, l(order.created_at, format: :short)
+        content_tag :a, l(order.created_at, format: :short), href: row_url(order)
       end
     }
   end
@@ -106,7 +106,7 @@ def total_column
     {
       header: :total,
       data: ->(order) do
-        content_tag :div, number_to_currency(order.total)
+        content_tag :a, number_to_currency(order.total), href: row_url(order)
       end
     }
   end

diff --git a/admin/app/components/solidus_admin/users/store_credits/index/component.rb b/admin/app/components/solidus_admin/users/store_credits/index/component.rb
@@ -56,21 +56,21 @@ def columns
         header: :credited,
         col: { class: "w-[12%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount.to_html, class: "text-sm"
+          content_tag :a, store_credit.display_amount.to_html, href: row_url(store_credit), class: "text-sm"
         end
       },
       {
         header: :authorized,
         col: { class: "w-[13%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount_authorized.to_html, class: "text-sm"
+          content_tag :a, store_credit.display_amount_authorized.to_html, href: row_url(store_credit), class: "text-sm"
         end
       },
       {
         header: :used,
         col: { class: "w-[9%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.display_amount_used.to_html, class: "text-sm"
+          content_tag :a, store_credit.display_amount_used.to_html, href: row_url(store_credit), class: "text-sm"
         end
       },
       {
@@ -84,7 +84,7 @@ def columns
         header: :created_by,
         col: { class: "w-[22%]" },
         data: ->(store_credit) do
-          content_tag :div, store_credit.created_by_email, class: "font-semibold text-sm"
+          content_tag :a, store_credit.created_by_email, href: row_url(store_credit), class: "font-semibold text-sm"
         end
       },
       {

diff --git a/legacy_promotions/lib/components/admin/solidus_admin/promotion_categories/index/component.rb b/legacy_promotions/lib/components/admin/solidus_admin/promotion_categories/index/component.rb
@@ -40,7 +40,7 @@ def name_column
     {
       header: :name,
       data: ->(promotion_category) do
-        content_tag :div, promotion_category.name
+        content_tag :a, promotion_category.name, href: row_url(promotion_category)
       end
     }
   end
@@ -49,7 +49,7 @@ def code_column
     {
       header: :code,
       data: ->(promotion_category) do
-        content_tag :div, promotion_category.code
+        content_tag :a, promotion_category.code, href: row_url(promotion_category)
       end
     }
   end

diff --git a/legacy_promotions/lib/components/admin/solidus_admin/promotions/index/component.rb b/legacy_promotions/lib/components/admin/solidus_admin/promotions/index/component.rb
@@ -63,7 +63,7 @@ def columns
       {
         header: :name,
         data: ->(promotion) do
-          content_tag :div, promotion.name
+          content_tag :a, promotion.name, href: row_url(promotion)
         end
       },
       {

diff --git a/promotions/lib/components/admin/solidus_promotions/promotion_categories/index/component.rb b/promotions/lib/components/admin/solidus_promotions/promotion_categories/index/component.rb
@@ -40,7 +40,7 @@ def name_column
     {
       header: :name,
       data: ->(promotion_category) do
-        content_tag :div, promotion_category.name
+        content_tag :a, promotion_category.name, href: row_url(promotion_category)
       end
     }
   end
@@ -49,7 +49,7 @@ def code_column
     {
       header: :code,
       data: ->(promotion_category) do
-        content_tag :div, promotion_category.code
+        content_tag :a, promotion_category.code, href: row_url(promotion_category)
       end
     }
   end