Merge branch 'master' into fix/insights-css

# Conflicts:
#	frontend/__snapshots__/scenes-app-insights--funnel-historical-trends.png
#	frontend/__snapshots__/scenes-app-insights--funnel-time-to-convert.png
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom--webkit.png
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown--webkit.png
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png
#	frontend/src/scenes/insights/views/Funnels/FunnelInsight.tsx

.eslintrc.js

@@ -86,6 +86,11 @@ module.exports = {
                         name: '@ant-design/icons',
                         message: 'Please use icons from the @posthog/icons package instead',
                     },
+                    {
+                        name: 'antd',
+                        importNames: ['Tooltip'],
+                        message: 'Please use Tooltip from @posthog/lemon-ui instead.',
+                    },
                 ],
             },
         ],

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx

@@ -81,9 +81,12 @@ export const SidePanelDocs = (): JSX.Element => {
                 <LemonButton
                     size="small"
                     sideIcon={<IconExternal />}
-                    to={currentUrl}
                     targetBlank
-                    onClick={() => closeSidePanel()}
+                    // We can't use the normal `to` property as that is intercepted to open this panel :D
+                    onClick={() => {
+                        window.open(currentUrl, '_blank')?.focus()
+                        closeSidePanel()
+                    }}
                 >
                     Open in new tab
                 </LemonButton>

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -49,6 +49,7 @@ import { insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
 import { getCachedResults } from '~/queries/nodes/InsightViz/utils'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 type DisplayedType = ChartDisplayType | 'RetentionContainer' | 'FunnelContainer' | 'PathsContainer'
 
@@ -257,9 +258,8 @@ function InsightCardInternal(
 
     const { insightLoading } = useValues(insightLogic(insightLogicProps))
     const { insightDataLoading } = useValues(insightDataLogic(insightLogicProps))
-    const { isFunnelWithEnoughSteps, hasFunnelResults, areExclusionFiltersValid } = useValues(
-        funnelDataLogic(insightLogicProps)
-    )
+    const { hasFunnelResults } = useValues(funnelDataLogic(insightLogicProps))
+    const { isFunnelWithEnoughSteps, areExclusionFiltersValid } = useValues(insightVizDataLogic(insightLogicProps))
 
     let tooFewFunnelSteps = false
     let invalidFunnelExclusion = false

frontend/src/lib/components/PropertyKeyInfo.tsx

@@ -3,13 +3,12 @@ import clsx from 'clsx'
 import { Popover } from 'lib/lemon-ui/Popover'
 import { getKeyMapping, PropertyKey, PropertyType } from 'lib/taxonomy'
 import React, { useState } from 'react'
-import { LemonDivider } from '@posthog/lemon-ui'
-import { TooltipPlacement } from 'antd/lib/tooltip'
+import { LemonDivider, TooltipProps } from '@posthog/lemon-ui'
 
 interface PropertyKeyInfoProps {
     value: PropertyKey
     type?: PropertyType
-    tooltipPlacement?: TooltipPlacement
+    tooltipPlacement?: TooltipProps['placement']
     disablePopover?: boolean
     disableIcon?: boolean
     /** @default true */

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

@@ -1,7 +1,6 @@
 import React, { FunctionComponent, ReactNode, useCallback, useMemo } from 'react'
 import { LemonButton, LemonButtonProps } from '../LemonButton'
 import { TooltipProps } from '../Tooltip'
-import { TooltipPlacement } from 'antd/lib/tooltip'
 import { LemonDivider } from '../LemonDivider'
 import { LemonDropdown, LemonDropdownProps } from '../LemonDropdown'
 import { useKeyboardNavigation } from './useKeyboardNavigation'
@@ -152,7 +151,7 @@ export function LemonMenuOverlay({ items, tooltipPlacement, itemsRef }: LemonMen
 interface LemonMenuSectionListProps {
     sections: LemonMenuSection[]
     buttonSize: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
 }
 
@@ -201,7 +200,7 @@ export function LemonMenuSectionList({
 interface LemonMenuItemListProps {
     items: LemonMenuItem[]
     buttonSize: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
     itemsRef: React.RefObject<React.RefObject<HTMLButtonElement>[]> | undefined
     itemIndexOffset?: number
 }
@@ -234,7 +233,7 @@ export function LemonMenuItemList({
 interface LemonMenuItemButtonProps {
     item: LemonMenuItem
     size: 'small' | 'medium'
-    tooltipPlacement: TooltipPlacement | undefined
+    tooltipPlacement: TooltipProps['placement'] | undefined
 }
 
 const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.RefAttributes<HTMLButtonElement>> =

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+// eslint-disable-next-line no-restricted-imports
 import { Tooltip as AntdTooltip } from 'antd'
 import { TooltipProps as AntdTooltipProps } from 'antd/lib/tooltip'
 import { useDebounce } from 'use-debounce'

frontend/src/queries/nodes/InsightViz/InsightVizDisplay.tsx

@@ -59,9 +59,8 @@ export function InsightVizDisplay({
 
     const { activeView } = useValues(insightNavLogic(insightProps))
 
-    const { isFunnelWithEnoughSteps, hasFunnelResults, areExclusionFiltersValid } = useValues(
-        funnelDataLogic(insightProps)
-    )
+    const { hasFunnelResults } = useValues(funnelDataLogic(insightProps))
+    const { isFunnelWithEnoughSteps, areExclusionFiltersValid } = useValues(insightVizDataLogic(insightProps))
     const {
         isTrends,
         isFunnels,

frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx

@@ -1,4 +1,3 @@
-import { Tooltip } from 'antd'
 import clsx from 'clsx'
 import { BindLogic, useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
@@ -10,6 +9,7 @@ import { RefCallback, useEffect, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 import { isInteractionNode, isQueryNode, isSessionNode, TimeToSeeNode, TimeToSeeSessionNode } from '../types'
 import { sessionNodeFacts, SpanData, traceLogic } from './traceLogic'
+import { Tooltip } from '@posthog/lemon-ui'
 
 export interface TraceProps {
     timeToSeeSession: TimeToSeeSessionNode

frontend/src/scenes/experiments/Experiment.tsx

@@ -1,4 +1,4 @@
-import { Popconfirm, Progress, Tooltip } from 'antd'
+import { Popconfirm, Progress } from 'antd'
 import { BindLogic, useActions, useValues } from 'kea'
 import { PageHeader } from 'lib/components/PageHeader'
 import { useEffect, useState } from 'react'
@@ -27,6 +27,7 @@ import {
     LemonTag,
     LemonTagType,
     LemonTextArea,
+    Tooltip,
 } from '@posthog/lemon-ui'
 import { NotFound } from 'lib/components/NotFound'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'

frontend/src/scenes/experiments/ExperimentPreview.tsx

@@ -1,4 +1,4 @@
-import { InputNumber, Slider, Tooltip } from 'antd'
+import { InputNumber, Slider } from 'antd'
 import { useValues, useActions } from 'kea'
 import { InsightLabel } from 'lib/components/InsightLabel'
 import { PropertyFilterButton } from 'lib/components/PropertyFilters/components/PropertyFilterButton'
@@ -13,7 +13,7 @@ import {
 import { experimentLogic } from './experimentLogic'
 import { ExperimentWorkflow } from './ExperimentWorkflow'
 import { humanFriendlyNumber } from 'lib/utils'
-import { LemonButton, LemonDivider, LemonModal } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonModal, Tooltip } from '@posthog/lemon-ui'
 import { Field, Form } from 'kea-forms'
 import { MetricSelector } from './MetricSelector'
 import { IconInfo } from 'lib/lemon-ui/icons'

frontend/src/scenes/experiments/ExperimentResult.tsx

@@ -1,4 +1,4 @@
-import { Col, Progress, Tooltip } from 'antd'
+import { Col, Progress } from 'antd'
 import { useValues } from 'kea'
 import { ChartDisplayType, FilterType, FunnelVizType, InsightShortId, InsightType } from '~/types'
 import './Experiment.scss'
@@ -12,6 +12,7 @@ import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersTo
 import { Query } from '~/queries/Query/Query'
 import { IconInfo } from '@posthog/icons'
 import { LoadingState } from './Experiment'
+import { Tooltip } from '@posthog/lemon-ui'
 
 export function ExperimentResult(): JSX.Element {
     const {

frontend/src/scenes/funnels/funnelDataLogic.test.ts

@@ -7,15 +7,14 @@ import { dataNodeLogic } from '~/queries/nodes/DataNode/dataNodeLogic'
 import { funnelDataLogic } from './funnelDataLogic'
 
 import { FunnelConversionWindowTimeUnit, FunnelVizType, InsightLogicProps, InsightModel, InsightType } from '~/types'
-import { ActionsNode, DataNode, EventsNode, FunnelsQuery, InsightQueryNode, NodeKind } from '~/queries/schema'
+import { DataNode, FunnelsQuery, NodeKind } from '~/queries/schema'
 import {
     funnelResult,
     funnelResultTimeToConvert,
     funnelResultTimeToConvertWithoutConversions,
     funnelResultTrends,
     funnelResultWithBreakdown,
     funnelResultWithMultiBreakdown,
-    funnelInvalidExclusionError,
 } from './__mocks__/funnelDataLogicMocks'
 
 let logic: ReturnType<typeof funnelDataLogic.build>
@@ -751,54 +750,6 @@ describe('funnelDataLogic', () => {
                 })
             })
         })
-
-        describe('areExclusionFiltersValid', () => {
-            it('for standard funnel', async () => {
-                const insight: Partial<InsightModel> = {
-                    filters: {
-                        insight: InsightType.FUNNELS,
-                    },
-                    result: funnelResult.result,
-                }
-
-                await expectLogic(logic, () => {
-                    builtDataNodeLogic.actions.loadDataSuccess(insight)
-                }).toMatchValues({
-                    areExclusionFiltersValid: true,
-                })
-            })
-
-            it('for invalid exclusion', async () => {
-                await expectLogic(logic, () => {
-                    builtDataNodeLogic.actions.loadDataFailure('', { status: 400, ...funnelInvalidExclusionError })
-                }).toMatchValues({
-                    areExclusionFiltersValid: false,
-                })
-            })
-        })
-    })
-
-    describe('isFunnelWithEnoughSteps', () => {
-        const queryWithSeries = (series: (ActionsNode | EventsNode)[]): FunnelsQuery => ({
-            kind: NodeKind.FunnelsQuery,
-            series,
-        })
-
-        it('with enough/not enough steps', () => {
-            expectLogic(logic, () => {
-                logic.actions.updateQuerySource({ kind: NodeKind.RetentionQuery } as InsightQueryNode)
-            }).toMatchValues({ isFunnelWithEnoughSteps: false })
-
-            expectLogic(logic, () => {
-                logic.actions.updateQuerySource(queryWithSeries([]))
-            }).toMatchValues({ isFunnelWithEnoughSteps: false })
-
-            expectLogic(logic, () => {
-                logic.actions.updateQuerySource(
-                    queryWithSeries([{ kind: NodeKind.EventsNode }, { kind: NodeKind.EventsNode }])
-                )
-            }).toMatchValues({ isFunnelWithEnoughSteps: true })
-        })
     })
 
     describe('time to convert funnel', () => {

frontend/src/scenes/funnels/funnelDataLogic.ts

@@ -1,10 +1,8 @@
 import { kea, path, props, key, connect, selectors, actions, reducers } from 'kea'
 import {
-    FilterType,
     FunnelResultType,
     FunnelVizType,
     FunnelStep,
-    FunnelExclusion,
     FunnelStepReference,
     FunnelStepWithNestedBreakdown,
     InsightLogicProps,
@@ -19,7 +17,7 @@ import {
     FunnelConversionWindowTimeUnit,
     FunnelConversionWindow,
 } from '~/types'
-import { FunnelsQuery, NodeKind } from '~/queries/schema'
+import { NodeKind } from '~/queries/schema'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 import { groupsModel, Noun } from '~/models/groupsModel'
 
@@ -154,12 +152,6 @@ export const funnelDataLogic = kea<funnelDataLogicType>([
                 }
             },
         ],
-        isFunnelWithEnoughSteps: [
-            (s) => [s.series],
-            (series) => {
-                return (series?.length || 0) > 1
-            },
-        ],
         steps: [
             (s) => [s.breakdown, s.results, s.isTimeToConvertFunnel],
             (breakdown, results, isTimeToConvertFunnel): FunnelStepWithNestedBreakdown[] => {
@@ -378,27 +370,6 @@ export const funnelDataLogic = kea<funnelDataLogicType>([
             },
         ],
 
-        // Exclusion filters
-        exclusionDefaultStepRange: [
-            (s) => [s.querySource],
-            (querySource: FunnelsQuery): Omit<FunnelExclusion, 'id' | 'name'> => ({
-                funnel_from_step: 0,
-                funnel_to_step: (querySource.series || []).length > 1 ? querySource.series.length - 1 : 1,
-            }),
-        ],
-        exclusionFilters: [
-            (s) => [s.funnelsFilter],
-            (funnelsFilter): FilterType => ({
-                events: funnelsFilter?.exclusions,
-            }),
-        ],
-        areExclusionFiltersValid: [
-            (s) => [s.insightDataError],
-            (insightDataError): boolean => {
-                return !(insightDataError?.status === 400 && insightDataError?.type === 'validation_error')
-            },
-        ],
-
         isSkewed: [
             (s) => [s.conversionMetrics, s.skewWarningHidden],
             (conversionMetrics, skewWarningHidden): boolean => {

frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx

@@ -1,6 +1,5 @@
 import { useValues, useActions } from 'kea'
 import { groupsModel } from '~/models/groupsModel'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 
 import { FilterType, EditorFilterProps } from '~/types'
 import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
@@ -15,12 +14,13 @@ import { actionsAndEventsToSeries } from '~/queries/nodes/InsightQuery/utils/fil
 import { FunnelsQuery } from '~/queries/schema'
 import { isInsightQueryNode } from '~/queries/utils'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export const FUNNEL_STEP_COUNT_LIMIT = 20
 
 export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Element | null {
-    const { querySource, series } = useValues(funnelDataLogic(insightProps))
-    const { updateQuerySource } = useActions(funnelDataLogic(insightProps))
+    const { series, querySource } = useValues(insightVizDataLogic(insightProps))
+    const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
 
     if (!isInsightQueryNode(querySource)) {
         return null

frontend/src/scenes/insights/filters/FunnelExclusionsFilter/ExclusionRowSuffix.tsx

@@ -5,10 +5,10 @@ import { FunnelExclusion, ActionFilter as ActionFilterType, FunnelsFilterType }
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { LemonButton } from '@posthog/lemon-ui'
 import { IconDelete } from 'lib/lemon-ui/icons'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { FunnelsQuery } from '~/queries/schema'
 import { getClampedStepRangeFilterDataExploration } from 'scenes/funnels/funnelUtils'
 import clsx from 'clsx'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 type ExclusionRowSuffixComponentBaseProps = {
     filter: ActionFilterType | FunnelExclusion
@@ -24,10 +24,10 @@ export function ExclusionRowSuffix({
     isVertical,
 }: ExclusionRowSuffixComponentBaseProps): JSX.Element | null {
     const { insightProps } = useValues(insightLogic)
-    const { querySource, insightFilter, exclusionDefaultStepRange, isFunnelWithEnoughSteps, series } = useValues(
-        funnelDataLogic(insightProps)
+    const { querySource, insightFilter, series, isFunnelWithEnoughSteps, exclusionDefaultStepRange } = useValues(
+        insightVizDataLogic(insightProps)
     )
-    const { updateInsightFilter } = useActions(funnelDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
 
     const setOneEventExclusionFilter = (eventFilter: FunnelExclusion, index: number): void => {
         const exclusions = ((insightFilter as FunnelsFilterType)?.exclusions || []).map((e, e_i) =>

frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx

@@ -6,17 +6,17 @@ import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { FunnelExclusion, EntityTypes, FilterType } from '~/types'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
-import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { ExclusionRowSuffix } from './ExclusionRowSuffix'
 import { ExclusionRow } from './ExclusionRow'
 import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 
 export function FunnelExclusionsFilter(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
     const { exclusionFilters, exclusionDefaultStepRange, isFunnelWithEnoughSteps } = useValues(
-        funnelDataLogic(insightProps)
+        insightVizDataLogic(insightProps)
     )
-    const { updateInsightFilter } = useActions(funnelDataLogic(insightProps))
+    const { updateInsightFilter } = useActions(insightVizDataLogic(insightProps))
 
     const ref = useRef(null)
     const [width] = useSize(ref)

frontend/src/scenes/insights/filters/InsightDateFilter/InsightDateFilter.tsx

@@ -1,9 +1,9 @@
 import { useValues, useActions } from 'kea'
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { Tooltip } from 'antd'
 import { IconCalendar, IconInfo } from '@posthog/icons'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { Tooltip } from '@posthog/lemon-ui'
 
 type InsightDateFilterProps = {
     disabled: boolean