Revert "revert(insights): convert multiple breakdowns filter to a que…

…ry (#23980)" This reverts commit 52abc25.
PostHog · Jul 26, 2024 · 600f00a · 600f00a
1 parent 0f64b40
commit 600f00a
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 15 deletions.
diff --git 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<TrendsFilterType> = {
+                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<TrendsFilterType> = {
+                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<TrendsFilterType> = {
+                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
@@ -296,22 +296,34 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): 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
@@ -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(