Merge branch 'master' into xvello/replay-overflow-capture

ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiment_secondary_results.ambr

@@ -1,7 +1,7 @@
 # serializer version: 1
 # name: ClickhouseTestExperimentSecondaryResults.test_basic_secondary_metric_results
   '''
-  /* user_id:107 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* user_id:108 celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events

frontend/src/layout/GlobalModals.tsx

@@ -2,14 +2,14 @@ import { LemonModal } from '@posthog/lemon-ui'
 import { actions, kea, path, reducers, useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddyWithLogic'
+import { UpgradeModal } from 'lib/components/UpgradeModal/UpgradeModal'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
 import { Setup2FA } from 'scenes/authentication/Setup2FA'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { InviteModal } from 'scenes/settings/organization/InviteModal'
-import { UpgradeModal } from 'scenes/UpgradeModal'
 import { userLogic } from 'scenes/userLogic'
 
 import type { globalModalsLogicType } from './GlobalModalsType'

frontend/src/layout/navigation/OrganizationSwitcher.tsx

@@ -1,13 +1,13 @@
 import { IconPlus } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
+import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { Lettermark } from 'lib/lemon-ui/Lettermark'
 import { membershipLevelToName } from 'lib/utils/permissioning'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
-import { sceneLogic } from 'scenes/sceneLogic'
 import { userLogic } from 'scenes/userLogic'
 
 import { AvailableFeature, OrganizationBasicType } from '~/types'
@@ -48,7 +48,7 @@ export function OtherOrganizationButton({
 export function NewOrganizationButton(): JSX.Element {
     const { closeAccountPopover } = useActions(navigationLogic)
     const { showCreateOrganizationModal } = useActions(globalModalsLogic)
-    const { guardAvailableFeature } = useActions(sceneLogic)
+    const { guardAvailableFeature } = useValues(upgradeModalLogic)
 
     return (
         <LemonButton
@@ -61,8 +61,7 @@ export function NewOrganizationButton(): JSX.Element {
                         showCreateOrganizationModal()
                     },
                     {
-                        cloud: false,
-                        selfHosted: true,
+                        guardOnCloud: false,
                     }
                 )
             }

frontend/src/layout/navigation/ProjectSwitcher.tsx

@@ -1,13 +1,13 @@
 import { IconGear, IconPlus } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
+import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
 import { removeProjectIdIfPresent } from 'lib/utils/router-utils'
 import { useMemo } from 'react'
 import { organizationLogic } from 'scenes/organizationLogic'
-import { sceneLogic } from 'scenes/sceneLogic'
 import { isAuthenticatedTeam, teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
@@ -27,7 +27,7 @@ export function ProjectName({ team }: { team: TeamBasicType }): JSX.Element {
 export function ProjectSwitcherOverlay({ onClickInside }: { onClickInside?: () => void }): JSX.Element {
     const { currentOrganization, projectCreationForbiddenReason } = useValues(organizationLogic)
     const { currentTeam } = useValues(teamLogic)
-    const { guardAvailableFeature } = useActions(sceneLogic)
+    const { guardAvailableFeature } = useValues(upgradeModalLogic)
     const { showCreateProjectModal } = useActions(globalModalsLogic)
 
     return (
@@ -49,12 +49,9 @@ export function ProjectSwitcherOverlay({ onClickInside }: { onClickInside?: () =
                 data-attr="new-project-button"
                 onClick={() => {
                     onClickInside?.()
-                    guardAvailableFeature(
-                        AvailableFeature.ORGANIZATIONS_PROJECTS,
-                        showCreateProjectModal,
-                        undefined,
-                        currentOrganization?.teams?.length
-                    )
+                    guardAvailableFeature(AvailableFeature.ORGANIZATIONS_PROJECTS, showCreateProjectModal, {
+                        currentUsage: currentOrganization?.teams?.length,
+                    })
                 }}
             >
                 New project

frontend/src/lib/components/ObjectTags/ObjectTags.tsx

@@ -9,11 +9,11 @@ import { objectTagsLogic } from 'lib/components/ObjectTags/objectTagsLogic'
 import { Spinner } from 'lib/lemon-ui/Spinner/Spinner'
 import { colorForString } from 'lib/utils'
 import { CSSProperties, useMemo } from 'react'
-import { sceneLogic } from 'scenes/sceneLogic'
 
 import { AvailableFeature } from '~/types'
 
 import { SelectGradientOverflow } from '../SelectGradientOverflow'
+import { upgradeModalLogic } from '../UpgradeModal/upgradeModalLogic'
 
 interface ObjectTagsPropsBase {
     tags: string[]
@@ -61,7 +61,7 @@ export function ObjectTags({
 }: ObjectTagsProps): JSX.Element {
     const objectTagId = useMemo(() => uniqueMemoizedIndex++, [])
     const logic = objectTagsLogic({ id: objectTagId, onChange, tags })
-    const { guardAvailableFeature } = useActions(sceneLogic)
+    const { guardAvailableFeature } = useValues(upgradeModalLogic)
     const { addingNewTag, cleanedNewTag, deletedTags } = useValues(logic)
     const { setAddingNewTag, setNewTag, handleDelete, handleAdd } = useActions(logic)
 

frontend/src/lib/components/PayGateMini/PayGateMini.tsx

@@ -10,10 +10,10 @@ import { useEffect } from 'react'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { getProductIcon } from 'scenes/products/Products'
-import { sceneLogic } from 'scenes/sceneLogic'
 
 import { AvailableFeature } from '~/types'
 
+import { upgradeModalLogic } from '../UpgradeModal/upgradeModalLogic'
 import { PayGateMiniButton } from './PayGateMiniButton'
 import { payGateMiniLogic } from './payGateMiniLogic'
 
@@ -47,7 +47,7 @@ export function PayGateMini({
     const { preflight } = useValues(preflightLogic)
     const { billing, billingLoading } = useValues(billingLogic)
     const { featureFlags } = useValues(featureFlagLogic)
-    const { hideUpgradeModal } = useActions(sceneLogic)
+    const { hideUpgradeModal } = useActions(upgradeModalLogic)
 
     useEffect(() => {
         if (gateVariant) {

frontend/src/lib/components/Sharing/SharingModal.tsx

@@ -15,10 +15,10 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { useEffect, useState } from 'react'
 import { DashboardCollaboration } from 'scenes/dashboard/DashboardCollaborators'
-import { sceneLogic } from 'scenes/sceneLogic'
 
 import { AvailableFeature, InsightModel, InsightShortId, InsightType } from '~/types'
 
+import { upgradeModalLogic } from '../UpgradeModal/upgradeModalLogic'
 import { sharingLogic } from './sharingLogic'
 
 export const SHARING_MODAL_WIDTH = 600
@@ -64,7 +64,7 @@ export function SharingModalContent({
         shareLink,
     } = useValues(sharingLogic(logicProps))
     const { setIsEnabled, togglePreview } = useActions(sharingLogic(logicProps))
-    const { guardAvailableFeature } = useActions(sceneLogic)
+    const { guardAvailableFeature } = useValues(upgradeModalLogic)
 
     const [iframeLoaded, setIframeLoaded] = useState(false)
 

frontend/src/scenes/UpgradeModal.tsx → frontend/src/lib/components/UpgradeModal/UpgradeModal.tsx

@@ -2,11 +2,12 @@ import { LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 
-import { sceneLogic } from './sceneLogic'
+import { upgradeModalLogic } from './upgradeModalLogic'
 
 export function UpgradeModal(): JSX.Element {
-    const { upgradeModalFeatureKey, upgradeModalFeatureUsage, upgradeModalIsGrandfathered } = useValues(sceneLogic)
-    const { hideUpgradeModal } = useActions(sceneLogic)
+    const { upgradeModalFeatureKey, upgradeModalFeatureUsage, upgradeModalIsGrandfathered } =
+        useValues(upgradeModalLogic)
+    const { hideUpgradeModal } = useActions(upgradeModalLogic)
 
     return upgradeModalFeatureKey ? (
         <LemonModal onClose={hideUpgradeModal} isOpen={!!upgradeModalFeatureKey}>

frontend/src/lib/components/UpgradeModal/upgradeModalLogic.ts

@@ -0,0 +1,96 @@
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { userLogic } from 'scenes/userLogic'
+
+import { AvailableFeature } from '~/types'
+
+import type { upgradeModalLogicType } from './upgradeModalLogicType'
+
+export type GuardAvailableFeatureFn = (
+    featureKey: AvailableFeature,
+    featureAvailableCallback?: () => void,
+    options?: {
+        guardOnCloud?: boolean
+        guardOnSelfHosted?: boolean
+        currentUsage?: number
+        isGrandfathered?: boolean
+    }
+) => boolean
+
+export const upgradeModalLogic = kea<upgradeModalLogicType>([
+    path(['lib', 'components', 'UpgradeModal', 'upgradeModalLogic']),
+    connect(() => ({
+        values: [preflightLogic, ['preflight'], featureFlagLogic, ['featureFlags'], userLogic, ['hasAvailableFeature']],
+    })),
+    actions({
+        showUpgradeModal: (featureKey: AvailableFeature, currentUsage?: number, isGrandfathered?: boolean) => ({
+            featureKey,
+            currentUsage,
+            isGrandfathered,
+        }),
+        hideUpgradeModal: true,
+    }),
+    reducers({
+        upgradeModalFeatureKey: [
+            null as AvailableFeature | null,
+            {
+                showUpgradeModal: (_, { featureKey }) => featureKey,
+                hideUpgradeModal: () => null,
+            },
+        ],
+        upgradeModalFeatureUsage: [
+            null as number | null,
+            {
+                showUpgradeModal: (_, { currentUsage }) => currentUsage ?? null,
+                hideUpgradeModal: () => null,
+            },
+        ],
+        upgradeModalIsGrandfathered: [
+            null as boolean | null,
+            {
+                showUpgradeModal: (_, { isGrandfathered }) => isGrandfathered ?? null,
+                hideUpgradeModal: () => null,
+            },
+        ],
+    }),
+    selectors(({ actions }) => ({
+        guardAvailableFeature: [
+            (s) => [s.preflight, s.hasAvailableFeature],
+            (preflight, hasAvailableFeature): GuardAvailableFeatureFn => {
+                return (featureKey, featureAvailableCallback, options): boolean => {
+                    const {
+                        guardOnCloud = true,
+                        guardOnSelfHosted = true,
+                        currentUsage,
+                        isGrandfathered,
+                    } = options || {}
+                    let featureAvailable: boolean
+                    if (!preflight) {
+                        featureAvailable = false
+                    } else if (!guardOnCloud && preflight.cloud) {
+                        featureAvailable = true
+                    } else if (!guardOnSelfHosted && !preflight.cloud) {
+                        featureAvailable = true
+                    } else {
+                        featureAvailable = hasAvailableFeature(featureKey, currentUsage)
+                    }
+
+                    if (!featureAvailable) {
+                        actions.showUpgradeModal(featureKey, currentUsage, isGrandfathered)
+                    } else {
+                        featureAvailableCallback?.()
+                    }
+
+                    return featureAvailable
+                }
+            },
+        ],
+    })),
+    listeners(() => ({
+        showUpgradeModal: ({ featureKey }) => {
+            eventUsageLogic.actions.reportUpgradeModalShown(featureKey)
+        },
+    })),
+])

frontend/src/scenes/insights/filters/ActionFilter/entityFilterLogic.ts

@@ -13,7 +13,6 @@ import {
     EntityType,
     EntityTypes,
     FilterType,
-    InsightShortId,
 } from '~/types'
 
 import type { entityFilterLogicType } from './entityFilterLogicType'
@@ -73,19 +72,9 @@ export const entityFilterLogic = kea<entityFilterLogicType>([
     props({} as EntityFilterProps),
     key((props) => props.typeKey),
     path((key) => ['scenes', 'insights', 'ActionFilter', 'entityFilterLogic', key]),
-    connect((props: EntityFilterProps) => ({
+    connect({
         logic: [eventUsageLogic],
-        actions: [
-            insightDataLogic({
-                dashboardItemId: props.typeKey as InsightShortId,
-                // this can be mounted in replay filters
-                // in which case there's not really an insightDataLogic to mount
-                // disable attempts to load data that will never work
-                doNotLoad: props.typeKey === 'session-recordings',
-            }),
-            ['loadData'],
-        ],
-    })),
+    }),
     actions({
         selectFilter: (filter: EntityFilter | ActionFilter | null) => ({ filter }),
         updateFilterMath: (
@@ -193,7 +182,10 @@ export const entityFilterLogic = kea<entityFilterLogicType>([
 
             await breakpoint(100)
 
-            actions.loadData(true)
+            const dataLogic = insightDataLogic.findMounted({
+                dashboardItemId: props.typeKey,
+            })
+            dataLogic?.actions?.loadData(true)
         },
         hideModal: () => {
             actions.selectFilter(null)