Merge branch 'master' of https://github.com/PostHog/posthog into bran…

…ching-question-deletion-rearrangement

frontend/src/exporter/Exporter.stories.tsx

@@ -138,6 +138,7 @@ FunnelTopToBottomBreakdownInsight.args = {
 }
 
 export const FunnelHistoricalTrendsInsight: Story = Template.bind({})
+FunnelHistoricalTrendsInsight.tags = ['autodocs', 'test-skip']
 FunnelHistoricalTrendsInsight.args = {
     insight: require('../mocks/fixtures/api/projects/team_id/insights/funnelHistoricalTrends.json'),
 }

frontend/src/lib/api.ts

@@ -5,7 +5,6 @@ import { ActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { apiStatusLogic } from 'lib/logic/apiStatusLogic'
 import { objectClean, toParams } from 'lib/utils'
 import posthog from 'posthog-js'
-import { LogEntry } from 'scenes/pipeline/pipelineNodeLogsLogic'
 import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
@@ -50,6 +49,7 @@ import {
     InsightModel,
     IntegrationType,
     ListOrganizationMembersParams,
+    LogEntry,
     MediaUploadResponse,
     NewEarlyAccessFeatureType,
     NotebookListItemType,
@@ -1685,6 +1685,17 @@ const api = {
         async listIcons(params: { query?: string } = {}): Promise<HogFunctionIconResponse[]> {
             return await new ApiRequest().hogFunctions().withAction('icons').withQueryString(params).get()
         },
+
+        async createTestInvocation(
+            id: HogFunctionType['id'],
+            data: {
+                configuration: Partial<HogFunctionType>
+                mock_async_functions: boolean
+                event: any
+            }
+        ): Promise<any> {
+            return await new ApiRequest().hogFunction(id).withAction('invocations').create({ data })
+        },
     },
 
     annotations: {

frontend/src/lib/components/CodeEditors.tsx

@@ -74,7 +74,7 @@ export function CodeEditor({ options, onMount, ...editorProps }: CodeEditorProps
 }
 
 export function CodeEditorResizeable({
-    height: defaultHeight = 200,
+    height: defaultHeight,
     minHeight = '5rem',
     maxHeight = '90vh',
     ...props
@@ -84,7 +84,7 @@ export function CodeEditorResizeable({
     maxHeight?: string | number
 }): JSX.Element {
     const [height, setHeight] = useState(defaultHeight)
-    const [manualHeight, setManualHeight] = useState<number>()
+    const [manualHeight, setManualHeight] = useState<number | undefined>(defaultHeight)
 
     const ref = useRef<HTMLDivElement | null>(null)
 

frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss → frontend/src/lib/components/Playlist/Playlist.scss

@@ -1,7 +1,7 @@
 @import '../../../styles/mixins';
 @import '../../../styles/vars';
 
-.SessionRecordingsPlaylist {
+.Playlist {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -11,15 +11,15 @@
     border: 1px solid var(--border);
     border-radius: var(--radius);
 
-    .SessionRecordingsPlaylist__list {
+    .Playlist__list {
         position: relative;
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
         height: 100%;
         overflow: hidden;
 
-        &:not(.SessionRecordingsPlaylist__list--collapsed) {
+        &:not(.Playlist__list--collapsed) {
             width: 25%;
             min-width: 305px;
             max-width: 350px;
@@ -30,26 +30,19 @@
         }
     }
 
-    .SessionRecordingsPlaylist__player {
+    .Playlist__main {
         flex: 1;
         width: 100%;
         height: 100%;
         overflow: hidden;
-
-        .SessionRecordingsPlaylist__loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-top: 10rem;
-        }
     }
 
     &--embedded {
         border: none;
     }
 
     &--wide {
-        .SessionRecordingsPlaylist__player {
+        .Playlist__main {
             flex: 1;
             height: 100%;
         }

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

@@ -0,0 +1,79 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { range } from 'lib/utils'
+
+import { Playlist, PlaylistProps } from './Playlist'
+
+type Story = StoryObj<typeof Playlist>
+const meta: Meta<typeof Playlist> = {
+    title: 'Components/Playlist',
+    component: Playlist,
+}
+export default meta
+
+type ObjectType = { id: string | number }
+
+const ListItem = ({ item }: { item: ObjectType }): JSX.Element => <div className="p-1">Object {item.id}</div>
+
+const Template: StoryFn<typeof Playlist> = (props: Partial<PlaylistProps<any>>) => {
+    const mainContent = ({ activeItem }: { activeItem: ObjectType }): JSX.Element => (
+        <div className="flex items-center justify-center h-full">
+            {activeItem ? `Object ${activeItem.id} selected` : 'Select an item from the list'}
+        </div>
+    )
+
+    return (
+        <div className="h-96 min-w-[40rem]">
+            <Playlist
+                title="Title"
+                sections={[]}
+                listEmptyState={<div>No items</div>}
+                content={mainContent}
+                {...props}
+            />
+        </div>
+    )
+}
+
+export const Default: Story = Template.bind({})
+Default.args = {
+    sections: [
+        {
+            key: 'default',
+            title: 'Default section',
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}
+
+export const MultipleSections: Story = Template.bind({})
+MultipleSections.args = {
+    sections: [
+        {
+            key: 'one',
+            title: 'First section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+            initiallyOpen: true,
+        },
+        {
+            key: 'two',
+            title: 'Second section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}
+
+export const WithFooter: Story = Template.bind({})
+WithFooter.args = {
+    sections: [
+        {
+            key: 'default',
+            title: 'Section with footer',
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+            footer: <div className="px-1 py-3">Section footer</div>,
+        },
+    ],
+}