Merge branch 'master' into hackathon/metalytics

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -1,17 +1,17 @@
 import {
-    IconChat,
     IconCursorClick,
     IconDashboard,
     IconDatabase,
-    IconDecisionTree,
     IconGraph,
     IconHome,
     IconLive,
     IconLogomark,
     IconMegaphone,
+    IconMessage,
     IconNotebook,
     IconPeople,
     IconPieChart,
+    IconPlug,
     IconPlusSmall,
     IconRewindPlay,
     IconRocket,
@@ -492,7 +492,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                         {
                             identifier: Scene.Surveys,
                             label: 'Surveys',
-                            icon: <IconChat />,
+                            icon: <IconMessage />,
                             to: urls.surveys(),
                         },
                         featureFlags[FEATURE_FLAGS.PRODUCT_INTRO_PAGES] !== 'test' || hasOnboardedFeatureFlags
@@ -506,7 +506,7 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                         {
                             identifier: Scene.DataWarehouse,
                             label: 'Data warehouse',
-                            icon: <IconServer />,
+                            icon: <IconDatabase />,
                             to: isUsingSidebar ? undefined : urls.dataWarehouse(),
                         },
                         featureFlags[FEATURE_FLAGS.SQL_EDITOR]
@@ -529,8 +529,8 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                         hasOnboardedAnyProduct
                             ? {
                                   identifier: Scene.Pipeline,
-                                  label: 'Data pipeline',
-                                  icon: <IconDecisionTree />,
+                                  label: 'Data pipelines',
+                                  icon: <IconPlug />,
                                   to: urls.pipeline(),
                               }
                             : null,

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

@@ -2,13 +2,13 @@ import {
     IconAI,
     IconChevronDown,
     IconDatabase,
-    IconDecisionTree,
     IconFeatures,
     IconGraph,
     IconHelmet,
     IconMap,
     IconMessage,
     IconPieChart,
+    IconPlug,
     IconRewindPlay,
     IconStack,
     IconTestTube,
@@ -72,7 +72,7 @@ const PRODUCTS = [
     {
         name: 'Data pipelines',
         slug: 'cdp',
-        icon: <IconDecisionTree className="text-[#2EA2D3] h-5 w-5" />,
+        icon: <IconPlug className="text-[#2EA2D3] h-5 w-5" />,
     },
     {
         name: 'Data warehouse',

frontend/src/lib/components/DefinitionPopover/definitionPopoverLogic.ts

@@ -134,9 +134,11 @@ export const definitionPopoverLogic = kea<definitionPopoverLogicType>([
                         }
 
                         if (!('distinct_id_field' in item)) {
-                            const idField = Object.values(warehouseItem.fields).find((n) => n.name === 'id')
-                            if (idField) {
-                                warehouseItem['distinct_id_field'] = idField.name
+                            const distinctIdField =
+                                Object.values(warehouseItem.fields).find((n) => n.name === 'distinct_id') ??
+                                Object.values(warehouseItem.fields).find((n) => n.name === 'id')
+                            if (distinctIdField) {
+                                warehouseItem['distinct_id_field'] = distinctIdField.name
                             }
                         }
 

frontend/src/lib/utils/concurrencyController.ts

@@ -1,5 +1,5 @@
+import FastPriorityQueue from 'fastpriorityqueue'
 import { promiseResolveReject } from 'lib/utils'
-
 class ConcurrencyControllerItem<T> {
     _debugTag?: string
     _runFn: () => Promise<void>
@@ -52,7 +52,9 @@ export class ConcurrencyController {
     _concurrencyLimit: number
 
     _current: ConcurrencyControllerItem<any>[] = []
-    private _queue: ConcurrencyControllerItem<any>[] = []
+    private _queue: FastPriorityQueue<ConcurrencyControllerItem<any>> = new FastPriorityQueue(
+        (a, b) => a._priority < b._priority
+    )
 
     constructor(concurrencyLimit: number) {
         this._concurrencyLimit = concurrencyLimit
@@ -79,16 +81,15 @@ export class ConcurrencyController {
     }): Promise<T> => {
         const item = new ConcurrencyControllerItem(this, fn, abortController, priority, debugTag)
 
-        this._queue.push(item)
+        this._queue.add(item)
 
         this._tryRunNext()
 
         return item._promise
     }
 
     _runNext(): void {
-        this._queue.sort((a, b) => a._priority - b._priority)
-        const next = this._queue.shift()
+        const next = this._queue.poll()
         if (next) {
             next._runFn()
                 .catch(() => {

frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.tsx

@@ -5,14 +5,11 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { IconErrorOutline, IconSync } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { useState } from 'react'
 import { sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
 import { SessionPlayerState } from '~/types'
 
-import { PlayerUpNext } from './PlayerUpNext'
-
 const PlayerFrameOverlayContent = (): JSX.Element | null => {
     const { currentPlayerState, endReached } = useValues(sessionRecordingPlayerLogic)
     let content = null
@@ -80,26 +77,11 @@ const PlayerFrameOverlayContent = (): JSX.Element | null => {
 }
 
 export function PlayerFrameOverlay(): JSX.Element {
-    const { playlistLogic } = useValues(sessionRecordingPlayerLogic)
     const { togglePlayPause } = useActions(sessionRecordingPlayerLogic)
 
-    const [interrupted, setInterrupted] = useState(false)
-
     return (
-        <div
-            className="PlayerFrameOverlay"
-            onClick={togglePlayPause}
-            onMouseMove={() => setInterrupted(true)}
-            onMouseOut={() => setInterrupted(false)}
-        >
+        <div className="PlayerFrameOverlay" onClick={togglePlayPause}>
             <PlayerFrameOverlayContent />
-            {playlistLogic ? (
-                <PlayerUpNext
-                    playlistLogic={playlistLogic}
-                    interrupted={interrupted}
-                    clearInterrupted={() => setInterrupted(false)}
-                />
-            ) : undefined}
         </div>
     )
 }

frontend/src/scenes/session-recordings/player/PlayerUpNext.scss

@@ -1,43 +1,14 @@
 .PlayerUpNext {
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
     z-index: 11;
     transition: 250ms transform ease-out;
-
-    &--enter {
-        transform: translateY(200%);
-    }
-
-    &--enter-active,
-    &--enter-done {
-        transform: translateY(0%);
-    }
-
-    &--exit {
-        transform: translateY(0%);
-    }
-
-    &--exit-active {
-        transform: translateY(200%);
-    }
 }
 
 .PlayerUpNextButton {
-    position: relative;
     display: flex;
     align-items: center;
-    min-height: 2.5rem;
-    padding: 0.25rem 0.75rem;
     overflow: hidden;
-    font-weight: 600;
-    line-height: 1.5rem;
     cursor: pointer;
-    background-color: rgb(255 255 255 / 75%);
     backdrop-filter: blur(5px);
-    border: 1px solid rgb(0 0 0 / 50%);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation-3000);
 
     .PlayerUpNextButtonBackground {
         position: absolute;
@@ -46,7 +17,7 @@
         left: 0;
         width: 0;
         color: var(--primary-alt);
-        background-color: var(--bg-light);
+        background-color: var(--border-3000);
     }
 
     &.PlayerUpNextButton--animating {

frontend/src/scenes/session-recordings/player/PlayerUpNext.tsx

@@ -3,28 +3,39 @@ import './PlayerUpNext.scss'
 import { IconPlay } from '@posthog/icons'
 import clsx from 'clsx'
 import { BuiltLogic, useActions, useValues } from 'kea'
+import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { useEffect, useRef, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
+
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 
 import { sessionRecordingsPlaylistLogicType } from '../playlist/sessionRecordingsPlaylistLogicType'
 import { sessionRecordingPlayerLogic } from './sessionRecordingPlayerLogic'
 
 export interface PlayerUpNextProps {
     playlistLogic: BuiltLogic<sessionRecordingsPlaylistLogicType>
-    interrupted?: boolean
-    clearInterrupted?: () => void
 }
 
-export function PlayerUpNext({ interrupted, clearInterrupted, playlistLogic }: PlayerUpNextProps): JSX.Element | null {
+export function PlayerUpNext({ playlistLogic }: PlayerUpNextProps): JSX.Element | null {
     const timeoutRef = useRef<any>()
-    const { endReached } = useValues(sessionRecordingPlayerLogic)
-    const { reportNextRecordingTriggered } = useActions(sessionRecordingPlayerLogic)
+    const { endReached, playNextAnimationInterrupted } = useValues(sessionRecordingPlayerLogic)
+    const { reportNextRecordingTriggered, setPlayNextAnimationInterrupted } = useActions(sessionRecordingPlayerLogic)
     const [animate, setAnimate] = useState(false)
 
     const { nextSessionRecording } = useValues(playlistLogic)
     const { setSelectedRecordingId } = useActions(playlistLogic)
 
+    useKeyboardHotkeys({
+        n: {
+            action: () => {
+                if (nextSessionRecording?.id) {
+                    reportNextRecordingTriggered(false)
+                    setSelectedRecordingId(nextSessionRecording.id)
+                }
+            },
+        },
+    })
+
     const goToRecording = (automatic: boolean): void => {
         if (!nextSessionRecording?.id) {
             return
@@ -38,41 +49,45 @@ export function PlayerUpNext({ interrupted, clearInterrupted, playlistLogic }: P
 
         if (endReached && nextSessionRecording?.id) {
             setAnimate(true)
-            clearInterrupted?.()
+            setPlayNextAnimationInterrupted(false)
             timeoutRef.current = setTimeout(() => {
                 goToRecording(true)
-            }, 3000) // NOTE: Keep in sync with SCSS
+            }, 30000) // NOTE: Keep in sync with SCSS
         }
 
         return () => clearTimeout(timeoutRef.current)
     }, [endReached, !!nextSessionRecording])
 
     useEffect(() => {
-        if (interrupted) {
+        if (playNextAnimationInterrupted) {
             clearTimeout(timeoutRef.current)
             setAnimate(false)
         }
-    }, [interrupted])
+    }, [playNextAnimationInterrupted])
 
     if (!nextSessionRecording) {
         return null
     }
 
     return (
-        <CSSTransition in={endReached} timeout={250} classNames="PlayerUpNext-" mountOnEnter unmountOnExit>
-            <Tooltip title="Play the next recording (press enter)">
-                <div className="PlayerUpNext">
-                    <div
-                        className={clsx('PlayerUpNextButton', animate && 'PlayerUpNextButton--animating')}
-                        onClick={() => goToRecording(false)}
-                    >
-                        <div className="PlayerUpNextButtonBackground" />
-                        <div className="z-10 flex items-center gap-2">
-                            <IconPlay className="text-lg" /> Next recording
-                        </div>
+        <Tooltip
+            title={
+                <>
+                    Play the next recording <KeyboardShortcut n />
+                </>
+            }
+        >
+            <div className="PlayerUpNext text-xs">
+                <div
+                    className={clsx('px-1 py-0.5 PlayerUpNextButton', animate && 'PlayerUpNextButton--animating')}
+                    onClick={() => goToRecording(false)}
+                >
+                    <div className="PlayerUpNextButtonBackground" />
+                    <div className="z-10 flex items-center gap-1">
+                        <IconPlay className="text-lg" /> Play next
                     </div>
                 </div>
-            </Tooltip>
-        </CSSTransition>
+            </div>
+        </Tooltip>
     )
 }

frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx

@@ -92,6 +92,7 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
     const { isFullScreen, explorerMode, isBuffering, messageTooLargeWarnings } = useValues(
         sessionRecordingPlayerLogic(logicProps)
     )
+    const { setPlayNextAnimationInterrupted } = useActions(sessionRecordingPlayerLogic(logicProps))
     const speedHotkeys = useMemo(() => createPlaybackSpeedKey(setSpeed), [setSpeed])
     const { isVerticallyStacked, sidebarOpen, playbackMode } = useValues(playerSettingsLogic)
 
@@ -185,6 +186,8 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
                     `SessionRecordingPlayer--${size}`
                 )}
                 onClick={incrementClickCount}
+                onMouseMove={() => setPlayNextAnimationInterrupted(true)}
+                onMouseOut={() => setPlayNextAnimationInterrupted(false)}
             >
                 <FloatingContainerContext.Provider value={playerRef}>
                     {explorerMode ? (