Merge branch 'master' into lifecycle-hogql-insight-2

.github/workflows/ci-backend.yml

@@ -117,7 +117,7 @@ jobs:
             - name: Install SAML (python3-saml) dependencies
               run: |
                   sudo apt-get update
-                  sudo apt-get install libxml2-dev libxmlsec1-dev libxmlsec1-openssl
+                  sudo apt-get install libxml2-dev libxmlsec1 libxmlsec1-dev libxmlsec1-openssl
 
             - name: Install python dependencies
               if: steps.cache-backend-tests.outputs.cache-hit != 'true'

.github/workflows/ci-e2e.yml

@@ -70,7 +70,7 @@ jobs:
     cypress:
         name: Cypress E2E tests (${{ strategy.job-index }})
         runs-on: ubuntu-latest
-        timeout-minutes: 30
+        timeout-minutes: 60
         needs: [chunks, changes]
         permissions:
             id-token: write # allow issuing OIDC tokens for this workflow run

.storybook/app-context.ts

@@ -9,5 +9,4 @@ export const getStorybookAppContext = (): AppContext => ({
     persisted_feature_flags: [],
     preflight: null as any, // null triggers a fetch and lets us mock the data
     switched_team: null,
-    week_start: 1,
 })

.storybook/test-runner.ts

@@ -50,7 +50,14 @@ declare module '@storybook/types' {
 }
 
 const RETRY_TIMES = 5
-const LOADER_SELECTORS = ['.ant-skeleton', '.Spinner', '.LemonSkeleton', '.LemonTableLoader', '[aria-busy="true"]']
+const LOADER_SELECTORS = [
+    '.ant-skeleton',
+    '.Spinner',
+    '.LemonSkeleton',
+    '.LemonTableLoader',
+    '[aria-busy="true"]',
+    '.SessionRecordingPlayer--buffering',
+]
 
 const customSnapshotsDir = `${process.cwd()}/frontend/__snapshots__`
 

frontend/src/lib/api.test.ts

@@ -38,8 +38,7 @@ describe('API helper', () => {
                 {
                     signal: undefined,
                     headers: {
-                        // TODO: get_session_id isn't safe in the toolbar, needs fixing in posthog-js
-                        // 'X-POSTHOG-SESSION-ID': 'fake-session-id'
+                        'X-POSTHOG-SESSION-ID': 'fake-session-id',
                     },
                 }
             )

frontend/src/lib/api.ts

@@ -611,6 +611,16 @@ const ensureProjectIdNotInvalid = (url: string): void => {
     }
 }
 
+function getSessionId(): string | undefined {
+    // get_session_id is not always present e.g. in the toolbar
+    // but our typing in the SDK doesn't make this clear
+    // TODO when the SDK makes this safe this check can be simplified
+    if (typeof posthog?.get_session_id !== 'function') {
+        return undefined
+    }
+    return posthog.get_session_id()
+}
+
 const api = {
     insights: {
         loadInsight(
@@ -1599,8 +1609,7 @@ const api = {
             response = await fetch(url, {
                 signal: options?.signal,
                 headers: {
-                    // TODO: get_session_id isn't safe in the toolbar, needs fixing in posthog-js
-                    // 'X-POSTHOG-SESSION-ID': posthog.get_session_id(),
+                    ...(getSessionId() ? { 'X-POSTHOG-SESSION-ID': getSessionId() } : {}),
                 },
             })
         } catch (e) {
@@ -1625,8 +1634,7 @@ const api = {
             headers: {
                 ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
                 'X-CSRFToken': getCookie(CSRF_COOKIE_NAME) || '',
-                // TODO: get_session_id isn't safe in the toolbar, needs fixing in posthog-js
-                // 'X-POSTHOG-SESSION-ID': posthog.get_session_id(),
+                ...(getSessionId() ? { 'X-POSTHOG-SESSION-ID': getSessionId() } : {}),
             },
             body: isFormData ? data : JSON.stringify(data),
             signal: options?.signal,
@@ -1658,8 +1666,7 @@ const api = {
             headers: {
                 ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
                 'X-CSRFToken': getCookie(CSRF_COOKIE_NAME) || '',
-                // TODO: get_session_id isn't safe in the toolbar, needs fixing in posthog-js
-                // 'X-POSTHOG-SESSION-ID': posthog.get_session_id(),
+                ...(getSessionId() ? { 'X-POSTHOG-SESSION-ID': getSessionId() } : {}),
             },
             body: data ? (isFormData ? data : JSON.stringify(data)) : undefined,
             signal: options?.signal,
@@ -1685,8 +1692,7 @@ const api = {
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',
                 'X-CSRFToken': getCookie(CSRF_COOKIE_NAME) || '',
-                // TODO: get_session_id isn't safe in the toolbar, needs fixing in posthog-js
-                // 'X-POSTHOG-SESSION-ID': posthog.get_session_id(),
+                ...(getSessionId() ? { 'X-POSTHOG-SESSION-ID': getSessionId() } : {}),
             },
         })
 

frontend/src/lib/components/ActivityLog/activityLogLogic.insight.test.tsx

@@ -4,6 +4,8 @@ import '@testing-library/jest-dom'
 import { MOCK_TEAM_ID } from 'lib/api.mock'
 import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
 
+jest.mock('lib/colors')
+
 describe('the activity log logic', () => {
     describe('humanizing insights', () => {
         const insightTestSetup = makeTestSetup(

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -1,5 +1,5 @@
 import { useValues } from 'kea'
-import { allOperatorsMapping, alphabet, capitalizeFirstLetter, formatPropertyLabel } from 'lib/utils'
+import { allOperatorsMapping, capitalizeFirstLetter, formatPropertyLabel } from 'lib/utils'
 import { LocalFilter, toLocalFilters } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
 import { humanizePathsEventTypes } from 'scenes/insights/utils'
 import { apiValueToMathType, MathCategory, MathDefinition, mathsLogic } from 'scenes/trends/mathsLogic'
@@ -15,7 +15,7 @@ import {
 import { IconCalculate, IconSubdirectoryArrowRight } from 'lib/lemon-ui/icons'
 import { LemonRow } from 'lib/lemon-ui/LemonRow'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
-import { Lettermark } from 'lib/lemon-ui/Lettermark'
+import { SeriesLetter } from 'lib/components/SeriesGlyph'
 import { Link } from 'lib/lemon-ui/Link'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
 import { PropertyKeyInfo } from '../../PropertyKeyInfo'
@@ -122,10 +122,12 @@ function SeriesDisplay({
     filter,
     insightType = InsightType.TRENDS,
     index,
+    hasBreakdown,
 }: {
     filter: LocalFilter
     insightType?: InsightType
     index: number
+    hasBreakdown: boolean
 }): JSX.Element {
     const { mathDefinitions } = useValues(mathsLogic)
 
@@ -141,7 +143,7 @@ function SeriesDisplay({
         <LemonRow
             fullWidth
             className="SeriesDisplay"
-            icon={<Lettermark name={insightType !== InsightType.FUNNELS ? alphabet[index] : index + 1} />}
+            icon={<SeriesLetter seriesIndex={index} hasBreakdown={hasBreakdown} />}
             extendedContent={
                 <>
                     {insightType !== InsightType.FUNNELS && (
@@ -241,11 +243,17 @@ export function QuerySummary({ filters }: { filters: Partial<FilterType> }): JSX
                             <PathsSummary filters={filters} />
                         ) : (
                             <>
-                                <SeriesDisplay filter={localFilters[0]} insightType={filters.insight} index={0} />
+                                <SeriesDisplay
+                                    hasBreakdown={!!filters.breakdown}
+                                    filter={localFilters[0]}
+                                    insightType={filters.insight}
+                                    index={0}
+                                />
                                 {localFilters.slice(1).map((filter, index) => (
                                     <>
                                         <LemonDivider />
                                         <SeriesDisplay
+                                            hasBreakdown={!!filters.breakdown}
                                             key={index}
                                             filter={filter}
                                             insightType={filters.insight}

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

@@ -19,6 +19,7 @@ export const TheHedgehog: StoryFn<typeof HedgehogBuddy> = () => {
                     // eslint-disable-next-line no-console
                     console.log('should close')
                 }}
+                isDarkModeOn={false}
             />
         </div>
     )

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

@@ -390,17 +390,18 @@ export function HedgehogBuddy({
     onClick: _onClick,
     onPositionChange,
     popoverOverlay,
+    isDarkModeOn,
 }: {
     actorRef?: MutableRefObject<HedgehogActor | undefined>
     onClose: () => void
     onClick?: () => void
     onPositionChange?: (actor: HedgehogActor) => void
     popoverOverlay?: React.ReactNode
+    // passed in because toolbar needs to check this differently than the app
+    isDarkModeOn: boolean
 }): JSX.Element {
     const actorRef = useRef<HedgehogActor>()
 
-    const { isDarkModeOn } = useValues(themeLogic)
-
     if (!actorRef.current) {
         actorRef.current = new HedgehogActor()
         if (_actorRef) {
@@ -538,6 +539,11 @@ export function HedgehogBuddy({
 export function HedgehogBuddyWithLogic(): JSX.Element {
     const { hedgehogModeEnabled } = useValues(hedgehogbuddyLogic)
     const { setHedgehogModeEnabled } = useActions(hedgehogbuddyLogic)
+    const { isDarkModeOn } = useValues(themeLogic)
 
-    return hedgehogModeEnabled ? <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} /> : <></>
+    return hedgehogModeEnabled ? (
+        <HedgehogBuddy onClose={() => setHedgehogModeEnabled(false)} isDarkModeOn={isDarkModeOn} />
+    ) : (
+        <></>
+    )
 }

frontend/src/lib/components/SeriesGlyph.tsx

@@ -36,7 +36,9 @@ export function SeriesLetter({ className, hasBreakdown, seriesIndex, seriesColor
                           color: color,
                           backgroundColor: hexToRGBA(color, 0.15),
                       }
-                    : undefined
+                    : {
+                          color: 'var(--default)',
+                      }
             }
         >
             {alphabet[seriesIndex]}

frontend/src/lib/constants.tsx

@@ -121,7 +121,6 @@ export const FEATURE_FLAGS = {
     // Experiments / beta features
     FUNNELS_CUE_OPT_OUT: 'funnels-cue-opt-out-7301', // owner: @neilkakkar
     RETENTION_BREAKDOWN: 'retention-breakdown', // TODO: Dropped, remove
-    WEB_PERFORMANCE: 'hackathon-apm', //owner: @pauldambra
     SMOOTHING_INTERVAL: 'smoothing-interval', // owner: @timgl
     BILLING_LIMIT: 'billing-limit', // owner: @timgl
     KAFKA_INSPECTOR: 'kafka-inspector', // owner: @yakkomajuri
@@ -136,16 +135,15 @@ export const FEATURE_FLAGS = {
     FEATURE_FLAG_ROLLOUT_UX: 'feature-flag-rollout-ux', // owner: @neilkakkar
     ROLE_BASED_ACCESS: 'role-based-access', // owner: #team-experiments, @liyiy
     QUERY_RUNNING_TIME: 'query_running_time', // owner: @mariusandra
+    QUERY_TIMINGS: 'query-timings', // owner: @mariusandra
     RECORDING_DEBUGGING: 'recording-debugging', // owner #team-monitoring
-    RECORDINGS_V2_RECORDER: 'recordings-v2-recorder', // owner: #team-monitoring
     POSTHOG_3000: 'posthog-3000', // owner: @Twixes
     ENABLE_PROMPTS: 'enable-prompts', // owner: @lharries
     FEEDBACK_SCENE: 'feedback-scene', // owner: @lharries
     NOTEBOOKS: 'notebooks', // owner: #team-monitoring
     EARLY_ACCESS_FEATURE: 'early-access-feature', // owner: @EDsCODE
     EARLY_ACCESS_FEATURE_SITE_BUTTON: 'early-access-feature-site-button', // owner: @neilkakkar
     HEDGEHOG_MODE_DEBUG: 'hedgehog-mode-debug', // owner: @benjackwhite
-    RECORDINGS_DOM_EXPLORER: 'recordings-dom-explorer', // owner: #team-monitoring
     AUTO_REDIRECT: 'auto-redirect', // owner: @lharries
     SESSION_RECORDING_BLOB_REPLAY: 'session-recording-blob-replay', // owner: #team-monitoring
     SURVEYS: 'surveys', // owner: @liyiy
@@ -158,13 +156,14 @@ export const FEATURE_FLAGS = {
     SHOW_PRODUCT_INTRO_EXISTING_PRODUCTS: 'show-product-intro-existing-products', // owner: @raquelmsmith
     ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes
     REFERRAL_SOURCE_SELECT: 'referral-source-select', // owner: @raquelmsmith
-    SESSION_RECORDING_TEST_ACCOUNTS_FILTER: 'session-recording-test-accounts-filter', // owner: #team-monitoring
     SURVEYS_MULTIPLE_CHOICE: 'surveys-multiple-choice', // owner: @liyiy
     CS_DASHBOARDS: 'cs-dashboards', // owner: @pauldambra
     NOTEBOOK_SETTINGS_WIDGETS: 'notebook-settings-widgets', // owner: #team-monitoring
     PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
     REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
     APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite
+    // owner: #team-monitoring
+    SESSION_RECORDING_ALLOW_V1_SNAPSHOTS: 'session-recording-allow-v1-snapshots',
     HOGQL_INSIGHTS: 'hogql-insights', // owner: @mariusandra
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

frontend/src/lib/hooks/useIsHovering.ts

@@ -0,0 +1,34 @@
+import { RefObject, useEffect, useState } from 'react'
+
+// adapted from https://github.com/streamich/react-use/blob/master/src/useHoverDirty.ts
+const useIsHovering = (ref: RefObject<Element>): boolean => {
+    if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
+        console.error('useHoverDirty expects a single ref argument.')
+    }
+
+    const [value, setValue] = useState(false)
+
+    useEffect(() => {
+        const onMouseOver = (): void => setValue(true)
+        const onMouseOut = (): void => setValue(false)
+
+        if (ref && ref.current) {
+            ref.current.addEventListener('mouseover', onMouseOver)
+            ref.current.addEventListener('mouseout', onMouseOut)
+        }
+
+        // fixes react-hooks/exhaustive-deps warning about stale ref elements
+        const { current } = ref
+
+        return () => {
+            if (current) {
+                current.removeEventListener('mouseover', onMouseOver)
+                current.removeEventListener('mouseout', onMouseOut)
+            }
+        }
+    }, [ref])
+
+    return value
+}
+
+export default useIsHovering

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.stories.tsx

@@ -45,35 +45,35 @@ CustomStyles.args = {
 
 export const MondayFirst: Story = BasicTemplate.bind({})
 MondayFirst.args = {
-    weekStart: 1,
+    weekStartDay: 1,
 }
 
 export const TuesdayFirst: Story = BasicTemplate.bind({})
 TuesdayFirst.args = {
-    weekStart: 2,
+    weekStartDay: 2,
 }
 
 export const WednesdayFirst: Story = BasicTemplate.bind({})
 WednesdayFirst.args = {
-    weekStart: 3,
+    weekStartDay: 3,
 }
 
 export const ThursdayFirst: Story = BasicTemplate.bind({})
 ThursdayFirst.args = {
-    weekStart: 4,
+    weekStartDay: 4,
 }
 
 export const FridayFirst: Story = BasicTemplate.bind({})
 FridayFirst.args = {
-    weekStart: 5,
+    weekStartDay: 5,
 }
 
 export const SaturdayFirst: Story = BasicTemplate.bind({})
 SaturdayFirst.args = {
-    weekStart: 6,
+    weekStartDay: 6,
 }
 
 export const SundayFirst: Story = BasicTemplate.bind({})
 SundayFirst.args = {
-    weekStart: 0,
+    weekStartDay: 0,
 }

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.test.tsx

@@ -141,6 +141,7 @@ describe('LemonCalendar', () => {
         )
         expect(calls.length).toBe(35)
         expect(calls).toEqual([
+            [dayjs('2020-01-26'), { className: 'flex-col opacity-25' }],
             [dayjs('2020-01-27'), { className: 'flex-col opacity-25' }],
             [dayjs('2020-01-28'), { className: 'flex-col opacity-25' }],
             [dayjs('2020-01-29'), { className: 'flex-col opacity-25' }],
@@ -175,7 +176,6 @@ describe('LemonCalendar', () => {
             [dayjs('2020-02-27'), { className: 'flex-col' }],
             [dayjs('2020-02-28'), { className: 'flex-col' }],
             [dayjs('2020-02-29'), { className: 'flex-col' }],
-            [dayjs('2020-03-01'), { className: 'flex-col opacity-25' }],
         ])
         const fourteen = getByDataAttr(container, 's6brap2ev')
         expect(fourteen).toBeDefined()