Allow creating and editing shared links with limited views

Author: apata

assets/js/dashboard.tsx

@@ -19,6 +19,7 @@ import {
   SomethingWentWrongMessage
 } from './dashboard/error/something-went-wrong'
 import {
+  parseLimitedToSegmentId,
   parsePreloadedSegments,
   SegmentsContextProvider
 } from './dashboard/filtering/segments-context'
@@ -83,6 +84,7 @@ if (container && container.dataset) {
               }
             >
               <SegmentsContextProvider
+                limitedToSegmentId={parseLimitedToSegmentId(container.dataset)}
                 preloadedSegments={parsePreloadedSegments(container.dataset)}
               >
                 <RouterProvider router={router} />

assets/js/dashboard/filtering/segments-context.test.tsx

@@ -35,6 +35,7 @@ describe('SegmentsContext functions', () => {
   test('deleteOne works', () => {
     render(
       <SegmentsContextProvider
+        limitedToSegmentId={null}
         preloadedSegments={[segmentOpenSource, segmentAPAC]}
       >
         <TestComponent />
@@ -51,7 +52,10 @@ describe('SegmentsContext functions', () => {
 
   test('addOne adds to head of list', async () => {
     render(
-      <SegmentsContextProvider preloadedSegments={[segmentAPAC]}>
+      <SegmentsContextProvider
+        limitedToSegmentId={null}
+        preloadedSegments={[segmentAPAC]}
+      >
         <TestComponent />
       </SegmentsContextProvider>
     )
@@ -68,6 +72,7 @@ describe('SegmentsContext functions', () => {
   test('updateOne works: updated segment is at head of list', () => {
     render(
       <SegmentsContextProvider
+        limitedToSegmentId={null}
         preloadedSegments={[segmentOpenSource, segmentAPAC]}
       >
         <TestComponent />

assets/js/dashboard/filtering/segments-context.tsx

@@ -17,17 +17,23 @@ export function parsePreloadedSegments(dataset: DOMStringMap): SavedSegments {
   return JSON.parse(dataset.segments!).map(handleSegmentResponse)
 }
 
+export function parseLimitedToSegmentId(dataset: DOMStringMap): number | null {
+  return JSON.parse(dataset.limitedToSegmentId!)
+}
+
 type ChangeSegmentState = (
   segment: (SavedSegment | SavedSegmentPublic) & { segment_data: SegmentData }
 ) => void
 
 const initialValue: {
   segments: SavedSegments
+  limitedToSegmentId: number | null
   updateOne: ChangeSegmentState
   addOne: ChangeSegmentState
   removeOne: ChangeSegmentState
 } = {
   segments: [],
+  limitedToSegmentId: null,
   updateOne: () => {},
   addOne: () => {},
   removeOne: () => {}
@@ -41,9 +47,11 @@ export const useSegmentsContext = () => {
 
 export const SegmentsContextProvider = ({
   preloadedSegments,
+  limitedToSegmentId,
   children
 }: {
   preloadedSegments: SavedSegments
+  limitedToSegmentId: number | null
   children: ReactNode
 }) => {
   const [segments, setSegments] = useState(preloadedSegments)
@@ -73,7 +81,13 @@ export const SegmentsContextProvider = ({
 
   return (
     <SegmentsContext.Provider
-      value={{ segments, removeOne, updateOne, addOne }}
+      value={{
+        segments,
+        limitedToSegmentId: limitedToSegmentId ?? null,
+        removeOne,
+        updateOne,
+        addOne
+      }}
     >
       {children}
     </SegmentsContext.Provider>

assets/js/dashboard/nav-menu/filter-menu.tsx

@@ -11,6 +11,7 @@ import { popover, BlurMenuButtonOnEscape } from '../components/popover'
 import classNames from 'classnames'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
 import { SearchableSegmentsSection } from './segments/searchable-segments-section'
+import { useSegmentsContext } from '../filtering/segments-context'
 
 export function getFilterListItems({
   propsAvailable
@@ -49,6 +50,7 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
   const columns = useMemo(() => getFilterListItems(site), [site])
   const buttonRef = useRef<HTMLButtonElement>(null)
   const panelRef = useRef<HTMLDivElement>(null)
+  const { limitedToSegmentId } = useSegmentsContext()
 
   return (
     <>
@@ -107,10 +109,12 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
               </div>
             ))}
           </div>
-          <SearchableSegmentsSection
-            closeList={closeDropdown}
-            tooltipContainerRef={panelRef}
-          />
+          {limitedToSegmentId === null && (
+            <SearchableSegmentsSection
+              closeList={closeDropdown}
+              tooltipContainerRef={panelRef}
+            />
+          )}
         </Popover.Panel>
       </Transition>
     </>

assets/test-utils/app-context-providers.tsx

@@ -78,7 +78,7 @@ export const TestContextProviders = ({
           }
         }
       >
-        <SegmentsContextProvider preloadedSegments={preloaded?.segments ?? []}>
+        <SegmentsContextProvider limitedToSegmentId={null} preloadedSegments={preloaded?.segments ?? []}>
           <MemoryRouter
             basename={getRouterBasepath(site)}
             initialEntries={defaultInitialEntries}

lib/plausible/segments/segments.ex

@@ -70,6 +70,63 @@ defmodule Plausible.Segments do
     {:ok, Repo.all(query)}
   end
 
+  def search_by_name(%Plausible.Site{} = site, name, opts) do
+    type = Keyword.fetch!(opts, :type)
+    fields = Keyword.get(opts, :fields, [:id, :name])
+
+    name_empty? = is_nil(name) or (is_binary(name) and String.trim(name) == "")
+
+    base_query =
+      from(segment in Segment,
+        where: segment.site_id == ^site.id,
+        where: segment.type == ^type,
+        limit: 20
+      )
+
+    query =
+      if name_empty? do
+        from([segment] in base_query,
+          select: ^fields,
+          order_by: [desc: segment.updated_at]
+        )
+      else
+        from([segment] in base_query,
+          select: %{
+            id: segment.id,
+            name: segment.name,
+            match_rank:
+              fragment(
+                "CASE
+                WHEN lower(?) = lower(?) THEN 0                    -- exact match
+                WHEN lower(?) LIKE lower(?) || '%' THEN 1          -- starts with
+                WHEN lower(?) LIKE '% ' || lower(?) || '%' THEN 2  -- after a space
+                WHEN lower(?) LIKE ? THEN 3                        -- anywhere
+              END AS match_rank",
+                segment.name,
+                ^name,
+                segment.name,
+                ^name,
+                segment.name,
+                ^name,
+                segment.name,
+                ^"%name%"
+              ),
+            pos:
+              fragment(
+                "position(lower(?) IN lower(?)) AS pos",
+                segment.name,
+                ^name
+              ),
+            len_diff: fragment("abs(length(?) - length(?)) AS len_diff", segment.name, ^name)
+          },
+          where: fragment("? ilike ?", segment.name, ^"%#{name}%"),
+          order_by: fragment("match_rank asc, pos asc, len_diff asc, updated_at desc")
+        )
+      end
+
+    {:ok, Repo.all(query)}
+  end
+
   @spec get_one(pos_integer(), Plausible.Site.t(), atom(), pos_integer() | nil) ::
           {:ok, Segment.t()}
           | error_not_enough_permissions()

lib/plausible/site/shared_link.ex

@@ -10,17 +10,19 @@ defmodule Plausible.Site.SharedLink do
     field :slug, :string
     field :password_hash, :string
     field :password, :string, virtual: true
+    belongs_to :segment, Plausible.Segments.Segment
 
     timestamps()
   end
 
   def changeset(link, attrs \\ %{}, opts \\ []) do
     link
-    |> cast(attrs, [:slug, :password, :name])
+    |> cast(attrs, [:slug, :password, :name, :segment_id])
     |> validate_required([:slug, :name])
     |> validate_special_name(opts)
     |> unique_constraint(:slug)
     |> unique_constraint(:name, name: :shared_links_site_id_name_index)
+    |> foreign_key_constraint(:segment_id)
     |> hash_password()
   end
 

lib/plausible/sites.ex

@@ -415,6 +415,8 @@ defmodule Plausible.Sites do
 
   def create_shared_link(site, name, opts \\ []) do
     password = Keyword.get(opts, :password)
+    segment_id = Keyword.get(opts, :segment_id)
+
     site = Plausible.Repo.preload(site, :team)
     skip_feature_check? = Keyword.get(opts, :skip_feature_check?, false)
 
@@ -423,7 +425,7 @@ defmodule Plausible.Sites do
     else
       %SharedLink{site_id: site.id, slug: Nanoid.generate()}
       |> SharedLink.changeset(
-        %{name: name, password: password},
+        %{name: name, password: password, segment_id: segment_id},
         Keyword.take(opts, [:skip_special_name_check?])
       )
       |> Repo.insert()

lib/plausible_web/components/generic.ex

@@ -838,7 +838,9 @@ defmodule PlausibleWeb.Components.Generic do
     <td
       class={[
         @height,
-        "text-sm px-6 py-4 first:pl-0 last:pr-0 whitespace-nowrap overflow-visible",
+        "text-sm px-6 py-4 first:pl-0 last:pr-0 whitespace-nowrap",
+         # allow tooltips overflow cells vertically
+        "overflow-visible",
         @truncate && "truncate",
         @max_width,
         @actions && "flex text-right justify-end",

lib/plausible_web/controllers/stats_controller.ex

@@ -100,7 +100,8 @@ defmodule PlausibleWeb.StatsController do
           hide_footer?: if(ce?() || demo, do: false, else: site_role != :public),
           consolidated_view?: consolidated_view?,
           consolidated_view_available?: consolidated_view_available?,
-          team_identifier: team_identifier
+          team_identifier: team_identifier,
+          limited_to_segment_id: nil
         )
 
       !stats_start_date && can_see_stats? ->
@@ -396,12 +397,28 @@ defmodule PlausibleWeb.StatsController do
       not Teams.locked?(shared_link.site.team) ->
         current_user = conn.assigns[:current_user]
         site_role = get_fallback_site_role(conn)
-        shared_link = Plausible.Repo.preload(shared_link, site: :owners)
+        shared_link = Plausible.Repo.preload(shared_link, site: [:owners], segment: [])
         stats_start_date = Plausible.Sites.stats_start_date(shared_link.site)
 
         flags = get_flags(current_user, shared_link.site)
-
-        {:ok, segments} = Plausible.Segments.get_all_for_site(shared_link.site, site_role)
+        limited_to_segment_id = shared_link.segment && shared_link.segment.id
+
+        segments =
+          if is_nil(limited_to_segment_id) do
+            {:ok, segments} = Plausible.Segments.get_all_for_site(shared_link.site, site_role)
+            segments
+          else
+            shared_link.segment
+            |> Map.take([
+              :id,
+              :name,
+              :type,
+              :inserted_at,
+              :updated_at,
+              :segment_data
+            ])
+            |> List.wrap()
+          end
 
         embedded? = conn.params["embed"] == "true"
 
@@ -435,7 +452,8 @@ defmodule PlausibleWeb.StatsController do
           # no shared links for consolidated views
           consolidated_view?: false,
           consolidated_view_available?: false,
-          team_identifier: team_identifier
+          team_identifier: team_identifier,
+          limited_to_segment_id: limited_to_segment_id
         )
     end
   end