Merge branch 'master' into hog-debug-log-metadata

PostHog · Jul 25, 2024 · 46d6d85 · 46d6d85
2 parents a412073 + c64d94a
commit 46d6d85
Show file tree

Hide file tree

Showing 70 changed files with 7,313 additions and 5,768 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx
@@ -7,7 +7,7 @@ import React, { useContext } from 'react'
 
 import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
 import { Link } from '../Link'
-import { PopoverReferenceContext } from '../Popover'
+import { PopoverOverlayContext, PopoverReferenceContext } from '../Popover'
 import { Spinner } from '../Spinner/Spinner'
 import { Tooltip, TooltipProps } from '../Tooltip'
 
@@ -139,6 +139,7 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
             ref
         ): JSX.Element => {
             const [popoverVisibility, popoverPlacement] = useContext(PopoverReferenceContext) || [false, null]
+            const [, parentPopoverLevel] = useContext(PopoverOverlayContext)
             const within3000PageHeader = useContext(WithinPageHeaderContext)
 
             if (!active && popoverVisibility) {
@@ -169,8 +170,8 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 icon = <Spinner textColored />
                 disabled = true // Cannot interact with a loading button
             }
-            if (within3000PageHeader) {
-                size = 'small'
+            if (within3000PageHeader && parentPopoverLevel === -1) {
+                size = 'small' // Ensure that buttons in the page header are small (but NOT inside dropdowns!)
             }
 
             let tooltipContent: TooltipProps['title']

diff --git a/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts b/frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts
@@ -409,112 +409,6 @@ 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,34 +296,22 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
 
     // breakdown
     if (isInsightQueryWithBreakdown(query)) {
+        /* handle multi-breakdowns */
         // not undefined or null
         if (filters.breakdowns != null) {
-            /* 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'
-                    )
-                }
+            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 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
-        ) {
+        /* handle missing breakdown_type */
+        // check for undefined and null values
+        if (filters.breakdown != null && filters.breakdown_type == null) {
             filters.breakdown_type = 'event'
         }
 

diff --git a/frontend/src/scenes/data-warehouse/utils.ts b/frontend/src/scenes/data-warehouse/utils.ts
@@ -1,9 +1,8 @@
-import { DatabaseSchemaField, DataTableNode, NodeKind } from '~/queries/schema'
+import { DatabaseSchemaField, DataVisualizationNode, NodeKind } from '~/queries/schema'
 
-export const defaultQuery = (table: string, columns: DatabaseSchemaField[]): DataTableNode => {
+export const defaultQuery = (table: string, columns: DatabaseSchemaField[]): DataVisualizationNode => {
     return {
-        kind: NodeKind.DataTableNode,
-        full: true,
+        kind: NodeKind.DataVisualizationNode,
         source: {
             kind: NodeKind.HogQLQuery,
             // TODO: Use `hogql` tag?

diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.tsx
@@ -167,7 +167,9 @@ export function InsightsTable({
                 },
             })
         }
-    } else if (breakdownFilter?.breakdowns) {
+    }
+
+    if (breakdownFilter?.breakdowns) {
         breakdownFilter.breakdowns.forEach((breakdown, index) => {
             const formatItemBreakdownLabel = (item: IndexedTrendResult): string =>
                 formatBreakdownLabel(

diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -330,7 +330,7 @@ export const INSIGHT_TYPE_OPTIONS: LemonSelectOptions<string> = [
     ...Object.entries(INSIGHT_TYPES_METADATA).map(([value, meta]) => ({
         value,
         label: meta.name,
-        icon: meta.icon ? <meta.icon color="#747EA2" noBackground /> : undefined,
+        icon: meta.icon ? <meta.icon /> : undefined,
     })),
 ]
 

diff --git a/frontend/src/scenes/saved-insights/newInsightsMenu.tsx b/frontend/src/scenes/saved-insights/newInsightsMenu.tsx
@@ -2,28 +2,21 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { ReactNode } from 'react'
 import { insightTypeURL } from 'scenes/insights/utils'
-import { INSIGHT_TYPES_METADATA, InsightTypeMetadata } from 'scenes/saved-insights/SavedInsights'
+import { INSIGHT_TYPES_METADATA } from 'scenes/saved-insights/SavedInsights'
 
 import { InsightType } from '~/types'
 
-function insightTypesForMenu(): [string, InsightTypeMetadata][] {
-    // never show JSON InsightType in the menu
-    return Object.entries(INSIGHT_TYPES_METADATA).filter(([insightType]) => insightType !== InsightType.JSON)
-}
-
 export function overlayForNewInsightMenu(dataAttr: string): ReactNode[] {
-    const menuEntries = insightTypesForMenu()
+    const menuEntries = Object.entries(INSIGHT_TYPES_METADATA).filter(
+        ([insightType]) => insightType !== InsightType.JSON
+    )
 
     return menuEntries.map(
         ([listedInsightType, listedInsightTypeMetadata]) =>
             listedInsightTypeMetadata.inMenu && (
                 <LemonButton
                     key={listedInsightType}
-                    icon={
-                        listedInsightTypeMetadata.icon && (
-                            <listedInsightTypeMetadata.icon color="var(--muted-alt)" noBackground />
-                        )
-                    }
+                    icon={listedInsightTypeMetadata.icon && <listedInsightTypeMetadata.icon />}
                     to={insightTypeURL[listedInsightType as InsightType]}
                     data-attr={dataAttr}
                     data-attr-insight-type={listedInsightType}
@@ -32,9 +25,9 @@ export function overlayForNewInsightMenu(dataAttr: string): ReactNode[] {
                     }}
                     fullWidth
                 >
-                    <div className="text-text-3000 flex flex-col text-sm py-1">
+                    <div className="flex flex-col text-sm py-1">
                         <strong>{listedInsightTypeMetadata.name}</strong>
-                        <span className="text-xs font-sans">{listedInsightTypeMetadata.description}</span>
+                        <span className="text-xs font-sans font-normal">{listedInsightTypeMetadata.description}</span>
                     </div>
                 </LemonButton>
             )