feat: reorg the explorer (#26514)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 29, 2024 · 052841f · 052841f
1 parent 0c761f4
commit 052841f
Show file tree

Hide file tree

Showing 12 changed files with 174 additions and 145 deletions.
diff --git a/frontend/__snapshots__/components-playerinspector--default--dark.png b/frontend/__snapshots__/components-playerinspector--default--dark.png
diff --git a/frontend/__snapshots__/components-playerinspector--default--light.png b/frontend/__snapshots__/components-playerinspector--default--light.png
diff --git a/frontend/src/lib/components/Playlist/Playlist.tsx b/frontend/src/lib/components/Playlist/Playlist.tsx
@@ -253,7 +253,7 @@ function List<
         <div className="flex flex-col w-full bg-bg-light overflow-hidden border-r h-full">
             <DraggableToNotebook href={notebooksHref}>
                 <div className="flex flex-col gap-1">
-                    <div className="shrink-0 relative flex justify-between items-center gap-0.5 whitespace-nowrap border-b">
+                    <div className="shrink-0 bg-bg-3000 relative flex justify-between items-center gap-0.5 whitespace-nowrap border-b">
                         <TitleWithCount title={title} count={itemsCount} onClickCollapse={onClickCollapse} />
                         {headerActions}
                     </div>

diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -10,6 +10,10 @@
     border: solid 1px var(--border-3000);
     border-radius: var(--radius);
 
+    &.LemonBanner--square {
+        border-radius: 0;
+    }
+
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
     }

diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -20,6 +20,7 @@ export interface LemonBannerProps {
     /** If provided, the banner will be dismissed and hidden when the key is set in localStorage. */
     dismissKey?: string
     hideIcon?: boolean
+    square?: boolean
 }
 
 /** Generic alert message. */
@@ -31,6 +32,7 @@ export function LemonBanner({
     className,
     dismissKey = '',
     hideIcon = false,
+    square = false,
 }: LemonBannerProps): JSX.Element | null {
     const logic = lemonBannerLogic({ dismissKey })
     const { isDismissed } = useValues(logic)
@@ -49,7 +51,14 @@ export function LemonBanner({
     }
 
     return (
-        <div className={clsx('LemonBanner @container', `LemonBanner--${type}`, className)}>
+        <div
+            className={clsx(
+                'LemonBanner @container',
+                `LemonBanner--${type}`,
+                className,
+                square && 'LemonBanner--square'
+            )}
+        >
             <div className="flex items-center gap-2 grow @md:px-1">
                 {!hideIcon &&
                     (type === 'warning' || type === 'error' ? (

diff --git a/frontend/src/scenes/session-recordings/components/PanelSettings.tsx b/frontend/src/scenes/session-recordings/components/PanelSettings.tsx
@@ -1,6 +1,8 @@
+import clsx from 'clsx'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { LemonMenu, LemonMenuItem, LemonMenuProps } from 'lib/lemon-ui/LemonMenu/LemonMenu'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { PropsWithChildren } from 'react'
 
 /**
  * TODO the lemon button font only has 700 and 800 weights available.
@@ -19,6 +21,28 @@ interface SettingsMenuProps extends Omit<LemonMenuProps, 'items' | 'children'> {
     closeOnClickInside?: boolean
 }
 
+export function SettingsBar({
+    children,
+    border,
+    className,
+}: PropsWithChildren<{
+    border: 'bottom' | 'top' | 'none'
+    className?: string
+}>): JSX.Element {
+    return (
+        <div
+            className={clsx(
+                border === 'bottom' && 'border-b',
+                border === 'top' && 'border-t',
+                'flex flex-row w-full overflow-hidden font-light text-small bg-bg-3000',
+                className
+            )}
+        >
+            {children}
+        </div>
+    )
+}
+
 export function SettingsMenu({
     label,
     items,
@@ -49,18 +73,21 @@ export function SettingsMenu({
     )
 }
 
-export function SettingsToggle({
-    title,
-    icon,
-    label,
-    active,
-    ...props
-}: Omit<LemonButtonProps, 'status' | 'sideAction' | 'className'> & {
-    active: boolean
-    title: string
+type SettingsButtonProps = Omit<LemonButtonProps, 'status' | 'sideAction' | 'className'> & {
+    title?: string
     icon?: JSX.Element | null
     label: JSX.Element | string
-}): JSX.Element {
+}
+
+type SettingsToggleProps = SettingsButtonProps & {
+    active: boolean
+}
+
+export function SettingsButton(props: SettingsButtonProps): JSX.Element {
+    return <SettingsToggle active={false} {...props} />
+}
+
+export function SettingsToggle({ title, icon, label, active, ...props }: SettingsToggleProps): JSX.Element {
     const button = (
         <LemonButton
             className="rounded-[0px]"

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -4,7 +4,12 @@ import { useActions, useValues } from 'kea'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
 import { IconFullScreen, IconSync } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { SettingsMenu, SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
+import {
+    SettingsBar,
+    SettingsButton,
+    SettingsMenu,
+    SettingsToggle,
+} from 'scenes/session-recordings/components/PanelSettings'
 import { playerSettingsLogic } from 'scenes/session-recordings/player/playerSettingsLogic'
 import {
     PLAYBACK_SPEEDS,
@@ -94,14 +99,13 @@ function SkipInactivity(): JSX.Element {
 }
 
 function InspectDOM(): JSX.Element {
-    const { explorerMode, sessionPlayerMetaData } = useValues(sessionRecordingPlayerLogic)
+    const { sessionPlayerMetaData } = useValues(sessionRecordingPlayerLogic)
     const { openExplorer } = useActions(sessionRecordingPlayerLogic)
 
     return (
-        <SettingsToggle
+        <SettingsButton
             title="View the DOM at this point in time in the recording"
             label="Inspect DOM"
-            active={!!explorerMode}
             data-attr="explore-dom"
             onClick={() => openExplorer()}
             disabledReason={
@@ -114,12 +118,12 @@ function InspectDOM(): JSX.Element {
 
 function PlayerBottomSettings(): JSX.Element {
     return (
-        <div className="flex flex-row bg-bg-3000 w-full overflow-hidden border-t font-light text-small">
+        <SettingsBar border="top">
             <SkipInactivity />
             <ShowMouseTail />
             <SetPlaybackSpeed />
             <InspectDOM />
-        </div>
+        </SettingsBar>
     )
 }
 

diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorBottomSettings.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorBottomSettings.tsx
@@ -2,7 +2,7 @@ import './PlayerInspectorList.scss'
 
 import { useActions, useValues } from 'kea'
 import { userPreferencesLogic } from 'lib/logic/userPreferencesLogic'
-import { SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
+import { SettingsBar, SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
 import { miniFiltersLogic } from 'scenes/session-recordings/player/inspector/miniFiltersLogic'
 
 import { FilterableInspectorListItemTypes } from '~/types'
@@ -100,10 +100,10 @@ function ShowOnlyMatching(): JSX.Element {
 
 export function PlayerInspectorBottomSettings(): JSX.Element {
     return (
-        <div className="flex flex-row bg-bg-3000 w-full overflow-hidden border-t font-light text-small">
+        <SettingsBar border="top">
             <SyncScrolling />
             <ShowOnlyMatching />
             <HideProperties />
-        </div>
+        </SettingsBar>
     )
 }
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -15,7 +15,7 @@ import { IconUnverifiedEvent } from 'lib/lemon-ui/icons'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { useEffect, useState } from 'react'
-import { SettingsMenu, SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
+import { SettingsBar, SettingsMenu, SettingsToggle } from 'scenes/session-recordings/components/PanelSettings'
 import { miniFiltersLogic, SharedListMiniFilter } from 'scenes/session-recordings/player/inspector/miniFiltersLogic'
 import { playerInspectorLogic } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
 import { teamLogic } from 'scenes/teamLogic'
@@ -91,70 +91,66 @@ export function PlayerInspectorControls(): JSX.Element {
     const hasNetworkItems = allItemsByItemType[FilterableInspectorListItemTypes.NETWORK]?.length > 0
 
     return (
-        <div className="bg-bg-3000 border-b">
-            <div className="flex flex-nowrap">
-                <div className="flex flex-1 border-b shrink-0 mr-2 items-center justify-end font-light">
-                    {mode !== SessionRecordingPlayerMode.Sharing && (
-                        <SettingsMenu
-                            items={eventsFilters}
-                            label={capitalizeFirstLetter(FilterableInspectorListItemTypes.EVENTS)}
-                            icon={<IconUnverifiedEvent />}
-                            closeOnClickInside={false}
-                        />
-                    )}
-                    <SettingsMenu
-                        items={consoleFilters}
-                        label={capitalizeFirstLetter(FilterableInspectorListItemTypes.CONSOLE)}
-                        icon={<IconTerminal />}
-                        isAvailable={hasConsoleItems || !!currentTeam?.capture_console_log_opt_in}
-                        whenUnavailable={{
-                            label: <p className="text-muted text-center">Configure console log capture in settings.</p>,
-                            onClick: () => openSettingsPanel({ sectionId: 'project-replay', settingId: 'replay' }),
-                            icon: <IconGear />,
-                        }}
-                        closeOnClickInside={false}
-                    />
+        <div className="flex">
+            <SettingsBar border="bottom" className="justify-end">
+                {mode !== SessionRecordingPlayerMode.Sharing && (
                     <SettingsMenu
-                        items={networkFilters}
-                        label={capitalizeFirstLetter(FilterableInspectorListItemTypes.NETWORK)}
-                        icon={<IconDashboard />}
-                        isAvailable={hasNetworkItems || !!currentTeam?.capture_performance_opt_in}
-                        whenUnavailable={{
-                            label: <p className="text-muted text-center">Configure network capture in settings.</p>,
-                            onClick: () =>
-                                openSettingsPanel({ sectionId: 'project-replay', settingId: 'replay-network' }),
-                            icon: <IconGear />,
-                        }}
+                        items={eventsFilters}
+                        label={capitalizeFirstLetter(FilterableInspectorListItemTypes.EVENTS)}
+                        icon={<IconUnverifiedEvent />}
                         closeOnClickInside={false}
                     />
-                    {(window.IMPERSONATED_SESSION || featureFlags[FEATURE_FLAGS.SESSION_REPLAY_DOCTOR]) &&
-                        mode !== SessionRecordingPlayerMode.Sharing && (
-                            <SettingsToggle
-                                title="Doctor events help diagnose the health of a recording, and are used by PostHog support"
-                                icon={<IconBug />}
-                                label="Doctor"
-                                active={!!miniFiltersByKey['doctor']?.enabled}
-                                onClick={() => setMiniFilter('doctor', !miniFiltersByKey['doctor']?.enabled)}
-                            />
-                        )}
-                    <LemonButton
-                        icon={<IconSearch />}
-                        size="xsmall"
-                        onClick={() => {
-                            const newState = !showSearch
-                            setShowSearch(newState)
-                            if (!newState) {
-                                // clear the search when we're hiding the search bar
-                                setSearchQuery('')
-                            }
-                        }}
-                        status={showSearch ? 'danger' : 'default'}
-                        title="Search"
-                        className="rounded-[0px]"
-                    />
-                </div>
-            </div>
-
+                )}
+                <SettingsMenu
+                    items={consoleFilters}
+                    label={capitalizeFirstLetter(FilterableInspectorListItemTypes.CONSOLE)}
+                    icon={<IconTerminal />}
+                    isAvailable={hasConsoleItems || !!currentTeam?.capture_console_log_opt_in}
+                    whenUnavailable={{
+                        label: <p className="text-muted text-center">Configure console log capture in settings.</p>,
+                        onClick: () => openSettingsPanel({ sectionId: 'project-replay', settingId: 'replay' }),
+                        icon: <IconGear />,
+                    }}
+                    closeOnClickInside={false}
+                />
+                <SettingsMenu
+                    items={networkFilters}
+                    label={capitalizeFirstLetter(FilterableInspectorListItemTypes.NETWORK)}
+                    icon={<IconDashboard />}
+                    isAvailable={hasNetworkItems || !!currentTeam?.capture_performance_opt_in}
+                    whenUnavailable={{
+                        label: <p className="text-muted text-center">Configure network capture in settings.</p>,
+                        onClick: () => openSettingsPanel({ sectionId: 'project-replay', settingId: 'replay-network' }),
+                        icon: <IconGear />,
+                    }}
+                    closeOnClickInside={false}
+                />
+                {(window.IMPERSONATED_SESSION || featureFlags[FEATURE_FLAGS.SESSION_REPLAY_DOCTOR]) &&
+                    mode !== SessionRecordingPlayerMode.Sharing && (
+                        <SettingsToggle
+                            title="Doctor events help diagnose the health of a recording, and are used by PostHog support"
+                            icon={<IconBug />}
+                            label="Doctor"
+                            active={!!miniFiltersByKey['doctor']?.enabled}
+                            onClick={() => setMiniFilter('doctor', !miniFiltersByKey['doctor']?.enabled)}
+                        />
+                    )}
+                <LemonButton
+                    icon={<IconSearch />}
+                    size="xsmall"
+                    onClick={() => {
+                        const newState = !showSearch
+                        setShowSearch(newState)
+                        if (!newState) {
+                            // clear the search when we're hiding the search bar
+                            setSearchQuery('')
+                        }
+                    }}
+                    status={showSearch ? 'danger' : 'default'}
+                    title="Search"
+                    className="rounded-[0px]"
+                />
+            </SettingsBar>
             {showSearch && (
                 <div className="flex px-2 py-1">
                     <LemonInput

diff --git a/...nd/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss b/...nd/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss