From 78e4f666211fc5a0c9bb3f87fdf6f7d579f85620 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Tue, 23 Apr 2024 15:02:50 +0100
Subject: [PATCH] chore: use a single timestamp format (#21653)

---
 .../lib/lemon-ui/LemonSelect/LemonSelect.tsx  |   1 +
 .../inspector/PlayerInspectorControls.tsx     | 127 +++++++-----------
 .../components/PlayerInspectorListItem.tsx    |   6 +-
 .../player/playerSettingsLogic.ts             |   9 --
 4 files changed, 51 insertions(+), 92 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
index 8e06a932310ab..3e5a03c309fbd 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -62,6 +62,7 @@ export interface LemonSelectPropsBase<T>
         | 'onClick'
         | 'tabIndex'
         | 'type'
+        | 'tooltip'
     > {
     options: LemonSelectOptions<T>
     /** Callback fired when a value is selected, even if it already is set. */
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
index 7839f697042f8..344f520648255 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -1,4 +1,4 @@
-import { IconBug, IconClock, IconDashboard, IconInfo, IconTerminal, IconX } from '@posthog/icons'
+import { IconBug, IconDashboard, IconInfo, IconTerminal, IconX } from '@posthog/icons'
 import { LemonButton, LemonCheckbox, LemonInput, LemonSelect, LemonTabs, Tooltip } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
@@ -71,8 +71,8 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
     const inspectorLogic = playerInspectorLogic(logicProps)
     const { tab, windowIdFilter, windowIds, showMatchingEventsFilter } = useValues(inspectorLogic)
     const { setWindowIdFilter, setTab } = useActions(inspectorLogic)
-    const { showOnlyMatching, timestampMode, miniFilters, searchQuery } = useValues(playerSettingsLogic)
-    const { setShowOnlyMatching, setTimestampMode, setMiniFilter, setSearchQuery } = useActions(playerSettingsLogic)
+    const { showOnlyMatching, miniFilters, searchQuery } = useValues(playerSettingsLogic)
+    const { setShowOnlyMatching, setMiniFilter, setSearchQuery } = useActions(playerSettingsLogic)
 
     const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard
 
@@ -101,7 +101,7 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
     }
 
     return (
-        <div className="bg-side border-b">
+        <div className="bg-side border-b pb-2">
             <div className="flex justify-between flex-nowrap">
                 <div className="w-2.5 mb-2 border-b shrink-0" />
                 <TabButtons tabs={tabs} logicProps={logicProps} />
@@ -110,7 +110,24 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
                 </div>
             </div>
 
-            <div className="px-2">
+            <div className="flex px-2 gap-x-3 flex-wrap gap-y-1">
+                <div className="flex flex-1 items-center">
+                    <LemonInput
+                        size="xsmall"
+                        onChange={(e) => setSearchQuery(e)}
+                        placeholder="Search..."
+                        type="search"
+                        value={searchQuery}
+                        fullWidth
+                        className="min-w-60"
+                        suffix={
+                            <Tooltip title={<InspectorSearchInfo />}>
+                                <IconInfo />
+                            </Tooltip>
+                        }
+                    />
+                </div>
+
                 <div
                     className="flex items-center gap-1 flex-wrap font-medium text-primary-alt"
                     data-attr="mini-filters"
@@ -132,77 +149,34 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
                     ))}
                 </div>
 
-                <div className="flex items-center py-1 gap-8 justify-between">
-                    <div className="flex items-center gap-2 flex-1">
-                        <div className="flex flex-1">
-                            <LemonInput
-                                size="small"
-                                onChange={(e) => setSearchQuery(e)}
-                                placeholder="Search..."
-                                type="search"
-                                value={searchQuery}
-                                fullWidth
-                                suffix={
-                                    <Tooltip title={<InspectorSearchInfo />}>
-                                        <IconInfo />
-                                    </Tooltip>
-                                }
-                            />
-                        </div>
-
-                        {windowIds.length > 1 ? (
-                            <div className="flex items-center gap-2 flex-wrap">
-                                <LemonSelect
-                                    size="small"
-                                    data-attr="player-window-select"
-                                    value={windowIdFilter}
-                                    onChange={(val) => setWindowIdFilter(val || null)}
-                                    options={[
-                                        {
-                                            value: null,
-                                            label: 'All windows',
-                                            icon: <IconWindow size="small" value="A" className="text-muted" />,
-                                        },
-                                        ...windowIds.map((windowId, index) => ({
-                                            value: windowId,
-                                            label: `Window ${index + 1}`,
-                                            icon: <IconWindow size="small" value={index + 1} className="text-muted" />,
-                                        })),
-                                    ]}
-                                />
-                                <Tooltip
-                                    title="Each recording window translates to a distinct browser tab or window."
-                                    className="text-base text-muted-alt"
-                                >
-                                    <IconInfo />
-                                </Tooltip>
-                            </div>
-                        ) : null}
+                {windowIds.length > 1 ? (
+                    <div className="flex items-center gap-2">
+                        <LemonSelect
+                            size="xsmall"
+                            data-attr="player-window-select"
+                            value={windowIdFilter}
+                            onChange={(val) => setWindowIdFilter(val || null)}
+                            options={[
+                                {
+                                    value: null,
+                                    label: 'All windows',
+                                    icon: <IconWindow size="small" value="A" className="text-muted" />,
+                                },
+                                ...windowIds.map((windowId, index) => ({
+                                    value: windowId,
+                                    label: `Window ${index + 1}`,
+                                    icon: <IconWindow size="small" value={index + 1} className="text-muted" />,
+                                })),
+                            ]}
+                            tooltip="Each recording window translates to a distinct browser tab or window."
+                        />
                     </div>
+                ) : null}
 
-                    <div className="flex items-center gap-1">
-                        <LemonButton
-                            size="small"
-                            type="secondary"
-                            noPadding
-                            onClick={() => setTimestampMode(timestampMode === 'absolute' ? 'relative' : 'absolute')}
-                            tooltipPlacement="left"
-                            tooltip={
-                                timestampMode === 'absolute'
-                                    ? 'Showing absolute timestamps'
-                                    : 'Showing timestamps relative to the start of the recording'
-                            }
-                        >
-                            <span className="p-1 flex items-center gap-1">
-                                <span className=" text-xs">{capitalizeFirstLetter(timestampMode)}</span>{' '}
-                                <IconClock className="text-lg" />
-                            </span>
-                        </LemonButton>
-                    </div>
-                </div>
                 {showMatchingEventsFilter ? (
-                    <div className="flex items-center">
-                        <span className="flex items-center whitespace-nowrap text-xs gap-1">
+                    <div className="flex items-center gap-1">
+                        <LemonCheckbox checked={showOnlyMatching} size="small" onChange={setShowOnlyMatching} />
+                        <span className="flex whitespace-nowrap text-xs gap-1">
                             Only events matching filters
                             <Tooltip
                                 title="Display only the events that match the global filter."
@@ -211,13 +185,6 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
                                 <IconInfo />
                             </Tooltip>
                         </span>
-
-                        <LemonCheckbox
-                            className="mx-2"
-                            checked={showOnlyMatching}
-                            size="small"
-                            onChange={setShowOnlyMatching}
-                        />
                     </div>
                 ) : null}
             </div>
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
index 48066a4cdca9d..21bbbc007023d 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
@@ -13,7 +13,7 @@ import useResizeObserver from 'use-resize-observer'
 import { SessionRecordingPlayerTab } from '~/types'
 
 import { IconWindow } from '../../icons'
-import { playerSettingsLogic } from '../../playerSettingsLogic'
+import { playerSettingsLogic, TimestampFormat } from '../../playerSettingsLogic'
 import { sessionRecordingPlayerLogic } from '../../sessionRecordingPlayerLogic'
 import { InspectorListItem, playerInspectorLogic } from '../playerInspectorLogic'
 import { ItemConsoleLog } from './ItemConsoleLog'
@@ -68,7 +68,7 @@ export function PlayerInspectorListItem({
 }): JSX.Element {
     const { logicProps } = useValues(sessionRecordingPlayerLogic)
     const { tab, durationMs, end, expandedItems, windowIds } = useValues(playerInspectorLogic(logicProps))
-    const { timestampMode } = useValues(playerSettingsLogic)
+    const { timestampFormat } = useValues(playerSettingsLogic)
 
     const { seekToTime } = useActions(sessionRecordingPlayerLogic)
     const { setItemExpanded } = useActions(playerInspectorLogic(logicProps))
@@ -201,7 +201,7 @@ export function PlayerInspectorListItem({
             {!isExpanded ? (
                 <LemonButton size="small" noPadding onClick={() => seekToEvent()}>
                     <span className="p-1 text-xs">
-                        {timestampMode === 'absolute' ? (
+                        {timestampFormat === TimestampFormat.Absolute ? (
                             <TZLabel time={item.timestamp} formatDate="DD, MMM" formatTime="HH:mm:ss" noStyles />
                         ) : (
                             <>
diff --git a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
index a1c633a8dbd2e..381ab7d09a6e2 100644
--- a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
@@ -182,7 +182,6 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
         setHideViewedRecordings: (hideViewedRecordings: boolean) => ({ hideViewedRecordings }),
         setAutoplayDirection: (autoplayDirection: AutoplayDirection) => ({ autoplayDirection }),
         setTab: (tab: SessionRecordingPlayerTab) => ({ tab }),
-        setTimestampMode: (mode: 'absolute' | 'relative') => ({ mode }),
         setMiniFilter: (key: string, enabled: boolean) => ({ key, enabled }),
         setSearchQuery: (search: string) => ({ search }),
         setDurationTypeToShow: (type: DurationType) => ({ type }),
@@ -278,14 +277,6 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
             },
         ],
 
-        timestampMode: [
-            'relative' as 'absolute' | 'relative',
-            { persist: true },
-            {
-                setTimestampMode: (_, { mode }) => mode,
-            },
-        ],
-
         selectedMiniFilters: [
             ['all-automatic', 'console-all', 'events-all', 'performance-all'] as string[],
             { persist: true },