feat: Feature gate session replay controls using available_product_fe…

…atures (#19401) * feature gate session replay control using available_product_features * separate out feature checks * refine the separate feature checks * Update query snapshots * Update UI snapshots for `chromium` (2) * Update query snapshots * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: Bianca Yang <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jan 2, 2024 · b8b90c1 · b8b90c1
1 parent 98f6575
commit b8b90c1
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 166 deletions.
diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -4,8 +4,9 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useEffect, useState } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
 
-import { ProductKey } from '~/types'
+import { AvailableFeature, ProductKey } from '~/types'
 
 import { OnboardingBillingStep } from './OnboardingBillingStep'
 import { OnboardingInviteTeammates } from './OnboardingInviteTeammates'
@@ -109,7 +110,7 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
     )
 }
 const SessionReplayOnboarding = (): JSX.Element => {
-    const { featureFlags } = useValues(featureFlagLogic)
+    const { hasAvailableFeature } = useValues(userLogic)
     const configOptions: ProductConfigOption[] = [
         {
             type: 'toggle',
@@ -129,7 +130,7 @@ const SessionReplayOnboarding = (): JSX.Element => {
         },
     ]
 
-    if (featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] === true) {
+    if (hasAvailableFeature(AvailableFeature.RECORDING_DURATION_MINIMUM)) {
         configOptions.push({
             type: 'select',
             title: 'Minimum session duration (seconds)',

diff --git a/frontend/src/scenes/settings/SettingsMap.tsx b/frontend/src/scenes/settings/SettingsMap.tsx
@@ -1,3 +1,5 @@
+import { AvailableFeature } from '~/types'
+
 import { Invites } from './organization/Invites'
 import { Members } from './organization/Members'
 import { OrganizationDangerZone } from './organization/OrganizationDangerZone'
@@ -158,6 +160,11 @@ export const SettingsMap: SettingSection[] = [
                 title: 'Ingestion controls',
                 component: <ReplayCostControl />,
                 flag: 'SESSION_RECORDING_SAMPLING',
+                features: [
+                    AvailableFeature.SESSION_REPLAY_SAMPLING,
+                    AvailableFeature.RECORDING_DURATION_MINIMUM,
+                    AvailableFeature.FEATURE_FLAG_BASED_RECORDING,
+                ],
             },
         ],
     },