Skip to content

Commit

Permalink
fix: error tracking filter drift (#23744)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Jul 16, 2024
1 parent e6181ff commit e92af80
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 74 deletions.
Binary file modified frontend/__snapshots__/scenes-app-errortracking--group-page--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-errortracking--group-page--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-errortracking--list-page--dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/scenes-app-errortracking--list-page--light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 82 additions & 74 deletions frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -18,92 +18,100 @@ export const ErrorTrackingFilters = ({ showOrder = true }: { showOrder?: boolean
const { setOrder } = useActions(errorTrackingSceneLogic)

return (
<UniversalFilters
rootKey="session-recordings"
group={filterGroup}
taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties, TaxonomicFilterGroupType.Cohorts]}
onChange={(filterGroup) => {
setFilterGroup(filterGroup)
}}
>
<div className="divide-y bg-bg-light rounded border">
<div className="flex flex-1 items-center space-x-2 px-2 py-1.5">
<RecordingsUniversalFilterGroup />
<UniversalFilters.AddFilterButton type="secondary" size="small" />
</div>
<div className="flex justify-between px-2 py-1.5 flex-wrap gap-1">
<div className="flex flex-wrap gap-2">
<DateFilter
dateFrom={dateRange.date_from}
dateTo={dateRange.date_to}
onChange={(changedDateFrom, changedDateTo) => {
setDateRange({ date_from: changedDateFrom, date_to: changedDateTo })
}}
size="small"
/>
{showOrder && (
<LemonSelect
onSelect={setOrder}
onChange={setOrder}
value={order}
options={[
{
value: 'last_seen',
label: 'Last seen',
},
{
value: 'first_seen',
label: 'First seen',
},
{
value: 'occurrences',
label: 'Occurrences',
},
{
value: 'users',
label: 'Users',
},
{
value: 'sessions',
label: 'Sessions',
},
]}
size="small"
/>
)}
</div>
<div>
<TestAccountFilter
<div className="divide-y bg-bg-light rounded border">
<div className="flex justify-between px-2 py-1.5 flex-wrap gap-1">
<div className="flex flex-wrap gap-2">
<DateFilter
dateFrom={dateRange.date_from}
dateTo={dateRange.date_to}
onChange={(changedDateFrom, changedDateTo) => {
setDateRange({ date_from: changedDateFrom, date_to: changedDateTo })
}}
size="small"
/>
{showOrder && (
<LemonSelect
onSelect={setOrder}
onChange={setOrder}
value={order}
options={[
{
value: 'last_seen',
label: 'Last seen',
},
{
value: 'first_seen',
label: 'First seen',
},
{
value: 'occurrences',
label: 'Occurrences',
},
{
value: 'users',
label: 'Users',
},
{
value: 'sessions',
label: 'Sessions',
},
]}
size="small"
filters={{ filter_test_accounts: filterTestAccounts }}
onChange={({ filter_test_accounts }) => {
setFilterTestAccounts(filter_test_accounts || false)
}}
/>
</div>
)}
</div>
<div>
<TestAccountFilter
size="small"
filters={{ filter_test_accounts: filterTestAccounts }}
onChange={({ filter_test_accounts }) => {
setFilterTestAccounts(filter_test_accounts || false)
}}
/>
</div>
</div>
</UniversalFilters>
<div className="flex flex-1 items-center space-x-2 px-2 py-1.5">
<UniversalFilters
rootKey="error-tracking"
group={filterGroup}
taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties, TaxonomicFilterGroupType.Cohorts]}
onChange={setFilterGroup}
>
<RecordingsUniversalFilterGroup />
</UniversalFilters>
</div>
</div>
)
}

const RecordingsUniversalFilterGroup = (): JSX.Element => {
const { filterGroup } = useValues(universalFiltersLogic)
const { replaceGroupValue, removeGroupValue } = useActions(universalFiltersLogic)
const [allowInitiallyOpen, setAllowInitiallyOpen] = useState<boolean>(false)

const values = filterGroup.values as AnyPropertyFilter[]
useEffect(() => {
setAllowInitiallyOpen(true)
}, [])

return (
<>
{values.map((filter, index) => (
<UniversalFilters.Value
key={index}
index={index}
filter={filter}
onRemove={() => removeGroupValue(index)}
onChange={(value) => replaceGroupValue(index, value)}
/>
))}
{filterGroup.values.map((filterOrGroup, index) => {
return isUniversalGroupFilterLike(filterOrGroup) ? (
<UniversalFilters.Group key={index} index={index} group={filterOrGroup}>
<RecordingsUniversalFilterGroup />
<UniversalFilters.AddFilterButton size="small" type="secondary" />
</UniversalFilters.Group>
) : (
<UniversalFilters.Value
key={index}
index={index}
filter={filterOrGroup}
onRemove={() => removeGroupValue(index)}
onChange={(value) => replaceGroupValue(index, value)}
initiallyOpen={allowInitiallyOpen}
/>
)
})}
</>
)
}

0 comments on commit e92af80

Please sign in to comment.