Merge branch 'master' into dn/interactions-test

.github/workflows/ci-backend.yml

@@ -60,7 +60,9 @@ jobs:
                         # NOTE: we are at risk of missing a dependency here. We could make
                         # the dependencies more clear if we separated the backend/frontend
                         # code completely
+                        # really we should ignore ee/frontend/** but dorny doesn't support that
                         - 'ee/**/*'
+                        - '!ee/frontend/**'
                         - 'posthog/**/*'
                         - 'bin/*.py'
                         - requirements.txt

.github/workflows/ci-frontend.yml

@@ -35,6 +35,7 @@ jobs:
                         # NOTE: we are at risk of missing a dependency here. 
                         - 'bin/**'
                         - 'frontend/**'
+                        - 'ee/frontend/**'
                         # Make sure we run if someone is explicitly change the workflow
                         - .github/workflows/ci-frontend.yml
                         # various JS config files
@@ -117,18 +118,23 @@ jobs:
     jest:
         runs-on: ubuntu-latest
         needs: changes
-        name: Jest test (${{ matrix.chunk }})
+        name: Jest test (${{ matrix.segment }} - ${{ matrix.chunk }})
 
         strategy:
             # If one test fails, still run the others
             fail-fast: false
             matrix:
+                segment: ['FOSS', 'EE']
                 chunk: [1, 2, 3]
 
         steps:
             # we need at least one thing to run to make sure we include everything for required jobs
             - uses: actions/checkout@v3
 
+            - name: Remove ee
+              if: needs.changes.outputs.frontend == 'true' && matrix.segment == 'FOSS'
+              run: rm -rf ee
+
             - name: Install pnpm
               if: needs.changes.outputs.frontend == 'true'
               uses: pnpm/action-setup@v2

.storybook/test-runner.ts

@@ -1,5 +1,5 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
-import { getStoryContext, TestRunnerConfig, TestContext } from '@storybook/test-runner'
+import { getStoryContext, TestRunnerConfig, TestContext, waitForPageReady } from '@storybook/test-runner'
 import type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test'
 import type { Mocks } from '~/mocks/utils'
 import { StoryContext } from '@storybook/csf'
@@ -119,8 +119,7 @@ async function expectStoryToMatchSnapshot(
         check = expectStoryToMatchComponentSnapshot
     }
 
-    // Wait for story to load
-    await page.waitForSelector('.sb-show-preparing-story', { state: 'detached' })
+    await waitForPageReady(page)
     await page.evaluate(() => {
         // Stop all animations for consistent snapshots
         document.body.classList.add('storybook-test-runner')
@@ -132,7 +131,7 @@ async function expectStoryToMatchSnapshot(
         await page.waitForSelector(waitForSelector)
     }
 
-    await page.waitForTimeout(400) // Wait for animations to finish
+    await page.waitForTimeout(400) // Wait for effects to finish
 
     // Wait for all images to load
     await page.waitForFunction(() =>

ee/frontend/exports.ts

@@ -0,0 +1,13 @@
+import { PostHogEE } from '@posthog/ee/types'
+
+const myTestCode = (): void => {
+    // eslint-disable-next-line no-console
+    console.log('it works!')
+}
+
+const postHogEE: PostHogEE = {
+    enabled: true,
+    myTestCode,
+}
+
+export default postHogEE

frontend/@posthog/ee/exports.ts

@@ -0,0 +1,7 @@
+import { PostHogEE } from './types'
+
+const posthogEE: PostHogEE = {
+    enabled: false,
+}
+
+export default posthogEE

frontend/@posthog/ee/types.ts

@@ -0,0 +1,5 @@
+// NOTE: All exported items from the EE module _must_ be optionally defined to ensure we work well with FOSS
+export type PostHogEE = {
+    enabled: boolean
+    myTestCode?: () => void
+}

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

@@ -1,5 +1,5 @@
 import { IconExternal } from '@posthog/icons'
-import { LemonButton, LemonSkeleton } from '@posthog/lemon-ui'
+import { LemonButton, LemonSelect, LemonSkeleton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { useEffect, useRef, useState } from 'react'
@@ -8,6 +8,11 @@ import { themeLogic } from '../../themeLogic'
 import { SidePanelPaneHeader } from '../components/SidePanelPane'
 import { POSTHOG_WEBSITE_ORIGIN, sidePanelDocsLogic } from './sidePanelDocsLogic'
 
+type Menu = {
+    name: string
+    url?: string
+}
+
 function SidePanelDocsSkeleton(): JSX.Element {
     return (
         <div className="absolute inset-0 p-4 space-y-2">
@@ -23,12 +28,50 @@ function SidePanelDocsSkeleton(): JSX.Element {
     )
 }
 
+function Menu({
+    menu,
+    activeMenuName,
+    onChange,
+}: {
+    menu: Menu[]
+    activeMenuName: string | null
+    onChange: (newValue: string | null) => void
+}): JSX.Element {
+    return (
+        <div className="mr-auto">
+            <LemonSelect
+                placeholder="Navigate"
+                dropdownMatchSelectWidth={false}
+                onChange={onChange}
+                size="small"
+                value={activeMenuName}
+                options={menu.map(({ name }) => ({ label: name, value: name }))}
+            />
+        </div>
+    )
+}
+
 export const SidePanelDocs = (): JSX.Element => {
     const { iframeSrc, currentUrl } = useValues(sidePanelDocsLogic)
     const { updatePath, unmountIframe, closeSidePanel, handleExternalUrl } = useActions(sidePanelDocsLogic)
     const ref = useRef<HTMLIFrameElement>(null)
     const [ready, setReady] = useState(false)
     const { isDarkModeOn } = useValues(themeLogic)
+    const [menu, setMenu] = useState<Menu[] | null>(null)
+    const [activeMenuName, setActiveMenuName] = useState<string | null>(null)
+
+    const handleMenuChange = (newValue: string | null): void => {
+        const url = menu?.find(({ name }: Menu) => name === newValue)?.url
+        if (url) {
+            ref.current?.contentWindow?.postMessage(
+                {
+                    type: 'navigate',
+                    url,
+                },
+                '*'
+            )
+        }
+    }
 
     useEffect(() => {
         ref.current?.contentWindow?.postMessage(
@@ -57,6 +100,15 @@ export const SidePanelDocs = (): JSX.Element => {
                     handleExternalUrl(event.data.url)
                     return
                 }
+                if (event.data.type === 'docs-menu') {
+                    setMenu(event.data.menu)
+                    return
+                }
+
+                if (event.data.type === 'docs-active-menu') {
+                    setActiveMenuName(event.data.activeMenuName)
+                    return
+                }
 
                 console.warn('Unhandled iframe message from Docs:', event.data)
             }
@@ -79,6 +131,7 @@ export const SidePanelDocs = (): JSX.Element => {
     return (
         <>
             <SidePanelPaneHeader>
+                {menu && <Menu menu={menu} activeMenuName={activeMenuName} onChange={handleMenuChange} />}
                 <LemonButton
                     size="small"
                     sideIcon={<IconExternal />}

frontend/src/lib/components/CompactList/CompactList.scss

@@ -1,31 +1,31 @@
-.compact-list {
+.CompactList {
     border-radius: var(--radius);
     border: 1px solid var(--border);
-    height: calc(19.25rem);
     background: var(--bg-light);
     box-sizing: content-box;
     display: flex;
     flex-direction: column;
     flex: 1;
+    overflow: hidden;
 
-    .compact-list-header {
-        padding: 0.5rem 1rem 0;
+    .CompactList__header {
+        padding: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
 
         h3 {
             margin-bottom: 0;
             font-weight: 600;
-            font-size: 1rem;
+            font-size: 0.9rem;
             line-height: 1.4;
         }
     }
 
-    .scrollable-list {
-        flex: 1;
-        overflow: auto;
-        padding: 0 0.5rem;
+    .CompactList__content {
+        overflow-y: auto;
+        height: 16rem;
+        padding: 0.5rem;
     }
 
     .LemonButton {

frontend/src/lib/components/CompactList/CompactList.tsx

@@ -24,15 +24,15 @@ export function CompactList({
     renderRow,
 }: CompactListProps): JSX.Element {
     return (
-        <div className="compact-list border">
-            <div className="compact-list-header">
-                <h3>{title}</h3>
+        <div className="CompactList">
+            <div className="CompactList__header">
+                <h3 className="px-2 truncate" title={title}>
+                    {title}
+                </h3>
                 {viewAllURL && <LemonButton to={viewAllURL}>View all</LemonButton>}
             </div>
-            <div className="mx-2">
-                <LemonDivider />
-            </div>
-            <div className="scrollable-list">
+            <LemonDivider className="my-0 mx-2" />
+            <div className="CompactList__content">
                 {loading ? (
                     <div className="p-2 space-y-6">
                         {Array.from({ length: 6 }, (_, index) => (

frontend/src/lib/ee.test.ts

@@ -0,0 +1,17 @@
+import fs from 'fs'
+
+const eeFolderExists = fs.existsSync('ee/frontend/exports.ts')
+export const ifEeIt = eeFolderExists ? it : it.skip
+export const ifFossIt = !eeFolderExists ? it : it.skip
+
+import posthogEE from '@posthog/ee/exports'
+
+describe('ee importing', () => {
+    ifEeIt('should import actual ee code', () => {
+        expect(posthogEE.enabled).toBe(true)
+    })
+
+    ifFossIt('should import actual ee code', () => {
+        expect(posthogEE.enabled).toBe(false)
+    })
+})

frontend/src/lib/taxonomy.tsx

@@ -661,6 +661,11 @@ export const KEY_MAPPING: KeyMappingInterface = {
             label: 'GeoIP Disabled',
             description: `Whether to skip GeoIP processing for the event.`,
         },
+        $el_text: {
+            label: 'Element Text',
+            description: `The text of the element that was clicked. Only sent with Autocapture events.`,
+            examples: ['Click here!'],
+        },
         // NOTE: This is a hack. $session_duration is a session property, not an event property
         // but we don't do a good job of tracking property types, so making it a session property
         // would require a large refactor, and this works (because all properties are treated as

frontend/src/lib/utils.tsx

@@ -391,8 +391,16 @@ export function idToKey(array: Record<string, any>[], keyField: string = 'id'):
     return object
 }
 
-export function delay(ms: number): Promise<number> {
-    return new Promise((resolve) => window.setTimeout(resolve, ms))
+export function delay(ms: number, signal?: AbortSignal): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(resolve, ms)
+        if (signal) {
+            signal.addEventListener('abort', () => {
+                clearTimeout(timeoutId)
+                reject(new DOMException('Aborted', 'AbortError'))
+            })
+        }
+    })
 }
 
 export function clearDOMTextSelection(): void {

frontend/src/queries/query.ts

@@ -35,7 +35,7 @@ import {
     isTimeToSeeDataSessionsQuery,
 } from './utils'
 
-const QUERY_ASYNC_MAX_INTERVAL_SECONDS = 10
+const QUERY_ASYNC_MAX_INTERVAL_SECONDS = 5
 const QUERY_ASYNC_TOTAL_POLL_SECONDS = 300
 
 //get export context for a given query
@@ -115,15 +115,9 @@ async function executeQuery<N extends DataNode = DataNode>(
     let currentDelay = 300 // start low, because all queries will take at minimum this
 
     while (performance.now() - pollStart < QUERY_ASYNC_TOTAL_POLL_SECONDS * 1000) {
-        await delay(currentDelay)
+        await delay(currentDelay, methodOptions?.signal)
         currentDelay = Math.min(currentDelay * 2, QUERY_ASYNC_MAX_INTERVAL_SECONDS * 1000)
 
-        if (methodOptions?.signal?.aborted) {
-            const customAbortError = new Error('Query aborted')
-            customAbortError.name = 'AbortError'
-            throw customAbortError
-        }
-
         const statusResponse = await api.queryStatus.get(response.id)
 
         if (statusResponse.complete || statusResponse.error) {

frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss

@@ -10,6 +10,8 @@
     table {
         --bar-width: 0.5rem; // This should be overriden from React
         --bar-row-height: 18rem;
+        --bar-padding-top: 1rem;
+        --bar-padding-bottom: 1.5rem;
 
         width: 100%;
         height: 100%;
@@ -20,8 +22,8 @@
                     border-bottom: 1px solid var(--border);
 
                     > td {
-                        padding: 1.5rem 0;
-                        padding-top: 1rem;
+                        padding-top: var(--bar-padding-top);
+                        padding-bottom: var(--bar-padding-bottom);
                     }
                 }
 
@@ -40,7 +42,7 @@
 }
 
 .StepBarLabels {
-    height: calc(var(--bar-row-height) - 3rem);
+    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     display: flex;
     flex-direction: column-reverse;
     align-items: flex-end;
@@ -68,7 +70,7 @@
     align-items: flex-end;
     gap: 0.125rem;
     border-bottom: 1px solid var(--border);
-    height: calc(var(--bar-row-height) - 3rem);
+    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     padding: 0 1rem;
 
     &:not(.StepBars--first) {