Updated empty states across settings

Author: sanne-san

extra/lib/plausible_web/live/funnel_settings.ex

@@ -70,15 +70,15 @@ defmodule PlausibleWeb.Live.FunnelSettings do
         />
       </div>
 
-      <div :if={@goal_count < Funnel.min_steps()} class="flex flex-col items-center">
-        <h1 class="mt-4 text-center">
+      <div :if={@goal_count < Funnel.min_steps()} 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">
           Ready to dig into user flows?
-        </h1>
-        <p class="mt-4 mb-6 max-w-lg text-sm text-gray-500 dark:text-gray-400 leading-5 text-center">
-          Set up a few goals first (e.g. <b>"Signup"</b>, <b>"Visit /"</b>, or <b>"Scroll 50% on /blog/*"</b>) and return here to build your first funnel!
+        </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="mb-2"
+          class="mt-4"
           href={PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain)}
         >
           Set up goals →

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

@@ -12,11 +12,13 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
   def render(assigns) do
     ~H"""
     <div>
-      <.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
-        <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
-          Add funnel
-        </.button>
-      </.filter_bar>
+      <%= if String.trim(@filter_text) != "" || 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
+          </.button>
+        </.filter_bar>
+      <% end %>
 
       <%= if Enum.count(@funnels) > 0 do %>
         <.table rows={@funnels}>
@@ -42,17 +44,30 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
           </:tbody>
         </.table>
       <% else %>
-        <p class="mt-12 mb-8 text-sm text-center">
-          <span :if={String.trim(@filter_text) != ""}>
+        <%= 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>
-          </span>
-          <span :if={String.trim(@filter_text) == "" && Enum.empty?(@funnels)}>
-            No funnels configured for this site.
-          </span>
-        </p>
+          </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 %>
       <% end %>
     </div>
     """

lib/plausible_web/components/site/feature.ex

@@ -26,7 +26,7 @@ defmodule PlausibleWeb.Components.Site.Feature do
         class={@class}
       >
         <.toggle_submit set_to={@current_setting} disabled?={@disabled?}>
-          Show {String.downcase(@feature_mod.display_name())} in the dashboard
+          Show in dashboard
         </.toggle_submit>
       </.form>
 

lib/plausible_web/controllers/site_controller.ex

@@ -163,36 +163,75 @@ defmodule PlausibleWeb.SiteController do
   def settings_visibility(conn, _params) do
     site = conn.assigns[:site]
 
+    has_shared_links? =
+      Repo.exists?(
+        from(l in Plausible.Site.SharedLink,
+          where:
+            l.site_id == ^site.id and
+              l.name not in ^Plausible.Sites.shared_link_special_names()
+        )
+      )
+
     conn
     |> render("settings_visibility.html",
       site: site,
+      has_shared_links?: has_shared_links?,
       dogfood_page_path: "/:dashboard/settings/visibility",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   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
@@ -267,9 +306,17 @@ 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"}

lib/plausible_web/live/goal_settings/list.ex

@@ -16,17 +16,19 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
 
     ~H"""
     <div>
-      <.filter_bar filter_text={@filter_text} placeholder="Search Goals">
-        <.button
-          id="add-goal-button"
-          phx-click="add-goal"
-          mt?={false}
-          x-data
-          x-on:click={Modal.JS.preopen("goals-form-modal")}
-        >
-          Add goal
-        </.button>
-      </.filter_bar>
+      <%= if String.trim(@filter_text) != "" || Enum.count(@goals) > 0 do %>
+        <.filter_bar filter_text={@filter_text} placeholder="Search Goals">
+          <.button
+            id="add-goal-button"
+            phx-click="add-goal"
+            mt?={false}
+            x-data
+            x-on:click={Modal.JS.preopen("goals-form-modal")}
+          >
+            Add goal
+          </.button>
+        </.filter_bar>
+      <% end %>
 
       <%= if Enum.count(@goals) > 0 do %>
         <.table rows={@goals}>
@@ -89,17 +91,32 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
           </:tbody>
         </.table>
       <% else %>
-        <p class="mt-12 mb-8 text-center text-sm">
-          <span :if={String.trim(@filter_text) != ""}>
+        <%= if String.trim(@filter_text) != "" do %>
+          <p class="mt-12 mb-8 text-center text-sm">
             No goals found for this site. Please refine or
             <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
               reset your search.
             </.styled_link>
-          </span>
-          <span :if={String.trim(@filter_text) == "" && Enum.empty?(@goals)}>
-            No goals configured for this site.
-          </span>
-        </p>
+          </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 goal
+            </h3>
+            <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+              Define actions that you want your users to take, like visiting a certain page, submitting a form, etc. <.styled_link href="https://plausible.io/docs/goal-conversions" target="_blank">Learn more</.styled_link>
+            </p>
+            <.button
+              id="add-goal-button"
+              phx-click="add-goal"
+              x-data
+              x-on:click={Modal.JS.preopen("goals-form-modal")}
+              class="mt-4"
+            >
+              Add goal
+            </.button>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/plausible_web/live/imports_exports_settings.ex

@@ -74,35 +74,63 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
       {@import_warning}
     </.notice>
 
-    <div class="flex gap-x-4">
-      <.button_link
-        theme="secondary"
-        href={Plausible.Google.API.import_authorize_url(@site.id)}
-        disabled={@import_in_progress? or @at_maximum?}
-        mt?={false}
-      >
-        Import from
-        <img
-          src="/images/icon/google_analytics_logo.svg"
-          alt="Google Analytics import"
-          class="h-6 w-12 -my-1"
-        />
-      </.button_link>
-      <.button_link
-        disabled={@import_in_progress? or @at_maximum?}
-        href={"/#{URI.encode_www_form(@site.domain)}/settings/import"}
-        mt?={false}
-      >
-        Import from CSV
-      </.button_link>
-    </div>
-
-    <p :if={Enum.empty?(@site_imports)} class="text-center text-sm mt-8 mb-12">
-      There are no imports yet for this site.
-    </p>
-
-    <div class="mt-6">
-      <.table :if={not Enum.empty?(@site_imports)} rows={@site_imports}>
+    <%= if Enum.empty?(@site_imports) do %>
+      <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">
+          Import your first data
+        </h3>
+        <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+          Import data from external sources. Up to {Plausible.Imported.max_complete_imports()} imports are allowed at a time.
+        </p>
+        <div class="flex gap-x-4 mt-4">
+          <.button_link
+            theme="secondary"
+            href={Plausible.Google.API.import_authorize_url(@site.id)}
+            disabled={@import_in_progress? or @at_maximum?}
+            mt?={false}
+          >
+            Import from
+            <img
+              src="/images/icon/google_analytics_logo.svg"
+              alt="Google Analytics import"
+              class="h-6 w-12 -my-1"
+            />
+          </.button_link>
+          <.button_link
+            disabled={@import_in_progress? or @at_maximum?}
+            href={"/#{URI.encode_www_form(@site.domain)}/settings/import"}
+            mt?={false}
+          >
+            Import from CSV
+          </.button_link>
+        </div>
+      </div>
+    <% else %>
+      <div class="flex gap-x-4">
+        <.button_link
+          theme="secondary"
+          href={Plausible.Google.API.import_authorize_url(@site.id)}
+          disabled={@import_in_progress? or @at_maximum?}
+          mt?={false}
+        >
+          Import from
+          <img
+            src="/images/icon/google_analytics_logo.svg"
+            alt="Google Analytics import"
+            class="h-6 w-12 -my-1"
+          />
+        </.button_link>
+        <.button_link
+          disabled={@import_in_progress? or @at_maximum?}
+          href={"/#{URI.encode_www_form(@site.domain)}/settings/import"}
+          mt?={false}
+        >
+          Import from CSV
+        </.button_link>
+      </div>
+
+      <div class="mt-6">
+        <.table rows={@site_imports}>
         <:thead>
           <.th>Import</.th>
           <.th hide_on_mobile>Date Range</.th>
@@ -164,7 +192,8 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
           </.td>
         </:tbody>
       </.table>
-    </div>
+      </div>
+    <% end %>
     """
   end
 

lib/plausible_web/live/plugins/api/settings.ex

@@ -50,14 +50,29 @@ defmodule PlausibleWeb.Live.Plugins.API.Settings do
         )}
       <% end %>
 
-      <div>
+      <%= if Enum.empty?(@displayed_tokens) do %>
+        <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 plugin token
+          </h3>
+          <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+            Control plugin access by creating tokens for third-party integrations.
+          </p>
+          <.button
+            phx-click="create-token"
+            class="mt-4"
+          >
+            New plugin token
+          </.button>
+        </div>
+      <% else %>
         <.filter_bar filtering_enabled?={false}>
           <.button phx-click="create-token" mt?={false}>
             Create plugin token
           </.button>
         </.filter_bar>
 
-        <.table :if={not Enum.empty?(@displayed_tokens)} rows={@displayed_tokens}>
+        <.table rows={@displayed_tokens}>
           <:thead>
             <.th>Description</.th>
             <.th hide_on_mobile>Hint</.th>
@@ -86,7 +101,7 @@ defmodule PlausibleWeb.Live.Plugins.API.Settings do
             </.td>
           </:tbody>
         </.table>
-      </div>
+      <% end %>
     </div>
     """
   end