fix: remember the last replay tab (#27474)

PostHog · Jan 15, 2025 · cc92975 · cc92975
1 parent 765b569
commit cc92975
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 20 deletions.
diff --git a/frontend/src/layout/navigation-3000/navigationLogic.tsx b/frontend/src/layout/navigation-3000/navigationLogic.tsx
@@ -36,11 +36,12 @@ import React from 'react'
 import { editorSidebarLogic } from 'scenes/data-warehouse/editor/editorSidebarLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
+import { replayLandingPageLogic } from 'scenes/session-recordings/replayLandingPageLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { dashboardsModel } from '~/models/dashboardsModel'
-import { ProductKey, ReplayTabs } from '~/types'
+import { ProductKey } from '~/types'
 
 import { navigationLogic } from '../navigation/navigationLogic'
 import type { navigation3000LogicType } from './navigationLogicType'
@@ -73,6 +74,8 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
             ['mobileLayout'],
             teamLogic,
             ['currentTeam', 'hasOnboardedAnyProduct'],
+            replayLandingPageLogic,
+            ['replayLandingPage'],
         ],
         actions: [navigationLogic, ['closeAccountPopover']],
     })),
@@ -341,20 +344,19 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                 dashboardsModel.selectors.pinnedDashboards,
                 s.currentTeam,
                 s.hasOnboardedAnyProduct,
+                s.replayLandingPage,
             ],
             (
                 featureFlags,
                 dashboardsLoading,
                 pinnedDashboards,
                 currentTeam,
-                hasOnboardedAnyProduct
+                hasOnboardedAnyProduct,
+                replayLandingPage
             ): NavbarItem[][] => {
                 const isUsingSidebar = featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]
                 const hasOnboardedFeatureFlags = currentTeam?.has_completed_onboarding_for?.[ProductKey.FEATURE_FLAGS]
 
-                const replayLandingPageFlag = featureFlags[FEATURE_FLAGS.REPLAY_LANDING_PAGE]
-                const replayLandingPage: ReplayTabs =
-                    replayLandingPageFlag === 'templates' ? ReplayTabs.Templates : ReplayTabs.Home
                 const sectionOne: NavbarItem[] = hasOnboardedAnyProduct
                     ? [
                           {

diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -1,12 +1,11 @@
 import { actions, connect, kea, listeners, path, props, reducers, selectors } from 'kea'
 import { actionToUrl, router, urlToAction } from 'kea-router'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Scene } from 'scenes/sceneTypes'
+import { replayLandingPageLogic } from 'scenes/session-recordings/replayLandingPageLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
@@ -110,10 +109,7 @@ export const stepKeyToTitle = (stepKey?: OnboardingStepKey): undefined | string
 export type AllOnboardingSteps = OnboardingStep[]
 export type OnboardingStep = JSX.Element
 
-export const getProductUri = (productKey: ProductKey, featureFlags: FeatureFlagsSet): string => {
-    const replayLandingPageFlag = featureFlags[FEATURE_FLAGS.REPLAY_LANDING_PAGE]
-    const replayLandingPage: ReplayTabs = replayLandingPageFlag === 'templates' ? ReplayTabs.Templates : ReplayTabs.Home
-
+export const getProductUri = (productKey: ProductKey, replayLandingPage: ReplayTabs): string => {
     switch (productKey) {
         case ProductKey.PRODUCT_ANALYTICS:
             return urls.insightNew()
@@ -139,12 +135,12 @@ export const onboardingLogic = kea<onboardingLogicType>([
             ['billing'],
             teamLogic,
             ['currentTeam'],
-            featureFlagLogic,
-            ['featureFlags'],
             userLogic,
             ['user'],
             preflightLogic,
             ['isCloudOrDev'],
+            replayLandingPageLogic,
+            ['replayLandingPage'],
         ],
         actions: [
             billingLogic,
@@ -242,12 +238,12 @@ export const onboardingLogic = kea<onboardingLogicType>([
             },
         ],
         onCompleteOnboardingRedirectUrl: [
-            (s) => [s.productKey, s.onCompleteOnboardingRedirectUrlOverride, s.featureFlags],
-            (productKey: string | null, onCompleteOnboardingRedirectUrlOverride, featureFlags) => {
+            (s) => [s.productKey, s.onCompleteOnboardingRedirectUrlOverride, s.replayLandingPage],
+            (productKey: string | null, onCompleteOnboardingRedirectUrlOverride, replayLandingPage) => {
                 if (onCompleteOnboardingRedirectUrlOverride) {
                     return onCompleteOnboardingRedirectUrlOverride
                 }
-                return productKey ? getProductUri(productKey as ProductKey, featureFlags) : urls.default()
+                return productKey ? getProductUri(productKey as ProductKey, replayLandingPage) : urls.default()
             },
         ],
         totalOnboardingSteps: [

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -5,8 +5,7 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { availableOnboardingProducts, getProductUri } from 'scenes/onboarding/onboardingLogic'
+import { availableOnboardingProducts, getProductUri, onboardingLogic } from 'scenes/onboarding/onboardingLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { teamLogic } from 'scenes/teamLogic'
@@ -40,7 +39,8 @@ export function SelectableProductCard({
     selected?: boolean
 }): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
+    const { replayLandingPage } = useValues(onboardingLogic)
+
     const onboardingCompleted = currentTeam?.has_completed_onboarding_for?.[productKey]
     const vertical = orientation === 'vertical'
     return (
@@ -60,7 +60,7 @@ export function SelectableProductCard({
                         className="relative"
                         onClick={(e) => {
                             e.stopPropagation()
-                            router.actions.push(getProductUri(productKey as ProductKey, featureFlags))
+                            router.actions.push(getProductUri(productKey as ProductKey, replayLandingPage))
                         }}
                         data-attr={`return-to-${productKey}`}
                     >

diff --git a/frontend/src/scenes/session-recordings/replayLandingPageLogic.ts b/frontend/src/scenes/session-recordings/replayLandingPageLogic.ts
@@ -0,0 +1,39 @@
+import { connect, kea, path, reducers, selectors } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { sessionReplaySceneLogic } from 'scenes/session-recordings/sessionReplaySceneLogic'
+
+import { ReplayTabs } from '~/types'
+
+import type { replayLandingPageLogicType } from './replayLandingPageLogicType'
+
+/**
+ * We want to remember the last replay tab you were on and present that as your current "home" tab
+ * Alongside that we want to be able to control which tab we prefer if you've not visited the replay page before
+ */
+export const replayLandingPageLogic = kea<replayLandingPageLogicType>([
+    path(['scenes', 'session-recordings', 'landingPageLogic']),
+    connect({ values: [featureFlagLogic, ['featureFlags']], actions: [sessionReplaySceneLogic, ['setTab']] }),
+    reducers({
+        chosenTab: [
+            null as ReplayTabs | null,
+            { persist: true },
+            {
+                setTab: (_, { tab }) => tab,
+            },
+        ],
+    }),
+    selectors({
+        replayLandingPage: [
+            (s) => [s.featureFlags, s.chosenTab],
+            (featureFlags, chosenTab): ReplayTabs => {
+                if (chosenTab) {
+                    // you've already used the product, so we put you back where you left off
+                    return chosenTab
+                }
+                const replayLandingPageFlag = featureFlags[FEATURE_FLAGS.REPLAY_LANDING_PAGE]
+                return replayLandingPageFlag === 'templates' ? ReplayTabs.Templates : ReplayTabs.Home
+            },
+        ],
+    }),
+])