chore: restore person location to replay list (#21682)

* chore: restore person location to replay list * country tooltip * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Apr 19, 2024 · 3f6c994 · 3f6c994
1 parent 910f011
commit 3f6c994
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--dark.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--dark.png
diff --git a/frontend/src/lib/components/PropertyIcon.tsx b/frontend/src/lib/components/PropertyIcon.tsx
@@ -18,8 +18,7 @@ import {
     IconWeb,
     IconWindows,
 } from 'lib/lemon-ui/icons'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { HTMLAttributes, ReactNode } from 'react'
+import { forwardRef, HTMLAttributes, Ref } from 'react'
 import { countryCodeToFlag } from 'scenes/insights/views/WorldMap'
 
 const osIcons = {
@@ -66,12 +65,13 @@ interface PropertyIconProps {
     property: string
     value?: string
     className?: string
-    noTooltip?: boolean
     onClick?: HTMLAttributes<HTMLDivElement>['onClick']
-    tooltipTitle?: (property: string, value?: string) => ReactNode // Tooltip title will default to `value`
 }
 
-export function PropertyIcon({ property, value, className, noTooltip, tooltipTitle }: PropertyIconProps): JSX.Element {
+export const PropertyIcon = forwardRef(function PropertyIcon(
+    { property, value, className }: PropertyIconProps,
+    ref: Ref<HTMLDivElement>
+): JSX.Element {
     if (!property || !(property in PROPERTIES_ICON_MAP)) {
         return <></>
     }
@@ -86,7 +86,9 @@ export function PropertyIcon({ property, value, className, noTooltip, tooltipTit
         icon = countryCodeToFlag(value)
     }
 
-    const content = <div className={clsx('inline-flex items-center', className)}>{icon}</div>
-
-    return noTooltip ? content : <Tooltip title={tooltipTitle?.(property, value) ?? value}>{content}</Tooltip>
-}
+    return (
+        <div ref={ref} className={clsx('inline-flex items-center', className)}>
+            {icon}
+        </div>
+    )
+})
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx
@@ -1,7 +1,7 @@
 import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
 import { NotebookNodeType, PropertyDefinitionType } from '~/types'
 import { useActions, useValues } from 'kea'
-import { LemonDivider } from '@posthog/lemon-ui'
+import { LemonDivider, Tooltip } from '@posthog/lemon-ui'
 import { urls } from 'scenes/urls'
 import { PersonIcon, TZLabel } from '@posthog/apps-common'
 import { personLogic } from 'scenes/persons/personLogic'
@@ -78,17 +78,16 @@ const Component = ({ attributes }: NotebookNodeProps<NotebookNodePersonAttribute
                     }
 
                     return (
-                        <PropertyIcon
+                        <Tooltip
                             key={property}
-                            className="text-muted-alt"
-                            property={property}
-                            value={value}
-                            tooltipTitle={() => (
+                            title={
                                 <div className="text-center">
                                     <span className="font-medium">{tooltipValue ?? 'N/A'}</span>
                                 </div>
-                            )}
-                        />
+                            }
+                        >
+                            <PropertyIcon className="text-muted-alt" property={property} value={value} />
+                        </Tooltip>
                     )
                 })
             ) : (

diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
@@ -20,6 +20,7 @@ import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { colonDelimitedDuration } from 'lib/utils'
+import { countryCodeToName } from 'scenes/insights/views/WorldMap'
 import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { asDisplay } from 'scenes/persons/person-utils'
@@ -130,7 +131,7 @@ export function PropertyIcons({ recordingProperties, loading, iconClassNames }:
             ) : (
                 recordingProperties.map(({ property, value, label }) => (
                     <div className="flex items-center" key={property}>
-                        <PropertyIcon className={iconClassNames} property={property} value={value} noTooltip={true} />
+                        <PropertyIcon className={iconClassNames} property={property} value={value} />
                         <span className={!value ? 'text-muted' : undefined}>
                             {!value ? 'Not captured' : label || value}
                         </span>
@@ -195,6 +196,7 @@ export function SessionRecordingPreview({
     const nodeLogic = useNotebookNode()
     const inNotebook = !!nodeLogic
 
+    const countryCode = recording.person?.properties['$geoip_country_code']
     const iconClassnames = 'text-base text-muted-alt'
 
     const innerContent = (
@@ -209,15 +211,20 @@ export function SessionRecordingPreview({
             <div className="grow overflow-hidden space-y-px">
                 <div className="flex items-center justify-between gap-2">
                     <div className="flex items-center gap-1 shrink overflow-hidden">
-                        <div className="truncate font-medium text-link ph-no-capture">
-                            {asDisplay(recording.person)}
+                        <div className="truncate font-medium text-link ph-no-capture space-x-1">
+                            {countryCode && (
+                                <Tooltip title={countryCodeToName[countryCode]}>
+                                    <PropertyIcon property="$geoip_country_code" value={countryCode} />
+                                </Tooltip>
+                            )}
+                            <span>{asDisplay(recording.person)}</span>
                         </div>
                     </div>
 
                     <div className="flex-1" />
 
                     <TZLabel
-                        className="overflow-hidden text-ellipsis text-xs text-muted"
+                        className="overflow-hidden text-ellipsis text-xs text-muted shrink-0"
                         time={recording.start_time}
                         placement="right"
                         showPopover={false}