Unify function to set segment filter

Author: apata

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' }
     })
   })
 })

assets/js/dashboard/filtering/segments.ts

@@ -105,12 +105,22 @@ export const parseApiSegmentData = ({
   ...rest
 })
 
-export function getSearchToApplySingleSegmentFilter(
-  segment: Pick<SavedSegment, 'id' | 'name'>
+export function getSearchToSetSegmentFilter(
+  segment: Pick<SavedSegment, 'id' | 'name'>,
+  options: { omitAllOtherFilters?: boolean } = {}
 ): Required<AppNavigationTarget>['search'] {
   return (search) => {
-    const filters = [['is', 'segment', [segment.id]]]
-    const labels = cleanLabels(filters, {}, 'segment', {
+    const otherFilters = (
+      (Array.isArray(search.filters) ? search.filters : []) as Filter[]
+    ).filter((f) => !isSegmentFilter(f))
+    const currentLabels = search.labels ?? {}
+
+    const filters = [
+      ['is', 'segment', [segment.id]],
+      ...(options.omitAllOtherFilters ? [] : otherFilters)
+    ]
+
+    const labels = cleanLabels(filters, currentLabels, 'segment', {
       [formatSegmentIdAsLabelKey(segment.id)]: segment.name
     })
     return {

assets/js/dashboard/segments/routeless-segment-modals.tsx

@@ -5,7 +5,7 @@ import {
   UpdateSegmentModal
 } from './segment-modals'
 import {
-  getSearchToApplySingleSegmentFilter,
+  getSearchToSetSegmentFilter,
   getSegmentNamePlaceholder,
   handleSegmentResponse,
   SavedSegment,
@@ -67,7 +67,9 @@ export const RoutelessSegmentModals = () => {
       updateOne(segment)
       queryClient.invalidateQueries({ queryKey: ['segments'] })
       navigate({
-        search: getSearchToApplySingleSegmentFilter(segment),
+        search: getSearchToSetSegmentFilter(segment, {
+          omitAllOtherFilters: true
+        }),
         state: {
           expandedSegment: null
         }
@@ -104,7 +106,9 @@ export const RoutelessSegmentModals = () => {
       addOne(segment)
       queryClient.invalidateQueries({ queryKey: ['segments'] })
       navigate({
-        search: getSearchToApplySingleSegmentFilter(segment),
+        search: getSearchToSetSegmentFilter(segment, {
+          omitAllOtherFilters: true
+        }),
         state: {
           expandedSegment: null
         }