fix conflict

.storybook/test-runner.ts

@@ -63,17 +63,22 @@ const LOADER_SELECTORS = [
 
 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
+
 module.exports = {
     setup() {
         expect.extend({ toMatchImageSnapshot })
         jest.retryTimes(RETRY_TIMES, { logErrorsBeforeRetry: true })
+        jest.setTimeout(TEST_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(5000) // Reduce the default timeout from 30 s to 5 s to pre-empt Jest timeouts
+        browserContext.setDefaultTimeout(BROWSER_DEFAULT_TIMEOUT_MS)
         if (!skip) {
             const currentBrowser = browserContext.browser()!.browserType().name() as SupportedBrowserName
             if (snapshotBrowsers.includes(currentBrowser)) {
@@ -198,7 +203,7 @@ async function expectLocatorToMatchStorySnapshot(
     browser: SupportedBrowserName,
     options?: LocatorScreenshotOptions
 ): Promise<void> {
-    const image = await locator.screenshot({ timeout: 3000, ...options })
+    const image = await locator.screenshot({ timeout: SCREENSHOT_TIMEOUT_MS, ...options })
     let customSnapshotIdentifier = context.id
     if (browser !== 'chromium') {
         customSnapshotIdentifier += `--${browser}`

cypress/fixtures/api/session-recordings/recording.json

@@ -31,6 +31,5 @@
         "created_at": "2023-07-11T14:21:33.883000Z",
         "uuid": "01894554-925a-0000-11d9-a44d69b426d7"
     },
-    "storage": "clickhouse",
-    "pinned_count": 0
+    "storage": "object_storage"
 }

ee/session_recordings/test/test_session_recording_playlist.py

@@ -207,7 +207,6 @@ def test_get_pinned_recordings_for_playlist(self):
         ).json()
         assert len(result["results"]) == 2
         assert {x["id"] for x in result["results"]} == {session_one, session_two}
-        assert {x["pinned_count"] for x in result["results"]} == {1, 1}
 
     @patch("ee.session_recordings.session_recording_extensions.object_storage.list_objects")
     @patch("ee.session_recordings.session_recording_extensions.object_storage.copy_objects")
@@ -313,11 +312,9 @@ def test_add_remove_static_playlist_items(self):
 
         session_recording_obj_1 = SessionRecording.get_or_build(team=self.team, session_id=recording1_session_id)
         assert session_recording_obj_1
-        assert session_recording_obj_1.pinned_count == 1
 
         session_recording_obj_2 = SessionRecording.get_or_build(team=self.team, session_id=recording2_session_id)
         assert session_recording_obj_2
-        assert session_recording_obj_2.pinned_count == 2
 
         # Delete playlist items
         result = self.client.delete(

frontend/src/lib/api.ts

@@ -1293,14 +1293,21 @@ const api = {
     },
 
     recordings: {
-        async list(params: string): Promise<SessionRecordingsResponse> {
-            return await new ApiRequest().recordings().withQueryString(params).get()
+        async list(params: Record<string, any>): Promise<SessionRecordingsResponse> {
+            return await new ApiRequest().recordings().withQueryString(toParams(params)).get()
         },
         async getMatchingEvents(params: string): Promise<{ results: string[] }> {
             return await new ApiRequest().recordingMatchingEvents().withQueryString(params).get()
         },
-        async get(recordingId: SessionRecordingType['id'], params: string): Promise<SessionRecordingType> {
-            return await new ApiRequest().recording(recordingId).withQueryString(params).get()
+        async get(
+            recordingId: SessionRecordingType['id'],
+            params: Record<string, any> = {}
+        ): Promise<SessionRecordingType> {
+            return await new ApiRequest().recording(recordingId).withQueryString(toParams(params)).get()
+        },
+
+        async persist(recordingId: SessionRecordingType['id']): Promise<{ success: boolean }> {
+            return await new ApiRequest().recording(recordingId).withAction('persist').create()
         },
 
         async delete(recordingId: SessionRecordingType['id']): Promise<{ success: boolean }> {
@@ -1360,12 +1367,12 @@ const api = {
 
         async listPlaylistRecordings(
             playlistId: SessionRecordingPlaylistType['short_id'],
-            params: string
+            params: Record<string, any> = {}
         ): Promise<SessionRecordingsResponse> {
             return await new ApiRequest()
                 .recordingPlaylist(playlistId)
                 .withAction('recordings')
-                .withQueryString(params)
+                .withQueryString(toParams(params))
                 .get()
         },
 

frontend/src/lib/components/PropertyIcon.tsx

@@ -20,7 +20,7 @@ import {
 import clsx from 'clsx'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { countryCodeToFlag } from 'scenes/insights/views/WorldMap'
-import { ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react'
 
 export const PROPERTIES_ICON_MAP = {
     $browser: {
@@ -61,7 +61,7 @@ interface PropertyIconProps {
     value?: string
     className?: string
     noTooltip?: boolean
-    onClick?: (property: string, value?: string) => void
+    onClick?: HTMLAttributes<HTMLDivElement>['onClick']
     tooltipTitle?: (property: string, value?: string) => ReactNode // Tooltip title will default to `value`
 }
 
@@ -87,15 +87,7 @@ export function PropertyIcon({
     }
 
     const content = (
-        <div
-            onClick={(e) => {
-                if (onClick) {
-                    e.stopPropagation()
-                    onClick(property, value)
-                }
-            }}
-            className={clsx('inline-flex items-center', className)}
-        >
+        <div onClick={onClick} className={clsx('inline-flex items-center', className)}>
             {icon}
         </div>
     )

frontend/src/lib/components/TZLabel/index.tsx

@@ -7,13 +7,13 @@ import { teamLogic } from '../../../scenes/teamLogic'
 import { dayjs } from 'lib/dayjs'
 import clsx from 'clsx'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { LemonButton, LemonDivider, LemonDropdown } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonDropdown, LemonDropdownProps } from '@posthog/lemon-ui'
 import { IconSettings } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 
 const BASE_OUTPUT_FORMAT = 'ddd, MMM D, YYYY h:mm A'
 
-interface TZLabelRawProps {
+export type TZLabelProps = Omit<LemonDropdownProps, 'overlay' | 'trigger' | 'children'> & {
     time: string | dayjs.Dayjs
     showSeconds?: boolean
     formatDate?: string
@@ -26,7 +26,7 @@ interface TZLabelRawProps {
 const TZLabelPopoverContent = React.memo(function TZLabelPopoverContent({
     showSeconds,
     time,
-}: Pick<TZLabelRawProps, 'showSeconds'> & { time: dayjs.Dayjs }): JSX.Element {
+}: Pick<TZLabelProps, 'showSeconds'> & { time: dayjs.Dayjs }): JSX.Element {
     const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
     const { currentTeam } = useValues(teamLogic)
     const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
@@ -86,7 +86,8 @@ function TZLabelRaw({
     showPopover = true,
     noStyles = false,
     className,
-}: TZLabelRawProps): JSX.Element {
+    ...dropdownProps
+}: TZLabelProps): JSX.Element {
     const parsedTime = useMemo(() => (dayjs.isDayjs(time) ? time : dayjs(time)), [time])
 
     const format = useCallback(() => {
@@ -120,9 +121,10 @@ function TZLabelRaw({
     if (showPopover) {
         return (
             <LemonDropdown
-                trigger="hover"
                 placement="top"
                 showArrow
+                {...dropdownProps}
+                trigger="hover"
                 overlay={<TZLabelPopoverContent time={parsedTime} showSeconds={showSeconds} />}
             >
                 {innerContent}

frontend/src/lib/utils.tsx

@@ -432,31 +432,36 @@ export function objectClean<T extends Record<string | number | symbol, unknown>>
     })
     return response
 }
-export function objectCleanWithEmpty<T extends Record<string | number | symbol, unknown>>(obj: T): T {
+export function objectCleanWithEmpty<T extends Record<string | number | symbol, unknown>>(
+    obj: T,
+    ignoredKeys: string[] = []
+): T {
     const response = { ...obj }
-    Object.keys(response).forEach((key) => {
-        // remove undefined values
-        if (response[key] === undefined) {
-            delete response[key]
-        }
-        // remove empty arrays i.e. []
-        if (
-            typeof response[key] === 'object' &&
-            Array.isArray(response[key]) &&
-            (response[key] as unknown[]).length === 0
-        ) {
-            delete response[key]
-        }
-        // remove empty objects i.e. {}
-        if (
-            typeof response[key] === 'object' &&
-            !Array.isArray(response[key]) &&
-            response[key] !== null &&
-            Object.keys(response[key] as Record<string | number | symbol, unknown>).length === 0
-        ) {
-            delete response[key]
-        }
-    })
+    Object.keys(response)
+        .filter((key) => !ignoredKeys.includes(key))
+        .forEach((key) => {
+            // remove undefined values
+            if (response[key] === undefined) {
+                delete response[key]
+            }
+            // remove empty arrays i.e. []
+            if (
+                typeof response[key] === 'object' &&
+                Array.isArray(response[key]) &&
+                (response[key] as unknown[]).length === 0
+            ) {
+                delete response[key]
+            }
+            // remove empty objects i.e. {}
+            if (
+                typeof response[key] === 'object' &&
+                !Array.isArray(response[key]) &&
+                response[key] !== null &&
+                Object.keys(response[key] as Record<string | number | symbol, unknown>).length === 0
+            ) {
+                delete response[key]
+            }
+        })
     return response
 }
 

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.test.ts

@@ -281,9 +281,10 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<TrendsQuery> = {
+            const query: TrendsQuery = {
                 kind: NodeKind.TrendsQuery,
                 interval: 'day',
+                series: [],
             }
             expect(result).toEqual(query)
         })
@@ -308,7 +309,7 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<TrendsQuery> = {
+            const query: TrendsQuery = {
                 kind: NodeKind.TrendsQuery,
                 trendsFilter: {
                     smoothing_intervals: 1,
@@ -324,6 +325,7 @@ describe('filtersToQueryNode', () => {
                 breakdown: {
                     breakdown_histogram_bin_count: 1,
                 },
+                series: [],
             }
             expect(result).toEqual(query)
         })
@@ -362,7 +364,7 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<FunnelsQuery> = {
+            const query: FunnelsQuery = {
                 kind: NodeKind.FunnelsQuery,
                 funnelsFilter: {
                     funnel_viz_type: FunnelVizType.Steps,
@@ -384,6 +386,7 @@ describe('filtersToQueryNode', () => {
                     layout: FunnelLayout.horizontal,
                     hidden_legend_breakdowns: ['Chrome', 'Safari'],
                 },
+                series: [],
             }
             expect(result).toEqual(query)
         })
@@ -403,7 +406,7 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<RetentionQuery> = {
+            const query: RetentionQuery = {
                 kind: NodeKind.RetentionQuery,
                 retentionFilter: {
                     retention_type: 'retention_first_time',
@@ -443,7 +446,7 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<PathsQuery> = {
+            const query: PathsQuery = {
                 kind: NodeKind.PathsQuery,
                 pathsFilter: {
                     path_type: PathType.Screen,
@@ -479,14 +482,15 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<StickinessQuery> = {
+            const query: StickinessQuery = {
                 kind: NodeKind.StickinessQuery,
                 stickinessFilter: {
                     compare: true,
                     show_legend: true,
                     hidden_legend_indexes: [0, 10],
                     display: ChartDisplayType.ActionsLineGraph,
                 },
+                series: [],
             }
             expect(result).toEqual(query)
         })
@@ -502,11 +506,12 @@ describe('filtersToQueryNode', () => {
 
             const result = filtersToQueryNode(filters)
 
-            const query: Partial<LifecycleQuery> = {
+            const query: LifecycleQuery = {
                 kind: NodeKind.LifecycleQuery,
                 lifecycleFilter: {
                     toggledLifecycles: ['new', 'dormant'],
                 },
+                series: [],
             }
             expect(result).toEqual(query)
         })

frontend/src/queries/nodes/InsightQuery/utils/filtersToQueryNode.ts

@@ -257,5 +257,5 @@ export const filtersToQueryNode = (filters: Partial<FilterType>): InsightQueryNo
     }
 
     // remove undefined and empty array/objects and return
-    return objectCleanWithEmpty(query as Record<string, any>) as InsightQueryNode
+    return objectCleanWithEmpty(query as Record<string, any>, ['series']) as InsightQueryNode
 }

frontend/src/scenes/notebooks/Nodes/NodeWrapper.tsx

@@ -78,7 +78,6 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
 }: NodeWrapperProps<T> & NotebookNodeViewProps<T>): JSX.Element {
     const mountedNotebookLogic = useMountedLogic(notebookLogic)
     const { isEditable, editingNodeId } = useValues(notebookLogic)
-    const { setEditingNodeId } = useActions(notebookLogic)
 
     // nodeId can start null, but should then immediately be generated
     const nodeId = attributes.nodeId
@@ -93,10 +92,11 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
         resizeable: resizeableOrGenerator,
         settings,
         startExpanded,
+        defaultTitle,
     }
     const nodeLogic = useMountedLogic(notebookNodeLogic(nodeLogicProps))
     const { resizeable, expanded, actions } = useValues(nodeLogic)
-    const { setExpanded, deleteNode } = useActions(nodeLogic)
+    const { setExpanded, deleteNode, toggleEditing } = useActions(nodeLogic)
 
     const [ref, inView] = useInView({ triggerOnce: true })
     const contentRef = useRef<HTMLDivElement | null>(null)
@@ -185,11 +185,7 @@ function NodeWrapper<T extends CustomNotebookNodeAttributes>({
                                                     <>
                                                         {settings ? (
                                                             <LemonButton
-                                                                onClick={() =>
-                                                                    setEditingNodeId(
-                                                                        editingNodeId === nodeId ? null : nodeId
-                                                                    )
-                                                                }
+                                                                onClick={() => toggleEditing()}
                                                                 size="small"
                                                                 icon={<IconFilter />}
                                                                 active={editingNodeId === nodeId}