diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts index 9cb7ce95e339c..4922cc0b66a7b 100644 --- a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts +++ b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts @@ -409,6 +409,112 @@ describe('filtersToQueryNode', () => { } expect(result).toEqual(query) }) + + it('converts multiple breakdowns', () => { + const filters: Partial = { + insight: InsightType.TRENDS, + breakdowns: [ + { + type: 'event', + property: '$pathname', + normalize_url: true, + }, + { + type: 'group', + property: '$num', + group_type_index: 0, + histogram_bin_count: 10, + }, + ], + } + + const result = filtersToQueryNode(filters) + + const query: TrendsQuery = { + kind: NodeKind.TrendsQuery, + breakdownFilter: { + breakdowns: [ + { + type: 'event', + property: '$pathname', + normalize_url: true, + }, + { + type: 'group', + property: '$num', + group_type_index: 0, + histogram_bin_count: 10, + }, + ], + }, + series: [], + } + expect(result).toEqual(query) + }) + + it('converts legacy funnel breakdowns', () => { + const filters: Partial = { + insight: InsightType.TRENDS, + breakdowns: [ + { + type: 'event', + property: '$current_url', + }, + { + property: '$pathname', + } as any, + ], + } + + const result = filtersToQueryNode(filters) + + const query: TrendsQuery = { + kind: NodeKind.TrendsQuery, + breakdownFilter: { + breakdowns: [ + { + type: 'event', + property: '$current_url', + }, + { + type: 'event', + property: '$pathname', + }, + ], + }, + series: [], + } + expect(result).toEqual(query) + }) + + it('does not add breakdown_type for multiple breakdowns', () => { + const filters: Partial = { + insight: InsightType.TRENDS, + breakdowns: [ + { + type: 'person', + property: '$browser', + }, + ], + } + + const result = filtersToQueryNode(filters) + + const query: TrendsQuery = { + kind: NodeKind.TrendsQuery, + breakdownFilter: { + breakdowns: [ + { + type: 'person', + property: '$browser', + }, + ], + breakdown_type: undefined, + }, + series: [], + } + expect(result).toEqual(query) + }) }) describe('funnels filter', () => { diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts index ea838920cc452..90c0c007c06b8 100644 --- a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts +++ b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts @@ -296,22 +296,34 @@ export const filtersToQueryNode = (filters: Partial): InsightQueryNo // breakdown if (isInsightQueryWithBreakdown(query)) { - /* handle multi-breakdowns */ // not undefined or null if (filters.breakdowns != null) { - if (filters.breakdowns.length === 1) { - filters.breakdown_type = filters.breakdowns[0].type - filters.breakdown = filters.breakdowns[0].property as string - } else { - captureException( - 'Could not convert multi-breakdown property `breakdowns` - found more than one breakdown' - ) + /* handle multi-breakdowns for funnels */ + if (isFunnelsFilter(filters)) { + if (filters.breakdowns.length === 1) { + filters.breakdown_type = filters.breakdowns[0].type || 'event' + filters.breakdown = filters.breakdowns[0].property as string + } else { + captureException( + 'Could not convert multi-breakdown property `breakdowns` - found more than one breakdown' + ) + } } - } - /* handle missing breakdown_type */ - // check for undefined and null values - if (filters.breakdown != null && filters.breakdown_type == null) { + /* handle multi-breakdowns for trends */ + if (isTrendsFilter(filters)) { + filters.breakdowns = filters.breakdowns.map((b) => ({ + ...b, + // Compatibility with legacy funnel breakdowns when someone switches a view from funnels to trends + type: b.type || filters.breakdown_type || 'event', + })) + } + } else if ( + /* handle missing breakdown_type */ + // check for undefined and null values + filters.breakdown != null && + filters.breakdown_type == null + ) { filters.breakdown_type = 'event' } diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx index 7217c0074f27b..730ad17b66cda 100644 --- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx +++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx @@ -167,9 +167,7 @@ export function InsightsTable({ }, }) } - } - - if (breakdownFilter?.breakdowns) { + } else if (breakdownFilter?.breakdowns) { breakdownFilter.breakdowns.forEach((breakdown, index) => { const formatItemBreakdownLabel = (item: IndexedTrendResult): string => formatBreakdownLabel(