diff --git a/.github/workflows/storybook-chromatic.yml b/.github/workflows/storybook-chromatic.yml
index 9ae51e2933067..cdf2ba0504a51 100644
--- a/.github/workflows/storybook-chromatic.yml
+++ b/.github/workflows/storybook-chromatic.yml
@@ -54,7 +54,7 @@ jobs:
runs-on: ubuntu-latest
timeout-minutes: 30
container:
- image: mcr.microsoft.com/playwright:v1.29.2 # Same as @storybook/test-runner@0.13's dependency
+ image: mcr.microsoft.com/playwright:v1.32.2 # Same as @storybook/test-runner@0.15.2's dependency
strategy:
fail-fast: false
matrix:
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
index 0ec91135cda24..908be67cb6cab 100644
--- a/.storybook/test-runner.ts
+++ b/.storybook/test-runner.ts
@@ -1,6 +1,6 @@
import { toMatchImageSnapshot } from 'jest-image-snapshot'
-import { getStoryContext, TestRunnerConfig, TestContext } from '@storybook/test-runner'
-import type { Locator, Page, LocatorScreenshotOptions } from 'playwright-core'
+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(() =>
diff --git a/Dockerfile.playwright b/Dockerfile.playwright
index 7591a53141b18..e911be228f55c 100644
--- a/Dockerfile.playwright
+++ b/Dockerfile.playwright
@@ -3,7 +3,7 @@
# We do this to ensure our reference images for visual regression tests are the same during development and in CI.
#
-FROM mcr.microsoft.com/playwright:v1.29.2
+FROM mcr.microsoft.com/playwright:v1.32.2
WORKDIR /work
diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card.png b/frontend/__snapshots__/components-cards-insight-card--insight-card.png
index febbc6faf33b6..0a38b26952afc 100644
Binary files a/frontend/__snapshots__/components-cards-insight-card--insight-card.png and b/frontend/__snapshots__/components-cards-insight-card--insight-card.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png
index e7268e9e53d57..310cd26b65415 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png
index dd65298c2ff8f..d4c096567c39b 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png differ
diff --git a/frontend/__snapshots__/filters-cohort-filters-fields-number--basic.png b/frontend/__snapshots__/filters-cohort-filters-fields-number--basic.png
index f8cb1193d87e2..d9d0a7dd0ada5 100644
Binary files a/frontend/__snapshots__/filters-cohort-filters-fields-number--basic.png and b/frontend/__snapshots__/filters-cohort-filters-fields-number--basic.png differ
diff --git a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png
index 4bf204ad1e606..d90e64ea54ca3 100644
Binary files a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png and b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters.png differ
diff --git a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png
index d6139bbdf9627..511e5bcc051b4 100644
Binary files a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png and b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png
index bc7634e3b5f1e..92882cab397a8 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--custom-styles.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png
index 3ac0dedd31030..9e1bea26011c1 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--default.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png
index 8cc57d7815d4b..751a6708b994f 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--friday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png
index 0e49faf8d2454..c2af14074c91a 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--monday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png
index f17a82b5c17f5..a79d0f0a89777 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--multiple-months.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png
index d22c3d4b650b3..5a0879568f37e 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--saturday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png
index 3ac0dedd31030..9e1bea26011c1 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--sunday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png
index 2daa09266b125..854876aec0706 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--thursday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png
index 5035ace9f02d5..34d43dec75bca 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--tuesday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png
index 2677654470c84..d1ca9e9a54ff5 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar--wednesday-first.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png
index 4c4220ef11640..b5e2113ee71af 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range--lemon-calendar-range.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png
index 4d72144b7b205..6b9f4b17649a5 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-range-inline--lemon-calendar-range-inline.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png
index 1c7c6fa99c2ed..8ea8124973d82 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png and b/frontend/__snapshots__/lemon-ui-lemon-calendar-lemon-calendar-select--lemon-calendar-select.png differ
diff --git a/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png b/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png
index f9d8d709b0563..01c803c849fb2 100644
Binary files a/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png and b/frontend/__snapshots__/lemon-ui-lemon-select--long-options.png differ
diff --git a/frontend/__snapshots__/lemon-ui-utilities--overview.png b/frontend/__snapshots__/lemon-ui-utilities--overview.png
index 646796a14a8f2..57866050bab70 100644
Binary files a/frontend/__snapshots__/lemon-ui-utilities--overview.png and b/frontend/__snapshots__/lemon-ui-utilities--overview.png differ
diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit.png b/frontend/__snapshots__/scenes-app-dashboards--edit.png
index b7fe0d4edb8c0..89cb4fa56f224 100644
Binary files a/frontend/__snapshots__/scenes-app-dashboards--edit.png and b/frontend/__snapshots__/scenes-app-dashboards--edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-dashboards--show.png b/frontend/__snapshots__/scenes-app-dashboards--show.png
index 432321bdd4a81..11b82f1a6edce 100644
Binary files a/frontend/__snapshots__/scenes-app-dashboards--show.png and b/frontend/__snapshots__/scenes-app-dashboards--show.png differ
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
index 5f7c428ad21dd..3831be858dd60 100644
Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png
index 613e89cdbc0d8..5ee7a8708613f 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-historical-trends-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png
index f62fd32d947ea..336a737d983af 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png
index 9dd59f171f782..b22467c95b46c 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png
index a290aabaf2c89..8bcadaeddb713 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png
index 61758c0e5908a..48c95635cae74 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png
index f0f18dad2910e..f7f0a786c5d30 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png
index 0e7909e11f451..9a4387639a76b 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png
index 9e9adda1263cd..4cf0295e84e27 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png
index 74c7c60a50e11..456b5fd067465 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png
index 8760764ed3a04..1a4722fdb1a6f 100644
Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom.png differ
diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png
index 774aa3c97a3e1..e68bb4406ab67 100644
Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png differ
diff --git a/frontend/__snapshots__/scenes-other-toolbar--heatmap-dark.png b/frontend/__snapshots__/scenes-other-toolbar--heatmap-dark.png
index d00fa2fb6139e..fcee0abbf1035 100644
Binary files a/frontend/__snapshots__/scenes-other-toolbar--heatmap-dark.png and b/frontend/__snapshots__/scenes-other-toolbar--heatmap-dark.png differ
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
index e080f49c67f26..e193083feef00 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelDocs.tsx
+++ b/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 (
@@ -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 (
+
+ ({ label: name, value: name }))}
+ />
+
+ )
+}
+
export const SidePanelDocs = (): JSX.Element => {
const { iframeSrc, currentUrl } = useValues(sidePanelDocsLogic)
const { updatePath, unmountIframe, closeSidePanel, handleExternalUrl } = useActions(sidePanelDocsLogic)
const ref = useRef
(null)
const [ready, setReady] = useState(false)
const { isDarkModeOn } = useValues(themeLogic)
+ const [menu, setMenu] = useState