Merge branch 'master' into remove-3000-flag

# Conflicts:
#	frontend/__snapshots__/scenes-app-sidepanels--side-panel-docs.png
#	frontend/src/lib/lemon-ui/Link/Link.tsx

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

@@ -1,4 +1,4 @@
-import { IconExternal } from '@posthog/icons'
+import { IconExternal, IconHome } from '@posthog/icons'
 import { LemonButton, LemonSelect, LemonSkeleton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -28,29 +28,6 @@ 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)
@@ -131,7 +108,33 @@ export const SidePanelDocs = (): JSX.Element => {
     return (
         <>
             <SidePanelPaneHeader>
-                {menu && <Menu menu={menu} activeMenuName={activeMenuName} onChange={handleMenuChange} />}
+                <LemonButton
+                    size="small"
+                    sideIcon={<IconHome />}
+                    type="secondary"
+                    onClick={() => {
+                        ref.current?.contentWindow?.postMessage(
+                            {
+                                type: 'navigate',
+                                url: '/docs',
+                            },
+                            '*'
+                        )
+                    }}
+                />
+
+                {menu && (
+                    <LemonSelect
+                        placeholder="Navigate"
+                        dropdownMatchSelectWidth={false}
+                        onChange={handleMenuChange}
+                        size="small"
+                        value={activeMenuName}
+                        options={menu.map(({ name }) => ({ label: name, value: name }))}
+                    />
+                )}
+
+                <div className="flex-1" />
                 <LemonButton
                     size="small"
                     sideIcon={<IconExternal />}

frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelDocsLogic.ts

@@ -1,7 +1,6 @@
-import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, afterMount, beforeUnmount, connect, kea, listeners, path, reducers, selectors } from 'kea'
 import { router } from 'kea-router'
-
-import { SidePanelTab } from '~/types'
+import { sceneLogic } from 'scenes/sceneLogic'
 
 import { sidePanelStateLogic } from '../sidePanelStateLogic'
 import type { sidePanelDocsLogicType } from './sidePanelDocsLogicType'
@@ -26,10 +25,10 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelDocsLogic']),
     connect({
         actions: [sidePanelStateLogic, ['openSidePanel', 'closeSidePanel']],
+        values: [sceneLogic, ['sceneConfig']],
     }),
 
     actions({
-        openDocsPage: (urlOrPath: string) => ({ urlOrPath }),
         updatePath: (path: string) => ({ path }),
         setInitialPath: (path: string) => ({ path }),
         unmountIframe: true,
@@ -68,9 +67,11 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
     }),
 
     listeners(({ actions, values }) => ({
-        openDocsPage: ({ urlOrPath }) => {
-            actions.setInitialPath(getPathFromUrl(urlOrPath))
-            actions.openSidePanel(SidePanelTab.Docs)
+        openSidePanel: ({ options }) => {
+            if (options) {
+                const initialPath = getPathFromUrl(options)
+                actions.setInitialPath(initialPath)
+            }
         },
 
         unmountIframe: () => {
@@ -82,4 +83,14 @@ export const sidePanelDocsLogic = kea<sidePanelDocsLogicType>([
             router.actions.push(getPathFromUrl(urlOrPath))
         },
     })),
+
+    afterMount(({ actions, values }) => {
+        if (values.sceneConfig?.defaultDocsPath) {
+            actions.setInitialPath(values.sceneConfig?.defaultDocsPath)
+        }
+    }),
+
+    beforeUnmount(({ actions, values }) => {
+        actions.setInitialPath(values.currentPath ?? '/docs')
+    }),
 ])

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -85,7 +85,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
         })
 
         // NOTE: Temporarily disabled - owner @corywatilo
-        // const { openDocsPage } = useActions(sidePanelDocsLogic)
+        // const { openSidePanel } = useActions(sidePanelStateLogic)
 
         const onClick = (event: React.MouseEvent<HTMLElement>): void => {
             if (event.metaKey || event.ctrlKey) {
@@ -103,7 +103,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
             // NOTE: Temporarily disabled - owner @corywatilo
             // if (typeof to === 'string' && isPostHogComDocs(to)) {
             //     event.preventDefault()
-            //     openDocsPage(to)
+            //     openSidePanel(SidePanelTab.Docs, to)
             //     return
             // }
 

frontend/src/queries/nodes/DataTable/DataTableExport.tsx

@@ -44,7 +44,7 @@ async function startDownload(query: DataTableNode, onlySelectedColumns: boolean)
             )
         } else if (isPersonsNode(query.source)) {
             exportContext['columns'] = exportContext['columns'].map((c: string) =>
-                removeExpressionComment(c) === 'person' ? 'properties.email' : c
+                removeExpressionComment(c) === 'person' ? 'email' : c
             )
         }
     }

frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx

@@ -166,7 +166,6 @@ export const LineGraph = (): JSX.Element => {
                         tooltipEl.classList.remove('above', 'below', 'no-transform')
                         tooltipEl.classList.add(tooltip.yAlign || 'no-transform')
                         tooltipEl.style.opacity = '1'
-                        tooltipEl.style.display = 'initial'
 
                         if (tooltip.body) {
                             const referenceDataPoint = tooltip.dataPoints[0] // Use this point as reference to get the date
@@ -225,8 +224,8 @@ export const LineGraph = (): JSX.Element => {
                                 ? chartClientLeft + tooltip.caretX - tooltipEl.clientWidth - 8 // If tooltip is too large (or close to the edge), show it to the left of the data point instead
                                 : defaultOffsetLeft
 
-                        tooltipEl.style.top = Math.min(tooltipClientTop, window.innerHeight) + 'px'
-                        tooltipEl.style.left = Math.min(tooltipClientLeft, window.innerWidth) + 'px'
+                        tooltipEl.style.top = tooltipClientTop + 'px'
+                        tooltipEl.style.left = tooltipClientLeft + 'px'
                     },
                 },
             },

frontend/src/queries/schema.json

@@ -1047,6 +1047,12 @@
                 "hogql": {
                     "type": "string"
                 },
+                "limit": {
+                    "type": "integer"
+                },
+                "offset": {
+                    "type": "integer"
+                },
                 "results": {
                     "items": {
                         "items": {},
@@ -1067,7 +1073,7 @@
                     "type": "array"
                 }
             },
-            "required": ["columns", "types", "results", "hogql"],
+            "required": ["columns", "types", "results", "hogql", "limit", "offset"],
             "type": "object"
         },
         "FeaturePropertyFilter": {

frontend/src/queries/schema.ts

@@ -259,6 +259,10 @@ export interface EventsQueryResponse {
     hogql: string
     hasMore?: boolean
     timings?: QueryTiming[]
+    /** @asType integer */
+    limit: number
+    /** @asType integer */
+    offset: number
 }
 export interface EventsQueryPersonColumn {
     uuid: string

frontend/src/scenes/funnels/useFunnelTooltip.tsx

@@ -112,9 +112,6 @@ export function useFunnelTooltip(showPersonsModal: boolean): React.RefObject<HTM
         const svgRect = vizRef.current?.getBoundingClientRect()
         const [tooltipRoot, tooltipEl] = ensureTooltip()
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (tooltipOrigin) {
             tooltipRoot.render(

frontend/src/scenes/insights/views/BoldNumber/BoldNumber.tsx

@@ -43,9 +43,6 @@ function useBoldNumberTooltip({
 
     useLayoutEffect(() => {
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
 
         const seriesResult = insightData?.result?.[0]
 
@@ -73,10 +70,10 @@ function useBoldNumberTooltip({
     useEffect(() => {
         const tooltipRect = tooltipEl.getBoundingClientRect()
         if (divRect) {
-            const desiredTop = window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
-            const desiredLeft = divRect.left + divRect.width / 2 - tooltipRect.width / 2
-            tooltipEl.style.top = `${Math.min(desiredTop, window.innerHeight)}px`
-            tooltipEl.style.left = `${Math.min(desiredLeft, window.innerWidth)}px`
+            tooltipEl.style.top = `${
+                window.scrollY + divRect.top - tooltipRect.height - BOLD_NUMBER_TOOLTIP_OFFSET_PX
+            }px`
+            tooltipEl.style.left = `${divRect.left + divRect.width / 2 - tooltipRect.width / 2}px`
         }
     })
 

frontend/src/scenes/insights/views/LineGraph/LineGraph.tsx

@@ -51,7 +51,6 @@ export function ensureTooltip(): [Root, HTMLElement] {
             tooltipEl = document.createElement('div')
             tooltipEl.id = 'InsightTooltipWrapper'
             tooltipEl.classList.add('InsightTooltipWrapper')
-            tooltipEl.style.display = 'none'
             document.body.appendChild(tooltipEl)
         }
 
@@ -461,7 +460,6 @@ export function LineGraph_({
                         tooltipEl.classList.remove('above', 'below', 'no-transform')
                         tooltipEl.classList.add(tooltip.yAlign || 'no-transform')
                         tooltipEl.style.opacity = '1'
-                        tooltipEl.style.display = 'initial'
 
                         if (tooltip.body) {
                             const referenceDataPoint = tooltip.dataPoints[0] // Use this point as reference to get the date
@@ -549,8 +547,8 @@ export function LineGraph_({
                                 ? chartClientLeft + tooltip.caretX - tooltipEl.clientWidth - 8 // If tooltip is too large (or close to the edge), show it to the left of the data point instead
                                 : defaultOffsetLeft
 
-                        tooltipEl.style.top = Math.min(tooltipClientTop, window.innerHeight) + 'px'
-                        tooltipEl.style.left = Math.min(tooltipClientLeft, window.innerWidth) + 'px'
+                        tooltipEl.style.top = tooltipClientTop + 'px'
+                        tooltipEl.style.left = tooltipClientLeft + 'px'
                     },
                 },
                 ...(!isBar

frontend/src/scenes/insights/views/LineGraph/PieChart.tsx

@@ -203,7 +203,6 @@ export function PieChart({
                             tooltipEl.classList.remove('above', 'below', 'no-transform')
                             tooltipEl.classList.add(tooltip.yAlign || 'no-transform')
                             tooltipEl.style.opacity = '1'
-                            tooltipEl.style.display = 'initial'
 
                             if (tooltip.body) {
                                 const referenceDataPoint = tooltip.dataPoints[0] // Use this point as reference to get the date

frontend/src/scenes/insights/views/WorldMap/WorldMap.tsx

@@ -36,9 +36,6 @@ function useWorldMapTooltip(showPersonsModal: boolean): React.RefObject<SVGSVGEl
 
     useEffect(() => {
         tooltipEl.style.opacity = isTooltipShown ? '1' : '0'
-        if (isTooltipShown) {
-            tooltipEl.style.display = 'initial'
-        }
 
         if (tooltipCoordinates) {
             tooltipRoot.render(

frontend/src/scenes/sceneTypes.ts

@@ -133,4 +133,7 @@ export interface SceneConfig {
     organizationBased?: boolean
     /** Route requires project access (used e.g. by breadcrumbs). `true` implies also `organizationBased` */
     projectBased?: boolean
+
+    /** Default docs path - what the docs side panel will open by default if this scene is active  */
+    defaultDocsPath?: string
 }