fix(feature-previews): Fix feature flag matching for button (#16721)

PostHog · Jul 24, 2023 · e12eab9 · e12eab9
1 parent 967268b
commit e12eab9
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 14 deletions.
diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx
@@ -33,7 +33,7 @@ export function Breadcrumbs(): JSX.Element | null {
             {/* TODO: These buttons below are hardcoded right now, scene-based system coming in the next PR */}
             <LemonButton className="Breadcrumbs3000__more" icon={<IconEllipsisVertical />} size="small" />
             <div className="Breadcrumbs3000__actions">
-                <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} match={true}>
+                <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS}>
                     <NotebookButton />
                 </FlaggedFeature>
                 <NewInsightButton dataAttr="project-home-new-insight" />

diff --git a/frontend/src/layout/navigation/TopBar/SitePopover.tsx b/frontend/src/layout/navigation/TopBar/SitePopover.tsx
@@ -314,7 +314,7 @@ export function SitePopoverOverlay(): JSX.Element {
                     <InstanceSettings />
                 </SitePopoverSection>
             )}
-            <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON} match>
+            <FlaggedFeature flag={FEATURE_FLAGS.EARLY_ACCESS_FEATURE_SITE_BUTTON}>
                 <SitePopoverSection>
                     <FeaturePreviewsButton />
                 </SitePopoverSection>

diff --git a/frontend/src/lib/components/FlaggedFeature.tsx b/frontend/src/lib/components/FlaggedFeature.tsx
@@ -4,17 +4,24 @@ import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 
 export type PostHogFeatureProps = {
     flag: FeatureFlagKey
+    /** What specific state or variant of feature flag needs to be active. */
     match?: string | boolean
+    /** Rendered when the flag state/variant matches. */
     children: React.ReactNode | ((payload: any) => React.ReactNode)
+    /** Rendered when the flag state/variant doesn't match. */
+    fallback?: React.ReactNode
 }
 
-export function FlaggedFeature({ flag, match, children }: PostHogFeatureProps): JSX.Element | null {
+export function FlaggedFeature({ flag, match, children, fallback }: PostHogFeatureProps): JSX.Element | null {
     const { featureFlags } = useValues(featureFlagLogic)
 
     const flagValue = featureFlags[flag] || false
+    const doesFlagMatch = match === undefined ? !!flagValue : flagValue === match
 
-    if (match === undefined || flagValue === match) {
+    if (doesFlagMatch) {
         return typeof children === 'function' ? children(flagValue) : children
+    } else if (fallback) {
+        return <>{fallback}</>
     }
 
     return null

diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -499,7 +499,7 @@ export function HedgehogBuddy({
                             </div>
                         ))}
 
-                        <FlaggedFeature flag={FEATURE_FLAGS.HEDGEHOG_MODE_DEBUG} match>
+                        <FlaggedFeature flag={FEATURE_FLAGS.HEDGEHOG_MODE_DEBUG}>
                             <>
                                 <LemonDivider />
                                 <div className="flex gap-2 my-2 overflow-y-auto">

diff --git a/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx b/frontend/src/queries/nodes/HogQLQuery/HogQLQueryEditor.tsx
@@ -49,7 +49,7 @@ export function HogQLQueryEditor(props: HogQLQueryEditorProps): JSX.Element {
                 className={'flex flex-col p-2 border rounded bg-bg-light space-y-2 resize-y w-full overflow-hidden'}
                 style={{ height: 318 }}
             >
-                <FlaggedFeature flag={FEATURE_FLAGS.ARTIFICIAL_HOG} match>
+                <FlaggedFeature flag={FEATURE_FLAGS.ARTIFICIAL_HOG}>
                     <div className="flex gap-2">
                         <LemonInput
                             className="grow"

diff --git a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.tsx
@@ -40,10 +40,7 @@ export function DraggableToNotebook({
 
     return (
         <>
-            <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} match={false}>
-                {children}
-            </FlaggedFeature>
-            <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} match>
+            <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} fallback={children}>
                 <span
                     className={clsx(
                         'DraggableToNotebook',

diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookSideBar.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookSideBar.tsx
@@ -53,7 +53,7 @@ export function NotebookSideBar({ children }: { children: React.ReactElement<any
     return (
         <>
             {clonedChild}
-            <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS} match>
+            <FlaggedFeature flag={FEATURE_FLAGS.NOTEBOOKS}>
                 <div
                     ref={ref}
                     className={clsx('NotebookSidebar', fullScreen && 'NotebookSidebar--full-screen')}

diff --git a/frontend/src/scenes/project/Settings/AutocaptureSettings.tsx b/frontend/src/scenes/project/Settings/AutocaptureSettings.tsx
@@ -40,7 +40,7 @@ export function AutocaptureSettings(): JSX.Element {
                     label="Enable Autocapture"
                     bordered
                 />
-                <FlaggedFeature flag={FEATURE_FLAGS.EXCEPTION_AUTOCAPTURE} match={true}>
+                <FlaggedFeature flag={FEATURE_FLAGS.EXCEPTION_AUTOCAPTURE}>
                     <div className={'mt-4 border rounded px-6 py-4'}>
                         <LemonSwitch
                             id="posthog-autocapture-exceptions-switch"

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx
@@ -119,7 +119,7 @@ export function PlayerController(): JSX.Element {
                                         Export to file
                                     </LemonButton>
 
-                                    <FlaggedFeature flag={FEATURE_FLAGS.RECORDINGS_DOM_EXPLORER} match={true}>
+                                    <FlaggedFeature flag={FEATURE_FLAGS.RECORDINGS_DOM_EXPLORER}>
                                         <LemonButton
                                             status="stealth"
                                             onClick={() => openExplorer()}

diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerSeekbarPreview.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerSeekbarPreview.tsx
@@ -86,7 +86,7 @@ export function PlayerSeekbarPreview({ minMs, maxMs }: PlayerSeekbarPreviewProps
                 }}
             >
                 <div className="PlayerSeekBarPreview__tooltip__content">
-                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_RECORDING_PLAYER_PREVIEW} match>
+                    <FlaggedFeature flag={FEATURE_FLAGS.SESSION_RECORDING_PLAYER_PREVIEW}>
                         <PlayerSeekbarPreviewFrame minMs={minMs} maxMs={maxMs} percentage={percentage} />
                     </FlaggedFeature>
                     <div className="text-center p-2">{content}</div>