feat: add link from live events view to explore view (#29349)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Mar 1, 2025 · e6cdfed · e6cdfed
1 parent cbf88b2
commit e6cdfed
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 deletions.
diff --git a/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png b/frontend/__snapshots__/replay-player-success--recent-recordings--dark.png
diff --git a/frontend/__snapshots__/replay-player-success--second-recording-in-list--light.png b/frontend/__snapshots__/replay-player-success--second-recording-in-list--light.png
diff --git a/frontend/src/queries/nodes/DataTable/EventRowActions.tsx b/frontend/src/queries/nodes/DataTable/EventRowActions.tsx
@@ -6,6 +6,7 @@ import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { getCurrentTeamId } from 'lib/utils/getAppContext'
+import React from 'react'
 import { createActionFromEvent } from 'scenes/activity/explore/createActionFromEvent'
 import { insightUrlForEvent } from 'scenes/insights/utils'
 import { teamLogic } from 'scenes/teamLogic'
@@ -40,21 +41,7 @@ export function EventRowActions({ event }: EventActionProps): JSX.Element {
                             Create action from event
                         </LemonButton>
                     )}
-                    {event.uuid && event.timestamp && (
-                        <LemonButton
-                            fullWidth
-                            sideIcon={<IconLink />}
-                            data-attr="events-table-event-link"
-                            onClick={() =>
-                                void copyToClipboard(
-                                    urls.absolute(urls.currentProject(urls.event(String(event.uuid), event.timestamp))),
-                                    'link to event'
-                                )
-                            }
-                        >
-                            Copy link to event
-                        </LemonButton>
-                    )}
+                    {event.uuid && event.timestamp && <EventCopyLinkButton event={event} />}
                     <ViewRecordingButton
                         fullWidth
                         inModal
@@ -94,3 +81,25 @@ export function EventRowActions({ event }: EventActionProps): JSX.Element {
         />
     )
 }
+
+export const EventCopyLinkButton = React.forwardRef<
+    HTMLButtonElement,
+    { event: Pick<EventType, 'uuid' | 'timestamp'> }
+>(function EventCopyLinkButton({ event }, ref) {
+    return (
+        <LemonButton
+            ref={ref}
+            fullWidth
+            sideIcon={<IconLink />}
+            data-attr="events-table-event-link"
+            onClick={() =>
+                void copyToClipboard(
+                    urls.absolute(urls.currentProject(urls.event(String(event.uuid), event.timestamp))),
+                    'link to event'
+                )
+            }
+        >
+            Copy link to event
+        </LemonButton>
+    )
+})
diff --git a/frontend/src/scenes/activity/live/LiveEventsTable.tsx b/frontend/src/scenes/activity/live/LiveEventsTable.tsx
@@ -5,10 +5,12 @@ import { useActions, useValues } from 'kea'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TZLabel } from 'lib/components/TZLabel'
+import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonTable, LemonTableColumns } from 'lib/lemon-ui/LemonTable'
 import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'
 import { PersonDisplay } from 'scenes/persons/PersonDisplay'
 
+import { EventCopyLinkButton } from '~/queries/nodes/DataTable/EventRowActions'
 import type { LiveEvent } from '~/types'
 
 const columns: LemonTableColumns<LiveEvent> = [
@@ -46,6 +48,21 @@ const columns: LemonTableColumns<LiveEvent> = [
             return <TZLabel time={event.timestamp} />
         },
     },
+    {
+        dataIndex: '__more' as any,
+        render: function Render(_, event: LiveEvent) {
+            return (
+                <More
+                    overlay={
+                        <Tooltip title="It may take up to a few minutes for the event to show up in the Explore view">
+                            <EventCopyLinkButton event={event} />
+                        </Tooltip>
+                    }
+                />
+            )
+        },
+        width: 0,
+    },
 ]
 
 export function LiveEventsTable(): JSX.Element {

diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts
@@ -470,8 +470,8 @@ export const redirects: Record<
         ])
         try {
             const timestamp = decodeURIComponent(_)
-            const after = dayjs(timestamp).subtract(1, 'second').startOf('second').toISOString()
-            const before = dayjs(timestamp).add(1, 'second').startOf('second').toISOString()
+            const after = dayjs(timestamp).subtract(15, 'second').startOf('second').toISOString()
+            const before = dayjs(timestamp).add(15, 'second').startOf('second').toISOString()
             Object.assign(query.source as EventsQuery, { before, after })
         } catch (e) {
             lemonToast.error('Invalid event timestamp')