Merge branch 'master' into fix/debounc-resizes

.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/types'
@@ -110,8 +110,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')
@@ -123,7 +122,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(() =>

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/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/FunnelBarGraph/Bar.tsx

@@ -25,6 +25,7 @@ interface BarProps {
     wrapperWidth: number
 }
 type LabelPosition = 'inside' | 'outside'
+
 export function Bar({
     percentage: conversionPercentage,
     name,

frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.tsx

@@ -98,7 +98,7 @@ export function FunnelBarGraph({
                             ) : null}
                         </header>
                         <div className="funnel-inner-viz">
-                            <div className={clsx('funnel-bar-wrapper', { breakdown: isBreakdown })}>
+                            <div className={clsx('funnel-bar-wrapper', { breakdown: isBreakdown })} aria-busy={!width}>
                                 {!width ? null : isBreakdown ? (
                                     <>
                                         {step?.nested_breakdown?.map((breakdown, index) => {

package.json

@@ -295,6 +295,11 @@
     "optionalDependencies": {
         "fsevents": "^2.3.2"
     },
+    "pnpm": {
+        "overrides": {
+            "playwright": "1.32.2"
+        }
+    },
     "lint-staged": {
         "*.{json,yaml,yml}": "prettier --write",
         "*.{css,scss}": [

posthog/admin.py

@@ -33,8 +33,6 @@
 )
 from posthog.warehouse.models import DataWarehouseTable
 
-admin.site.register(DataWarehouseTable)
-
 
 class DashboardTileInline(admin.TabularInline):
     extra = 0
@@ -81,6 +79,39 @@ def organization_link(self, dashboard: Dashboard):
         )
 
 
+@admin.register(DataWarehouseTable)
+class DataWarehouseTableAdmin(admin.ModelAdmin):
+    list_display = (
+        "id",
+        "name",
+        "format",
+        "url_pattern",
+        "team_link",
+        "organization_link",
+        "created_at",
+        "created_by",
+    )
+    list_display_links = ("id", "name")
+    list_select_related = ("team", "team__organization")
+    search_fields = ("id", "name", "team__name", "team__organization__name")
+    autocomplete_fields = ("team", "created_by")
+    ordering = ("-created_at",)
+
+    def team_link(self, dashboard: Dashboard):
+        return format_html(
+            '<a href="/admin/posthog/team/{}/change/">{}</a>',
+            dashboard.team.pk,
+            dashboard.team.name,
+        )
+
+    def organization_link(self, dashboard: Dashboard):
+        return format_html(
+            '<a href="/admin/posthog/organization/{}/change/">{}</a>',
+            dashboard.team.organization.pk,
+            dashboard.team.organization.name,
+        )
+
+
 @admin.register(Text)
 class TextAdmin(admin.ModelAdmin):
     autocomplete_fields = ("created_by", "last_modified_by", "team")

posthog/warehouse/models/table.py

@@ -43,6 +43,7 @@
     "Array": StringArrayDatabaseField,
     "Map": StringJSONDatabaseField,
     "Bool": BooleanDatabaseField,
+    "Decimal": IntegerDatabaseField,
 }
 
 ExtractErrors = {