From b9493f687cc68d7b23d66ebded11eeb50a8da9a3 Mon Sep 17 00:00:00 2001 From: hq1 Date: Thu, 5 Sep 2024 12:18:16 +0200 Subject: [PATCH] Replace native tooltips with simplified, generic component (#4528) * Replace native tooltips with simplified, generic component * Make tooltip a button? * Revert "Make tooltip a button?" This reverts commit adacc560f9f614a1ac70e38cf47de988833b9596. --- .../components/billing/plan_box.ex | 34 +++++++++---------- lib/plausible_web/components/generic.ex | 34 +++++++++---------- .../live/imports_exports_settings.ex | 2 +- lib/plausible_web/live/installation.ex | 2 +- .../live/shields/country_rules.ex | 15 ++++---- .../live/shields/hostname_rules.ex | 18 +++++----- lib/plausible_web/live/shields/ip_rules.ex | 17 +++++----- lib/plausible_web/live/shields/page_rules.ex | 18 +++++----- test/plausible_web/live/choose_plan_test.exs | 14 ++++---- .../live/shields/countries_test.exs | 4 +-- .../live/shields/ip_addresses_test.exs | 4 +-- 11 files changed, 82 insertions(+), 80 deletions(-) diff --git a/lib/plausible_web/components/billing/plan_box.ex b/lib/plausible_web/components/billing/plan_box.ex index 2770a2e5dc8b..479720f967c7 100644 --- a/lib/plausible_web/components/billing/plan_box.ex +++ b/lib/plausible_web/components/billing/plan_box.ex @@ -231,24 +231,24 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do Upgrade <% end %> -

- <%= Phoenix.Naming.humanize(limit) %>
-

- - - <% else %> + +
<%= @disabled_message %> - <% end %> -

+
+ <:tooltip_content> + Your usage exceeds the following limit(s):

+

+ <%= Phoenix.Naming.humanize(limit) %>
+

+ + +
+ <%= @disabled_message %> +
""" end diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex index ce3834be6951..d56381b39e7c 100644 --- a/lib/plausible_web/components/generic.ex +++ b/lib/plausible_web/components/generic.ex @@ -335,11 +335,7 @@ defmodule PlausibleWeb.Components.Generic do """ end - attr :wrapper_class, :any, default: "" - attr :class, :any, default: "" - attr :icon?, :boolean, default: true attr :sticky?, :boolean, default: true - attr :position, :string, default: "bottom-10 margin-x-auto left-10 right-10" slot :inner_block, required: true slot :tooltip_content, required: true @@ -352,26 +348,28 @@ defmodule PlausibleWeb.Components.Generic do assigns = assign(assigns, wrapper_data: wrapper_data, show_inner: show_inner) ~H""" -
-

+

+ <%= render_slot(List.first(@tooltip_content)) %> +
+
<%= render_slot(@inner_block) %> - -

- - <%= render_slot(List.first(@tooltip_content)) %> - +
""" end diff --git a/lib/plausible_web/live/imports_exports_settings.ex b/lib/plausible_web/live/imports_exports_settings.ex index ef8370bab080..6bcb6ab48309 100644 --- a/lib/plausible_web/live/imports_exports_settings.ex +++ b/lib/plausible_web/live/imports_exports_settings.ex @@ -143,7 +143,7 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
Import failed -
- <.tooltip :if={@entry.tooltip} wrapper_class={[@label_class, "grow"]} class="justify-left"> + <.tooltip :if={@entry.tooltip}> <%= Plausible.Imported.SiteImport.label(@entry.site_import) %> <:tooltip_content> <.notice_message message_label={@entry.tooltip} /> diff --git a/lib/plausible_web/live/installation.ex b/lib/plausible_web/live/installation.ex index 4a1147b2c728..e58761bc310e 100644 --- a/lib/plausible_web/live/installation.ex +++ b/lib/plausible_web/live/installation.ex @@ -296,7 +296,7 @@ defmodule PlausibleWeb.Live.Installation do <%= @label %>
- <.tooltip sticky?={false} icon?={false} position="z-50 w-64 hidden sm:block"> + <.tooltip sticky?={false}> <:tooltip_content> <%= @tooltip %>

Click to learn more. diff --git a/lib/plausible_web/live/shields/country_rules.ex b/lib/plausible_web/live/shields/country_rules.ex index 5929fce53c00..e27c945a3bf7 100644 --- a/lib/plausible_web/live/shields/country_rules.ex +++ b/lib/plausible_web/live/shields/country_rules.ex @@ -104,7 +104,7 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do

@@ -131,15 +131,14 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do <% country = Location.Country.get_country(rule.country_code) %>
-
- + + <:tooltip_content> + Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %> + + <%= country.flag %> <%= country.name %> -
+ 		diff --git a/lib/plausible_web/live/shields/hostname_rules.ex b/lib/plausible_web/live/shields/hostname_rules.ex index d0399b5c79a0..0b3165da6013 100644 --- a/lib/plausible_web/live/shields/hostname_rules.ex +++ b/lib/plausible_web/live/shields/hostname_rules.ex @@ -121,7 +121,7 @@ defmodule PlausibleWeb.Live.Shields.HostnameRules do

@@ -146,16 +146,18 @@ defmodule PlausibleWeb.Live.Shields.HostnameRules do <%= for rule <- @hostname_rules do %> -
-
- + + <:tooltip_content> + Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %> + +
<%= rule.hostname %> - -
+
+
diff --git a/lib/plausible_web/live/shields/ip_rules.ex b/lib/plausible_web/live/shields/ip_rules.ex index 335ce25617ac..dc18930c7f93 100644 --- a/lib/plausible_web/live/shields/ip_rules.ex +++ b/lib/plausible_web/live/shields/ip_rules.ex @@ -125,7 +125,7 @@ defmodule PlausibleWeb.Live.Shields.IPRules do

@@ -158,13 +158,14 @@ defmodule PlausibleWeb.Live.Shields.IPRules do
- - <%= rule.inet %> - + <.tooltip> + <:tooltip_content> + Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %> + + + <%= rule.inet %> + +
@@ -138,16 +138,18 @@ defmodule PlausibleWeb.Live.Shields.PageRules do <%= for rule <- @page_rules do %> -
-
- + + <:tooltip_content> + Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %> + +
<%= rule.page_path %> - -
+
+
diff --git a/test/plausible_web/live/choose_plan_test.exs b/test/plausible_web/live/choose_plan_test.exs index 300202cc7d37..c25777fabb38 100644 --- a/test/plausible_web/live/choose_plan_test.exs +++ b/test/plausible_web/live/choose_plan_test.exs @@ -22,7 +22,7 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do @slider_value "#slider-value" @growth_plan_box "#growth-plan-box" - @growth_plan_tooltip "#growth-plan-box .tooltip-wrapper span" + @growth_plan_tooltip "#growth-plan-box .tooltip-content" @growth_price_tag_amount "#growth-price-tag-amount" @growth_price_tag_interval "#growth-price-tag-interval" @growth_highlight_pill "#{@growth_plan_box} #highlight-pill" @@ -842,18 +842,18 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400" assert text_of_element(doc, @growth_checkout_button) =~ "Currently on this plan" - refute element_exists?(doc, "#{@growth_checkout_button} + p") + refute element_exists?(doc, "#{@growth_checkout_button} + div") assert class_of_element(doc, @business_checkout_button) =~ "pointer-events-none bg-gray-400" - assert text_of_element(doc, "#{@business_checkout_button} + p") =~ + assert text_of_element(doc, "#{@business_checkout_button} + div") =~ "Please update your billing details first" doc = set_slider(lv, "1M") assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400" - assert text_of_element(doc, "#{@growth_checkout_button} + p") =~ + assert text_of_element(doc, "#{@growth_checkout_button} + div") =~ "Please update your billing details first" end end @@ -875,18 +875,18 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400" assert text_of_element(doc, @growth_checkout_button) =~ "Currently on this plan" - refute element_exists?(doc, "#{@growth_checkout_button} + p") + refute element_exists?(doc, "#{@growth_checkout_button} + div") assert class_of_element(doc, @business_checkout_button) =~ "pointer-events-none bg-gray-400" - assert text_of_element(doc, "#{@business_checkout_button} + p") =~ + assert text_of_element(doc, "#{@business_checkout_button} + div") =~ "Please update your billing details first" doc = set_slider(lv, "1M") assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400" - assert text_of_element(doc, "#{@growth_checkout_button} + p") =~ + assert text_of_element(doc, "#{@growth_checkout_button} + div") =~ "Please update your billing details first" end end diff --git a/test/plausible_web/live/shields/countries_test.exs b/test/plausible_web/live/shields/countries_test.exs index 7495dc05190b..9f59c9750e13 100644 --- a/test/plausible_web/live/shields/countries_test.exs +++ b/test/plausible_web/live/shields/countries_test.exs @@ -98,10 +98,10 @@ defmodule PlausibleWeb.Live.Shields.CountriesTest do added_by = "#{user.name} <#{user.email}>" - assert [%{id: id, country_code: "EE", added_by: ^added_by}] = + assert [%{country_code: "EE", added_by: ^added_by}] = Shields.list_country_rules(site) - tooltip = text_of_attr(html, "#country-#{id}", "title") + tooltip = text_of_element(html, ".tooltip-content") assert tooltip =~ "Added at #{Date.utc_today()}" assert tooltip =~ "by #{added_by}" end diff --git a/test/plausible_web/live/shields/ip_addresses_test.exs b/test/plausible_web/live/shields/ip_addresses_test.exs index 16a4f2b1a919..12c593f2cfdd 100644 --- a/test/plausible_web/live/shields/ip_addresses_test.exs +++ b/test/plausible_web/live/shields/ip_addresses_test.exs @@ -139,9 +139,9 @@ defmodule PlausibleWeb.Live.Shields.IPAddressesTest do assert html =~ ip assert html =~ user.name - assert [%{id: id}] = Shields.list_ip_rules(site) + assert [%{id: _id}] = Shields.list_ip_rules(site) - tooltip = text_of_attr(html, "#inet-#{id}", "title") + tooltip = text_of_element(html, ".tooltip-content") assert tooltip =~ "Added at #{Date.utc_today()}" assert tooltip =~ "by #{user.name} <#{user.email}>"