From 69957123a680fd182a95e1d1cdcebe4ba15cbfed Mon Sep 17 00:00:00 2001
From: Bianca Yang <bianca@posthog.com>
Date: Thu, 21 Dec 2023 13:35:00 -0800
Subject: [PATCH] refine the separate feature checks

---
 frontend/src/scenes/settings/SettingsMap.tsx     |  1 +
 .../project/SessionRecordingSettings.tsx         | 12 ++++++------
 frontend/src/scenes/settings/settingsLogic.ts    | 16 +++++++++++++---
 frontend/src/types.ts                            |  4 ++--
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/scenes/settings/SettingsMap.tsx b/frontend/src/scenes/settings/SettingsMap.tsx
index 966e43e9c8dd3..8ed352a5bf88d 100644
--- a/frontend/src/scenes/settings/SettingsMap.tsx
+++ b/frontend/src/scenes/settings/SettingsMap.tsx
@@ -159,6 +159,7 @@ export const SettingsMap: SettingSection[] = [
                 id: 'replay-ingestion',
                 title: 'Ingestion controls',
                 component: <ReplayCostControl />,
+                flag: 'SESSION_RECORDING_SAMPLING',
                 features: [
                     AvailableFeature.SESSION_REPLAY_SAMPLING,
                     AvailableFeature.RECORDING_DURATION_MINIMUM,
diff --git a/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx b/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
index 0b138fbdb5cc8..fd96faa5c8976 100644
--- a/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
+++ b/frontend/src/scenes/settings/project/SessionRecordingSettings.tsx
@@ -7,7 +7,7 @@ import { FlagSelector } from 'lib/components/FlagSelector'
 import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/constants'
 import { IconCancel } from 'lib/lemon-ui/icons'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
-import { featureFlagLogic } from 'scenes/feature-flags/featureFlagLogic'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
@@ -181,12 +181,12 @@ export function ReplayCostControl(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
     const { currentTeam } = useValues(teamLogic)
     const { hasAvailableFeature } = useValues(userLogic)
-    const { featureFlag } = useValues(featureFlagLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
     const samplingControlFeatureEnabled = hasAvailableFeature(AvailableFeature.SESSION_REPLAY_SAMPLING)
     const recordingDurationMinimumFeatureEnabled = hasAvailableFeature(AvailableFeature.RECORDING_DURATION_MINIMUM)
     const featureFlagRecordingFeatureEnabled = hasAvailableFeature(AvailableFeature.FEATURE_FLAG_BASED_RECORDING)
     const costControlFeaturesEnabled =
-        featureFlag[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] ||
+        featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] ||
         samplingControlFeatureEnabled ||
         recordingDurationMinimumFeatureEnabled ||
         featureFlagRecordingFeatureEnabled
@@ -206,7 +206,7 @@ export function ReplayCostControl(): JSX.Element {
             <LemonBanner className="mb-4" type={'info'}>
                 Requires posthog-js version 1.88.2 or greater
             </LemonBanner>
-            {(featureFlag[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || samplingControlFeatureEnabled) && (
+            {(featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || samplingControlFeatureEnabled) && (
                 <>
                     <div className={'flex flex-row justify-between'}>
                         <LemonLabel className="text-base">Sampling</LemonLabel>
@@ -315,7 +315,7 @@ export function ReplayCostControl(): JSX.Element {
                     </p>
                 </>
             )}
-            {(featureFlag[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || recordingDurationMinimumFeatureEnabled) && (
+            {(featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || recordingDurationMinimumFeatureEnabled) && (
                 <>
                     <div className={'flex flex-row justify-between'}>
                         <LemonLabel className="text-base">Minimum session duration (seconds)</LemonLabel>
@@ -334,7 +334,7 @@ export function ReplayCostControl(): JSX.Element {
                     </p>
                 </>
             )}
-            {(featureFlag[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || featureFlagRecordingFeatureEnabled) && (
+            {(featureFlags[FEATURE_FLAGS.SESSION_RECORDING_SAMPLING] || featureFlagRecordingFeatureEnabled) && (
                 <>
                     <div className={'flex flex-col space-y-2'}>
                         <LemonLabel className="text-base">Enable recordings using feature flag</LemonLabel>
diff --git a/frontend/src/scenes/settings/settingsLogic.ts b/frontend/src/scenes/settings/settingsLogic.ts
index 0edde363db688..f727e2a2dfe50 100644
--- a/frontend/src/scenes/settings/settingsLogic.ts
+++ b/frontend/src/scenes/settings/settingsLogic.ts
@@ -78,9 +78,19 @@ export const settingsLogic = kea<settingsLogicType>([
                     settings = sections.find((x) => x.id === selectedSectionId)?.settings || []
                 }
 
-                return settings
-                    .filter((x) => (x.flag ? featureFlags[FEATURE_FLAGS[x.flag]] : true))
-                    .filter((x) => (x.features ? x.features.some((feat) => hasAvailableFeature(feat)) : true))
+                return settings.filter((x) => {
+                    if (x.flag && x.features) {
+                        return (
+                            x.features.some((feat) => hasAvailableFeature(feat)) || featureFlags[FEATURE_FLAGS[x.flag]]
+                        )
+                    } else if (x.features) {
+                        return x.features.some((feat) => hasAvailableFeature(feat))
+                    } else if (x.flag) {
+                        return featureFlags[FEATURE_FLAGS[x.flag]]
+                    }
+
+                    return true
+                })
             },
         ],
     }),
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index dda2cbdeb9817..90e6095d9b023 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -92,8 +92,8 @@ export enum AvailableFeature {
     SURVEYS_TEXT_HTML = 'surveys_text_html',
     SURVEYS_MULTIPLE_QUESTIONS = 'surveys_multiple_questions',
     SESSION_REPLAY_SAMPLING = 'session_replay_sampling',
-    RECORDING_DURATION_MINIMUM = 'recording_duration_minimum',
-    FEATURE_FLAG_BASED_RECORDING = 'feature_flag_based_recording',
+    RECORDING_DURATION_MINIMUM = 'replay_recording_duration_minimum',
+    FEATURE_FLAG_BASED_RECORDING = 'replay_feature_flag_based_recording',
 }
 
 export enum ProductKey {