chore: move actions into single ellipsis menu

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

@@ -1,11 +1,14 @@
 import './PlayerMeta.scss'
 
-import { Link } from '@posthog/lemon-ui'
+import { IconEllipsis, IconTrash } from '@posthog/icons'
+import { IconDownload, IconMagic, IconSearch } from '@posthog/icons'
+import { LemonButton, LemonDialog, LemonMenu, LemonMenuItems, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { TZLabel } from 'lib/components/TZLabel'
 import { dayjs } from 'lib/dayjs'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'
@@ -23,6 +26,7 @@ import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
 import { Logo } from '~/toolbar/assets/Logo'
 
 import { PlayerMetaLinks } from './PlayerMetaLinks'
+import { sessionRecordingDataLogic } from './sessionRecordingDataLogic'
 import { sessionRecordingPlayerLogic, SessionRecordingPlayerMode } from './sessionRecordingPlayerLogic'
 
 function SessionPropertyMeta(props: {
@@ -163,7 +167,7 @@ export function PlayerMeta(): JSX.Element {
             >
                 <div
                     className={clsx(
-                        'PlayerMeta__top flex items-center gap-2 shrink-0 p-2',
+                        'PlayerMeta__top flex items-center gap-1 shrink-0 p-2',
                         isFullScreen ? ' text-xs' : 'border-b'
                     )}
                 >
@@ -206,7 +210,12 @@ export function PlayerMeta(): JSX.Element {
                         </div>
                     </div>
 
-                    {sessionRecordingId && <PlayerMetaLinks />}
+                    {sessionRecordingId && (
+                        <>
+                            <PlayerMetaLinks />
+                            {mode === SessionRecordingPlayerMode.Standard && <MenuActions />}
+                        </>
+                    )}
                 </div>
                 <div
                     className={clsx('flex items-center justify-between gap-2 whitespace-nowrap overflow-hidden', {
@@ -250,3 +259,68 @@ export function PlayerMeta(): JSX.Element {
         </DraggableToNotebook>
     )
 }
+
+const MenuActions = (): JSX.Element => {
+    const { logicProps } = useValues(sessionRecordingPlayerLogic)
+    const { exportRecordingToFile, openExplorer, deleteRecording, setIsFullScreen } =
+        useActions(sessionRecordingPlayerLogic)
+    const { fetchSimilarRecordings } = useActions(sessionRecordingDataLogic(logicProps))
+
+    const hasMobileExport = useFeatureFlag('SESSION_REPLAY_EXPORT_MOBILE_DATA')
+    const hasSimilarRecordings = useFeatureFlag('REPLAY_SIMILAR_RECORDINGS')
+
+    const onDelete = (): void => {
+        setIsFullScreen(false)
+        LemonDialog.open({
+            title: 'Delete recording',
+            description: 'Are you sure you want to delete this recording? This cannot be undone.',
+            secondaryButton: {
+                children: 'Cancel',
+            },
+            primaryButton: {
+                children: 'Delete',
+                status: 'danger',
+                onClick: deleteRecording,
+            },
+        })
+    }
+
+    const items: LemonMenuItems = [
+        {
+            label: 'Export to file',
+            onClick: exportRecordingToFile,
+            icon: <IconDownload />,
+            tooltip: 'Export recording to a file. This can be loaded later into PostHog for playback.',
+        },
+        {
+            label: 'Explore DOM',
+            onClick: openExplorer,
+            icon: <IconSearch />,
+        },
+        hasMobileExport && {
+            label: 'Export mobile replay to file',
+            onClick: () => exportRecordingToFile(true),
+            tooltip:
+                'DEBUG ONLY - Export untransformed recording to a file. This can be loaded later into PostHog for playback.',
+            icon: <IconDownload />,
+        },
+        hasSimilarRecordings && {
+            label: 'Find similar recordings',
+            onClick: fetchSimilarRecordings,
+            icon: <IconMagic />,
+            tooltip: 'DEBUG ONLY - Find similar recordings based on distance calculations via embeddings.',
+        },
+        logicProps.playerKey !== 'modal' && {
+            label: 'Delete recording',
+            status: 'danger',
+            onClick: onDelete,
+            icon: <IconTrash />,
+        },
+    ]
+
+    return (
+        <LemonMenu items={items}>
+            <LemonButton size="small" icon={<IconEllipsis />} />
+        </LemonMenu>
+    )
+}

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

@@ -1,9 +1,8 @@
-import { IconNotebook, IconPin, IconPinFilled, IconTrash } from '@posthog/icons'
+import { IconNotebook, IconPin, IconPinFilled } from '@posthog/icons'
 import { useActions, useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { IconComment, IconLink } from 'lib/lemon-ui/icons'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
-import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
@@ -57,7 +56,7 @@ function PinToPlaylistButton(): JSX.Element {
 
 export function PlayerMetaLinks(): JSX.Element {
     const { sessionRecordingId, logicProps } = useValues(sessionRecordingPlayerLogic)
-    const { setPause, deleteRecording, setIsFullScreen } = useActions(sessionRecordingPlayerLogic)
+    const { setPause, setIsFullScreen } = useActions(sessionRecordingPlayerLogic)
     const nodeLogic = useNotebookNode()
     const { closeSessionPlayer } = useActions(sessionPlayerModalLogic())
 
@@ -76,22 +75,6 @@ export function PlayerMetaLinks(): JSX.Element {
         })
     }
 
-    const onDelete = (): void => {
-        setIsFullScreen(false)
-        LemonDialog.open({
-            title: 'Delete recording',
-            description: 'Are you sure you want to delete this recording? This cannot be undone.',
-            secondaryButton: {
-                children: 'Cancel',
-            },
-            primaryButton: {
-                children: 'Delete',
-                status: 'danger',
-                onClick: deleteRecording,
-            },
-        })
-    }
-
     const commonProps: Partial<LemonButtonProps> = {
         size: 'small',
     }
@@ -149,16 +132,6 @@ export function PlayerMetaLinks(): JSX.Element {
                     ) : null}
 
                     <PinToPlaylistButton />
-
-                    {logicProps.playerKey !== 'modal' && (
-                        <LemonButton
-                            tooltip="Delete"
-                            icon={<IconTrash />}
-                            onClick={onDelete}
-                            {...commonProps}
-                            status="danger"
-                        />
-                    )}
                 </>
             ) : null}
         </div>

frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx

@@ -1,38 +1,29 @@
-import { IconDownload, IconMagic, IconPlay, IconSearch } from '@posthog/icons'
+import { IconPlay } from '@posthog/icons'
 import { LemonMenu } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { IconFullScreen, IconPause, IconSkipInactivity } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import {
     PLAYBACK_SPEEDS,
     sessionRecordingPlayerLogic,
-    SessionRecordingPlayerMode,
 } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
 
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 import { SessionPlayerState } from '~/types'
 
 import { playerSettingsLogic } from '../playerSettingsLogic'
-import { sessionRecordingDataLogic } from '../sessionRecordingDataLogic'
 import { SeekSkip, Timestamp } from './PlayerControllerTime'
 import { Seekbar } from './Seekbar'
 
 export function PlayerController(): JSX.Element {
-    const { playingState, logicProps, isFullScreen } = useValues(sessionRecordingPlayerLogic)
-    const { togglePlayPause, exportRecordingToFile, openExplorer, setIsFullScreen } =
-        useActions(sessionRecordingPlayerLogic)
-    const { fetchSimilarRecordings } = useActions(sessionRecordingDataLogic(logicProps))
+    const { playingState, isFullScreen } = useValues(sessionRecordingPlayerLogic)
+    const { togglePlayPause, setIsFullScreen } = useActions(sessionRecordingPlayerLogic)
 
     const { speed, skipInactivitySetting } = useValues(playerSettingsLogic)
     const { setSpeed, setSkipInactivitySetting } = useActions(playerSettingsLogic)
 
-    const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard
-
     const showPause = playingState === SessionPlayerState.PLAY
 
     return (
@@ -105,49 +96,6 @@ export function PlayerController(): JSX.Element {
                             />
                         </LemonButton>
                     </Tooltip>
-
-                    {mode === SessionRecordingPlayerMode.Standard && (
-                        <More
-                            overlay={
-                                <>
-                                    <LemonButton
-                                        onClick={() => exportRecordingToFile()}
-                                        fullWidth
-                                        sideIcon={<IconDownload />}
-                                        tooltip="Export recording to a file. This can be loaded later into PostHog for playback."
-                                    >
-                                        Export to file
-                                    </LemonButton>
-
-                                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_REPLAY_EXPORT_MOBILE_DATA} match={true}>
-                                        <LemonButton
-                                            onClick={() => exportRecordingToFile(true)}
-                                            fullWidth
-                                            sideIcon={<IconDownload />}
-                                            tooltip="DEBUG ONLY - Export untransformed recording to a file. This can be loaded later into PostHog for playback."
-                                        >
-                                            DEBUG Export mobile replay to file DEBUG
-                                        </LemonButton>
-                                    </FlaggedFeature>
-
-                                    <FlaggedFeature flag={FEATURE_FLAGS.REPLAY_SIMILAR_RECORDINGS} match={true}>
-                                        <LemonButton
-                                            onClick={() => fetchSimilarRecordings()}
-                                            fullWidth
-                                            sideIcon={<IconMagic />}
-                                            tooltip="DEBUG ONLY - Find similar recordings based on distance calculations via embeddings."
-                                        >
-                                            Find similar recordings
-                                        </LemonButton>
-                                    </FlaggedFeature>
-
-                                    <LemonButton onClick={() => openExplorer()} fullWidth sideIcon={<IconSearch />}>
-                                        Explore DOM
-                                    </LemonButton>
-                                </>
-                            }
-                        />
-                    )}
                 </div>
             </div>
         </div>