fix: onboarding session replay config saving (#20940)

* Set the initial values of the replay config if already saved

* Use a ref so the current values can be accesses

* Update Onboarding.tsx

* Fix the session replay config defaults

frontend/src/scenes/onboarding/Onboarding.tsx

@@ -100,22 +100,24 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
 }
 const SessionReplayOnboarding = (): JSX.Element => {
     const { hasAvailableFeature } = useValues(userLogic)
+    const { currentTeam } = useValues(teamLogic)
+
     const configOptions: ProductConfigOption[] = [
         {
             type: 'toggle',
             title: 'Capture console logs',
             description: `Capture console logs as a part of user session recordings. 
                             Use the console logs alongside recordings to debug any issues with your app.`,
             teamProperty: 'capture_console_log_opt_in',
-            value: true,
+            value: currentTeam?.capture_console_log_opt_in ?? true,
         },
         {
             type: 'toggle',
             title: 'Capture network performance',
             description: `Capture performance and network information alongside recordings. Use the
                             network requests and timings in the recording player to help you debug issues with your app.`,
             teamProperty: 'capture_performance_opt_in',
-            value: true,
+            value: currentTeam?.capture_performance_opt_in ?? true,
         },
     ]
 
@@ -126,7 +128,7 @@ const SessionReplayOnboarding = (): JSX.Element => {
             description: `Only record sessions that are longer than the specified duration. 
                             Start with it low and increase it later if you're getting too many short sessions.`,
             teamProperty: 'session_recording_minimum_duration_milliseconds',
-            value: null,
+            value: currentTeam?.session_recording_minimum_duration_milliseconds || null,
             selectOptions: SESSION_REPLAY_MINIMUM_DURATION_OPTIONS,
         })
     }

frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx

@@ -1,6 +1,6 @@
 import { LemonDivider, LemonSelect, LemonSwitch } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
 
 import { OnboardingStepKey } from './onboardingLogic'
@@ -51,6 +51,12 @@ export const OnboardingProductConfiguration = ({
     const { setConfigOptions, saveConfiguration } = useActions(onboardingProductConfigurationLogic)
     const { toggleEnabled } = useActions(pluginsLogic)
 
+    const configOptionsRef = useRef(configOptions)
+
+    useEffect(() => {
+        configOptionsRef.current = configOptions
+    }, [configOptions])
+
     useEffect(() => {
         setConfigOptions(options)
     }, [])
@@ -63,9 +69,12 @@ export const OnboardingProductConfiguration = ({
             selectOptions: option.selectOptions,
             value: option.value,
             onChange: (newValue: boolean | string | number) => {
-                setConfigOptions(
-                    configOptions.map((o) => (o.teamProperty === option.teamProperty ? { ...o, value: newValue } : o))
+                // Use the current value from the ref to ensure that onChange always accesses
+                // the latest state of configOptions, preventing the closure from using stale data.
+                const updatedConfigOptions = configOptionsRef.current.map((o) =>
+                    o.teamProperty === option.teamProperty ? { ...o, value: newValue } : o
                 )
+                setConfigOptions(updatedConfigOptions)
             },
         })),
         ...defaultEnabledPlugins.map((plugin) => {