Use Sites.Index on /sites (#6143)

* Remove Sites.list() in favour of Sites.Index

* Implement basic sort options widget

@sanne-san pls review 🙏

* Attempt to indicate pinned sites

cc @sanne-san

* Remove Scrivener

* Format

* Update mix.lock

* Tweak sorting and pinning UI

- Moved sorting dropdown to the right of the top bar
- Changed pin icon behaviour to be a quick action button to unpin, and leaving the ellipsis menu always visible

* Add sorting loading state

* Fix pinning tests

* Make CI pass

* Move pin icon to `Icons` module

* Indicate pinned status in CRM

* Store user sort preference; migration to be extracted

* Move @sort_options if we intend to keep it as a module attribute

* Implement feedback

- Change "Most visitors" to "Visitors, high to low" and "Fewest visitors" to "Visitors, low to high" in the sort dropdown.
- Add dedicated styles to Prima dropdown, rather than using button styles directly, as they diverge from button styles in a few ways.
- Add data-sort-trigger attribute to sort dropdown so that loading state only applies to sorting, not to pinning/unpinning.
- Add padding to search form to ensure consistent height with other form elements.
- Ensure dropdown menu is always at least as wide as the trigger button.
- Changed site card hover effect to shadow-md instead of shadow-lg.

* Revert removal of unused css

- These changes weren't supposed to go into this PR

* Fixup tests

* Test no sort order persistence for guests (there's nowhere to store it)

* Update changelog

* Migration: store one map per membership wrt sort preferences

* Use unified sorting preferences object

* Cosmetics

* Lose track of `filter_by_domain` in `Sites.Index`

It's irrelevant to carry over

* Rework index build/pagination options

* Fix typespecs

* Remove unused uri argument

* Avoid passing URI around, maintain uri params instead

* Remove unused assigns

* Use prima's match_trigger_width instead of custom JS override

- Upgrade prima to 0.2.6 and replace the custom Dropdown hook that manually set min-width with the built-in match_trigger_width={true}.

* Skip an iteration

* Update lib/plausible_web/live/sites.ex

Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>

* Keep `filter_text` socket assign after all

* Turn sort_options into a list again to avoid undefined ordering

* Use path helpers for :stats

* Fix compilation error

* Use PlausibleWeb.Endpoint to enable path helpers

* Use an embed to store sort preferences

* Restructure index user preference

* Remove unused component attrs

* Remove validate_inclusions covered by Ecto.Enum type

---------

Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>

Author: 3 people

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes to this project will be documented in this file.
 ### Changed
 
 - Keybind hints are hidden on smaller screens
+- Site index is sortable alphanumerically and by traffic
 
 ### Fixed
 

assets/css/app.css

@@ -103,6 +103,7 @@
   /* Set v3 default ring behavior */
   --default-ring-width: 2px;
   --default-ring-color: var(--color-indigo-500);
+  --animate-pulse: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 @media print {
@@ -128,7 +129,7 @@
 }
 
 .button {
-  @apply inline-flex justify-center px-3.5 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700;
+  @apply inline-flex justify-center px-3.5 py-2.5 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700;
 }
 
 .button[disabled] {

extra/lib/plausible_web/live/customer_support/team/components/sites.ex

@@ -22,7 +22,8 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
         Index.build(owner, team: team, sort_by: :traffic, sort_direction: :desc)
       end)
 
-    page = Index.paginate(socket.assigns.index_state, tab_params["page"], @page_size)
+    page =
+      Index.paginate(socket.assigns.index_state, page: tab_params["page"], page_size: @page_size)
 
     sites = fetch_sites(page.entries)
 
@@ -66,7 +67,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
       end
 
     new_state = Index.sort(current_state, sort_by: sort_by, sort_direction: sort_direction)
-    page = Index.paginate(new_state, 1, @page_size)
+    page = Index.paginate(new_state, page: 1, page_size: @page_size)
     sites = fetch_sites(page.entries)
 
     hourly_stats = build_hourly_stats(sites, socket)
@@ -108,7 +109,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
           <.th invisible>Dashboard</.th>
           <th
             scope="col"
-            class="px-6 first:pl-0 last:pr-0 py-3 text-left text-sm font-semibold cursor-pointer select-none"
+            class="max-w-40 px-6 first:pl-0 last:pr-0 py-3 text-left text-sm font-semibold cursor-pointer select-none"
             phx-click="sort"
             phx-value-by="traffic"
             phx-target={@myself}
@@ -129,6 +130,10 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
                 class="cursor-pointer flex block items-center"
               >
                 {site.domain}
+
+                <span :if={@index_state.pins[site.id]}>
+                  <PlausibleWeb.Components.Icons.pin_icon class="w-4 ml-2" filled={true} />
+                </span>
               </.styled_link>
             </div>
           </.td>
@@ -150,7 +155,7 @@ defmodule PlausibleWeb.CustomerSupport.Team.Components.Sites do
               Settings
             </.styled_link>
           </.td>
-          <.td>
+          <.td max_width="max-w-40">
             <span class="h-[24px] text-indigo-500">
               <PlausibleWeb.Live.Components.Visitors.chart
                 :if={is_map(@hourly_stats[site.domain])}

lib/plausible/repo.ex

@@ -3,8 +3,6 @@ defmodule Plausible.Repo do
     otp_app: :plausible,
     adapter: Ecto.Adapters.Postgres
 
-  use Scrivener, page_size: 24
-
   use Plausible.Audit.Repo
 
   defmacro __using__(_) do

lib/plausible/sites.ex

@@ -134,7 +134,7 @@ defmodule Plausible.Sites do
     )
   end
 
-  defdelegate list(user, pagination_params, opts \\ []), to: Plausible.Teams.Sites
+  defdelegate get_for_user_by_ids(user, site_ids, opts \\ []), to: Plausible.Teams.Sites
 
   def list_people(site) do
     owner_memberships =

lib/plausible/sites/index.ex

@@ -13,15 +13,22 @@ defmodule Plausible.Sites.Index do
   alias Plausible.Teams
   alias Plausible.Teams.Sites
 
+  def sort_direction_values, do: [:asc, :desc]
+  def sort_by_values, do: [:traffic, :alnum]
+
   @type sort_by() :: :alnum | :traffic
   @type sort_direction() :: :asc | :desc
 
-  @type list_opt() ::
-          {:filter_by_domain, String.t()}
-          | {:team, Teams.Team.t() | nil}
+  @type index_option() ::
+          {:team, Teams.Team.t() | nil}
           | {:sort_by, sort_by()}
           | {:sort_direction, sort_direction()}
 
+  @type pagination_option() ::
+          {:page, pos_integer() | String.t() | nil}
+          | {:page_size, pos_integer() | String.t() | nil}
+          | {:filter_by_domain, String.t() | nil}
+
   defmodule Page do
     @moduledoc """
     A single page of results, drop-in replacement for Scrivener.Page 
@@ -46,7 +53,7 @@ defmodule Plausible.Sites.Index do
 
     @type t() :: %__MODULE__{
             user: Auth.User.t(),
-            opts: %{filter_by_domain: String.t() | nil, team: Plausible.Teams.Team.t() | nil},
+            opts: %{team: Plausible.Teams.Team.t() | nil},
             ordered_ids: [pos_integer()],
             pins: %{pos_integer() => NaiveDateTime.t() | nil},
             domains: %{pos_integer() => String.t()},
@@ -71,21 +78,28 @@ defmodule Plausible.Sites.Index do
   @doc """
   Builds an `Index.State` for `user` by running all necessary queries
   """
-  @spec build(Auth.User.t(), [list_opt()]) :: State.t()
-  def build(user, opts \\ []) do
+  @spec build(Auth.User.t(), [index_option()] | map()) :: State.t()
+  def build(user, opts \\ [])
+
+  def build(user, %{__struct__: _} = opts) do
+    build(user, Map.from_struct(opts))
+  end
+
+  def build(user, opts) when is_map(opts) do
+    build(user, Keyword.new(opts))
+  end
+
+  def build(user, opts) do
     sort_by = Keyword.get(opts, :sort_by, :alnum)
     sort_direction = Keyword.get(opts, :sort_direction, :asc)
 
-    # Fetch the full unfiltered set for the team; domain filtering is applied
-    # locally from here on so filter/2 never needs to hit the database.
-    site_ids = fetch_site_ids(user, Keyword.delete(opts, :filter_by_domain))
+    site_ids = fetch_site_ids(user, opts)
     pins = fetch_pins(user, site_ids)
     domains = fetch_domains(site_ids)
 
     %State{
       user: user,
       opts: %{
-        filter_by_domain: Keyword.get(opts, :filter_by_domain),
         team: Keyword.get(opts, :team)
       },
       ordered_ids: site_ids,
@@ -100,14 +114,22 @@ defmodule Plausible.Sites.Index do
 
   @spec paginate(
           State.t(),
-          page :: pos_integer() | String.t() | nil,
-          page_size :: pos_integer() | String.t() | nil
+          [pagination_option()]
         ) :: Page.t()
-  def paginate(%State{ordered_ids: ordered_ids} = state, raw_page_number, raw_page_size) do
-    page_number = cast_int(raw_page_number, min: 1, max: :unlimited, default: 1)
-    page_size = cast_int(raw_page_size, min: 1, max: 100, default: 24)
+  def paginate(%State{ordered_ids: ordered_ids} = state, opts \\ []) do
+    page_number =
+      opts
+      |> Keyword.get(:page)
+      |> cast_int(min: 1, max: :unlimited, default: 1)
+
+    page_size =
+      opts
+      |> Keyword.get(:page_size)
+      |> cast_int(min: 1, max: 100, default: 24)
+
+    filter_by_domain = Keyword.get(opts, :filter_by_domain)
 
-    filtered_ids = apply_domain_filter(ordered_ids, state.domains, state.opts.filter_by_domain)
+    filtered_ids = apply_domain_filter(ordered_ids, state.domains, filter_by_domain)
 
     total_entries = length(filtered_ids)
     total_pages = max(1, ceil(total_entries / page_size))
@@ -150,12 +172,16 @@ defmodule Plausible.Sites.Index do
     %State{state | pins: new_pins, ordered_ids: new_ordered_ids}
   end
 
-  @spec update_state(State.t(), :filter_by_domain, String.t() | nil) :: State.t()
-  def update_state(%State{} = state, :filter_by_domain, value) do
-    %State{state | opts: %{state.opts | filter_by_domain: value}}
+  @spec sort(State.t(), [index_option()] | map()) :: State.t()
+
+  def sort(user, %{__struct__: _} = opts) do
+    sort(user, Map.from_struct(opts))
+  end
+
+  def sort(user, opts) when is_map(opts) do
+    sort(user, Keyword.new(opts))
   end
 
-  @spec sort(State.t(), [list_opt()]) :: State.t()
   def sort(%State{} = state, opts) do
     sort_by = Keyword.get(opts, :sort_by, state.sort_by)
     sort_direction = Keyword.get(opts, :sort_direction, state.sort_direction)
@@ -246,18 +272,17 @@ defmodule Plausible.Sites.Index do
     pinned ++ Enum.reverse(unpinned)
   end
 
-  @spec fetch_site_ids(Auth.User.t(), [list_opt()]) :: [pos_integer()]
+  @spec fetch_site_ids(Auth.User.t(), [index_option()]) :: [pos_integer()]
   def fetch_site_ids(user, opts \\ []) do
     team = Keyword.get(opts, :team)
-    domain_filter = Keyword.get(opts, :filter_by_domain)
 
-    from(u in subquery(Sites.accessible_by(user, team)),
-      inner_join: s in ^Site.regular(),
-      on: u.site_id == s.id,
-      select: s.id
+    Repo.all(
+      from(u in subquery(Sites.accessible_by(user, team)),
+        inner_join: s in ^Site.regular(),
+        on: u.site_id == s.id,
+        select: s.id
+      )
     )
-    |> maybe_filter_by_domain_on_site(domain_filter)
-    |> Repo.all()
   end
 
   @spec traffic_for_site_ids([pos_integer()]) :: [{pos_integer(), non_neg_integer()}]
@@ -370,13 +395,6 @@ defmodule Plausible.Sites.Index do
     end)
   end
 
-  defp maybe_filter_by_domain_on_site(query, domain)
-       when byte_size(domain) >= 1 and byte_size(domain) <= 64 do
-    from([_u, s] in query, where: ilike(s.domain, ^"%#{domain}%"))
-  end
-
-  defp maybe_filter_by_domain_on_site(query, _), do: query
-
   defp cast_int(value, min: min, max: max, default: default) when is_binary(value) do
     case Integer.parse(value) do
       {int, ""} when int >= min and int <= max -> int

lib/plausible/sites/index/user_preference.ex

@@ -0,0 +1,25 @@
+defmodule Plausible.Sites.Index.UserPreference do
+  @moduledoc """
+  User preference persistence schema for the sites index
+  """
+
+  use Ecto.Schema
+  import Ecto.Changeset
+  alias Plausible.Sites.Index
+
+  @primary_key false
+  embedded_schema do
+    field :sort_by, Ecto.Enum, values: Index.sort_by_values(), default: :traffic
+    field :sort_direction, Ecto.Enum, values: Index.sort_direction_values(), default: :desc
+  end
+
+  def changeset(struct \\ %__MODULE__{}, attrs) do
+    cast(struct, attrs, [:sort_by, :sort_direction])
+  end
+
+  def new(attrs) do
+    attrs |> changeset() |> apply_changes()
+  end
+
+  def default(), do: %__MODULE__{}
+end

lib/plausible/teams/memberships.ex

@@ -233,8 +233,7 @@ defmodule Plausible.Teams.Memberships do
     |> Teams.Memberships.UserPreference.changeset(%{option => value})
     |> Repo.insert!(
       conflict_target: [:team_membership_id],
-      on_conflict:
-        from(p in Teams.Memberships.UserPreference, update: [set: [{^option, ^value}]]),
+      on_conflict: {:replace, [option, :updated_at]},
       returning: true
     )
   end

lib/plausible/teams/memberships/user_preference.ex

@@ -8,10 +8,11 @@ defmodule Plausible.Teams.Memberships.UserPreference do
 
   @type t() :: %__MODULE__{}
 
-  @options [:consolidated_view_cta_dismissed]
+  @options [:consolidated_view_cta_dismissed, :sort_index_options]
 
   schema "team_membership_user_preferences" do
     field :consolidated_view_cta_dismissed, :boolean, default: false
+    embeds_one :sort_index_options, Plausible.Sites.Index.UserPreference, on_replace: :update
 
     belongs_to :team_membership, Plausible.Teams.Membership
 
@@ -22,7 +23,8 @@ defmodule Plausible.Teams.Memberships.UserPreference do
 
   def changeset(team_membership, attrs \\ %{}) do
     %__MODULE__{}
-    |> cast(attrs, @options)
+    |> cast(attrs, [:consolidated_view_cta_dismissed])
+    |> cast_embed(:sort_index_options)
     |> put_assoc(:team_membership, team_membership)
   end
 end