diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png index cc74b8c8cc166..4a7f487fb6b79 100644 Binary files a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png and b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png differ diff --git a/frontend/src/layout/navigation-3000/sidebars/dataManagement.ts b/frontend/src/layout/navigation-3000/sidebars/dataManagement.ts index 210204936359e..5eeaff0109f63 100644 --- a/frontend/src/layout/navigation-3000/sidebars/dataManagement.ts +++ b/frontend/src/layout/navigation-3000/sidebars/dataManagement.ts @@ -117,7 +117,7 @@ export const dataManagementSidebarLogic = kea([ menuItems: [ { label: 'View recordings', - to: urls.replay(ReplayTabs.Recent, { + to: urls.replay(ReplayTabs.Home, { filter_group: { type: FilterLogicalOperator.And, values: [ diff --git a/frontend/src/scenes/actions/ActionEdit.tsx b/frontend/src/scenes/actions/ActionEdit.tsx index eb2516b69e0e8..83c0744eb3592 100644 --- a/frontend/src/scenes/actions/ActionEdit.tsx +++ b/frontend/src/scenes/actions/ActionEdit.tsx @@ -116,7 +116,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps): {id ? ( View recordings diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx index 84a33b262b623..26c00e46ad9e9 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx @@ -533,7 +533,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element { overlay={ <> View Recordings diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx index b97ddaca04e92..c9604e6f80623 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx @@ -150,7 +150,7 @@ export const NotebookNodePlaylist = createPostHogWidgetNode { const url = new URL(match[0]) const stringifiedFilters = url.searchParams.get('filters') diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts index 9ad4f9c6c12ba..9b4019886e9b2 100644 --- a/frontend/src/scenes/scenes.ts +++ b/frontend/src/scenes/scenes.ts @@ -379,7 +379,7 @@ export const sceneConfigurations: Record = { }, } -// NOTE: These redirects will fully replace the URL. If you want to keep support for query and hash params then you should use the above `preserveParams` function. +// NOTE: These redirects will fully replace the URL. If you want to keep support for query and hash params then you should use a function (not string) redirect export const redirects: Record< string, string | ((params: Params, searchParams: Params, hashParams: Params) => string) @@ -428,6 +428,9 @@ export const redirects: Record< return urls.replay() }, '/replay': urls.replay(), + '/replay/recent': (_params, searchParams) => { + return urls.replay(undefined, searchParams.filters, searchParams.sessionRecordingId) + }, '/settings': urls.settings(), '/project/settings': urls.settings('project'), '/organization/settings': urls.settings('organization'), diff --git a/frontend/src/scenes/session-recordings/SessionRecordings.tsx b/frontend/src/scenes/session-recordings/SessionRecordings.tsx index b82171522363b..bccee886cceba 100644 --- a/frontend/src/scenes/session-recordings/SessionRecordings.tsx +++ b/frontend/src/scenes/session-recordings/SessionRecordings.tsx @@ -29,7 +29,7 @@ import { humanFriendlyTabName, sessionReplaySceneLogic } from './sessionReplaySc function Header(): JSX.Element { const { guardAvailableFeature } = useValues(upgradeModalLogic) - const playlistsLogic = savedSessionRecordingPlaylistsLogic({ tab: ReplayTabs.Recent }) + const playlistsLogic = savedSessionRecordingPlaylistsLogic({ tab: ReplayTabs.Home }) const { playlists } = useValues(playlistsLogic) const { tab } = useValues(sessionReplaySceneLogic) const { currentTeam } = useValues(teamLogic) @@ -54,7 +54,7 @@ function Header(): JSX.Element { - {tab === ReplayTabs.Recent && !recordingsDisabled && ( + {tab === ReplayTabs.Home && !recordingsDisabled && ( <> - ) : tab === ReplayTabs.Recent ? ( + ) : tab === ReplayTabs.Home ? (
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx index b0b9d18313f3b..4c2e0c2ee8e65 100644 --- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx +++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx @@ -112,7 +112,7 @@ export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicPr )} Error while trying to load playlist. diff --git a/frontend/src/scenes/session-recordings/sessionReplaySceneLogic.ts b/frontend/src/scenes/session-recordings/sessionReplaySceneLogic.ts index 3feef913ce04b..492f65fea4038 100644 --- a/frontend/src/scenes/session-recordings/sessionReplaySceneLogic.ts +++ b/frontend/src/scenes/session-recordings/sessionReplaySceneLogic.ts @@ -13,8 +13,8 @@ import type { sessionReplaySceneLogicType } from './sessionReplaySceneLogicType' export const humanFriendlyTabName = (tab: ReplayTabs): string => { switch (tab) { - case ReplayTabs.Recent: - return 'Recent recordings' + case ReplayTabs.Home: + return 'Recordings' case ReplayTabs.Playlists: return 'Playlists' default: @@ -30,11 +30,11 @@ export const sessionReplaySceneLogic = kea([ values: [featureFlagLogic, ['featureFlags']], }), actions({ - setTab: (tab: ReplayTabs = ReplayTabs.Recent) => ({ tab }), + setTab: (tab: ReplayTabs = ReplayTabs.Home) => ({ tab }), }), reducers(() => ({ tab: [ - ReplayTabs.Recent as ReplayTabs, + ReplayTabs.Home as ReplayTabs, { setTab: (_, { tab }) => tab, }, @@ -59,7 +59,7 @@ export const sessionReplaySceneLogic = kea([ (s) => [s.tab], (tab): Breadcrumb[] => { const breadcrumbs: Breadcrumb[] = [] - if (tab !== ReplayTabs.Recent) { + if (tab !== ReplayTabs.Home) { breadcrumbs.push({ key: Scene.Replay, name: 'Replay', diff --git a/frontend/src/scenes/urls.ts b/frontend/src/scenes/urls.ts index f12b5017a9014..ca6c98088952a 100644 --- a/frontend/src/scenes/urls.ts +++ b/frontend/src/scenes/urls.ts @@ -98,8 +98,11 @@ export const urls = { savedInsights: (tab?: string): string => `/insights${tab ? `?tab=${tab}` : ''}`, webAnalytics: (): string => `/web`, - replay: (tab?: ReplayTabs, filters?: Partial): string => - combineUrl(tab ? `/replay/${tab}` : '/replay/recent', filters ? { filters } : {}).url, + replay: (tab?: ReplayTabs, filters?: Partial, sessionRecordingId?: string): string => + combineUrl(tab ? `/replay/${tab}` : '/replay/home', { + ...(filters ? { filters } : {}), + ...(sessionRecordingId ? { sessionRecordingId } : {}), + }).url, replayPlaylist: (id: string): string => `/replay/playlists/${id}`, replaySingle: (id: string): string => `/replay/${id}`, replayFilePlayback: (): string => '/replay/file-playback', diff --git a/frontend/src/scenes/web-analytics/tiles/WebAnalyticsRecordings.tsx b/frontend/src/scenes/web-analytics/tiles/WebAnalyticsRecordings.tsx index eeaa74591be5f..25a7500913e99 100644 --- a/frontend/src/scenes/web-analytics/tiles/WebAnalyticsRecordings.tsx +++ b/frontend/src/scenes/web-analytics/tiles/WebAnalyticsRecordings.tsx @@ -45,7 +45,7 @@ export function WebAnalyticsRecordingsTile({ tile }: { tile: ReplayTile }): JSX. buttonText: 'Learn more', buttonTo: 'https://posthog.com/docs/user-guides/recordings', } - const to = items.length > 0 ? urls.replay(ReplayTabs.Recent, replayFilters) : urls.replay() + const to = items.length > 0 ? urls.replay(ReplayTabs.Home, replayFilters) : urls.replay() return ( <> diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 0e32117d3688e..cbc91482a2bae 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -639,7 +639,7 @@ export enum SavedInsightsTabs { } export enum ReplayTabs { - Recent = 'recent', + Home = 'home', Playlists = 'playlists', Errors = 'errors', }