From cd4aa5185efd984c9262581ebc34e3c76b8d65b9 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Sat, 1 Feb 2025 13:17:55 +0000
Subject: [PATCH] fix: inspector search position

---
 .../player/inspector/PlayerInspectorControls.tsx      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
index a2f6303ba0761..47701d61b86cd 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -49,6 +49,7 @@ function sideActionForType({
                         (filter: SharedListMiniFilter) => {
                             return (
                                 <LemonButton
+                                    data-attr={`player-inspector-${filter.key}-mini-filter-toggle`}
                                     fullWidth
                                     size="xsmall"
                                     key={filter.name}
@@ -142,6 +143,7 @@ function NetworkFilterSettingsButton(): JSX.Element {
 
     return (
         <FilterSettingsButton
+            data-attr="player-inspector-network-toggle-all"
             type={FilterableInspectorListItemTypes.NETWORK}
             icon={<IconDashboard />}
             // we disable the filter toggle-all when there are no items
@@ -157,6 +159,7 @@ function NetworkFilterSettingsButton(): JSX.Element {
                               closeOnClickInside: false,
                               overlay: (
                                   <LemonButton
+                                      data-attr="player-inspector-network-upsell"
                                       icon={<IconGear />}
                                       fullWidth
                                       size="xsmall"
@@ -188,6 +191,7 @@ function ConsoleFilterSettingsButton(): JSX.Element {
 
     return (
         <FilterSettingsButton
+            data-attr="player-inspector-console-toggle-all"
             type={FilterableInspectorListItemTypes.CONSOLE}
             icon={<IconTerminal />}
             // we disable the filter toggle-all when there are no items
@@ -203,6 +207,7 @@ function ConsoleFilterSettingsButton(): JSX.Element {
                               closeOnClickInside: false,
                               overlay: (
                                   <LemonButton
+                                      data-attr="player-inspector-console-upsell"
                                       icon={<IconGear />}
                                       fullWidth
                                       size="xsmall"
@@ -232,6 +237,7 @@ function EventsFilterSettingsButton(): JSX.Element {
 
     return (
         <FilterSettingsButton
+            data-attr="player-inspector-events-toggle-all"
             type={FilterableInspectorListItemTypes.EVENTS}
             icon={<IconUnverifiedEvent />}
             // we disable the filter toggle-all when there are no items
@@ -262,7 +268,7 @@ export function PlayerInspectorControls(): JSX.Element {
     }, [featureFlags, setMiniFilter])
 
     return (
-        <div className="flex">
+        <div className="flex flex-col">
             <SettingsBar border="bottom" className="justify-end">
                 {mode !== SessionRecordingPlayerMode.Sharing && <EventsFilterSettingsButton />}
                 <ConsoleFilterSettingsButton />
@@ -270,6 +276,7 @@ export function PlayerInspectorControls(): JSX.Element {
                 {(window.IMPERSONATED_SESSION || featureFlags[FEATURE_FLAGS.SESSION_REPLAY_DOCTOR]) &&
                     mode !== SessionRecordingPlayerMode.Sharing && (
                         <SettingsToggle
+                            data-attr="player-inspector-doctor-toggle"
                             title="Doctor events help diagnose the health of a recording, and are used by PostHog support"
                             icon={<IconStethoscope />}
                             label="Doctor"
@@ -278,6 +285,7 @@ export function PlayerInspectorControls(): JSX.Element {
                         />
                     )}
                 <LemonButton
+                    data-attr="player-inspector-search-toggle"
                     icon={<IconSearch />}
                     size="xsmall"
                     onClick={() => {
@@ -296,6 +304,7 @@ export function PlayerInspectorControls(): JSX.Element {
             {showSearch && (
                 <div className="flex px-2 py-1">
                     <LemonInput
+                        data-attr="player-inspector-search-input"
                         size="xsmall"
                         onChange={(e) => setSearchQuery(e)}
                         placeholder="Search..."