Merge branch 'master' into feat/welcome-to-3000

.github/workflows/container-images-cd.yml

@@ -102,6 +102,7 @@ jobs:
                   message: |
                       {
                         "image_tag": "${{ steps.build.outputs.digest }}",
+                        "image_tag_unit": "${{ steps.build-unit.outputs.digest }}",
                         "context": ${{ toJson(github) }}
                       }
 

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

.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 type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test'
 import type { Mocks } from '~/mocks/utils'
 import { StoryContext } from '@storybook/types'
 

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
 

cypress/e2e/toolbar.cy.ts

@@ -11,7 +11,7 @@ describe('Toolbar', () => {
                 .then((href) => {
                     cy.visit(href)
                 })
-            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.floating-toolbar-button').should('exist')
+            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.Toolbar').should('exist')
         })
     })
 

frontend/src/layout/GlobalModals.tsx

@@ -1,7 +1,7 @@
 import { LemonModal } from '@posthog/lemon-ui'
 import { actions, kea, path, reducers, useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
+import { HedgehogBuddyWithLogic } from 'lib/components/HedgehogBuddy/HedgehogBuddyWithLogic'
 import { Prompt } from 'lib/logic/newPrompt/Prompt'
 import { Setup2FA } from 'scenes/authentication/Setup2FA'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'

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/layout/navigation-3000/themeLogic.ts

@@ -1,4 +1,4 @@
-import { actions, events, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -8,6 +8,9 @@ import type { themeLogicType } from './themeLogicType'
 
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
+    connect({
+        values: [featureFlagLogic, ['featureFlags']],
+    }),
     actions({
         toggleTheme: true,
         overrideTheme: (darkModePreference: boolean | null) => ({ darkModePreference }),
@@ -36,7 +39,7 @@ export const themeLogic = kea<themeLogicType>([
             (s) => [
                 s.darkModeSavedPreference,
                 s.darkModeSystemPreference,
-                featureFlagLogic.selectors.featureFlags,
+                s.featureFlags,
                 sceneLogic.selectors.sceneConfig,
             ],
             (darkModeSavedPreference, darkModeSystemPreference, featureFlags, sceneConfig) => {

frontend/src/lib/components/CommandPalette/CommandPalette.tsx

@@ -17,7 +17,7 @@ import { CommandResults } from './CommandResults'
 export function CommandPalette(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.CMD_K_SEARCH]
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
 
     if (isUsingCmdKSearch) {
         return <CommandBar />

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -219,7 +219,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
     selectors({
         isUsingCmdKSearch: [
             (selectors) => [selectors.featureFlags],
-            (featureFlags) => featureFlags[FEATURE_FLAGS.CMD_K_SEARCH],
+            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000],
         ],
         isSqueak: [
             (selectors) => [selectors.input],

frontend/src/lib/components/HedgehogBuddy/HedgehogAccessories.tsx

@@ -0,0 +1,36 @@
+import { capitalizeFirstLetter } from 'lib/utils'
+
+import { HedgehogBuddyAccessory } from './components/AccessoryButton'
+import { accessoryGroups, standardAccessories } from './sprites/sprites'
+
+export function HedgehogAccessories({ isDarkModeOn }: { isDarkModeOn: boolean }): JSX.Element {
+    return (
+        <>
+            <h3>Hi, I'm Max!</h3>
+            <p>
+                Don't mind me. I'm just here to keep you company.
+                <br />
+                You can move me around by clicking and dragging or control me with WASD / arrow keys.
+            </p>
+
+            {accessoryGroups.map((group) => (
+                <div key={group}>
+                    <h4>{capitalizeFirstLetter(group)}</h4>
+
+                    <div className="flex gap-2 my-2 overflow-y-auto">
+                        {Object.keys(standardAccessories)
+                            .filter((acc) => standardAccessories[acc].group === group)
+                            .map((acc) => (
+                                <HedgehogBuddyAccessory
+                                    key={acc}
+                                    accessoryKey={acc}
+                                    accessory={standardAccessories[acc]}
+                                    isDarkModeOn={isDarkModeOn}
+                                />
+                            ))}
+                    </div>
+                </div>
+            ))}
+        </>
+    )
+}

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx

@@ -1,20 +1,16 @@
 import './HedgehogBuddy.scss'
+import './HedgehogBuddy.scss'
 
-import { useActions, useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
+import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { Popover } from 'lib/lemon-ui/Popover/Popover'
-import { capitalizeFirstLetter, range, sampleOne } from 'lib/utils'
+import { range, sampleOne } from 'lib/utils'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
-import { FlaggedFeature } from '../FlaggedFeature'
-import { HedgehogBuddyAccessory } from './components/AccessoryButton'
+import { HedgehogAccessories } from './HedgehogAccessories'
 import { hedgehogbuddyLogic } from './hedgehogbuddyLogic'
 import {
-    accessoryGroups,
     AccessoryInfo,
     baseSpriteAccessoriesPath,
     baseSpritePath,
@@ -318,7 +314,10 @@ export class HedgehogActor {
             <div
                 className="HedgehogBuddy"
                 data-content={preloadContent}
-                onMouseDown={() => {
+                onMouseDown={(e) => {
+                    if (e.button !== 0) {
+                        return
+                    }
                     let moved = false
                     const onMouseMove = (e: any): void => {
                         moved = true
@@ -399,7 +398,7 @@ export function HedgehogBuddy({
     onClick?: () => void
     onPositionChange?: (actor: HedgehogActor) => void
     popoverOverlay?: React.ReactNode
-    // passed in because toolbar needs to check this differently than the app
+    // passed in as this might need to be the app's global dark mode setting or the toolbar's local one
     isDarkModeOn: boolean
 }): JSX.Element {
     const actorRef = useRef<HedgehogActor>()
@@ -478,48 +477,8 @@ export function HedgehogBuddy({
             overlay={
                 popoverOverlay || (
                     <div className="HedgehogBuddyPopover p-2 max-w-140">
-                        <h3>Hi, I'm Max!</h3>
-                        <p>
-                            Don't mind me. I'm just here to keep you company.
-                            <br />
-                            You can move me around by clicking and dragging or control me with WASD / arrow keys.
-                        </p>
-
-                        {accessoryGroups.map((group) => (
-                            <div key={group}>
-                                <h4>{capitalizeFirstLetter(group)}</h4>
-
-                                <div className="flex gap-2 my-2 overflow-y-auto">
-                                    {Object.keys(standardAccessories)
-                                        .filter((acc) => standardAccessories[acc].group === group)
-                                        .map((acc) => (
-                                            <HedgehogBuddyAccessory
-                                                key={acc}
-                                                accessoryKey={acc}
-                                                accessory={standardAccessories[acc]}
-                                            />
-                                        ))}
-                                </div>
-                            </div>
-                        ))}
-
-                        <FlaggedFeature flag={FEATURE_FLAGS.HEDGEHOG_MODE_DEBUG}>
-                            <>
-                                <LemonDivider />
-                                <div className="flex gap-2 my-2 overflow-y-auto">
-                                    {Object.keys(standardAnimations).map((x) => (
-                                        <LemonButton
-                                            key={x}
-                                            type="secondary"
-                                            size="small"
-                                            onClick={() => actor.setAnimation(x)}
-                                        >
-                                            {capitalizeFirstLetter(x)}
-                                        </LemonButton>
-                                    ))}
-                                </div>
-                            </>
-                        </FlaggedFeature>
+                        <HedgehogAccessories isDarkModeOn={isDarkModeOn} />
+
                         <LemonDivider />
                         <div className="flex justify-end gap-2">
                             <LemonButton type="secondary" status="danger" onClick={() => disappear()}>
@@ -537,15 +496,3 @@ export function HedgehogBuddy({
         </Popover>
     )
 }
-
-export function HedgehogBuddyWithLogic(): JSX.Element {
-    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
-    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
-    const { isDarkModeOn } = useValues(themeLogic)
-
-    return hedgehogModeEnabled ? (
-        <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} isDarkModeOn={isDarkModeOn} />
-    ) : (
-        <></>
-    )
-}

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyWithLogic.tsx

@@ -0,0 +1,20 @@
+import './HedgehogBuddy.scss'
+
+import { useActions, useValues } from 'kea'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+import { HedgehogBuddy } from './HedgehogBuddy'
+import { hedgehogbuddyLogic } from './hedgehogbuddyLogic'
+
+export function HedgehogBuddyWithLogic(): JSX.Element {
+    const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
+    const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
+    const { isDarkModeOn } = useValues(themeLogic)
+
+    return hedgehogModeEnabled ? (
+        <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} isDarkModeOn={isDarkModeOn} />
+    ) : (
+        <></>
+    )
+}

frontend/src/lib/components/HedgehogBuddy/components/AccessoryButton.tsx

@@ -3,20 +3,22 @@ import { IconLock } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { capitalizeFirstLetter } from 'lib/utils'
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
-
 import { hedgehogbuddyLogic } from '../hedgehogbuddyLogic'
 import { AccessoryInfo, baseSpriteAccessoriesPath } from '../sprites/sprites'
 
 export type HedgehogBuddyAccessoryProps = {
     accessory: AccessoryInfo
     accessoryKey: string
+    isDarkModeOn: boolean
 }
 
-export function HedgehogBuddyAccessory({ accessoryKey, accessory }: HedgehogBuddyAccessoryProps): JSX.Element {
+export function HedgehogBuddyAccessory({
+    accessoryKey,
+    accessory,
+    isDarkModeOn,
+}: HedgehogBuddyAccessoryProps): JSX.Element {
     const { accessories, availableAccessories } = useValues(hedgehogbuddyLogic)
     const { addAccessory, removeAccessory } = useActions(hedgehogbuddyLogic)
-    const { isDarkModeOn } = useValues(themeLogic)
 
     const isUnlocked = availableAccessories.includes(accessoryKey)