Merge branch 'master' into notebook-insight-fixes-follow-up

.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/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/

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;
     }
 

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

@@ -1,36 +1,64 @@
-import React, { useState } from 'react'
-import { useValues } from 'kea'
-import { IconArrowDropDown, IconEllipsisVertical } from 'lib/lemon-ui/icons'
+import React, { useEffect, useState } from 'react'
+import { useActions, useValues } from 'kea'
+import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { Link } from 'lib/lemon-ui/Link'
 import './Breadcrumbs.scss'
 import { Breadcrumb as IBreadcrumb } from '~/types'
 import clsx from 'clsx'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
-import { LemonButton } from '@posthog/lemon-ui'
-import { NewInsightButton } from 'scenes/saved-insights/SavedInsights'
+import { LemonSkeleton } from '@posthog/lemon-ui'
+
+const COMPACTION_DISTANCE = 44
 
 /**
  * In PostHog 3000 breadcrumbs also serve as the top bar. This is marked by theses two features:
  * - The "More scene actions" button (vertical ellipsis)
  * - The "Quick scene actions" buttons (zero or more buttons on the right)
  */
 export function Breadcrumbs(): JSX.Element | null {
-    const { firstBreadcrumb, tailBreadcrumbs } = useValues(breadcrumbsLogic)
+    const { breadcrumbs } = useValues(breadcrumbsLogic)
+    const { setActionsContainer } = useActions(breadcrumbsLogic)
+
+    const [compactionRate, setCompactionRate] = useState(0)
+
+    useEffect(() => {
+        function handleScroll(): void {
+            const scrollTop = document.getElementsByTagName('main')[0].scrollTop
+            setCompactionRate(Math.min(scrollTop / COMPACTION_DISTANCE, 1))
+        }
+        const main = document.getElementsByTagName('main')[0]
+        main.addEventListener('scroll', handleScroll)
+        return () => main.removeEventListener('scroll', handleScroll)
+    }, [])
 
-    return firstBreadcrumb ? (
-        <div className="Breadcrumbs3000">
-            <Breadcrumb breadcrumb={firstBreadcrumb} index={0} />
-            {tailBreadcrumbs.map((breadcrumb, index) => (
-                <React.Fragment key={breadcrumb.name || '…'}>
-                    <div className="Breadcrumbs3000__separator" />
-                    <Breadcrumb breadcrumb={breadcrumb} index={index + 1} here={index === tailBreadcrumbs.length - 1} />
-                </React.Fragment>
-            ))}
-            {/* TODO: These buttons below are hardcoded right now, scene-based system coming in the next PR */}
-            <LemonButton className="Breadcrumbs3000__more" icon={<IconEllipsisVertical />} size="small" />
-            <div className="Breadcrumbs3000__actions">
-                <NewInsightButton dataAttr="project-home-new-insight" />
+    return breadcrumbs.length ? (
+        <div
+            className="Breadcrumbs3000"
+            style={
+                {
+                    '--breadcrumbs-compaction-rate': compactionRate,
+                } as React.CSSProperties
+            }
+        >
+            <div className="Breadcrumbs3000__content">
+                <div className="Breadcrumbs3000__trail">
+                    <div className="Breadcrumbs3000__crumbs">
+                        {breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
+                            <React.Fragment key={breadcrumb.name || '…'}>
+                                <Breadcrumb breadcrumb={breadcrumb} index={index} />
+                                <div className="Breadcrumbs3000__separator" />
+                            </React.Fragment>
+                        ))}
+                        <Breadcrumb
+                            breadcrumb={breadcrumbs[breadcrumbs.length - 1]}
+                            index={breadcrumbs.length - 1}
+                            here
+                        />
+                    </div>
+                    <Here breadcrumb={breadcrumbs[breadcrumbs.length - 1]} />
+                </div>
+                <div className="Breadcrumbs3000__actions" ref={setActionsContainer} />
             </div>
         </div>
     ) : null
@@ -50,6 +78,7 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
         <Component
             className={clsx(
                 'Breadcrumbs3000__breadcrumb',
+                popoverShown && 'Breadcrumbs3000__breadcrumb--open',
                 (breadcrumb.path || breadcrumb.popover) && 'Breadcrumbs3000__breadcrumb--actionable',
                 here && 'Breadcrumbs3000__breadcrumb--here'
             )}
@@ -59,7 +88,6 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
             data-attr={`breadcrumb-${index}`}
             to={breadcrumb.path}
         >
-            {breadcrumb.symbol}
             <span>{breadcrumb.name}</span>
             {breadcrumb.popover && <IconArrowDropDown />}
         </Component>
@@ -88,3 +116,15 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
 
     return breadcrumbContent
 }
+
+interface HereProps {
+    breadcrumb: IBreadcrumb
+}
+
+function Here({ breadcrumb }: HereProps): JSX.Element {
+    return (
+        <h1 className="Breadcrumbs3000__here">
+            <span>{breadcrumb.name || <LemonSkeleton className="w-40" />}</span>
+        </h1>
+    )
+}