Allow creating and editing limited views (#5925)

* Add :limited_to_segment_id field to shared_links schema

* Refactor column name, add FK, index, and on delete cascade

* Format

* Add static UI for adding a segment to a shared link

- Update password UI to use a toogle switch to emphasize the optional nature of the feature
- Add UI for limiting the link to a segment
- Add toggle_field component for full-width label and toggle switch layout
- Add optional link to the input component, showing below the input, which can be used for documentation links
- Add eye icon to shared links list that indicates limited view
- Add tooltips to icons in the shared links list

* Allow creating and editing shared links with limited views

* Clarify search function arg names

* Unify function to set segment filter

* Enforce limited view segment on dashboard

* Clarify type

* WIP

* Disable clear filter button for limited view segment

* Load related shared links WIP

* Add warning about shared links WIP

* Finalize delete modal

* Unify shared link password protection checks

* WIP

* Give random name for shared links in tests

* Add tests for related shared links endpoint

* Split components and remove nesting

* Change limited view copy

* Fix search ranking, make segment search input DRYer, add search test

* Fix url search params test

* Update changelog

* Fix invalid accessor

* Format

* Add test for stuffing limited view segment

* Simplify preload syntax

* Add tests for validating internal stats API requests

* Remove id_suffix default values

* Implement limited_to_segment?/1

* Refactor search_by_name

* Clarify toggle components

* Add tests for Shared Link form, remove unused slot

---------

Co-authored-by: Sanne de Vries <[email protected]>

Author: apata

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 ### Added
 
 - A visitor percentage breakdown is now shown on all reports, both on the dashboard and in the detailed breakdown
+- Shared links can now be limited to a particular segment of the data
 
 ### Removed
 

assets/js/dashboard.tsx

@@ -7,7 +7,7 @@ import { createAppRouter } from './dashboard/router'
 import ErrorBoundary from './dashboard/error/error-boundary'
 import * as api from './dashboard/api'
 import * as timer from './dashboard/util/realtime-update-timer'
-import { redirectForLegacyParams } from './dashboard/util/url-search-params'
+import { maybeDoFERedirect } from './dashboard/util/url-search-params'
 import SiteContextProvider, {
   parseSiteFromDataset
 } from './dashboard/site-context'
@@ -19,6 +19,8 @@ import {
   SomethingWentWrongMessage
 } from './dashboard/error/something-went-wrong'
 import {
+  getLimitedToSegment,
+  parseLimitedToSegmentId,
   parsePreloadedSegments,
   SegmentsContextProvider
 } from './dashboard/filtering/segments-context'
@@ -39,8 +41,15 @@ if (container && container.dataset) {
       api.setSharedLinkAuth(sharedLinkAuth)
     }
 
+    const limitedToSegmentId = parseLimitedToSegmentId(container.dataset)
+    const preloadedSegments = parsePreloadedSegments(container.dataset)
+    const limitedToSegment = getLimitedToSegment(
+      limitedToSegmentId,
+      preloadedSegments
+    )
+
     try {
-      redirectForLegacyParams(window.location, window.history)
+      maybeDoFERedirect(window.location, window.history, limitedToSegment)
     } catch (e) {
       console.error('Error redirecting in a backwards compatible way', e)
     }
@@ -83,7 +92,8 @@ if (container && container.dataset) {
               }
             >
               <SegmentsContextProvider
-                preloadedSegments={parsePreloadedSegments(container.dataset)}
+                limitedToSegment={limitedToSegment}
+                preloadedSegments={preloadedSegments}
               >
                 <RouterProvider router={router} />
               </SegmentsContextProvider>

assets/js/dashboard/components/error-panel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import classNames from 'classnames'
 import {
   ArrowPathIcon,
@@ -12,7 +12,7 @@ export const ErrorPanel = ({
   onClose,
   onRetry
 }: {
-  errorMessage: string
+  errorMessage: ReactNode
   className?: string
   onClose?: () => void
   onRetry?: () => void

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

@@ -35,6 +35,7 @@ describe('SegmentsContext functions', () => {
   test('deleteOne works', () => {
     render(
       <SegmentsContextProvider
+        limitedToSegment={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
+        limitedToSegment={null}
+        preloadedSegments={[segmentAPAC]}
+      >
         <TestComponent />
       </SegmentsContextProvider>
     )
@@ -68,6 +72,7 @@ describe('SegmentsContext functions', () => {
   test('updateOne works: updated segment is at head of list', () => {
     render(
       <SegmentsContextProvider
+        limitedToSegment={null}
         preloadedSegments={[segmentOpenSource, segmentAPAC]}
       >
         <TestComponent />

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

@@ -17,17 +17,33 @@ 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!)
+}
+
+export function getLimitedToSegment(
+  limitedToSegmentId: number | null,
+  preloadedSegments: SavedSegments
+): Pick<SavedSegment, 'id' | 'name'> | null {
+  if (limitedToSegmentId !== null) {
+    return preloadedSegments.find((s) => s.id === limitedToSegmentId) ?? null
+  }
+  return null
+}
+
 type ChangeSegmentState = (
   segment: (SavedSegment | SavedSegmentPublic) & { segment_data: SegmentData }
 ) => void
 
 const initialValue: {
   segments: SavedSegments
+  limitedToSegment: Pick<SavedSegment, 'id' | 'name'> | null
   updateOne: ChangeSegmentState
   addOne: ChangeSegmentState
   removeOne: ChangeSegmentState
 } = {
   segments: [],
+  limitedToSegment: null,
   updateOne: () => {},
   addOne: () => {},
   removeOne: () => {}
@@ -41,9 +57,11 @@ export const useSegmentsContext = () => {
 
 export const SegmentsContextProvider = ({
   preloadedSegments,
+  limitedToSegment,
   children
 }: {
   preloadedSegments: SavedSegments
+  limitedToSegment: Pick<SavedSegment, 'id' | 'name'> | null
   children: ReactNode
 }) => {
   const [segments, setSegments] = useState(preloadedSegments)
@@ -73,7 +91,13 @@ export const SegmentsContextProvider = ({
 
   return (
     <SegmentsContext.Provider
-      value={{ segments, removeOne, updateOne, addOne }}
+      value={{
+        segments,
+        limitedToSegment,
+        removeOne,
+        updateOne,
+        addOne
+      }}
     >
       {children}
     </SegmentsContext.Provider>

assets/js/dashboard/filtering/segments.test.ts

@@ -1,7 +1,7 @@
 import { remapToApiFilters } from '../util/filters'
 import {
   formatSegmentIdAsLabelKey,
-  getSearchToApplySingleSegmentFilter,
+  getSearchToSetSegmentFilter,
   getSegmentNamePlaceholder,
   isSegmentIdLabelKey,
   parseApiSegmentData,
@@ -64,9 +64,57 @@ describe(`${parseApiSegmentData.name}`, () => {
   })
 })
 
-describe(`${getSearchToApplySingleSegmentFilter.name}`, () => {
-  test('generated search function applies single segment correctly', () => {
-    const searchFunction = getSearchToApplySingleSegmentFilter({
+describe(`${getSearchToSetSegmentFilter.name}`, () => {
+  test('generated search function omits other filters segment correctly', () => {
+    const searchFunction = getSearchToSetSegmentFilter(
+      {
+        name: 'APAC',
+        id: 500
+      },
+      { omitAllOtherFilters: true }
+    )
+    const existingSearch = {
+      date: '2025-02-10',
+      filters: [
+        ['is', 'country', ['US']],
+        ['is', 'page', ['/blog']]
+      ],
+      labels: { US: 'United States' }
+    }
+    expect(searchFunction(existingSearch)).toEqual({
+      date: '2025-02-10',
+      filters: [['is', 'segment', [500]]],
+      labels: { 'segment-500': 'APAC' }
+    })
+  })
+
+  test('generated search function replaces existing segment filter correctly', () => {
+    const searchFunction = getSearchToSetSegmentFilter({
+      name: 'APAC',
+      id: 500
+    })
+    const existingSearch = {
+      date: '2025-02-10',
+      filters: [
+        ['is', 'segment', [100]],
+        ['is', 'country', ['US']],
+        ['is', 'page', ['/blog']]
+      ],
+      labels: { US: 'United States', 'segment-100': 'Scandinavia' }
+    }
+    expect(searchFunction(existingSearch)).toEqual({
+      date: '2025-02-10',
+      filters: [
+        ['is', 'segment', [500]],
+        ['is', 'country', ['US']],
+        ['is', 'page', ['/blog']]
+      ],
+      labels: { US: 'United States', 'segment-500': 'APAC' }
+    })
+  })
+
+  test('generated search function sets new segment filter correctly', () => {
+    const searchFunction = getSearchToSetSegmentFilter({
       name: 'APAC',
       id: 500
     })
@@ -80,8 +128,12 @@ describe(`${getSearchToApplySingleSegmentFilter.name}`, () => {
     }
     expect(searchFunction(existingSearch)).toEqual({
       date: '2025-02-10',
-      filters: [['is', 'segment', [500]]],
-      labels: { 'segment-500': 'APAC' }
+      filters: [
+        ['is', 'segment', [500]],
+        ['is', 'country', ['US']],
+        ['is', 'page', ['/blog']]
+      ],
+      labels: { US: 'United States', 'segment-500': 'APAC' }
     })
   })
 })
@@ -187,7 +239,6 @@ describe(`${canExpandSegment.name}`, () => {
   it.each([[Role.admin], [Role.editor], [Role.owner]])(
     'allows expanding site segment if the user is logged in and in the role %p',
     (role) => {
-      const site = { siteSegmentsAvailable: true }
       const user: UserContextValue = {
         loggedIn: true,
         role,
@@ -197,8 +248,7 @@ describe(`${canExpandSegment.name}`, () => {
       expect(
         canExpandSegment({
           segment: { id: 1, owner_id: 1, type: SegmentType.site },
-          user,
-          site
+          user
         })
       ).toBe(true)
     }
@@ -213,42 +263,11 @@ describe(`${canExpandSegment.name}`, () => {
           role: Role.owner,
           id: 111,
           team: { identifier: null, hasConsolidatedView: false }
-        },
-        site: { siteSegmentsAvailable: true }
+        }
       })
     ).toBe(true)
   })
 
-  it('forbids expanding site segment if site segments are not available', () => {
-    expect(
-      canExpandSegment({
-        segment: { id: 1, owner_id: 1, type: SegmentType.site },
-        user: {
-          loggedIn: true,
-          role: Role.owner,
-          id: 1,
-          team: { identifier: null, hasConsolidatedView: false }
-        },
-        site: { siteSegmentsAvailable: false }
-      })
-    ).toBe(false)
-  })
-
-  it('forbids public role from expanding site segments', () => {
-    expect(
-      canExpandSegment({
-        segment: { id: 1, owner_id: null, type: SegmentType.site },
-        user: {
-          loggedIn: false,
-          role: Role.public,
-          id: null,
-          team: { identifier: null, hasConsolidatedView: false }
-        },
-        site: { siteSegmentsAvailable: false }
-      })
-    ).toBe(false)
-  })
-
   it.each([
     [Role.viewer],
     [Role.billing],
@@ -267,14 +286,13 @@ describe(`${canExpandSegment.name}`, () => {
       expect(
         canExpandSegment({
           segment: { id: 1, owner_id: 1, type: SegmentType.personal },
-          user,
-          site: { siteSegmentsAvailable: false }
+          user
         })
       ).toBe(true)
     }
   )
 
-  it('forbids expanding personal segment of other users', () => {
+  it('forbids even site owners from expanding the personal segment of other users', () => {
     expect(
       canExpandSegment({
         segment: { id: 2, owner_id: 222, type: SegmentType.personal },
@@ -283,24 +301,25 @@ describe(`${canExpandSegment.name}`, () => {
           role: Role.owner,
           id: 111,
           team: { identifier: null, hasConsolidatedView: false }
-        },
-        site: { siteSegmentsAvailable: false }
+        }
       })
     ).toBe(false)
   })
 
-  it('forbids public role from expanding personal segments', () => {
-    expect(
-      canExpandSegment({
-        segment: { id: 1, owner_id: 1, type: SegmentType.personal },
-        user: {
-          loggedIn: false,
-          role: Role.public,
-          id: null,
-          team: { identifier: null, hasConsolidatedView: false }
-        },
-        site: { siteSegmentsAvailable: false }
-      })
-    ).toBe(false)
-  })
+  it.each([[SegmentType.personal, SegmentType.site]])(
+    'forbids public role from expanding %s segments',
+    (segmentType) => {
+      expect(
+        canExpandSegment({
+          segment: { id: 1, owner_id: 1, type: segmentType },
+          user: {
+            loggedIn: false,
+            role: Role.public,
+            id: null,
+            team: { identifier: null, hasConsolidatedView: false }
+          }
+        })
+      ).toBe(false)
+    }
+  )
 })