chore(3000): setup feature flag for experiment (#19053)

frontend/src/layout/navigation-3000/sidepanel/panels/sidePanelSettingsLogic.tsx

@@ -43,7 +43,7 @@ export const sidePanelSettingsLogic = kea<sidePanelSettingsLogicType>([
 
     listeners(({ actions, values }) => ({
         openSettingsPanel: ({ settingsLogicProps }) => {
-            if (!values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'control') {
                 LemonDialog.open({
                     title: 'Settings',
                     content: <Settings {...settingsLogicProps} hideSections logicKey="modal" />,

frontend/src/layout/navigation-3000/themeLogic.ts

@@ -36,7 +36,7 @@ export const themeLogic = kea<themeLogicType>([
                 }
                 // Dark mode is a PostHog 3000 feature
                 // User-saved preference is used when set, oterwise we fall back to the system value
-                return featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+                return featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
                     ? user?.theme_mode
                         ? user.theme_mode === 'dark'
                         : darkModeSystemPreference

frontend/src/layout/navigation/TopBar/NotebookButton.tsx

@@ -7,7 +7,7 @@ import { notebookPanelLogic } from 'scenes/notebooks/NotebookPanel/notebookPanel
 export function NotebookButton(): JSX.Element {
     const { visibility } = useValues(notebookPanelLogic)
     const { toggleVisibility } = useActions(notebookPanelLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const overrides3000: Partial<LemonButtonWithSideActionProps> = is3000
         ? {

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -300,7 +300,7 @@ export function SitePopoverOverlay(): JSX.Element {
                 </SitePopoverSection>
             )}
             <SitePopoverSection>
-                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000}>
+                <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000} match="test">
                     <ThemeSwitcher />
                 </FlaggedFeature>
                 <LemonButton

frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx

@@ -142,7 +142,7 @@ export function CodeSnippet({
                 />
             </div>
             <SyntaxHighlighter
-                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? synthwave84 : okaidia}
+                style={featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? synthwave84 : okaidia}
                 language={language}
                 wrapLines={wrap}
                 lineProps={{ style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } }}

frontend/src/lib/components/CommandPalette/CommandPalette.tsx

@@ -17,7 +17,7 @@ import { CommandResults } from './CommandResults'
 export function CommandPalette(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
 
     if (isUsingCmdKSearch) {
         return <CommandBar />

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -251,7 +251,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
     selectors({
         isUsingCmdKSearch: [
             (selectors) => [selectors.featureFlags],
-            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000],
+            (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test',
         ],
         isSqueak: [
             (selectors) => [selectors.input],
@@ -1008,7 +1008,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
             actions.registerCommand(createDashboard)
             actions.registerCommand(shareFeedback)
             actions.registerCommand(debugCopySessionRecordingURL)
-            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+            if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                 actions.registerCommand(toggleTheme)
                 actions.registerCommand(toggleHedgehogMode)
                 actions.registerCommand(shortcuts)

frontend/src/lib/components/PageHeader.tsx

@@ -27,12 +27,13 @@ export function PageHeader({
     delimited,
     notebookProps,
 }: PageHeaderProps): JSX.Element | null {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { actionsContainer } = useValues(breadcrumbsLogic)
 
     return (
         <>
             {!is3000 && (
+                // eslint-disable-next-line react/forbid-dom-props
                 <div className="page-title-row flex justify-between" style={style}>
                     <div className="min-w-0">
                         {!is3000 &&

frontend/src/lib/components/Support/supportLogic.ts

@@ -336,7 +336,7 @@ export const supportLogic = kea<supportLogicType>([
     actionToUrl(({ values }) => {
         return {
             closeSupportForm: () => {
-                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+                if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                     return
                 }
 

frontend/src/lib/hooks/use3000Body.ts

@@ -6,7 +6,7 @@ import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { useFeatureFlag } from './useFeatureFlag'
 
 export function use3000Body(): void {
-    const is3000 = !!useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const { isDarkModeOn } = useValues(themeLogic)
 
     useEffect(() => {

frontend/src/lib/hooks/useFeatureFlag.ts

@@ -2,8 +2,12 @@ import { useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
-export const useFeatureFlag = (flag: keyof typeof FEATURE_FLAGS): boolean => {
+export const useFeatureFlag = (flag: keyof typeof FEATURE_FLAGS, match?: string): boolean => {
     const { featureFlags } = useValues(featureFlagLogic)
 
+    if (match) {
+        return featureFlags[FEATURE_FLAGS[flag]] === match
+    }
+
     return !!featureFlags[FEATURE_FLAGS[flag]]
 }

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -131,7 +131,7 @@ export function LemonMenuOverlay({ items, tooltipPlacement, itemsRef }: LemonMen
     const { featureFlags } = useValues(featureFlagLogic)
     const sectionsOrItems = useMemo(() => normalizeItems(items), [items])
 
-    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? 'small' : 'medium'
+    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? 'small' : 'medium'
 
     return sectionsOrItems.length > 0 && isLemonMenuSection(sectionsOrItems[0]) ? (
         <LemonMenuSectionList

frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.tsx

@@ -44,7 +44,7 @@ export function LemonSegmentedButton<T extends React.Key>({
         HTMLDivElement,
         HTMLLIElement
     >(value, 200)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     let buttonProps = {}
 

frontend/src/lib/lemon-ui/Link/Link.tsx

@@ -87,7 +87,7 @@ export const Link: React.FC<LinkProps & React.RefAttributes<HTMLElement>> = Reac
             href: typeof to === 'string' ? to : undefined,
         })
 
-        const is3000 = useFeatureFlag('POSTHOG_3000')
+        const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
         const { openDocsPage } = useActions(sidePanelDocsLogic)
 
         const onClick = (event: React.MouseEvent<HTMLElement>): void => {

frontend/src/lib/logic/featureFlagLogic.ts

@@ -1,4 +1,5 @@
 import { actions, afterMount, kea, path, reducers } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { getAppContext } from 'lib/utils/getAppContext'
 import posthog from 'posthog-js'
 
@@ -22,7 +23,24 @@ function notifyFlagIfNeeded(flag: string, flagState: string | boolean | undefine
 
 function getPersistedFeatureFlags(appContext: AppContext | undefined = getAppContext()): FeatureFlagsSet {
     const persistedFeatureFlags = appContext?.persisted_feature_flags || []
-    return Object.fromEntries(persistedFeatureFlags.map((f) => [f, true]))
+    /** :HACKY: Handle experiment (non-boolean) feature flag for 3000. */
+    let has3000Flag = false
+    const flags = Object.fromEntries(
+        persistedFeatureFlags.map((f) => {
+            if (f === FEATURE_FLAGS.POSTHOG_3000) {
+                has3000Flag = true
+                return [f, 'test']
+            } else {
+                return [f, true]
+            }
+        })
+    )
+
+    if (!has3000Flag) {
+        flags[FEATURE_FLAGS.POSTHOG_3000] = 'control'
+    }
+
+    return flags
 }
 
 function spyOnFeatureFlags(featureFlags: FeatureFlagsSet): FeatureFlagsSet {

frontend/src/scenes/App.tsx

@@ -155,7 +155,7 @@ function AppScene(): JSX.Element | null {
         ) : null
     }
 
-    const Navigation = featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? Navigation3000 : NavigationClassic
+    const Navigation = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? Navigation3000 : NavigationClassic
 
     return (
         <>

frontend/src/scenes/authentication/InviteSignup.tsx

@@ -193,7 +193,7 @@ function AuthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }):
 function UnauthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): JSX.Element {
     const { signup, isSignupSubmitting } = useValues(inviteSignupLogic)
     const { preflight } = useValues(preflightLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     return (
         <BridgePage

frontend/src/scenes/authentication/useButtonStyles.ts

@@ -1,7 +1,7 @@
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 
 export function useButtonStyle(): Record<string, any> {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     return is3000
         ? {

frontend/src/scenes/dashboard/Dashboard.tsx

@@ -170,9 +170,8 @@ function DashboardScene(): JSX.Element {
                             </div>
                         )}
                     </div>
-                    {placement !== DashboardPlacement.Export && !featureFlags[FEATURE_FLAGS.POSTHOG_3000] && (
-                        <LemonDivider className="my-4" />
-                    )}
+                    {placement !== DashboardPlacement.Export &&
+                        featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'control' && <LemonDivider className="my-4" />}
                     <DashboardItems />
                 </div>
             )}

frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx

@@ -12,7 +12,7 @@ import { DASHBOARD_CANNOT_EDIT_MESSAGE } from './DashboardHeader'
 import { dashboardLogic } from './dashboardLogic'
 
 function SkeletonCard({ children, active }: { children: React.ReactNode; active: boolean }): JSX.Element {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
     const rounded = is3000 ? 'rounded-md' : 'rounded'
 
     return (

frontend/src/scenes/notebooks/IconNotebook.tsx

@@ -3,7 +3,7 @@ import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconNotebook as IconNotebookLegacy, LemonIconProps } from 'lib/lemon-ui/icons'
 
 export function IconNotebook(props: LemonIconProps): JSX.Element {
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     return is3000 ? <IconNotebook3000 {...props} /> : <IconNotebookLegacy {...props} />
 }

frontend/src/scenes/notebooks/Notebook/NotebookListMini.tsx

@@ -16,7 +16,7 @@ export type NotebookListMiniProps = {
 export function NotebookListMini({ selectedNotebookId }: NotebookListMiniProps): JSX.Element {
     const { notebooks, notebookTemplates } = useValues(notebooksModel)
 
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const selectedTitle =
         selectedNotebookId === 'scratchpad'

frontend/src/scenes/notebooks/NotebookCanvasScene.tsx

@@ -25,7 +25,7 @@ export function NotebookCanvas(): JSX.Element {
 
     const { duplicateNotebook } = useActions(notebookLogic(logicProps))
 
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     if (!is3000) {
         return <NotFound object="canvas" caption={<>Canvas mode requires PostHog 3000</>} />

frontend/src/scenes/notebooks/NotebookPanel/notebookPanelLogic.ts

@@ -67,7 +67,7 @@ export const notebookPanelLogic = kea<notebookPanelLogicType>([
     })),
 
     selectors(({ cache, actions }) => ({
-        is3000: [(s) => [s.featureFlags], (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000]],
+        is3000: [(s) => [s.featureFlags], (featureFlags) => featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'],
 
         visibility: [
             (s) => [s.selectedTab, s.sidePanelOpen, s.popoverVisibility, s.is3000],

frontend/src/scenes/notebooks/NotebookScene.tsx

@@ -41,7 +41,7 @@ export function NotebookScene(): JSX.Element {
     const { selectedNotebook, visibility } = useValues(notebookPanelLogic)
 
     const { featureFlags } = useValues(featureFlagLogic)
-    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] ? 'small' : 'medium'
+    const buttonSize = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test' ? 'small' : 'medium'
 
     if (!notebook && !loading && !conflictWarningVisible) {
         return <NotFound object="notebook" />

frontend/src/scenes/persons/personsLogic.tsx

@@ -79,7 +79,7 @@ export const personsLogic = kea<personsLogicType>([
                             ...(values.listFilters.properties || []),
                             ...values.hiddenListProperties,
                         ]
-                        if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000]) {
+                        if (values.featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test') {
                             newFilters.include_total = true // The total count is slow, but needed for infinite loading
                         }
                         if (props.cohort) {

frontend/src/scenes/project-homepage/ProjectHomepage.tsx

@@ -35,7 +35,7 @@ export function ProjectHomepage(): JSX.Element {
         sceneDashboardChoiceModalLogic({ scene: Scene.ProjectHomepage })
     )
 
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const headerButtons = (
         <>

frontend/src/scenes/saved-insights/SavedInsights.tsx

@@ -320,12 +320,13 @@ export function InsightIcon({ insight }: { insight: InsightModel }): JSX.Element
 export function NewInsightButton({ dataAttr }: NewInsightButtonProps): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
 
-    const overrides3000: Partial<LemonButtonWithSideActionProps> = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
-        ? {
-              size: 'small',
-              icon: <IconPlusMini />,
-          }
-        : {}
+    const overrides3000: Partial<LemonButtonWithSideActionProps> =
+        featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
+            ? {
+                  size: 'small',
+                  icon: <IconPlusMini />,
+              }
+            : {}
 
     return (
         <LemonButtonWithSideAction

frontend/src/scenes/session-recordings/SessionRecordings.tsx

@@ -57,7 +57,7 @@ export function SessionsRecordings(): JSX.Element {
         reportRecordingPlaylistCreated('filters')
     })
 
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     return (
         // Margin bottom hacks the fact that our wrapping container has an annoyingly large padding

frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx

@@ -37,7 +37,7 @@ export function PlayerInspectorControls(): JSX.Element {
     const { showOnlyMatching, timestampMode, miniFilters, syncScroll, searchQuery } = useValues(playerSettingsLogic)
     const { setShowOnlyMatching, setTimestampMode, setMiniFilter, setSyncScroll, setSearchQuery } =
         useActions(playerSettingsLogic)
-    const is3000 = useFeatureFlag('POSTHOG_3000')
+    const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard
 

frontend/src/scenes/web-analytics/WebDashboard.tsx

@@ -26,7 +26,7 @@ const Filters = (): JSX.Element => {
     } = useValues(webAnalyticsLogic)
     const { setWebAnalyticsFilters, setDates } = useActions(webAnalyticsLogic)
     const { featureFlags } = useValues(featureFlagLogic)
-    const hasPosthog3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000]
+    const hasPosthog3000 = featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
 
     return (
         <div