feat: home tab of replay doesn't need to be called recent (#24763)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Sep 3, 2024 · 842f11e · 842f11e
1 parent acb2587
commit 842f11e
Show file tree

Hide file tree

Showing 17 changed files with 29 additions and 23 deletions.
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png
diff --git 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<dataManagementSidebarLogicType>([
                                 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
@@ -116,7 +116,7 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
                             {id ? (
                                 <LemonButton
                                     type="secondary"
-                                    to={urls.replay(ReplayTabs.Recent, {
+                                    to={urls.replay(ReplayTabs.Home, {
                                         filter_group: {
                                             type: FilterLogicalOperator.And,
                                             values: [

diff --git a/frontend/src/scenes/data-management/actions/ActionsTable.tsx b/frontend/src/scenes/data-management/actions/ActionsTable.tsx
@@ -188,7 +188,7 @@ export function ActionsTable(): JSX.Element {
                                     Duplicate
                                 </LemonButton>
                                 <LemonButton
-                                    to={urls.replay(ReplayTabs.Recent, {
+                                    to={urls.replay(ReplayTabs.Home, {
                                         filter_group: {
                                             type: FilterLogicalOperator.And,
                                             values: [

diff --git a/frontend/src/scenes/data-management/definition/DefinitionView.tsx b/frontend/src/scenes/data-management/definition/DefinitionView.tsx
@@ -55,7 +55,7 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
                         {isEvent && (
                             <LemonButton
                                 type="secondary"
-                                to={urls.replay(ReplayTabs.Recent, {
+                                to={urls.replay(ReplayTabs.Home, {
                                     filter_group: {
                                         type: FilterLogicalOperator.And,
                                         values: [

diff --git a/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx b/frontend/src/scenes/data-management/events/EventDefinitionsTable.tsx
@@ -87,7 +87,7 @@ export function EventDefinitionsTable(): JSX.Element {
                         overlay={
                             <>
                                 <LemonButton
-                                    to={urls.replay(ReplayTabs.Recent, {
+                                    to={urls.replay(ReplayTabs.Home, {
                                         filter_group: {
                                             type: FilterLogicalOperator.And,
                                             values: [

diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
@@ -493,7 +493,7 @@ function PersonsTableByFilter({ recordingsFilters, properties }: PersonsTableByF
             <div className="absolute top-0 right-0 z-10">
                 <LemonButton
                     key="view-opt-in-session-recordings"
-                    to={urls.replay(ReplayTabs.Recent, recordingsFilters)}
+                    to={urls.replay(ReplayTabs.Home, recordingsFilters)}
                     type="secondary"
                 >
                     View recordings

diff --git 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={
                                                 <>
                                                     <LemonButton
-                                                        to={urls.replay(ReplayTabs.Recent, recordingFilterForFlag)}
+                                                        to={urls.replay(ReplayTabs.Home, recordingFilterForFlag)}
                                                         fullWidth
                                                     >
                                                         View Recordings

diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx
@@ -150,7 +150,7 @@ export const NotebookNodePlaylist = createPostHogWidgetNode<NotebookNodePlaylist
         },
     },
     pasteOptions: {
-        find: urls.replay(ReplayTabs.Recent) + '(.*)',
+        find: urls.replay(ReplayTabs.Home) + '(.*)',
         getAttributes: async (match) => {
             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
@@ -379,7 +379,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
     },
 }
 
-// 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
@@ -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 {
         <PageHeader
             buttons={
                 <>
-                    {tab === ReplayTabs.Recent && !recordingsDisabled && (
+                    {tab === ReplayTabs.Home && !recordingsDisabled && (
                         <>
                             <LemonMenu
                                 items={[
@@ -184,7 +184,7 @@ function MainPanel(): JSX.Element {
 
             {!tab ? (
                 <Spinner />
-            ) : tab === ReplayTabs.Recent ? (
+            ) : tab === ReplayTabs.Home ? (
                 <div className="SessionRecordingPlaylistHeightWrapper">
                     <SessionRecordingsPlaylist updateSearchParams />
                 </div>

diff --git 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
                 )}
                 <Playlist
                     data-attr="session-recordings-playlist"
-                    notebooksHref={urls.replay(ReplayTabs.Recent, filters)}
+                    notebooksHref={urls.replay(ReplayTabs.Home, filters)}
                     title="Recordings"
                     embedded={!!notebookNode}
                     sections={sections}

diff --git a/...rc/scenes/session-recordings/saved-playlists/SavedSessionRecordingPlaylistsEmptyState.tsx b/...rc/scenes/session-recordings/saved-playlists/SavedSessionRecordingPlaylistsEmptyState.tsx
@@ -11,7 +11,7 @@ import { savedSessionRecordingPlaylistsLogic } from './savedSessionRecordingPlay
 
 export function SavedSessionRecordingPlaylistsEmptyState(): JSX.Element {
     const { guardAvailableFeature } = useValues(upgradeModalLogic)
-    const playlistsLogic = savedSessionRecordingPlaylistsLogic({ tab: ReplayTabs.Recent })
+    const playlistsLogic = savedSessionRecordingPlaylistsLogic({ tab: ReplayTabs.Home })
     const { playlists, loadPlaylistsFailed } = useValues(playlistsLogic)
     return loadPlaylistsFailed ? (
         <LemonBanner type="error">Error while trying to load playlist.</LemonBanner>

diff --git 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<sessionReplaySceneLogicType>([
         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<sessionReplaySceneLogicType>([
             (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
@@ -98,8 +98,11 @@ export const urls = {
     savedInsights: (tab?: string): string => `/insights${tab ? `?tab=${tab}` : ''}`,
     webAnalytics: (): string => `/web`,
 
-    replay: (tab?: ReplayTabs, filters?: Partial<RecordingUniversalFilters>): string =>
-        combineUrl(tab ? `/replay/${tab}` : '/replay/recent', filters ? { filters } : {}).url,
+    replay: (tab?: ReplayTabs, filters?: Partial<RecordingUniversalFilters>, 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
@@ -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 (
         <>
             <SessionPlayerModal />

diff --git 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',
 }