From eb8b83479c871397a9f73e838e35a5c4a1525d16 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. So, this commit adds underlines to links in table rows. https://github.com/solidusio/solidus/issues/5944 --- .../solidus_admin/option_types/index/component.rb | 4 ++-- .../solidus_admin/orders/index/component.rb | 4 ++-- .../solidus_admin/payment_methods/index/component.rb | 4 ++-- .../solidus_admin/products/index/component.rb | 2 +- .../solidus_admin/properties/index/component.rb | 4 ++-- .../solidus_admin/stock_items/index/component.rb | 8 +++++--- .../solidus_admin/stores/index/component.rb | 2 +- .../solidus_admin/taxonomies/index/component.rb | 2 +- .../solidus_admin/users/index/component.rb | 12 +++++++++--- .../solidus_admin/users/items/component.rb | 4 ++-- .../solidus_admin/users/orders/component.rb | 4 ++-- .../users/store_credits/index/component.rb | 10 ++++------ .../promotion_categories/index/component.rb | 4 ++-- .../solidus_admin/promotions/index/component.rb | 2 +- .../promotion_categories/index/component.rb | 4 ++-- .../solidus_promotions/promotions/index/component.rb | 2 +- 16 files changed, 39 insertions(+), 33 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..ef41488c353 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 + link_to option_type.name, row_url(option_type), class: "underline cursor-pointer" end } end @@ -64,7 +64,7 @@ def presentation_column { header: :presentation, data: ->(option_type) do - content_tag :div, option_type.presentation + link_to option_type.presentation, row_url(option_type), class: "underline cursor-pointer" 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..455e66bef9d 100644 --- a/admin/app/components/solidus_admin/orders/index/component.rb +++ b/admin/app/components/solidus_admin/orders/index/component.rb @@ -106,9 +106,9 @@ def number_column header: :order, data: ->(order) do if !row_fade(order) - content_tag :div, order.number, class: 'font-semibold' + link_to order.number, row_url(order), class: "font-semibold underline cursor-pointer" else - content_tag :div, order.number + link_to order.number, row_url(order), class: "underline cursor-pointer" 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..c75dfde3bf5 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 + link_to payment_method.name, row_url(payment_method), class: "underline cursor-pointer" end }, { header: :type, data: ->(payment_method) do - content_tag :div, payment_method.model_name.human + link_to payment_method.model_name.human, row_url(payment_method), class: "underline cursor-pointer" 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..3e43aa87364 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 + link_to product.name, row_url(product), class: "underline cursor-pointer" 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..3c4a5c7907e 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 + link_to property.name, row_url(property), class: "underline cursor-pointer" end } end @@ -57,7 +57,7 @@ def presentation_column { header: :presentation, data: ->(property) do - content_tag :div, property.presentation + link_to property.presentation, row_url(property), class: "underline cursor-pointer" 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..f2a45c05524 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 + link_to stock_item.variant.name, row_url(stock_item), class: "underline cursor-pointer" end } end @@ -99,7 +99,7 @@ def sku_column { header: :sku, data: ->(stock_item) do - content_tag :div, stock_item.variant.sku + link_to stock_item.variant.sku, row_url(stock_item), class: "underline cursor-pointer" end } end @@ -122,7 +122,9 @@ def variant_column def stock_location_column { header: :stock_location, - data: ->(stock_item) { stock_item.stock_location.name }, + data: ->(stock_item) do + content_tag :div, stock_item.stock_location.name + 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..62552e6583d 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 + link_to store.code, row_url(store), class: "underline cursor-pointer" 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..d0205cf9388 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 + link_to taxonomy.name, row_url(taxonomy), class: "underline cursor-pointer" end } end diff --git a/admin/app/components/solidus_admin/users/index/component.rb b/admin/app/components/solidus_admin/users/index/component.rb index 9a2041936e3..ff7d0814367 100644 --- a/admin/app/components/solidus_admin/users/index/component.rb +++ b/admin/app/components/solidus_admin/users/index/component.rb @@ -83,15 +83,21 @@ def columns }, { header: :order_count, - data: ->(user) { user.order_count }, + data: ->(user) do + content_tag :div, user.order_count + end }, { header: :lifetime_value, - data: -> { _1.display_lifetime_value.to_html }, + data: ->(user) do + content_tag :div, user.display_lifetime_value.to_html + end }, { header: :last_active, - data: ->(user) { last_login(user) }, + data: ->(user) do + content_tag :div, last_login(user) + 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..41622d72d1a 100644 --- a/admin/app/components/solidus_admin/users/items/component.rb +++ b/admin/app/components/solidus_admin/users/items/component.rb @@ -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" + link_to item.order.number, row_url(item.order), class: "underline cursor-pointer 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([link_to(content.join("
").html_safe, row_url(item.order), class: "underline cursor-pointer 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..1f65c5f3c88 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' + link_to order.number, row_url(order), class: "font-semibold underline cursor-pointer" else - content_tag :div, order.number + link_to order.number, row_url(order), class: "underline cursor-pointer" 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..7ccac4b1e7e 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" + link_to store_credit.display_amount.to_html, row_url(store_credit), class: "text-sm underline cursor-pointer" end }, { header: :authorized, col: { class: "w-[13%]" }, data: ->(store_credit) do - content_tag :div, store_credit.display_amount_authorized.to_html, class: "text-sm" + link_to store_credit.display_amount_authorized.to_html, row_url(store_credit), class: "text-sm underline cursor-pointer" end }, { header: :used, col: { class: "w-[9%]" }, data: ->(store_credit) do - content_tag :div, store_credit.display_amount_used.to_html, class: "text-sm" + link_to store_credit.display_amount_used.to_html, row_url(store_credit), class: "text-sm underline cursor-pointer" end }, { @@ -90,9 +90,7 @@ def columns { header: :issued_on, col: { class: "w-[16%]" }, - data: ->(store_credit) do - I18n.l(store_credit.created_at.to_date) - end + data: ->(store_credit) { I18n.l(store_credit.created_at.to_date) } }, { header: :invalidated, 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..aa8bebd85dd 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 + link_to promotion.name, row_url(promotion), class: "underline cursor-pointer" 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 diff --git a/promotions/lib/components/admin/solidus_promotions/promotions/index/component.rb b/promotions/lib/components/admin/solidus_promotions/promotions/index/component.rb index 8416e5d343c..ff09b39c924 100644 --- a/promotions/lib/components/admin/solidus_promotions/promotions/index/component.rb +++ b/promotions/lib/components/admin/solidus_promotions/promotions/index/component.rb @@ -63,7 +63,7 @@ def columns { header: :name, data: ->(promotion) do - link_to promotion.name, row_url(promotion) + link_to promotion.name, row_url(promotion), class: "underline cursor-pointer" end }, {