Fix error in recordings table

frontend/src/scenes/events/EventsTable.tsx

@@ -106,10 +106,10 @@ export function EventsTable({ fixedFilters, filtersEnabled = true, pageKey }: Ev
                         }
                         return showLinkToPerson && event.person?.distinct_ids?.length ? (
                             <Link to={`/person/${encodeURIComponent(event.person.distinct_ids[0])}`}>
-                                <PersonHeader person={event.person} />
+                                <PersonHeader withIcon person={event.person} />
                             </Link>
                         ) : (
-                            <PersonHeader person={event.person} />
+                            <PersonHeader withIcon person={event.person} />
                         )
                     },
                 },

frontend/src/scenes/events/definitions/EventsTableSnippet.tsx

@@ -14,7 +14,7 @@ export function EventsTableSnippet(): JSX.Element {
             title: 'Person',
             key: 'person',
             render: function renderPerson({ person }: { person: PersonType }) {
-                return person ? <PersonHeader person={person} /> : { props: { colSpan: 0 } }
+                return person ? <PersonHeader withIcon person={person} /> : { props: { colSpan: 0 } }
             },
         },
         {

frontend/src/scenes/persons/Person.tsx

@@ -120,7 +120,7 @@ export function Person(): JSX.Element {
                     <Card className="card-elevated person-detail" data-test-person-details>
                         {person && (
                             <>
-                                <PersonHeader person={person} />
+                                <PersonHeader withIcon person={person} />
                                 <div className="item-group">
                                     <label>IDs</label>
                                     <div style={{ display: 'flex' }}>

frontend/src/scenes/persons/PersonHeader.scss

@@ -22,4 +22,8 @@
             color: $purple_700;
         }
     }
+
+    &:hover {
+        text-decoration: underline;
+    }
 }

frontend/src/scenes/persons/PersonsTable.tsx

@@ -65,7 +65,7 @@ export function PersonsTable({
             key: 'identification',
             span: 6,
             render: function Render(person: PersonType) {
-                return <PersonHeader person={person} />
+                return <PersonHeader withIcon person={person} />
             },
         },
         {

frontend/src/scenes/session-recordings/SessionRecordingsTable.tsx

@@ -88,7 +88,7 @@ export function SessionRecordingsTable({ personUUID, isPersonPage = false }: Ses
             title: 'Person',
             key: 'person',
             render: function RenderPersonLink(sessionRecording: SessionRecordingType) {
-                return <PersonHeader person={sessionRecording.person} />
+                return <PersonHeader withIcon person={sessionRecording.person} />
             },
             ellipsis: true,
             span: 3,

frontend/src/scenes/session-recordings/sessionRecordingsTableLogic.ts

@@ -239,7 +239,7 @@ export const sessionRecordingsTableLogic = kea<sessionRecordingsTableLogicType<P
         }
     },
 
-    urlToAction: ({ actions, values }) => {
+    urlToAction: ({ actions, values, props }) => {
         const urlToAction = (_: any, params: Params): void => {
             const nulledSessionRecordingId = params.sessionRecordingId ?? null
             if (nulledSessionRecordingId !== values.sessionRecordingId) {
@@ -268,10 +268,9 @@ export const sessionRecordingsTableLogic = kea<sessionRecordingsTableLogicType<P
                 }
             }
         }
-
+        const urlPattern = props.personUUID ? '/person/*' : '/recordings'
         return {
-            '/recordings': urlToAction,
-            '/person/*': urlToAction,
+            [urlPattern]: urlToAction,
         }
     },
 })