diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx index 2903e579c9be2..2f1ee17b57e4a 100644 --- a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx @@ -36,14 +36,13 @@ function CategoryPill({ }): JSX.Element { const logic = infiniteListLogic({ ...taxonomicFilterLogicProps, listGroupType: groupType }) const { taxonomicGroups } = useValues(taxonomicFilterLogic) - const { totalResultCount, totalListCount, isLoading, results, hasRemoteDataSource } = useValues(logic) + const { totalResultCount, totalListCount, isLoading, hasRemoteDataSource } = useValues(logic) const group = taxonomicGroups.find((g) => g.type === groupType) // :TRICKY: use `totalListCount` (results + extra) to toggle interactivity, while showing `totalResultCount` const canInteract = totalListCount > 0 || taxonomicFilterGroupTypesWithEmptyStates.includes(groupType) - const hasOnlyDefaultItems = results?.length === 1 && (!results[0].id || results[0].id === '') - const showLoading = isLoading && (!results || results.length === 0 || hasOnlyDefaultItems) && hasRemoteDataSource + const showLoading = isLoading && hasRemoteDataSource return ( g.type === openTab) - - return ( -
- {currentGroup?.name || openTab} - - - {eventOrdering === 'name' ? : } - Name -
- ), - tooltip: 'Sort events alphabetically', - onClick: () => { - setEventOrdering('name') + return ( +
+ {openTab === TaxonomicFilterGroupType.Events ? ( + <> + {taxonomicGroups.find((g) => g.type === openTab)?.name || openTab} + + + {eventOrdering === 'name' ? : } + Name +
+ ), + tooltip: 'Sort events alphabetically', + onClick: () => { + setEventOrdering('name') + }, }, - }, - { - label: ( -
- {eventOrdering === '-last_seen_at' ? : } - Recently seen -
- ), - tooltip: 'Show the most recent events first', - onClick: () => { - setEventOrdering('-last_seen_at') + { + label: ( +
+ {eventOrdering === '-last_seen_at' ? : } + Recently seen +
+ ), + tooltip: 'Show the most recent events first', + onClick: () => { + setEventOrdering('-last_seen_at') + }, }, - }, - { - label: ( -
- {!eventOrdering ? : } - Both -
- ), - tooltip: - 'Sorts events by the day they were last seen, and then by name. The default option.', - onClick: () => { - setEventOrdering(null) + { + label: ( +
+ {!eventOrdering ? : } + Both +
+ ), + tooltip: + 'Sorts events by the day they were last seen, and then by name. The default option.', + onClick: () => { + setEventOrdering(null) + }, }, - }, - ]} - > - } - size="small" - tooltip={`Sorting by ${ - eventOrdering === '-last_seen_at' - ? 'recently seen' - : eventOrdering === 'name' - ? 'name' - : 'recently seen and then name' - }`} - /> - - - - ) - } - return <>{taxonomicGroups.find((g) => g.type === openTab)?.name || openTab} + ]} + > + } + size="small" + tooltip={`Sorting by ${ + eventOrdering === '-last_seen_at' + ? 'recently seen' + : eventOrdering === 'name' + ? 'name' + : 'recently seen and then name' + }`} + /> + + + + ) : ( + <>{taxonomicGroups.find((g) => g.type === openTab)?.name || openTab} + )} + + ) } export function InfiniteSelectResults({