Merge branch 'master' into feat/e2e-via-celery

frontend/src/lib/api.ts

@@ -673,6 +673,10 @@ class ApiRequest {
         return this.errorTracking(teamId).addPathComponent(fingerprint)
     }
 
+    public errorTrackingMerge(fingerprint: ErrorTrackingGroup['fingerprint']): ApiRequest {
+        return this.errorTrackingGroup(fingerprint).addPathComponent('merge')
+    }
+
     // # Warehouse
     public dataWarehouseTables(teamId?: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('warehouse_tables')
@@ -895,16 +899,14 @@ const api = {
     insights: {
         loadInsight(
             shortId: InsightModel['short_id'],
-            basic?: boolean,
-            refresh?: RefreshType
+            basic?: boolean
         ): Promise<PaginatedResponse<Partial<InsightModel>>> {
             return new ApiRequest()
                 .insights()
                 .withQueryString(
                     toParams({
                         short_id: encodeURIComponent(shortId),
-                        basic,
-                        refresh,
+                        basic: basic,
                     })
                 )
                 .get()
@@ -1722,6 +1724,15 @@ const api = {
         ): Promise<ErrorTrackingGroup> {
             return await new ApiRequest().errorTrackingGroup(fingerprint).update({ data })
         },
+
+        async merge(
+            primaryFingerprint: ErrorTrackingGroup['fingerprint'],
+            mergingFingerprints: ErrorTrackingGroup['fingerprint'][]
+        ): Promise<{ content: string }> {
+            return await new ApiRequest()
+                .errorTrackingMerge(primaryFingerprint)
+                .create({ data: { merging_fingerprints: mergingFingerprints } })
+        },
     },
 
     recordings: {

frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx

@@ -38,8 +38,8 @@ function CategoryPill({
             type={isActive ? 'primary' : canInteract ? 'option' : 'muted'}
             data-attr={`taxonomic-tab-${groupType}`}
             onClick={canInteract ? onClick : undefined}
-            weight="normal"
-            aria-disabled
+            disabledReason={!canInteract ? 'No results' : null}
+            className="font-normal"
         >
             {group?.render ? (
                 group?.name

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']

frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx

@@ -299,7 +299,7 @@ export function LemonInputSelect({
                                     onMouseEnter={() => setSelectedIndex(index)}
                                 >
                                     <span className="flex-1 flex items-center justify-between gap-1">
-                                        {option.labelComponent ?? option.label}
+                                        <span className="ph-no-capture">{option.labelComponent ?? option.label}</span>
                                         {isHighlighted ? (
                                             <span>
                                                 <KeyboardShortcut enter />{' '}

frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx

@@ -20,20 +20,37 @@ export type LemonTagType =
     | 'none'
     | 'breakdown'
 
-export interface LemonTagProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface LemonTagProps {
     type?: LemonTagType
     children: React.ReactNode
     size?: 'small' | 'medium'
     weight?: 'normal'
     icon?: JSX.Element
     closable?: boolean
     onClose?: () => void
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
     popover?: LemonButtonDropdown
+    className?: string
+    disabledReason?: string | null
+    title?: string
+    'data-attr'?: string
 }
 
 export const LemonTag: React.FunctionComponent<LemonTagProps & React.RefAttributes<HTMLDivElement>> = forwardRef(
     function LemonTag(
-        { type = 'default', children, className, size = 'medium', weight, icon, closable, onClose, popover, ...props },
+        {
+            type = 'default',
+            children,
+            className,
+            size = 'medium',
+            weight,
+            icon,
+            closable,
+            onClose,
+            popover,
+            disabledReason,
+            ...props
+        },
         ref
     ): JSX.Element {
         return (
@@ -42,11 +59,14 @@ export const LemonTag: React.FunctionComponent<LemonTagProps & React.RefAttribut
                 className={clsx(
                     'LemonTag',
                     `LemonTag--size-${size}`,
-                    !!props.onClick && 'cursor-pointer',
+                    disabledReason ? 'cursor-not-allowed' : props.onClick ? 'cursor-pointer' : undefined,
                     `LemonTag--${type}`,
                     weight && `LemonTag--${weight}`,
                     className
                 )}
+                role={props.onClick ? 'button' : undefined}
+                title={disabledReason || undefined}
+                aria-disabled={disabledReason ? true : undefined}
                 {...props}
             >
                 {icon && <span className="LemonTag__icon">{icon}</span>}

frontend/src/queries/nodes/DataNode/dataNodeLogic.ts

@@ -128,11 +128,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
         if (oldProps.query?.kind && props.query.kind !== oldProps.query.kind) {
             actions.clearResponse()
         }
-        const queryStatus = (props.cachedResults?.query_status || null) as QueryStatus | null
-        if (queryStatus?.complete === false) {
-            // If there is an incomplete query, load the data with the same query_id which should return its status
-            actions.loadData(undefined, queryStatus.id)
-        } else if (
+        if (
             !(props.cachedResults && props.key.includes('dashboard')) && // Don't load data on dashboard if cached results are available
             !queryEqual(props.query, oldProps.query) &&
             (!props.cachedResults ||
@@ -145,7 +141,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
         }
     }),
     actions({
-        loadData: (refresh = false, queryId?: string) => ({ refresh, queryId: queryId || uuid() }),
+        loadData: (refresh = false) => ({ refresh, queryId: uuid() }),
         abortAnyRunningQuery: true,
         abortQuery: (payload: { queryId: string }) => payload,
         cancelQuery: true,
@@ -170,8 +166,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                         return props.cachedResults
                     }
 
-                    const queryStatus = (props.cachedResults?.query_status || null) as QueryStatus | null
-                    if (props.cachedResults && !refresh && queryStatus?.complete !== false) {
+                    if (props.cachedResults && !refresh) {
                         if (props.cachedResults['result'] || props.cachedResults['results']) {
                             return props.cachedResults
                         }

frontend/src/queries/nodes/DataTable/renderColumn.tsx

@@ -37,7 +37,7 @@ export function renderColumn(
     if (value === loadingColumn) {
         return <Spinner />
     } else if (value === errorColumn) {
-        return <LemonTag color="red">Error</LemonTag>
+        return <LemonTag className="text-danger">Error</LemonTag>
     } else if (queryContextColumnName && queryContextColumn?.render) {
         const Component = queryContextColumn?.render
         return (

frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx

@@ -12,6 +12,7 @@ import { useValues } from 'kea'
 import { Chart, ChartItem, ChartOptions } from 'lib/Chart'
 import { getGraphColors, getSeriesColor } from 'lib/colors'
 import { InsightLabel } from 'lib/components/InsightLabel'
+import { hexToRGBA } from 'lib/utils'
 import { useEffect, useRef } from 'react'
 import { ensureTooltip } from 'scenes/insights/views/LineGraph/LineGraph'
 
@@ -32,6 +33,7 @@ export const LineGraph = (): JSX.Element => {
     // via props. Make this a purely presentational component
     const { xData, yData, presetChartHeight, visualizationType, showEditingUI } = useValues(dataVisualizationLogic)
     const isBarChart = visualizationType === ChartDisplayType.ActionsBar
+    const isAreaChart = visualizationType === ChartDisplayType.ActionsAreaGraph
 
     const { goalLines } = useValues(displayLogic)
 
@@ -44,18 +46,20 @@ export const LineGraph = (): JSX.Element => {
             labels: xData.data,
             datasets: yData.map(({ data }, index) => {
                 const color = getSeriesColor(index)
+                const backgroundColor = isAreaChart ? hexToRGBA(color, 0.5) : color
 
                 return {
                     data,
                     borderColor: color,
-                    backgroundColor: color,
+                    backgroundColor: backgroundColor,
                     borderWidth: isBarChart ? 0 : 2,
                     pointRadius: 0,
                     hitRadius: 0,
                     order: 1,
                     hoverBorderWidth: isBarChart ? 0 : 2,
                     hoverBorderRadius: isBarChart ? 0 : 2,
                     type: isBarChart ? GraphType.Bar : GraphType.Line,
+                    fill: isAreaChart ? 'origin' : false,
                 } as ChartData['datasets'][0]
             }),
         }
@@ -249,7 +253,7 @@ export const LineGraph = (): JSX.Element => {
                 y: {
                     display: true,
                     beginAtZero: true,
-                    stacked: false,
+                    stacked: isAreaChart,
                     ticks: {
                         display: true,
                         ...tickOptions,

frontend/src/queries/nodes/DataVisualization/Components/TableDisplay.tsx

@@ -1,7 +1,7 @@
 import { IconGraph, IconTrends } from '@posthog/icons'
 import { LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { Icon123, IconTableChart } from 'lib/lemon-ui/icons'
+import { Icon123, IconAreaChart, IconTableChart } from 'lib/lemon-ui/icons'
 
 import { ChartDisplayType } from '~/types'
 
@@ -40,6 +40,11 @@ export const TableDisplay = (): JSX.Element => {
                     icon: <IconGraph />,
                     label: 'Bar chart',
                 },
+                {
+                    value: ChartDisplayType.ActionsAreaGraph,
+                    icon: <IconAreaChart />,
+                    label: 'Area chart',
+                },
             ],
         },
     ]

frontend/src/queries/nodes/DataVisualization/DataVisualization.tsx

@@ -107,7 +107,8 @@ function InternalDataTableVisualization(props: DataTableVisualizationProps): JSX
         )
     } else if (
         visualizationType === ChartDisplayType.ActionsLineGraph ||
-        visualizationType === ChartDisplayType.ActionsBar
+        visualizationType === ChartDisplayType.ActionsBar ||
+        visualizationType === ChartDisplayType.ActionsAreaGraph
     ) {
         component = <Chart />
     } else if (visualizationType === ChartDisplayType.BoldNumber) {

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', () => {