Merge branch 'master' into feature/query-slow-lane

# Conflicts:
#	frontend/src/queries/query.ts

.dockerignore

@@ -36,3 +36,5 @@
 !unit.json
 !plugin-transpiler/src
 !plugin-transpiler/*.*
+!test-runner-jest.config.js
+!test-runner-jest-environment.js

.github/actions/run-backend-tests/action.yml

@@ -83,7 +83,7 @@ runs:
         - uses: syphar/restore-virtualenv@v1
           id: cache-backend-tests
           with:
-              custom_cache_key_element: v1
+              custom_cache_key_element: v2
 
         - uses: syphar/restore-pip-download-cache@v1
           if: steps.cache-backend-tests.outputs.cache-hit != 'true'

.github/workflows/benchmark.yml

@@ -18,7 +18,7 @@ jobs:
         environment: clickhouse-benchmarks
 
         # Benchmarks are expensive to run so we only run them (periodically) against master branch and for PRs labeled `performance`
-        if: ${{ github.ref == 'refs/heads/master' || contains(github.event.pull_request.labels.*.name, 'performance')  }}
+        if: ${{ github.repository == 'PostHog/posthog' && (github.ref == 'refs/heads/master' || contains(github.event.pull_request.labels.*.name, 'performance'))  }}
 
         env:
             DATABASE_URL: 'postgres://posthog:posthog@localhost:5432/posthog'

.github/workflows/ci-backend.yml

@@ -109,7 +109,7 @@ jobs:
             - uses: syphar/restore-virtualenv@v1
               id: cache-backend-tests
               with:
-                  custom_cache_key_element: v1-
+                  custom_cache_key_element: v2-
 
             - uses: syphar/restore-pip-download-cache@v1
               if: steps.cache-backend-tests.outputs.cache-hit != 'true'
@@ -331,7 +331,7 @@ jobs:
             - uses: syphar/restore-virtualenv@v1
               id: cache-backend-tests
               with:
-                  custom_cache_key_element: v1-
+                  custom_cache_key_element: v2-
 
             - uses: syphar/restore-pip-download-cache@v1
               if: steps.cache-backend-tests.outputs.cache-hit != 'true'

.github/workflows/storybook-chromatic.yml

@@ -64,7 +64,6 @@ jobs:
             SHARD_COUNT: '2'
             CYPRESS_INSTALL_BINARY: '0'
             NODE_OPTIONS: --max-old-space-size=6144
-            JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE: '1' # Remove obsolete snapshots
             OPT_OUT_CAPTURE: 1
         outputs:
             # The below have to be manually listed unfortunately, as GitHub Actions doesn't allow matrix-dependent outputs
@@ -132,7 +131,7 @@ jobs:
                   retries=3
                   while [ $retries -gt 0 ]; do
                       pnpm exec http-server storybook-static --port 6006 --silent &
-                      if pnpm wait-on http://127.0.0.1:6006 --timeout 60; then
+                      if pnpm wait-on http://127.0.0.1:6006 --timeout 15; then
                           break
                       fi
                       retries=$((retries-1))
@@ -146,14 +145,7 @@ jobs:
                   # Update snapshots for PRs on the main repo, verify on forks, which don't have access to PostHog Bot
                   VARIANT: ${{ github.event.pull_request.head.repo.full_name == github.repository && 'update' || 'verify' }}
               run: |
-                  retries=3
-                  while [ $retries -gt 0 ]; do
-                      if pnpm test:visual-regression:stories:ci:$VARIANT --browsers ${{ matrix.browser }} --shard ${{ matrix.shard }}/$SHARD_COUNT; then
-                          break
-                      fi
-                      retries=$((retries-1))
-                      echo "Failed @storybook/test-runner, retrying... ($retries retries left)"
-                  done
+                  pnpm test:visual-regression:stories:ci:$VARIANT --browsers ${{ matrix.browser }} --shard ${{ matrix.shard }}/$SHARD_COUNT
 
             - name: Run @playwright/test (legacy, Chromium-only)
               if: matrix.browser == 'chromium' && matrix.shard == 1
@@ -163,6 +155,13 @@ jobs:
               run: |
                   pnpm test:visual-regression:legacy:ci:$VARIANT
 
+            - name: Archive failure screenshots
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              with:
+                  name: failure-screenshots-${{ matrix.browser }}
+                  path: frontend/__snapshots__/__failures__/
+
             - name: Count and optimize updated snapshots
               id: diff
               # Skip on forks

.gitignore

@@ -18,6 +18,7 @@ frontend/.cache/
 frontend/dist/
 frontend/types/
 frontend/__snapshots__/__diff_output__/
+frontend/__snapshots__/__failures__/
 *Type.ts
 frontend/pnpm-error.log
 frontend/tmp

.storybook/test-runner.ts

@@ -48,36 +48,35 @@ declare module '@storybook/types' {
     }
 }
 
-const RETRY_TIMES = 5
+const RETRY_TIMES = 3
 const LOADER_SELECTORS = [
     '.ant-skeleton',
     '.Spinner',
     '.LemonSkeleton',
     '.LemonTableLoader',
+    '.Toastify__toast-container',
     '[aria-busy="true"]',
-    '[aria-label="Content is loading..."]',
     '.SessionRecordingPlayer--buffering',
     '.Lettermark--unknown',
 ]
 
 const customSnapshotsDir = `${process.cwd()}/frontend/__snapshots__`
 
-const TEST_TIMEOUT_MS = 10000
-const BROWSER_DEFAULT_TIMEOUT_MS = 9000 // Reduce the default timeout down from 30s, to pre-empt Jest timeouts
-const SCREENSHOT_TIMEOUT_MS = 9000
+const JEST_TIMEOUT_MS = 15000
+const PLAYWRIGHT_TIMEOUT_MS = 10000 // Must be shorter than JEST_TIMEOUT_MS
 
 module.exports = {
     setup() {
         expect.extend({ toMatchImageSnapshot })
         jest.retryTimes(RETRY_TIMES, { logErrorsBeforeRetry: true })
-        jest.setTimeout(TEST_TIMEOUT_MS)
+        jest.setTimeout(JEST_TIMEOUT_MS)
     },
     async postRender(page, context) {
         const browserContext = page.context()
         const storyContext = (await getStoryContext(page, context)) as StoryContext
         const { skip = false, snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {}
 
-        browserContext.setDefaultTimeout(BROWSER_DEFAULT_TIMEOUT_MS)
+        browserContext.setDefaultTimeout(PLAYWRIGHT_TIMEOUT_MS)
         if (!skip) {
             const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName
             if (snapshotBrowsers.includes(currentBrowser)) {
@@ -122,7 +121,7 @@ async function expectStoryToMatchSnapshot(
         document.body.classList.add('storybook-test-runner')
     })
     if (waitForLoadersToDisappear) {
-        await Promise.all(LOADER_SELECTORS.map((selector) => page.waitForSelector(selector, { state: 'detached' })))
+        await page.waitForSelector(LOADER_SELECTORS.join(','), { state: 'detached' })
     }
     if (waitForSelector) {
         await page.waitForSelector(waitForSelector)
@@ -202,7 +201,7 @@ async function expectLocatorToMatchStorySnapshot(
     browser: SupportedBrowserName,
     options?: LocatorScreenshotOptions
 ): Promise<void> {
-    const image = await locator.screenshot({ timeout: SCREENSHOT_TIMEOUT_MS, ...options })
+    const image = await locator.screenshot({ ...options })
     let customSnapshotIdentifier = context.id
     if (browser !== 'chromium') {
         customSnapshotIdentifier += `--${browser}`

Dockerfile.playwright

@@ -15,6 +15,6 @@ ENV CYPRESS_INSTALL_BINARY=0
 
 RUN pnpm install --frozen-lockfile
 
-COPY playwright.config.ts webpack.config.js babel.config.js tsconfig.json ./
+COPY playwright.config.ts webpack.config.js babel.config.js tsconfig.json test-runner-jest.config.js test-runner-jest-environment.js ./
 
 COPY .storybook/ .storybook/

cypress/e2e/exports.cy.ts

@@ -15,7 +15,7 @@ describe('Exporting Insights', () => {
         )
         cy.visit(urls.insightNew())
         // apply filter
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })

cypress/e2e/retention.cy.ts

@@ -15,7 +15,7 @@ describe('Retention', () => {
         // cy.get('[data-attr=insight-retention-add-filter-group]').click()
         // cy.get('[data-attr=property-select-toggle-0]').click()
 
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').type('is_demo')

cypress/e2e/trends.cy.ts

@@ -92,7 +92,7 @@ describe('Trends', () => {
         cy.get('.taxonomic-infinite-list').find('.taxonomic-list-row').contains('Pageview').click({ force: true })
         cy.get('[data-attr=trend-element-subject-0]').should('have.text', 'Pageview')
 
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })

cypress/productAnalytics/index.ts

@@ -55,7 +55,7 @@ export function interceptInsightLoad(insightType: string): string {
 
 export const insight = {
     applyFilter: (): void => {
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })

ee/billing/billing_manager.py

@@ -191,15 +191,6 @@ def _get_stripe_portal_url(self, organization: Organization) -> BillingStatus:
 
         return data["url"]
 
-    def _get_plans(self, plan_keys: Optional[str]):
-        res = requests.get(
-            f'{BILLING_SERVICE_URL}/api/plans{"?keys=" + plan_keys if plan_keys else ""}',
-        )
-
-        handle_billing_service_error(res)
-
-        return res.json()
-
     def _get_products(self, organization: Optional[Organization]):
         headers = {}
         params = {"plan": "standard"}

frontend/src/layout/FeaturePreviews/featurePreviewsLogic.tsx

@@ -6,6 +6,7 @@ import { supportLogic } from 'lib/components/Support/supportLogic'
 import { userLogic } from 'scenes/userLogic'
 import { FEATURE_FLAGS, FeatureFlagKey } from 'lib/constants'
 import type { featurePreviewsLogicType } from './featurePreviewsLogicType'
+import { actionToUrl, router, urlToAction } from 'kea-router'
 
 /** Features that can only be toggled if you fall under the `${flagKey}-preview` flag */
 export const CONSTRAINED_PREVIEWS: Set<FeatureFlagKey> = new Set([FEATURE_FLAGS.POSTHOG_3000])
@@ -107,4 +108,25 @@ export const featurePreviewsLogic = kea<featurePreviewsLogicType>([
                     }),
         ],
     }),
+    urlToAction(({ actions }) => ({
+        '*': (_, _search, hashParams) => {
+            if (hashParams['panel'] === 'feature-previews') {
+                actions.showFeaturePreviewsModal()
+            }
+        },
+    })),
+    actionToUrl(() => {
+        return {
+            showFeaturePreviewsModal: () => {
+                const hashParams = router.values.hashParams
+                hashParams['panel'] = 'feature-previews'
+                return [router.values.location.pathname, router.values.searchParams, hashParams]
+            },
+            hideFeaturePreviewsModal: () => {
+                const hashParams = router.values.hashParams
+                delete hashParams['panel']
+                return [router.values.location.pathname, router.values.searchParams, hashParams]
+            },
+        }
+    }),
 ])

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

@@ -1,5 +1,6 @@
 .Navigation3000 {
-    --breadcrumbs-height: 3rem;
+    --breadcrumbs-height-full: 3.75rem;
+    --breadcrumbs-height-compact: 2.75rem;
     --scene-padding-y: 1rem;
     --scene-padding-x: 1rem;
 
@@ -20,7 +21,7 @@
     // `relative` is for positioning of the scene-level spinner
     position: relative;
     margin: var(--scene-padding-y) var(--scene-padding-x);
-    min-height: calc(100vh - var(--breadcrumbs-height) - var(--scene-padding-y) * 2);
+    min-height: calc(100vh - var(--breadcrumbs-height-full) - var(--scene-padding-y) * 2);
     &.Navigation3000__scene--raw {
         --scene-padding-y: 0px;
         --scene-padding-x: 0px;

frontend/src/layout/navigation-3000/components/Breadcrumbs.scss

@@ -1,40 +1,90 @@
 .Breadcrumbs3000 {
+    --breadcrumbs-compaction-rate: 0;
     z-index: var(--z-main-nav);
     position: sticky;
     top: 0;
+    display: flex;
+    align-items: start;
+    height: var(--breadcrumbs-height-full);
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.Breadcrumbs3000__content {
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     width: 100%;
     padding: 0 1rem;
-    height: var(--breadcrumbs-height);
+    height: calc(
+        var(--breadcrumbs-height-full) - (var(--breadcrumbs-height-full) - var(--breadcrumbs-height-compact)) *
+            var(--breadcrumbs-compaction-rate)
+    );
     background: var(--glass-bg-3000);
     border-bottom: 1px solid var(--glass-border-3000);
-    overflow-x: auto;
-    font-size: 0.8125rem;
+    font-size: calc(0.75rem + 0.0625rem * var(--breadcrumbs-compaction-rate));
+    line-height: 1rem;
     font-weight: 600;
     user-select: none;
+    pointer-events: auto;
+}
+
+.Breadcrumbs3000__crumbs {
+    display: flex;
+    align-items: center;
+}
+
+.Breadcrumbs3000__trail {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow-x: auto;
+}
+
+.Breadcrumbs3000__here {
+    position: relative;
+    line-height: 1.2;
+    margin: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate))) 0 0;
+    font-size: 1rem;
+    font-weight: 700;
+    overflow: hidden;
+    height: calc(1em * 1.2 * (1 - var(--breadcrumbs-compaction-rate)));
+    > span {
+        position: absolute;
+        bottom: 0;
+    }
 }
 
 .Breadcrumbs3000__breadcrumb {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     white-space: pre;
     cursor: default;
     color: var(--default);
+    overflow: hidden;
+
+    &.Link:hover {
+        color: inherit;
+    }
 
     &.Breadcrumbs3000__breadcrumb--here {
         cursor: default;
         > span {
             opacity: 1;
+            transform: translateY(calc(100% * (1 - var(--breadcrumbs-compaction-rate))));
         }
     }
 
     &.Breadcrumbs3000__breadcrumb--actionable {
         cursor: pointer;
+        &:hover > span,
+        &.Breadcrumbs3000__breadcrumb--open > span {
+            opacity: 1;
+        }
     }
 
     > span {
+        transition: opacity 200ms ease;
         opacity: 0.5;
     }