Use new tile component for funnels, goals, imports and custom properties

- Update the settings live views to use the new tile component
- Ensure tile component is updated when feature visibility is toggled
- Extract `no_search_results` and `empty_state` components for better readability
- Extract `highlighted` component
- Update tests

Author: sanne-san

extra/lib/plausible_web/live/funnel_settings.ex

@@ -25,6 +25,10 @@ defmodule PlausibleWeb.Live.FunnelSettings do
           ]
         )
       end)
+      |> assign_new(:site_role, fn %{site: site, current_user: current_user} ->
+        {:ok, {_, site_role}} = Plausible.Teams.Memberships.site_role(site, current_user)
+        site_role
+      end)
       |> assign_new(:all_funnels, fn %{site: %{id: ^site_id} = site} ->
         Funnels.list(site)
       end)
@@ -50,45 +54,62 @@ defmodule PlausibleWeb.Live.FunnelSettings do
     <div id="funnel-settings-main">
       <.flash_messages flash={@flash} />
 
-      <%= if @setup_funnel? do %>
-        {live_render(
-          @socket,
-          PlausibleWeb.Live.FunnelSettings.Form,
-          id: "funnels-form",
-          session: %{
-            "domain" => @domain,
-            "funnel_id" => @funnel_id
-          }
-        )}
-      <% end %>
-      <div :if={@goal_count >= Funnel.min_steps()}>
-        <.live_component
-          module={PlausibleWeb.Live.FunnelSettings.List}
-          id="funnels-list"
-          funnels={@displayed_funnels}
-          filter_text={@filter_text}
-        />
-      </div>
-
-      <div
-        :if={@goal_count < Funnel.min_steps()}
-        class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto"
+      <.tile
+        docs="funnel-analysis"
+        feature_mod={Plausible.Billing.Feature.Funnels}
+        feature_toggle?={true}
+        show_content?={!Plausible.Billing.Feature.Funnels.opted_out?(@site)}
+        site={@site}
+        current_user={@current_user}
+        current_role={@site_role}
+        current_team={@current_team}
       >
-        <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
-          Ready to dig into user flows?
-        </h3>
-        <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-          Set up a few goals like <span class="font-medium text-indigo-600 dark:text-gray-100">Signup</span>, <span class="font-medium text-indigo-600 dark:text-gray-100">Visit /</span>, or
-          <span class="font-medium text-indigo-600 dark:text-gray-100">Scroll 50% on /blog/*</span>
-          first, then return here to build your first funnel.
-        </p>
-        <.button_link
-          class="mt-4"
-          href={PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain)}
+        <:title>
+          Funnels
+        </:title>
+        <:subtitle :if={Enum.count(@all_funnels) > 0}>
+          Compose goals into funnels to track user flows and conversion rates.
+        </:subtitle>
+        <%= if @setup_funnel? do %>
+          {live_render(
+            @socket,
+            PlausibleWeb.Live.FunnelSettings.Form,
+            id: "funnels-form",
+            session: %{
+              "domain" => @domain,
+              "funnel_id" => @funnel_id
+            }
+          )}
+        <% end %>
+        <div :if={@goal_count >= Funnel.min_steps()}>
+          <.live_component
+            module={PlausibleWeb.Live.FunnelSettings.List}
+            id="funnels-list"
+            funnels={@displayed_funnels}
+            filter_text={@filter_text}
+          />
+        </div>
+
+        <div
+          :if={@goal_count < Funnel.min_steps()}
+          class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto"
         >
-          Set up goals →
-        </.button_link>
-      </div>
+          <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
+            Ready to dig into user flows?
+          </h3>
+          <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+            Set up a few goals like <.highlighted>Signup</.highlighted>, <.highlighted>Visit /</.highlighted>, or
+            <.highlighted>Scroll 50% on /blog/*</.highlighted>
+            first, then return here to build your first funnel.
+          </p>
+          <.button_link
+            class="mt-4"
+            href={PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain)}
+          >
+            Set up goals →
+          </.button_link>
+        </div>
+      </.tile>
     </div>
     """
   end
@@ -152,4 +173,8 @@ defmodule PlausibleWeb.Live.FunnelSettings do
   def handle_info(:cancel_setup_funnel, socket) do
     {:noreply, assign(socket, setup_funnel?: false, funnel_id: nil)}
   end
+
+  def handle_info({:site_updated, updated_site}, socket) do
+    {:noreply, assign(socket, site: updated_site)}
+  end
 end

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -10,9 +10,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
   use PlausibleWeb, :live_component
 
   def render(assigns) do
+    assigns = assign(assigns, :searching?, String.trim(assigns.filter_text) != "")
+
     ~H"""
     <div>
-      <%= if String.trim(@filter_text) != "" || Enum.count(@funnels) > 0 do %>
+      <%= if @searching? or Enum.count(@funnels) > 0 do %>
         <.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
           <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
             Add funnel
@@ -44,35 +46,44 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
           </:tbody>
         </.table>
       <% else %>
-        <%= if String.trim(@filter_text) != "" do %>
-          <p class="mt-12 mb-8 text-sm text-center">
-            No funnels found for this site. Please refine or
-            <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
-              reset your search.
-            </.styled_link>
-          </p>
-        <% else %>
-          <div class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto">
-            <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
-              Create your first funnel
-            </h3>
-            <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
-              Compose goals into funnels to track user flows and conversion rates.
-              <.styled_link href="https://plausible.io/docs/funnel-analysis" target="_blank">
-                Learn more
-              </.styled_link>
-            </p>
-            <.button
-              id="add-funnel-button"
-              phx-click="add-funnel"
-              class="mt-4"
-            >
-              Add funnel
-            </.button>
-          </div>
-        <% end %>
+        <.no_search_results :if={@searching?} />
+        <.empty_state :if={not @searching?} />
       <% end %>
     </div>
     """
   end
+
+  defp no_search_results(assigns) do
+    ~H"""
+    <p class="mt-12 mb-8 text-sm text-center">
+      No funnels found for this site. Please refine or
+      <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
+        reset your search.
+      </.styled_link>
+    </p>
+    """
+  end
+
+  defp empty_state(assigns) do
+    ~H"""
+    <div class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto">
+      <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
+        Create your first funnel
+      </h3>
+      <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+        Compose goals into funnels to track user flows and conversion rates.
+        <.styled_link href="https://plausible.io/docs/funnel-analysis" target="_blank">
+          Learn more
+        </.styled_link>
+      </p>
+      <.button
+        id="add-funnel-button"
+        phx-click="add-funnel"
+        class="mt-4"
+      >
+        Add funnel
+      </.button>
+    </div>
+    """
+  end
 end

lib/plausible_web/components/generic.ex

@@ -1126,6 +1126,16 @@ defmodule PlausibleWeb.Components.Generic do
     """
   end
 
+  slot :inner_block, required: true
+
+  def highlighted(assigns) do
+    ~H"""
+    <span class="font-medium text-indigo-600 dark:text-gray-100">
+      {render_slot(@inner_block)}
+    </span>
+    """
+  end
+
   def settings_badge(%{type: :new} = assigns) do
     ~H"""
     <span class="inline-block ml-2 bg-indigo-100 text-indigo-600 text-xs font-semibold py-1 px-2 rounded-md">

lib/plausible_web/components/site/feature.ex

@@ -53,7 +53,7 @@ defmodule PlausibleWeb.Components.Site.Feature do
     """
   end
 
-  defp target(site, setting, conn, set_to) when is_boolean(set_to) do
+  def target(site, setting, conn, set_to) when is_boolean(set_to) do
     r = conn.request_path
     Routes.site_path(conn, :update_feature_visibility, site.domain, setting, r: r, set: set_to)
   end

lib/plausible_web/components/site/toggle_live.ex

@@ -78,6 +78,8 @@ defmodule PlausibleWeb.Components.Site.Feature.ToggleLive do
             "#{feature_mod.display_name()} are now hidden from your dashboard"
           end
 
+        send(self(), {:site_updated, updated_site})
+
         {:noreply,
          socket
          |> assign(:site, updated_site)

lib/plausible_web/controllers/site_controller.ex

@@ -173,55 +173,26 @@ defmodule PlausibleWeb.SiteController do
   end
 
   def settings_goals(conn, _params) do
-    site = conn.assigns[:site]
-
-    has_goals? =
-      Repo.exists?(
-        from(g in Plausible.Goal,
-          where: g.site_id == ^site.id
-        )
-      )
-
     conn
     |> render("settings_goals.html",
-      site: site,
-      has_goals?: has_goals?,
       dogfood_page_path: "/:dashboard/settings/goals",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   end
 
   def settings_funnels(conn, _params) do
-    site = conn.assigns[:site]
-
-    has_funnels? =
-      Repo.exists?(
-        from(f in Plausible.Funnel,
-          where: f.site_id == ^site.id
-        )
-      )
-
     conn
     |> render("settings_funnels.html",
-      site: site,
-      has_funnels?: has_funnels?,
       dogfood_page_path: "/:dashboard/settings/funnels",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   end
 
   def settings_props(conn, _params) do
-    site = conn.assigns[:site]
-
-    has_props? =
-      site.allowed_event_props && length(site.allowed_event_props) > 0
-
     conn
     |> render("settings_props.html",
-      site: site,
-      has_props?: has_props?,
       dogfood_page_path: "/:dashboard/settings/properties",
       layout: {PlausibleWeb.LayoutView, "site_settings.html"},
       connect_live_socket: true
@@ -296,17 +267,9 @@ defmodule PlausibleWeb.SiteController do
   def settings_imports_exports(conn, _params) do
     site = conn.assigns.site
 
-    has_imports? =
-      Repo.exists?(
-        from(i in Plausible.Imported.SiteImport,
-          where: i.site_id == ^site.id
-        )
-      )
-
     conn
     |> render("settings_imports_exports.html",
       site: site,
-      has_imports?: has_imports?,
       dogfood_page_path: "/:dashboard/settings/imports-exports",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}