Updated empty states across settings #5874

sanne-san · 2025-11-05T16:06:44Z

Changes

All empty states have been enhanced by center-aligned copy, link to docs, and CTA.
Whenever empty state is shown, the setting's subtitle is hidden.

Tests

Automated tests have been added

Dark mode

The UI has been tested both in dark and light mode

github-actions · 2025-11-05T19:28:15Z

Preview environment👷🏼‍♀️🏗️
PR-5874

lib/plausible_web/controllers/site_controller.ex

- Add show_content? attribute to generic tile component - Ensure content is hidden when toggled off - Avoid rendering border and empty space when toggled off - Fix formatting

aerosol · 2025-11-13T13:39:13Z

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

-          Add funnel
-        </.button>
-      </.filter_bar>
+      <%= if String.trim(@filter_text) != "" || Enum.count(@funnels) > 0 do %>


or is perfectly valid here since both left and right hand side expressions return a boolean

lib/plausible_web/controllers/site_controller.ex

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

extra/lib/plausible_web/live/funnel_settings.ex

lib/plausible_web/live/goal_settings/list.ex

lib/plausible_web/live/props_settings/list.ex

- 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

lib/plausible_web/components/site/feature.ex

lib/plausible_web/components/site/toggle_live.ex

aerosol

Impressive work! Some comments inline.

aerosol · 2025-11-19T07:06:30Z

lib/plausible_web/live/props_settings/list.ex

+          </.button>
+        </.filter_bar>
+      <% end %>
+


Suggested change

<.filter_bar :if={@searching? or length(@props) > 0} filter_text={@filter_text} placeholder="Search Properties">

<.button phx-click="add-prop" mt?={false}>

Add property

</.button>

</.filter_bar>

when can props be anything else than a list here? 🤔

The suggestion above displays in a weird way, apologies, probably not a great idea to commit it directly 😓

Agreed with Adam, even though the condition existed already before this PR, it's safe to remove. I think this is some kind of leftover from when site.allowed_event_props (which can be nil, meaning that all props are allowed to display) was passed into this component directly. But I just checked that that's not the case anymore and @props gets the value of site.allowed_event_props || [].

Ok cool, yeah I kept it as I wasn't sure if I was missing any context on that. Updated it to be the same as goals and funnels.

aerosol · 2025-11-19T07:24:38Z

lib/plausible_web/live/sites.ex

+        <.search_form
+          :if={
+            @has_sites? and
+              (Teams.setup?(@current_team) or @sites.entries != [] or @filter_text != "")


Why is Teams.setup?(@current_team) here?

If a team is setup and all its sites have been deleted, then perhaps it's pointless to show the search bar? The +Add button becomes broken then though.

With several new conditions here and there, we might want to test those cases to guard it from regression - removing that :if breaks zero tests.

The reason is that I improved the personal sites empty state, so that it's hidden there when personal sites is empty and team sites isn't.

But I realise now that I should also fix up the empty state for team sites, and perhaps that can simplify the whole thing a bit (although we still want a different call to action on the personal sites empty state).

aerosol · 2025-11-19T07:27:34Z

test/plausible_web/live/funnel_settings_test.exs


      test "search funnels input is rendered", %{conn: conn, site: site} do
-        setup_goals(site)
+        {:ok, _} = setup_funnels(site)


- Hide top bar on `/sites` when empty state is shown - Extract empty state logic to a separate function - Show the same empty state for both personal and team sites, with different copy - extract search logic to a separate function - add tests for various empty states cases

- remove HTTP feature visibility routes now that we're doing it 100% via LV - add tests for feature toggling - move "site_role" to where it's used (upgrade CTA), since there were already some feature-related function calls there - fix random test failures left

RobertJoonas

Brilliant work! 👏 Thanks for this @sanne-san @aerosol!

Loving the site_role/current_role -> current_user assigns being changed. Also played around on staging and everything was working super smooth.

Noticed this small UI thing btw (not related to this PR but should be a very easy fix):

RobertJoonas · 2025-11-20T12:29:41Z

lib/plausible_web/components/generic.ex

+      <div class={["border-b dark:border-gray-700 mx-6", if(not @show_content?, do: "hidden")]}></div>
+      <div class={["relative", if(not @show_content?, do: "hidden")]}>


RobertJoonas · 2025-11-20T12:35:23Z

lib/plausible_web/components/generic.ex

          :if={@feature_toggle?}
-          feature_mod={@feature_mod}
+          module={PlausibleWeb.Components.Site.Feature.ToggleLive}
+          id={"feature-toggle-#{@site.id}-#{@feature_mod}"}


What's this id used for? I'm seeing another id attribute defined by the ToggleLive component itself (the wrapper div):

<div class="mt-4" id={"feature-#{@feature_mod.name()}-toggle"}>

Should we stick to a single one?

Tests. I guess we prefer data-test-id?

sanne-san · 2025-11-20T13:12:54Z

Noticed this small UI thing btw (not related to this PR but should be a very easy fix):

Thank you! I'll look into this little bug separately 🙏

ukutaht added the preview label Nov 5, 2025

sanne-san commented Nov 6, 2025

View reviewed changes

lib/plausible_web/controllers/site_controller.ex Outdated Show resolved Hide resolved

sanne-san requested a review from a team November 6, 2025 09:07

sanne-san added 2 commits November 13, 2025 04:18

Updated empty states across settings

9ccce04

Fix funnels and props functionality not hiding when toggled off

779dd92

- Add show_content? attribute to generic tile component - Ensure content is hidden when toggled off - Avoid rendering border and empty space when toggled off - Fix formatting

sanne-san force-pushed the sanne-empty-states branch from 6ff4770 to 779dd92 Compare November 13, 2025 10:18

Update personal sites empty state

39d7dbd

aerosol reviewed Nov 13, 2025

View reviewed changes

RobertJoonas reviewed Nov 13, 2025

View reviewed changes

sanne-san mentioned this pull request Nov 14, 2025

Update goal settings design #5886

Open

2 tasks

aerosol mentioned this pull request Nov 18, 2025

Patch to Sanne's empty states: Make tile component lv-embeddable #5891

Merged

aerosol and others added 2 commits November 18, 2025 11:26

Make tile component lv-embeddable (#5891)

7f68d17

sanne-san force-pushed the sanne-empty-states branch from 73347e9 to beefacd Compare November 18, 2025 18:19

sanne-san requested review from RobertJoonas and aerosol November 18, 2025 18:42

sanne-san commented Nov 18, 2025

View reviewed changes

lib/plausible_web/components/site/feature.ex Outdated Show resolved Hide resolved

sanne-san commented Nov 18, 2025

View reviewed changes

lib/plausible_web/components/site/toggle_live.ex Outdated Show resolved Hide resolved

aerosol reviewed Nov 19, 2025

View reviewed changes

sanne-san and others added 4 commits November 19, 2025 15:43

Clean up:

7ecdb87

- remove HTTP feature visibility routes now that we're doing it 100% via LV - add tests for feature toggling - move "site_role" to where it's used (upgrade CTA), since there were already some feature-related function calls there - fix random test failures left

Merge branch 'master' into sanne-empty-states

a589d78

Fixup

5d9e42f

aerosol approved these changes Nov 20, 2025

View reviewed changes

RobertJoonas approved these changes Nov 20, 2025

View reviewed changes

+      <.filter_bar :if={@searching? or length(@props) > 0} filter_text={@filter_text} placeholder="Search Properties">
+        <.button phx-click="add-prop" mt?={false}>
+          Add property
+        </.button>
+      </.filter_bar>

		<div class={["border-b dark:border-gray-700 mx-6", if(not @show_content?, do: "hidden")]}></div>
		<div class={["relative", if(not @show_content?, do: "hidden")]}>

Uh oh!

Updated empty states across settings #5874

Are you sure you want to change the base?

Updated empty states across settings #5874

Conversation

sanne-san commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Tests

Dark mode

Uh oh!

github-actions bot commented Nov 5, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aerosol left a comment

Choose a reason for hiding this comment

Uh oh!

aerosol Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RobertJoonas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sanne-san commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sanne-san commented Nov 5, 2025 •

edited

Loading

aerosol Nov 19, 2025 •

edited

Loading

sanne-san commented Nov 20, 2025 •

edited

Loading