Enforce limited view segment on dashboard

apata · apata · commit befc3b7202cb · 2025-12-03T14:04:12.000+02:00
diff --git a/assets/js/dashboard.tsx b/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,7 @@ import {
   SomethingWentWrongMessage
 } from './dashboard/error/something-went-wrong'
 import {
+  getLimitedToSegment,
   parseLimitedToSegmentId,
   parsePreloadedSegments,
   SegmentsContextProvider
@@ -40,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)
     }
@@ -84,8 +92,8 @@ if (container && container.dataset) {
               }
             >
               <SegmentsContextProvider
-                limitedToSegmentId={parseLimitedToSegmentId(container.dataset)}
-                preloadedSegments={parsePreloadedSegments(container.dataset)}
+                limitedToSegment={limitedToSegment}
+                preloadedSegments={preloadedSegments}
               >
                 <RouterProvider router={router} />
               </SegmentsContextProvider>
diff --git a/assets/js/dashboard/filtering/segments-context.test.tsx b/assets/js/dashboard/filtering/segments-context.test.tsx
@@ -35,7 +35,7 @@ describe('SegmentsContext functions', () => {
   test('deleteOne works', () => {
     render(
       <SegmentsContextProvider
-        limitedToSegmentId={null}
+        limitedToSegment={null}
         preloadedSegments={[segmentOpenSource, segmentAPAC]}
       >
         <TestComponent />
@@ -53,7 +53,7 @@ describe('SegmentsContext functions', () => {
   test('addOne adds to head of list', async () => {
     render(
       <SegmentsContextProvider
-        limitedToSegmentId={null}
+        limitedToSegment={null}
         preloadedSegments={[segmentAPAC]}
       >
         <TestComponent />
@@ -72,7 +72,7 @@ describe('SegmentsContext functions', () => {
   test('updateOne works: updated segment is at head of list', () => {
     render(
       <SegmentsContextProvider
-        limitedToSegmentId={null}
+        limitedToSegment={null}
         preloadedSegments={[segmentOpenSource, segmentAPAC]}
       >
         <TestComponent />
diff --git a/assets/js/dashboard/filtering/segments-context.tsx b/assets/js/dashboard/filtering/segments-context.tsx
@@ -21,19 +21,29 @@ 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
-  limitedToSegmentId: number | null
+  limitedToSegment: Pick<SavedSegment, 'id' | 'name'> | null
   updateOne: ChangeSegmentState
   addOne: ChangeSegmentState
   removeOne: ChangeSegmentState
 } = {
   segments: [],
-  limitedToSegmentId: null,
+  limitedToSegment: null,
   updateOne: () => {},
   addOne: () => {},
   removeOne: () => {}
@@ -47,11 +57,11 @@ export const useSegmentsContext = () => {
 
 export const SegmentsContextProvider = ({
   preloadedSegments,
-  limitedToSegmentId,
+  limitedToSegment,
   children
 }: {
   preloadedSegments: SavedSegments
-  limitedToSegmentId: number | null
+  limitedToSegment: Pick<SavedSegment, 'id' | 'name'> | null
   children: ReactNode
 }) => {
   const [segments, setSegments] = useState(preloadedSegments)
@@ -83,7 +93,7 @@ export const SegmentsContextProvider = ({
     <SegmentsContext.Provider
       value={{
         segments,
-        limitedToSegmentId: limitedToSegmentId ?? null,
+        limitedToSegment,
         removeOne,
         updateOne,
         addOne
diff --git a/assets/js/dashboard/nav-menu/filter-menu.tsx b/assets/js/dashboard/nav-menu/filter-menu.tsx
@@ -50,7 +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()
+  const { limitedToSegment } = useSegmentsContext()
 
   return (
     <>
@@ -109,7 +109,7 @@ const FilterMenuItems = ({ closeDropdown }: { closeDropdown: () => void }) => {
               </div>
             ))}
           </div>
-          {limitedToSegmentId === null && (
+          {limitedToSegment === null && (
             <SearchableSegmentsSection
               closeList={closeDropdown}
               tooltipContainerRef={panelRef}
diff --git a/assets/js/dashboard/navigation/use-app-navigate.tsx b/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,24 @@ const getNavigateToOptions = (
 
 export const useGetNavigateOptions = () => {
   const location = useLocation()
+  const { limitedToSegment } = useSegmentsContext()
+
   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
 }
diff --git a/assets/js/dashboard/util/url-search-params.test.ts b/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)
   })
 })
diff --git a/assets/js/dashboard/util/url-search-params.ts b/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}`
+  )
 }
diff --git a/assets/test-utils/app-context-providers.tsx b/assets/test-utils/app-context-providers.tsx
@@ -78,7 +78,7 @@ export const TestContextProviders = ({
           }
         }
       >
-        <SegmentsContextProvider limitedToSegmentId={null} preloadedSegments={preloaded?.segments ?? []}>
+        <SegmentsContextProvider limitedToSegment={null} preloadedSegments={preloaded?.segments ?? []}>
           <MemoryRouter
             basename={getRouterBasepath(site)}
             initialEntries={defaultInitialEntries}

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ export const TestContextProviders = ({`
`78`	`78`	`}`
`79`	`79`	`}`
`80`	`80`	`>`
`81`		`- <SegmentsContextProvider limitedToSegmentId={null} preloadedSegments={preloaded?.segments ?? []}>`
	`81`	`+ <SegmentsContextProvider limitedToSegment={null} preloadedSegments={preloaded?.segments ?? []}>`
`82`	`82`	`<MemoryRouter`
`83`	`83`	`basename={getRouterBasepath(site)}`
`84`	`84`	`initialEntries={defaultInitialEntries}`