chore(settings): Flag the persons-on-events project setting (#22812)

* Add flag to hide persons on events project setting * 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` (1) * Update UI snapshots for `chromium` (1) * 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) * Also support negated flag in settings sections --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jun 11, 2024 · 81b10aa · 81b10aa
1 parent 6f745af
commit 81b10aa
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -205,6 +205,7 @@ export const FEATURE_FLAGS = {
     LIVE_EVENTS: 'live-events', // owner: @zach or @jams
     SESSION_REPLAY_NETWORK_VIEW: 'session-replay-network-view', // owner: #team-replay
     SETTINGS_PERSONS_JOIN_MODE: 'settings-persons-join-mode', // owner: @robbie-c
+    SETTINGS_PERSONS_ON_EVENTS_HIDDEN: 'settings-persons-on-events-hidden', // owner: @Twixes
     HOG: 'hog', // owner: @mariusandra
     HOG_FUNCTIONS: 'hog-functions', // owner: #team-cdp
     PERSONLESS_EVENTS_NOT_SUPPORTED: 'personless-events-not-supported', // owner: @raquelmsmith

diff --git a/frontend/src/scenes/settings/SettingsMap.tsx b/frontend/src/scenes/settings/SettingsMap.tsx
@@ -126,8 +126,9 @@ export const SettingsMap: SettingSection[] = [
             },
             {
                 id: 'persons-on-events',
-                title: 'Event person filtering behavior',
+                title: 'Person properties mode',
                 component: <PersonsOnEvents />,
+                flag: '!SETTINGS_PERSONS_ON_EVENTS_HIDDEN', // Setting hidden for Cloud orgs created since June 2024
             },
             {
                 id: 'correlation-analysis',

diff --git a/frontend/src/scenes/settings/settingsLogic.ts b/frontend/src/scenes/settings/settingsLogic.ts
@@ -62,7 +62,14 @@ export const settingsLogic = kea<settingsLogicType>([
         sections: [
             (s) => [s.featureFlags],
             (featureFlags): SettingSection[] => {
-                return SettingsMap.filter((x) => (x.flag ? featureFlags[FEATURE_FLAGS[x.flag]] : true))
+                return SettingsMap.filter((x) => {
+                    const isFlagConditionMet = !x.flag
+                        ? true // No flag condition
+                        : x.flag.startsWith('!')
+                        ? !featureFlags[FEATURE_FLAGS[x.flag.slice(1)]] // Negated flag condition (!-prefixed)
+                        : featureFlags[FEATURE_FLAGS[x.flag]] // Regular flag condition
+                    return isFlagConditionMet
+                })
             },
         ],
         selectedSection: [
@@ -96,14 +103,17 @@ export const settingsLogic = kea<settingsLogicType>([
                 }
 
                 return settings.filter((x) => {
+                    const isFlagConditionMet = !x.flag
+                        ? true // No flag condition
+                        : x.flag.startsWith('!')
+                        ? !featureFlags[FEATURE_FLAGS[x.flag.slice(1)]] // Negated flag condition (!-prefixed)
+                        : featureFlags[FEATURE_FLAGS[x.flag]] // Regular flag condition
                     if (x.flag && x.features) {
-                        return (
-                            x.features.some((feat) => hasAvailableFeature(feat)) || featureFlags[FEATURE_FLAGS[x.flag]]
-                        )
+                        return x.features.some((feat) => hasAvailableFeature(feat)) || isFlagConditionMet
                     } else if (x.features) {
                         return x.features.some((feat) => hasAvailableFeature(feat))
                     } else if (x.flag) {
-                        return featureFlags[FEATURE_FLAGS[x.flag]]
+                        return isFlagConditionMet
                     }
 
                     return true

diff --git a/frontend/src/scenes/settings/types.ts b/frontend/src/scenes/settings/types.ts
@@ -83,12 +83,18 @@ export type SettingId =
     | 'persons-join-mode'
     | 'bounce-rate-page-view-mode'
 
+type FeatureFlagKey = keyof typeof FEATURE_FLAGS
+
 export type Setting = {
     id: SettingId
     title: string
     description?: JSX.Element | string
     component: JSX.Element
-    flag?: keyof typeof FEATURE_FLAGS
+    /**
+     * Feature flag to gate the setting being shown.
+     * If prefixed with !, the condition is inverted - the setting will only be shown if the is flag false.
+     */
+    flag?: FeatureFlagKey | `!${FeatureFlagKey}`
     features?: AvailableFeature[]
 }
 
@@ -97,6 +103,10 @@ export type SettingSection = {
     title: string
     level: SettingLevelId
     settings: Setting[]
-    flag?: keyof typeof FEATURE_FLAGS
+    /**
+     * Feature flag to gate the section being shown.
+     * If prefixed with !, the condition is inverted - the section will only be shown if the is flag false.
+     */
+    flag?: FeatureFlagKey | `!${FeatureFlagKey}`
     minimumAccessLevel?: EitherMembershipLevel
 }