Merge branch 'master' into fix/remove-targetting-options-from-survey

ee/hogai/taxonomy_agent/nodes.py

@@ -18,7 +18,7 @@
 from langgraph.errors import NodeInterrupt
 from pydantic import ValidationError
 
-from ee.hogai.taxonomy import CORE_FILTER_DEFINITIONS_BY_GROUP
+from posthog.taxonomy.taxonomy import CORE_FILTER_DEFINITIONS_BY_GROUP
 from ee.hogai.taxonomy_agent.parsers import (
     ReActParserException,
     ReActParserMissingActionException,

ee/hogai/taxonomy_agent/toolkit.py

@@ -7,7 +7,7 @@
 
 from pydantic import BaseModel, Field, RootModel
 
-from ee.hogai.taxonomy import CORE_FILTER_DEFINITIONS_BY_GROUP
+from posthog.taxonomy.taxonomy import CORE_FILTER_DEFINITIONS_BY_GROUP
 from posthog.hogql.database.schema.channel_type import DEFAULT_CHANNEL_TYPES
 from posthog.hogql_queries.ai.actors_property_taxonomy_query_runner import ActorsPropertyTaxonomyQueryRunner
 from posthog.hogql_queries.ai.event_taxonomy_query_runner import EventTaxonomyQueryRunner

frontend/src/layout/navigation-3000/Navigation.scss

@@ -238,8 +238,6 @@
 }
 
 .Sidebar3000__content {
-    position: fixed;
-    top: 0;
     box-sizing: content-box;
     display: flex;
     flex-direction: column;

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -48,7 +48,7 @@ export function Navigation({
                 {activeNavbarItem && <Sidebar key={activeNavbarItem.identifier} navbarItem={activeNavbarItem} />}
             </FlaggedFeature>
             <main>
-                {sceneConfig?.layout !== 'app-raw-no-header' && <TopBar />}
+                {(sceneConfig?.layout !== 'app-raw-no-header' || mobileLayout) && <TopBar />}
                 <div
                     className={clsx(
                         'Navigation3000__scene',
@@ -58,8 +58,10 @@ export function Navigation({
                         sceneConfig?.layout === 'app-canvas' && 'Navigation3000__scene--canvas'
                     )}
                 >
-                    {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}
-                    {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
+                    <div className={sceneConfig?.layout === 'app-raw-no-header' ? 'px-4' : ''}>
+                        {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}
+                        {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
+                    </div>
                     {children}
                 </div>
             </main>

frontend/src/layout/navigation/OrganizationSwitcher.tsx

@@ -1,4 +1,4 @@
-import { IconPlus } from '@posthog/icons'
+import { IconPlusSmall } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -57,7 +57,7 @@ export function NewOrganizationButton(): JSX.Element {
 
     return (
         <LemonButton
-            icon={<IconPlus />}
+            icon={<IconPlusSmall />}
             onClick={() =>
                 guardAvailableFeature(
                     AvailableFeature.ORGANIZATIONS_PROJECTS,

frontend/src/lib/api.mock.ts

@@ -93,6 +93,7 @@ export const MOCK_DEFAULT_TEAM: TeamType = {
     person_on_events_querying_enabled: true,
     live_events_token: '123',
     capture_dead_clicks: false,
+    human_friendly_comparison_periods: false,
 }
 
 export const MOCK_DEFAULT_PROJECT: ProjectType = {

frontend/src/lib/components/InsightLabel/index.tsx

@@ -66,7 +66,7 @@ function MathTag({ math, mathProperty, mathHogQL, mathGroupTypeIndex }: MathTagP
     if (math === 'unique_group' && mathGroupTypeIndex != undefined) {
         return <LemonTag>Unique {aggregationLabel(mathGroupTypeIndex).plural}</LemonTag>
     }
-    if (math && ['sum', 'avg', 'min', 'max', 'median', 'p90', 'p95', 'p99'].includes(math || '')) {
+    if (math && ['sum', 'avg', 'min', 'max', 'median', 'p75', 'p90', 'p95', 'p99'].includes(math)) {
         return (
             <>
                 <LemonTag>{mathDefinitions[math]?.name || capitalizeFirstLetter(math)}</LemonTag>

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

@@ -5,6 +5,7 @@ import { InfiniteList } from 'lib/components/TaxonomicFilter/InfiniteList'
 import { infiniteListLogic } from 'lib/components/TaxonomicFilter/infiniteListLogic'
 import { TaxonomicFilterGroupType, TaxonomicFilterLogicProps } from 'lib/components/TaxonomicFilter/types'
 
+import { TaxonomicFilterEmptyState, taxonomicFilterGroupTypesWithEmptyStates } from './TaxonomicFilterEmptyState'
 import { taxonomicFilterLogic } from './taxonomicFilterLogic'
 
 export interface InfiniteSelectResultsProps {
@@ -31,7 +32,7 @@ function CategoryPill({
     const group = taxonomicGroups.find((g) => g.type === groupType)
 
     // :TRICKY: use `totalListCount` (results + extra) to toggle interactivity, while showing `totalResultCount`
-    const canInteract = totalListCount > 0
+    const canInteract = totalListCount > 0 || taxonomicFilterGroupTypesWithEmptyStates.includes(groupType)
 
     return (
         <LemonTag
@@ -61,7 +62,12 @@ export function InfiniteSelectResults({
 }: InfiniteSelectResultsProps): JSX.Element {
     const { activeTab, taxonomicGroups, taxonomicGroupTypes, activeTaxonomicGroup, value } =
         useValues(taxonomicFilterLogic)
+    const logic = infiniteListLogic({ ...taxonomicFilterLogicProps, listGroupType: activeTab })
+
     const { setActiveTab, selectItem } = useActions(taxonomicFilterLogic)
+
+    const { totalListCount } = useValues(logic)
+
     const RenderComponent = activeTaxonomicGroup?.render
 
     const openTab = activeTab || taxonomicGroups[0].type
@@ -84,6 +90,8 @@ export function InfiniteSelectResults({
         </>
     )
 
+    const showEmptyState = totalListCount === 0 && taxonomicFilterGroupTypesWithEmptyStates.includes(openTab)
+
     return (
         <>
             {hasMultipleGroups && (
@@ -107,14 +115,16 @@ export function InfiniteSelectResults({
                     </div>
                 </div>
             )}
+
             {taxonomicGroupTypes.map((groupType) => {
                 return (
                     <div key={groupType} className={clsx(groupType === openTab ? 'block' : 'hidden')}>
                         <BindLogic
                             logic={infiniteListLogic}
                             props={{ ...taxonomicFilterLogicProps, listGroupType: groupType }}
                         >
-                            {listComponent}
+                            {showEmptyState && <TaxonomicFilterEmptyState groupType={groupType} />}
+                            {!showEmptyState && listComponent}
                         </BindLogic>
                     </div>
                 )

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

@@ -0,0 +1,96 @@
+import { IconOpenSidebar, IconPlus } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import type React from 'react'
+import { urls } from 'scenes/urls'
+
+import { PipelineStage } from '~/types'
+
+import { BuilderHog3 } from '../hedgehogs'
+
+type EmptyStateProps = {
+    title: string
+    description: string
+    action: {
+        to: string
+        text: string
+    }
+    docsUrl?: string
+    hog: React.ComponentType<{ className?: string }>
+    groupType: TaxonomicFilterGroupType
+}
+
+const EmptyState = ({ title, description, action, docsUrl, hog: Hog, groupType }: EmptyStateProps): JSX.Element => {
+    return (
+        <div className="w-full p-8 rounded mt-4 flex items-center gap-4">
+            <div className="w-32 h-32">
+                <Hog className="w-full h-full" />
+            </div>
+            <div className="flex-1 text-center">
+                <h2 className="text-lg font-semibold">{title}</h2>
+                <p className="text-sm text-muted mt-2">{description}</p>
+                <div className="flex items-center justify-center gap-4 mt-4">
+                    <LemonButton
+                        type="primary"
+                        icon={<IconPlus />}
+                        to={action.to}
+                        data-attr={`taxonomic-filter-empty-state-${groupType}-new-button`}
+                    >
+                        {action.text}
+                    </LemonButton>
+                    <LemonButton
+                        type="tertiary"
+                        sideIcon={<IconOpenSidebar className="w-4 h-4" />}
+                        to={`${docsUrl}?utm_medium=in-product&utm_campaign=taxonomic-filter-empty-state-docs-link`}
+                        data-attr="product-introduction-docs-link"
+                        targetBlank
+                    >
+                        Learn more
+                    </LemonButton>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+type Props = {
+    groupType: TaxonomicFilterGroupType
+}
+
+const DataWarehouseEmptyState = (): JSX.Element => {
+    return (
+        <EmptyState
+            title="Connect external data"
+            groupType={TaxonomicFilterGroupType.DataWarehouse}
+            description="Use data warehouse sources to import data from your external data into PostHog."
+            action={{
+                to: urls.pipelineNodeNew(PipelineStage.Source),
+                text: 'New source',
+            }}
+            docsUrl="https://posthog.com/docs/data-warehouse"
+            hog={BuilderHog3}
+        />
+    )
+}
+
+const DefaultEmptyState = (): JSX.Element | null => {
+    return null
+}
+
+const EMPTY_STATES: Partial<Record<TaxonomicFilterGroupType, () => JSX.Element>> = {
+    [TaxonomicFilterGroupType.DataWarehouse]: DataWarehouseEmptyState,
+    [TaxonomicFilterGroupType.DataWarehouseProperties]: DataWarehouseEmptyState,
+    [TaxonomicFilterGroupType.DataWarehousePersonProperties]: DataWarehouseEmptyState,
+} as const
+
+export const taxonomicFilterGroupTypesWithEmptyStates = Object.keys(EMPTY_STATES) as TaxonomicFilterGroupType[]
+
+export const TaxonomicFilterEmptyState = (props: Props): JSX.Element => {
+    const EmptyState = EMPTY_STATES[props.groupType]
+
+    if (EmptyState) {
+        return <EmptyState />
+    }
+
+    return <DefaultEmptyState />
+}

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

@@ -13,6 +13,8 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * are the files currently being uploaded?
      */
     loading?: boolean
+    /** Whether input field is disabled */
+    disabled?: boolean
     /** if this is not provided then this component is the drop target
      * and is styled when a file is dragged over it
      * if this alternativeDropTargetRef is provided,
@@ -35,6 +37,7 @@ export const LemonFileInput = ({
     onChange,
     multiple,
     loading,
+    disabled,
     // e.g. '.json' or 'image/*'
     accept,
     alternativeDropTargetRef,
@@ -142,14 +145,21 @@ export const LemonFileInput = ({
                     'FileDropTarget flex flex-col gap-1',
                     !alternativeDropTargetRef?.current && drag && 'FileDropTarget--active'
                 )}
+                aria-disabled={disabled}
             >
-                <label className="text-muted inline-flex flow-row items-center gap-1 cursor-pointer">
+                <label
+                    className={clsx(
+                        'text-muted inline-flex flow-row items-center gap-1',
+                        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+                    )}
+                >
                     <input
                         className="hidden"
                         type="file"
                         multiple={multiple}
                         accept={accept}
                         onChange={onInputChange}
+                        disabled={disabled}
                     />
                     {callToAction || (
                         <>

frontend/src/lib/taxonomy.tsx

@@ -70,9 +70,7 @@ export const SESSION_INITIAL_PROPERTIES_ADAPTED_FROM_EVENTS = new Set([
     'rdt_cid',
 ])
 
-// If adding event properties with labels, check whether they should be added to
-// PROPERTY_NAME_ALIASES in posthog/api/property_definition.py
-// see code to output JSON below this
+// changing values in here you need to sync to python posthog/posthog/taxonomy/taxonomy.py
 export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
     events: {
         '': {

frontend/src/lib/utils/eventUsageLogic.ts

@@ -647,10 +647,7 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
             // "insight created" essentially means that the user clicked "New insight"
             await breakpoint(500) // Debounce to avoid multiple quick "New insight" clicks being reported
 
-            posthog.capture('insight created', {
-                query_kind: query?.kind,
-                query_source_kind: isNodeWithSource(query) ? query.source.kind : undefined,
-            })
+            posthog.capture('insight created', sanitizeQuery(query))
         },
         reportInsightSaved: async ({ query, isNewInsight }) => {
             // "insight saved" is a proxy for the new insight's results being valuable to the user

frontend/src/loadPostHogJS.tsx

@@ -66,6 +66,7 @@ export function loadPostHogJS(): void {
                 autocapture: {
                     capture_copied_text: true,
                 },
+                capture_performance: { web_vitals: true },
                 person_profiles: 'always',
                 __preview_remote_config: true,
 

frontend/src/queries/schema.json

@@ -3906,6 +3906,7 @@
                 "min_count_per_actor",
                 "max_count_per_actor",
                 "median_count_per_actor",
+                "p75_count_per_actor",
                 "p90_count_per_actor",
                 "p95_count_per_actor",
                 "p99_count_per_actor"
@@ -9099,7 +9100,7 @@
             "type": "object"
         },
         "PropertyMathType": {
-            "enum": ["avg", "sum", "min", "max", "median", "p90", "p95", "p99"],
+            "enum": ["avg", "sum", "min", "max", "median", "p75", "p90", "p95", "p99"],
             "type": "string"
         },
         "PropertyOperator": {

frontend/src/scenes/appScenes.ts

@@ -29,8 +29,8 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Group]: () => import('./groups/Group'),
     [Scene.Action]: () => import('./actions/Action'),
     [Scene.Experiments]: () => import('./experiments/Experiments'),
-    [Scene.ExperimentsSavedMetrics]: () => import('./experiments/SavedMetrics/SavedMetrics'),
-    [Scene.ExperimentsSavedMetric]: () => import('./experiments/SavedMetrics/SavedMetric'),
+    [Scene.ExperimentsSharedMetrics]: () => import('./experiments/SharedMetrics/SharedMetrics'),
+    [Scene.ExperimentsSharedMetric]: () => import('./experiments/SharedMetrics/SharedMetric'),
     [Scene.Experiment]: () => import('./experiments/Experiment'),
     [Scene.FeatureFlags]: () => import('./feature-flags/FeatureFlags'),
     [Scene.FeatureManagement]: () => import('./feature-flags/FeatureManagement'),

frontend/src/scenes/billing/Billing.tsx

@@ -5,7 +5,9 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { router } from 'kea-router'
+import { RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea'
 import { supportLogic } from 'lib/components/Support/supportLogic'
+import { OrganizationMembershipLevel } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -36,6 +38,11 @@ export function Billing(): JSX.Element {
     const { preflight, isCloudOrDev } = useValues(preflightLogic)
     const { openSupportForm } = useActions(supportLogic)
 
+    const restrictionReason = useRestrictedArea({
+        minimumAccessLevel: OrganizationMembershipLevel.Admin,
+        scope: RestrictionScope.Organization,
+    })
+
     if (preflight && !isCloudOrDev) {
         router.actions.push(urls.default())
     }
@@ -59,6 +66,20 @@ export function Billing(): JSX.Element {
         )
     }
 
+    if (restrictionReason) {
+        return (
+            <div className="space-y-4">
+                <h1>Billing</h1>
+                <LemonBanner type="warning">{restrictionReason}</LemonBanner>
+                <div className="flex">
+                    <LemonButton type="primary" to={urls.default()}>
+                        Go back home
+                    </LemonButton>
+                </div>
+            </div>
+        )
+    }
+
     if (!billing && !billingLoading) {
         return (
             <div className="space-y-4">

frontend/src/scenes/cohorts/CohortFilters/constants.tsx

@@ -89,6 +89,9 @@ export const FIELD_VALUES: Record<FieldOptionsType, FieldValues> = {
             [PropertyMathType.Median]: {
                 label: 'Median',
             },
+            [PropertyMathType.P75]: {
+                label: '75th percentile',
+            },
             [PropertyMathType.P90]: {
                 label: '90th percentile',
             },