From 4afa17c0c69eaa94bbeca6828910fd6f30d6a15f Mon Sep 17 00:00:00 2001 From: Madeline Collier Date: Mon, 25 Nov 2024 12:15:01 +0100 Subject: [PATCH] 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. https://github.com/solidusio/solidus/issues/5944 --- .../solidus_admin/option_types/index/component.rb | 4 ++-- .../solidus_admin/orders/index/component.rb | 8 ++++---- .../solidus_admin/payment_methods/index/component.rb | 4 ++-- .../solidus_admin/products/index/component.rb | 4 ++-- .../solidus_admin/properties/index/component.rb | 4 ++-- .../solidus_admin/stock_items/index/component.rb | 6 +++--- .../solidus_admin/stores/index/component.rb | 2 +- .../solidus_admin/taxonomies/index/component.rb | 2 +- .../solidus_admin/users/items/component.rb | 12 ++++++------ .../solidus_admin/users/orders/component.rb | 8 ++++---- .../users/store_credits/index/component.rb | 8 ++++---- .../promotion_categories/index/component.rb | 4 ++-- .../solidus_admin/promotions/index/component.rb | 2 +- .../promotion_categories/index/component.rb | 4 ++-- 14 files changed, 36 insertions(+), 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 index 24f6b24e4cf..0512aae258d 100644 --- 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 index 2c8641926f5..9d363023b91 100644 --- 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 index 7bf64ffa63f..63084fa5973 100644 --- 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 index 6a015ebcbd2..c2c29024b1a 100644 --- 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 index e8289365922..a399ca9ab57 100644 --- 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 index fc20bb93f71..a721646534a 100644 --- 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 index 5df8aa80005..1e8ea90309b 100644 --- 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 index e1a47ae8f60..bba87c68088 100644 --- 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 index f86628d6c0d..14251c61a09 100644 --- 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("
").html_safe, class: "text-sm")]) + safe_join([content_tag(:a, content.join("
").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 index d2b80caf14d..d40e249cebd 100644 --- 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 index e039fd8cc6d..0721af381ee 100644 --- 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 index b52b1a0f3d2..3a3bf1aa9ea 100644 --- 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 index b6fe1730f7e..671e66932ed 100644 --- 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 index 53d675ed3ed..9735f77b306 100644 --- 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