diff --git a/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png b/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png index c1afb6ae6f32d..49d0a8e61a8da 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png and b/frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png b/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png index 0d8407a93f0ef..63bcdbec72aa1 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png and b/frontend/__snapshots__/scenes-app-errortracking--group-page--light.png differ diff --git a/frontend/__snapshots__/scenes-app-errortracking--list-page--dark.png b/frontend/__snapshots__/scenes-app-errortracking--list-page--dark.png index ffbc442127fc6..2ad8691dd181c 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--list-page--dark.png and b/frontend/__snapshots__/scenes-app-errortracking--list-page--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-errortracking--list-page--light.png b/frontend/__snapshots__/scenes-app-errortracking--list-page--light.png index 0eacdd9320ba4..0a518fb5f0f97 100644 Binary files a/frontend/__snapshots__/scenes-app-errortracking--list-page--light.png and b/frontend/__snapshots__/scenes-app-errortracking--list-page--light.png differ diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx index 68fe950c10c9e..4f10f2459020d 100644 --- a/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx +++ b/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx @@ -4,10 +4,10 @@ import { DateFilter } from 'lib/components/DateFilter/DateFilter' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import UniversalFilters from 'lib/components/UniversalFilters/UniversalFilters' import { universalFiltersLogic } from 'lib/components/UniversalFilters/universalFiltersLogic' +import { isUniversalGroupFilterLike } from 'lib/components/UniversalFilters/utils' +import { useEffect, useState } from 'react' import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter' -import { AnyPropertyFilter } from '~/types' - import { errorTrackingLogic } from './errorTrackingLogic' import { errorTrackingSceneLogic } from './errorTrackingSceneLogic' @@ -18,92 +18,100 @@ export const ErrorTrackingFilters = ({ showOrder = true }: { showOrder?: boolean const { setOrder } = useActions(errorTrackingSceneLogic) return ( - { - setFilterGroup(filterGroup) - }} - > -
-
- - -
-
-
- { - setDateRange({ date_from: changedDateFrom, date_to: changedDateTo }) - }} - size="small" - /> - {showOrder && ( - - )} -
-
- +
+
+ { + setDateRange({ date_from: changedDateFrom, date_to: changedDateTo }) + }} + size="small" + /> + {showOrder && ( + { - setFilterTestAccounts(filter_test_accounts || false) - }} /> -
+ )} +
+
+ { + setFilterTestAccounts(filter_test_accounts || false) + }} + />
- +
+ + + +
+
) } const RecordingsUniversalFilterGroup = (): JSX.Element => { const { filterGroup } = useValues(universalFiltersLogic) const { replaceGroupValue, removeGroupValue } = useActions(universalFiltersLogic) + const [allowInitiallyOpen, setAllowInitiallyOpen] = useState(false) - const values = filterGroup.values as AnyPropertyFilter[] + useEffect(() => { + setAllowInitiallyOpen(true) + }, []) return ( <> - {values.map((filter, index) => ( - removeGroupValue(index)} - onChange={(value) => replaceGroupValue(index, value)} - /> - ))} + {filterGroup.values.map((filterOrGroup, index) => { + return isUniversalGroupFilterLike(filterOrGroup) ? ( + + + + + ) : ( + removeGroupValue(index)} + onChange={(value) => replaceGroupValue(index, value)} + initiallyOpen={allowInitiallyOpen} + /> + ) + })} ) }