Merge branch 'master' into feat/onboarding-product-config-screen

.vscode/launch.json

@@ -71,6 +71,7 @@
                 "SKIP_SERVICE_VERSION_REQUIREMENTS": "1",
                 "PRINT_SQL": "1",
                 "REPLAY_EVENTS_NEW_CONSUMER_RATIO": "1.0",
+                "AUTO_LOGIN": "True",
                 "BILLING_SERVICE_URL": "https://billing.dev.posthog.dev"
             },
             "console": "integratedTerminal",

ee/frontend/mobile-replay/transform.test.ts

@@ -346,5 +346,25 @@ describe('replay/transform', () => {
             ])
             expect(textEvent).toMatchSnapshot()
         })
+        test('omitting x and y is equivalent to setting them to 0', () => {
+            expect(
+                posthogEEModule.mobileReplay?.transformToWeb([
+                    {
+                        type: 2,
+                        data: {
+                            wireframes: [
+                                {
+                                    id: 12345,
+                                    width: 100,
+                                    height: 30,
+                                    type: 'image',
+                                },
+                            ],
+                        },
+                        timestamp: 1,
+                    },
+                ])
+            ).toMatchSnapshot()
+        })
     })
 })

ee/frontend/mobile-replay/wireframeStyle.ts

@@ -1,17 +1,33 @@
 import { MobileStyles, wireframe } from './mobile.types'
 
+function isNumber(candidate: unknown): candidate is number {
+    return typeof candidate === 'number'
+}
+
+function isString(candidate: unknown): candidate is string {
+    return typeof candidate === 'string'
+}
+
+function isUnitLike(candidate: unknown): candidate is string | number {
+    return isNumber(candidate) || (isString(candidate) && candidate.length > 0)
+}
+
 function ensureUnit(value: string | number): string {
-    return typeof value === 'number' ? `${value}px` : value.replace(/px$/g, '') + 'px'
+    return isNumber(value) ? `${value}px` : value.replace(/px$/g, '') + 'px'
 }
 
 function makeBorderStyles(wireframe: wireframe): string {
     let styles = ''
 
-    if (wireframe.style?.borderWidth) {
+    if (!wireframe.style) {
+        return styles
+    }
+
+    if (isUnitLike(wireframe.style.borderWidth)) {
         const borderWidth = ensureUnit(wireframe.style.borderWidth)
         styles += `border-width: ${borderWidth};`
     }
-    if (wireframe.style?.borderRadius) {
+    if (isUnitLike(wireframe.style.borderRadius)) {
         const borderRadius = ensureUnit(wireframe.style.borderRadius)
         styles += `border-radius: ${borderRadius};`
     }
@@ -29,13 +45,17 @@ function makeBorderStyles(wireframe: wireframe): string {
 export function makeSvgBorder(style: MobileStyles | undefined): Record<string, string> {
     const svgBorderStyles: Record<string, string> = {}
 
-    if (style?.borderWidth) {
-        svgBorderStyles['stroke-width'] = style.borderWidth.toString()
+    if (!style) {
+        return svgBorderStyles
+    }
+
+    if (isUnitLike(style.borderWidth)) {
+        svgBorderStyles['stroke-width'] = ensureUnit(style.borderWidth)
     }
-    if (style?.borderColor) {
+    if (style.borderColor) {
         svgBorderStyles.stroke = style.borderColor
     }
-    if (style?.borderRadius) {
+    if (isUnitLike(style.borderRadius)) {
         svgBorderStyles.rx = ensureUnit(style.borderRadius)
     }
 
@@ -44,19 +64,22 @@ export function makeSvgBorder(style: MobileStyles | undefined): Record<string, s
 
 export function makePositionStyles(wireframe: wireframe): string {
     let styles = ''
-    if (wireframe.width) {
+    if (isNumber(wireframe.width)) {
         styles += `width: ${ensureUnit(wireframe.width)};`
     }
-    if (wireframe.height) {
+    if (isNumber(wireframe.height)) {
         styles += `height: ${ensureUnit(wireframe.height)};`
     }
-    if (wireframe.x || wireframe.y) {
-        styles += `position: absolute;`
-        if (wireframe.x) {
-            styles += `left: ${ensureUnit(wireframe.x)};`
+
+    const posX = wireframe.x || 0
+    const posY = wireframe.y || 0
+    if (isNumber(posX) || isNumber(posY)) {
+        styles += `position: fixed;`
+        if (isNumber(posX)) {
+            styles += `left: ${ensureUnit(posX)};`
         }
-        if (wireframe.y) {
-            styles += `top: ${ensureUnit(wireframe.y)};`
+        if (isNumber(posY)) {
+            styles += `top: ${ensureUnit(posY)};`
         }
     }
     return styles
@@ -82,11 +105,16 @@ function makeLayoutStyles(wireframe: wireframe): string {
 
 function makeFontStyles(wireframe: wireframe): string {
     let styles = ''
-    if (wireframe.style?.fontSize) {
+
+    if (!wireframe.style) {
+        return styles
+    }
+
+    if (isUnitLike(wireframe.style.fontSize)) {
         styles += `font-size: ${ensureUnit(wireframe.style?.fontSize)};`
     }
-    if (wireframe.style?.fontFamily) {
-        styles += `font-family: ${wireframe.style?.fontFamily};`
+    if (wireframe.style.fontFamily) {
+        styles += `font-family: ${wireframe.style.fontFamily};`
     }
     return styles
 }

frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx

@@ -43,7 +43,7 @@ export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
 
     listeners(({ actions, values }) => ({
         openSettingsPanel: ({ settingsLogicProps }) => {
-            if (!values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'control') {
                 LemonDialog.open({
                     title: 'Settings',
                     content: <Settings {...settingsLogicProps} hideSections logicKey="modal" />,

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

@@ -32,8 +32,8 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
     selectors({
         enabledTabs: [
-            (s) => [s.featureFlags, s.isCloudOrDev],
-            (featureFlags, isCloudOrDev) => {
+            (s) => [s.featureFlags, s.isCloudOrDev, s.isReady, s.hasCompletedAllTasks],
+            (featureFlags, isCloudOrDev, isReady, hasCompletedAllTasks) => {
                 const tabs: SidePanelTab[] = []
 
                 if (featureFlags[FEATURE_FLAGS.NOTEBOOKS]) {
@@ -46,7 +46,9 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
                 tabs.push(SidePanelTab.Docs)
                 tabs.push(SidePanelTab.Settings)
-                tabs.push(SidePanelTab.Activation)
+                if (isReady && !hasCompletedAllTasks) {
+                    tabs.push(SidePanelTab.Activation)
+                }
                 tabs.push(SidePanelTab.Activity)
 
                 if (featureFlags[FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON]) {
@@ -59,7 +61,7 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
 
         visibleTabs: [
             (s) => [s.enabledTabs, s.selectedTab, s.sidePanelOpen, s.isReady, s.hasCompletedAllTasks],
-            (enabledTabs, selectedTab, sidePanelOpen, isReady, hasCompletedAllTasks): SidePanelTab[] => {
+            (enabledTabs, selectedTab, sidePanelOpen): SidePanelTab[] => {
                 return enabledTabs.filter((tab: any) => {
                     if (tab === selectedTab && sidePanelOpen) {
                         return true
@@ -70,10 +72,6 @@ export const sidePanelLogic = kea<sidePanelLogicType>([
                         return false
                     }
 
-                    if (tab === SidePanelTab.Activation && (!isReady || hasCompletedAllTasks)) {
-                        return false
-                    }
-
                     return true
                 })
             },

frontend/src/layout/navigation-3000/themeLogic.ts

@@ -36,7 +36,7 @@ export const themeLogic = kea<themeLogicType>([
                 }
                 // Dark mode is a PostHog 3000 feature
                 // User-saved preference is used when set, oterwise we fall back to the system value
-                return featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+                return featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
                     ? user?.theme_mode
                         ? user.theme_mode === 'dark'
                         : darkModeSystemPreference

frontend/src/layout/navigation/TopBar/NotebookButton.tsx

@@ -7,7 +7,7 @@ import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanel
 export function NotebookButton(): JSX.Element {
     const { visibility } = useValues(notebookPanelLogic)
     const { toggleVisibility } = useActions(notebookPanelLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const overrides3000: Partial<LemonButtonWithSideActionProps> = is3000
         ? {

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -300,7 +300,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             <SitePopoverSection>
-                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000}>
+                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000} match="test">
                     <ThemeSwitcher />
                 </FlaggedFeature>
                 <LemonButton

frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx

@@ -142,7 +142,7 @@ export function CodeSnippet({
                 />
             </div>
             <SyntaxHighlighter
-                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? synthwave84 : okaidia}
+                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? synthwave84 : okaidia}
                 language={language}
                 wrapLines={wrap}
                 lineProps={{ style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }}

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.POSTHOG_3000]
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
 
     if (isUsingCmdKSearch) {
         return <CommandBar />

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

@@ -46,7 +46,7 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { router } from 'kea-router'
 import api from 'lib/api'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { IconFlare } from 'lib/lemon-ui/icons'
+import { IconClose, IconFlare } from 'lib/lemon-ui/icons'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isMobile, isURL, uniqueBy } from 'lib/utils'
@@ -59,6 +59,9 @@ import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
+import { SidePanelTabs } from '~/layout/navigation-3000/sidepanel/SidePanel'
+import { sidePanelLogic } from '~/layout/navigation-3000/sidepanel/sidePanelLogic'
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { dashboardsModel } from '~/models/dashboardsModel'
 import { DashboardType, InsightType } from '~/types'
 
@@ -148,6 +151,8 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['setHedgehogModeEnabled'],
             commandBarLogic,
             ['setCommandBar'],
+            sidePanelStateLogic,
+            ['openSidePanel', 'closeSidePanel'],
         ],
         values: [
             teamLogic,
@@ -158,6 +163,10 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             ['featureFlags'],
             hedgehogbuddyLogic,
             ['hedgehogModeEnabled'],
+            sidePanelLogic,
+            ['enabledTabs'],
+            sidePanelStateLogic,
+            ['sidePanelOpen'],
         ],
         logic: [preflightLogic],
     }),
@@ -242,7 +251,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
     selectors({
         isUsingCmdKSearch: [
             (selectors) => [selectors.featureFlags],
-            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000],
+            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test',
         ],
         isSqueak: [
             (selectors) => [selectors.input],
@@ -963,6 +972,34 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                 },
             }
 
+            const sidepanel: Command = {
+                key: 'sidepanel',
+                scope: GLOBAL_COMMAND_SCOPE,
+                resolver: [
+                    ...values.enabledTabs.map((tab) => {
+                        const { Icon, label } = SidePanelTabs[tab]
+                        return {
+                            icon: Icon,
+                            display: `Open ${label} side panel`,
+                            executor: () => {
+                                actions.openSidePanel(tab)
+                            },
+                        }
+                    }),
+                    ...(values.sidePanelOpen
+                        ? [
+                              {
+                                  icon: IconClose,
+                                  display: 'Close side panel',
+                                  executor: () => {
+                                      actions.closeSidePanel()
+                                  },
+                              },
+                          ]
+                        : []),
+                ],
+            }
+
             actions.registerCommand(goTo)
             actions.registerCommand(openUrls)
             actions.registerCommand(debugClickhouseQueries)
@@ -971,10 +1008,11 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.registerCommand(createDashboard)
             actions.registerCommand(shareFeedback)
             actions.registerCommand(debugCopySessionRecordingURL)
-            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                 actions.registerCommand(toggleTheme)
                 actions.registerCommand(toggleHedgehogMode)
                 actions.registerCommand(shortcuts)
+                actions.registerCommand(sidepanel)
             }
         },
         beforeUnmount: () => {
@@ -989,6 +1027,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.deregisterCommand('toggle-theme')
             actions.deregisterCommand('toggle-hedgehog-mode')
             actions.deregisterCommand('shortcuts')
+            actions.deregisterCommand('sidepanel')
         },
     })),
 ])