chore: cleanup recordings list (#21544)

frontend/src/lib/components/PropertyIcon.tsx

@@ -71,14 +71,7 @@ interface PropertyIconProps {
     tooltipTitle?: (property: string, value?: string) => ReactNode // Tooltip title will default to `value`
 }
 
-export function PropertyIcon({
-    property,
-    value,
-    className,
-    noTooltip,
-    tooltipTitle,
-    onClick,
-}: PropertyIconProps): JSX.Element {
+export function PropertyIcon({ property, value, className, noTooltip, tooltipTitle }: PropertyIconProps): JSX.Element {
     if (!property || !(property in PROPERTIES_ICON_MAP)) {
         return <></>
     }
@@ -93,11 +86,7 @@ export function PropertyIcon({
         icon = countryCodeToFlag(value)
     }
 
-    const content = (
-        <div onClick={onClick} className={clsx('inline-flex items-center', className)}>
-            {icon}
-        </div>
-    )
+    const content = <div className={clsx('inline-flex items-center', className)}>{icon}</div>
 
     return noTooltip ? content : <Tooltip title={tooltipTitle?.(property, value) ?? value}>{content}</Tooltip>
 }

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

@@ -19,7 +19,6 @@ import { asDisplay } from 'scenes/persons/person-utils'
 import { PersonDisplay } from 'scenes/persons/PersonDisplay'
 import { IconWindow } from 'scenes/session-recordings/player/icons'
 import { playerMetaLogic } from 'scenes/session-recordings/player/playerMetaLogic'
-import { gatherIconProperties, PropertyIcons } from 'scenes/session-recordings/playlist/SessionRecordingPreview'
 import { urls } from 'scenes/urls'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
@@ -29,23 +28,6 @@ import { PlayerMetaLinks } from './PlayerMetaLinks'
 import { sessionRecordingDataLogic } from './sessionRecordingDataLogic'
 import { sessionRecordingPlayerLogic, SessionRecordingPlayerMode } from './sessionRecordingPlayerLogic'
 
-function SessionPropertyMeta(props: {
-    fullScreen: boolean
-    iconProperties: Record<string, any>
-    predicate: (x: string) => boolean
-}): JSX.Element {
-    const gatheredProperties = gatherIconProperties(props.iconProperties)
-
-    return (
-        <PropertyIcons
-            recordingProperties={gatheredProperties}
-            iconClassnames="text-muted-alt"
-            showTooltip={false}
-            showLabel={(key) => (props.fullScreen ? key === '$geoip_country_code' : key !== '$geoip_country_code')}
-        />
-    )
-}
-
 function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element | null {
     if (!lastUrl) {
         return null
@@ -98,7 +80,6 @@ export function PlayerMeta(): JSX.Element {
         currentWindowIndex,
         startTime,
         sessionPlayerMetaDataLoading,
-        sessionProperties,
     } = useValues(playerMetaLogic(logicProps))
 
     const { ref, size } = useResizeBreakpoints({
@@ -197,17 +178,6 @@ export function PlayerMeta(): JSX.Element {
                                 </div>
                             )}
                         </div>
-                        <div className="text-muted">
-                            {sessionPlayerMetaDataLoading ? (
-                                <LemonSkeleton className="w-1/4 h-4 my-1" />
-                            ) : sessionProperties ? (
-                                <SessionPropertyMeta
-                                    fullScreen={isFullScreen}
-                                    iconProperties={sessionProperties}
-                                    predicate={(x) => !!x}
-                                />
-                            ) : null}
-                        </div>
                     </div>
 
                     {sessionRecordingId && (

frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts

@@ -190,6 +190,7 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
         setShowFilters: (showFilters: boolean) => ({ showFilters }),
         setPrefersAdvancedFilters: (prefersAdvancedFilters: boolean) => ({ prefersAdvancedFilters }),
         setQuickFilterProperties: (properties: string[]) => ({ properties }),
+        setShowRecordingListProperties: (enabled: boolean) => ({ enabled }),
         setTimestampFormat: (format: TimestampFormat) => ({ format }),
     }),
     reducers(() => ({
@@ -234,6 +235,13 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
                 setSpeed: (_, { speed }) => speed,
             },
         ],
+        showRecordingListProperties: [
+            false,
+            { persist: true },
+            {
+                setShowRecordingListProperties: (_, { enabled }) => enabled,
+            },
+        ],
         timestampFormat: [
             TimestampFormat.Relative as TimestampFormat,
             { persist: true },

frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.stories.tsx

@@ -23,45 +23,37 @@ const Template: StoryFn<typeof PropertyIcons> = (args: PropertyIconsProps) => {
 
 export const WebRecording = Template.bind({})
 WebRecording.args = {
-    iconClassnames: 'wat',
     loading: false,
-    onPropertyClick: () => {},
     recordingProperties: [
-        { label: 'Mac OS X', value: 'Mac OS X', property: '$os', tooltipValue: 'Mac OS X' },
-        { label: 'Chrome', value: 'Chrome', property: '$browser', tooltipValue: 'Chrome' },
+        { label: 'Mac OS X', value: 'Mac OS X', property: '$os' },
+        { label: 'Chrome', value: 'Chrome', property: '$browser' },
         {
             label: 'United States',
             value: 'United States',
             property: '$geoip_country_code',
-            tooltipValue: 'United States',
         },
-        { label: 'Desktop', value: 'Desktop', property: '$device_type', tooltipValue: 'Desktop' },
+        { label: 'Desktop', value: 'Desktop', property: '$device_type' },
     ],
 }
 
 export const AndroidRecording = Template.bind({})
 AndroidRecording.args = {
-    iconClassnames: 'wat',
     loading: false,
-    onPropertyClick: () => {},
     recordingProperties: [
-        { label: 'Android', value: 'Android', property: '$os_name', tooltipValue: 'Android' },
-        { label: 'Awesome Fun App', value: 'Awesome Fun App', property: '$app_name', tooltipValue: 'Awesome Fun App' },
+        { label: 'Android', value: 'Android', property: '$os_name' },
+        { label: 'Awesome Fun App', value: 'Awesome Fun App', property: '$app_name' },
         {
             label: 'United States',
             value: 'United States',
             property: '$geoip_country_code',
-            tooltipValue: 'United States',
         },
-        { label: 'Mobile', value: 'Mobile', property: '$device_type', tooltipValue: 'Mobile' },
+        { label: 'Mobile', value: 'Mobile', property: '$device_type' },
     ],
 }
 
 export const Loading = Template.bind({})
 Loading.args = {
-    iconClassnames: 'wat',
     loading: true,
-    onPropertyClick: () => {},
     recordingProperties: [],
 }
 Loading.parameters = {