Enforce limited view segment on dashboard

Author: apata

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'
@@ -40,8 +40,17 @@ if (container && container.dataset) {
       api.setSharedLinkAuth(sharedLinkAuth)
     }
 
+    const limitedToSegmentId = parseLimitedToSegmentId(container.dataset)
+    const preloadedSegments = parsePreloadedSegments(container.dataset)
+
     try {
-      redirectForLegacyParams(window.location, window.history)
+      maybeDoFERedirect(
+        window.location,
+        window.history,
+        limitedToSegmentId === null
+          ? null
+          : preloadedSegments.find((s) => s.id === limitedToSegmentId) || null
+      )
     } catch (e) {
       console.error('Error redirecting in a backwards compatible way', e)
     }
@@ -84,8 +93,8 @@ if (container && container.dataset) {
               }
             >
               <SegmentsContextProvider
-                limitedToSegmentId={parseLimitedToSegmentId(container.dataset)}
-                preloadedSegments={parsePreloadedSegments(container.dataset)}
+                limitedToSegmentId={limitedToSegmentId}
+                preloadedSegments={preloadedSegments}
               >
                 <RouterProvider router={router} />
               </SegmentsContextProvider>

assets/js/dashboard/navigation/use-app-navigate.tsx

@@ -9,6 +9,8 @@ import {
   LinkProps
 } from 'react-router-dom'
 import { parseSearch, stringifySearch } from '../util/url-search-params'
+import { useSegmentsContext } from '../filtering/segments-context'
+import { getSearchToSetSegmentFilter } from '../filtering/segments'
 
 export type AppNavigationTarget = {
   /**
@@ -44,11 +46,25 @@ const getNavigateToOptions = (
 
 export const useGetNavigateOptions = () => {
   const location = useLocation()
+  const { limitedToSegmentId, segments } = useSegmentsContext()
+  const limitedToSegment = segments.find((s) => s.id === limitedToSegmentId)
+
   const getToOptions = useCallback(
     ({ path, params, search }: AppNavigationTarget) => {
-      return getNavigateToOptions(location.search, { path, params, search })
+      const wrappedSearch: typeof search = (searchRecord) => {
+        const updatedSearchRecord =
+          typeof search === 'function' ? search(searchRecord) : searchRecord
+        return limitedToSegment
+          ? getSearchToSetSegmentFilter(limitedToSegment)(updatedSearchRecord)
+          : updatedSearchRecord
+      }
+      return getNavigateToOptions(location.search, {
+        path,
+        params,
+        search: wrappedSearch
+      })
     },
-    [location.search]
+    [location.search, limitedToSegment]
   )
   return getToOptions
 }

assets/js/dashboard/util/url-search-params.test.ts

@@ -1,8 +1,9 @@
 import { Filter } from '../query'
 import {
   encodeURIComponentPermissive,
+  getSearchWithEnforcedSegment,
   isSearchEntryDefined,
-  getRedirectTarget,
+  maybeGetLatestReadableSearch,
   parseFilter,
   parseLabelsEntry,
   parseSearch,
@@ -206,57 +207,45 @@ describe(`${stringifySearch.name}`, () => {
   })
 })
 
-describe(`${getRedirectTarget.name}`, () => {
+describe(`${maybeGetLatestReadableSearch.name}`, () => {
   it.each([
     [''],
     ['?auth=_Y6YOjUl2beUJF_XzG1hk&theme=light&background=%23ee00ee'],
     ['?keybindHint=Escape&with_imported=true'],
     ['?f=is,page,/blog/:category/:article-name&date=2024-10-10&period=day'],
     ['?f=is,country,US&l=US,United%20States']
-  ])('for modern search %p returns null', (search) => {
-    expect(
-      getRedirectTarget({
-        pathname: '/example.com%2Fdeep%2Fpath',
-        search
-      } as Location)
-    ).toBeNull()
+  ])('for modern search string %p returns null', (search) => {
+    expect(maybeGetLatestReadableSearch(search)).toBeNull()
   })
 
-  it('returns updated URL for jsonurl style filters (v2), and running the updated value through the function again returns null (no redirect loop)', () => {
-    const pathname = '/'
+  it('returns updated search string for jsonurl style filters (v2), and running the updated value through the function again returns null (no redirect loop)', () => {
     const search =
       '?filters=((is,exit_page,(/plausible.io)),(is,source,(Brave)),(is,city,(993800)))&labels=(993800:Johannesburg)'
     const expectedUpdatedSearch =
       '?f=is,exit_page,/plausible.io&f=is,source,Brave&f=is,city,993800&l=993800,Johannesburg&r=v2'
-    expect(
-      getRedirectTarget({
-        pathname,
-        search
-      } as Location)
-    ).toEqual(`${pathname}${expectedUpdatedSearch}`)
-    expect(
-      getRedirectTarget({
-        pathname,
-        search: expectedUpdatedSearch
-      } as Location)
-    ).toBeNull()
+    expect(maybeGetLatestReadableSearch(search)).toEqual(expectedUpdatedSearch)
+    expect(maybeGetLatestReadableSearch(expectedUpdatedSearch)).toBeNull()
   })
 
-  it('returns updated URL for page=... style filters (v1), and running the updated value through the function again returns null (no redirect loop)', () => {
-    const pathname = '/'
+  it('returns updated search string for page=... style filters (v1), and running the updated value through the function again returns null (no redirect loop)', () => {
     const search = '?page=/docs'
     const expectedUpdatedSearch = '?f=is,page,/docs&r=v1'
+    expect(maybeGetLatestReadableSearch(search)).toEqual(expectedUpdatedSearch)
+    expect(maybeGetLatestReadableSearch(expectedUpdatedSearch)).toBeNull()
+  })
+})
+
+describe(`${getSearchWithEnforcedSegment.name}`, () => {
+  it('adds enforced segment appropriately, and running the updated value through the function again returns the same value', () => {
+    const segment = { id: 100, name: 'Eastern Europe' }
+    const search = '?auth=foo&embed=true'
+    const expectedUpdatedSearch =
+      '?f=is,segment,100&l=s-100,Eastern%20Europe&auth=foo&embed=true'
+    expect(getSearchWithEnforcedSegment(search, segment)).toEqual(
+      expectedUpdatedSearch
+    )
     expect(
-      getRedirectTarget({
-        pathname,
-        search
-      } as Location)
-    ).toEqual(`${pathname}${expectedUpdatedSearch}`)
-    expect(
-      getRedirectTarget({
-        pathname,
-        search: expectedUpdatedSearch
-      } as Location)
-    ).toBeNull()
+      getSearchWithEnforcedSegment(expectedUpdatedSearch, segment)
+    ).toEqual(expectedUpdatedSearch)
   })
 })

assets/js/dashboard/util/url-search-params.ts

@@ -1,3 +1,7 @@
+import {
+  getSearchToSetSegmentFilter,
+  SavedSegment
+} from '../filtering/segments'
 import { Filter, FilterClauseLabels } from '../query'
 import { v1 } from './url-search-params-v1'
 import { v2 } from './url-search-params-v2'
@@ -230,8 +234,10 @@ function isAlreadyRedirected(searchParams: URLSearchParams) {
   The purpose of this function is to redirect users from one of the previous versions to the current version, 
   so previous dashboard links still work.
 */
-export function getRedirectTarget(windowLocation: Location): null | string {
-  const searchParams = new URLSearchParams(windowLocation.search)
+export function maybeGetLatestReadableSearch(
+  searchString: string
+): null | string {
+  const searchParams = new URLSearchParams(searchString)
   if (isAlreadyRedirected(searchParams)) {
     return null
   }
@@ -242,27 +248,67 @@ export function getRedirectTarget(windowLocation: Location): null | string {
 
   const isV2 = v2.isV2(searchParams)
   if (isV2) {
-    return `${windowLocation.pathname}${stringifySearch({ ...v2.parseSearch(windowLocation.search), [REDIRECTED_SEARCH_PARAM_NAME]: 'v2' })}`
+    return stringifySearch({
+      ...v2.parseSearch(searchString),
+      [REDIRECTED_SEARCH_PARAM_NAME]: 'v2'
+    })
   }
 
-  const searchRecord = v2.parseSearch(windowLocation.search)
+  const searchRecord = v2.parseSearch(searchString)
   const isV1 = v1.isV1(searchRecord)
 
   if (!isV1) {
     return null
   }
 
-  return `${windowLocation.pathname}${stringifySearch({ ...v1.parseSearchRecord(searchRecord), [REDIRECTED_SEARCH_PARAM_NAME]: 'v1' })}`
+  return stringifySearch({
+    ...v1.parseSearchRecord(searchRecord),
+    [REDIRECTED_SEARCH_PARAM_NAME]: 'v1'
+  })
+}
+
+/**
+ * It's possible to set a particular segment to be always applied on the data on dashboards accessed with a shared link.
+ * This function ensures that the particular segment filter is set to the URL string on initial page load.
+ * Other functions ensure that it can't be removed.
+ */
+export function getSearchWithEnforcedSegment(
+  searchString: string,
+  enforcedSegment: Pick<SavedSegment, 'id' | 'name'>
+): string {
+  const searchRecord = parseSearch(searchString)
+  return stringifySearch(
+    getSearchToSetSegmentFilter(enforcedSegment)(searchRecord)
+  )
 }
 
 /** Called once before React app mounts. If legacy url search params are present, does a redirect to new format. */
-export function redirectForLegacyParams(
+export function maybeDoFERedirect(
   windowLocation: Location,
-  windowHistory: History
+  windowHistory: History,
+  enforcedSegment: Pick<SavedSegment, 'id' | 'name'> | null
 ) {
-  const redirectTargetURL = getRedirectTarget(windowLocation)
-  if (redirectTargetURL === null) {
+  const originalSearchString = windowLocation.search
+
+  let updatedSearchString = maybeGetLatestReadableSearch(originalSearchString)
+
+  if (enforcedSegment) {
+    updatedSearchString = getSearchWithEnforcedSegment(
+      updatedSearchString ?? originalSearchString,
+      enforcedSegment
+    )
+  }
+
+  if (
+    updatedSearchString === null ||
+    updatedSearchString === originalSearchString
+  ) {
     return
   }
-  windowHistory.pushState({}, '', redirectTargetURL)
+
+  windowHistory.pushState(
+    {},
+    '',
+    `${windowLocation.pathname}${updatedSearchString}`
+  )
 }