feat(experiment): warn user if the flag is disabled (#19923)

PostHog · Jan 23, 2024 · aba39b2 · aba39b2
1 parent 2a71fa6
commit aba39b2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/...tend/__snapshots__/scenes-app-experiments--complete-funnel-experiment--dark.png b/...tend/__snapshots__/scenes-app-experiments--complete-funnel-experiment--dark.png
diff --git a/...end/__snapshots__/scenes-app-experiments--complete-funnel-experiment--light.png b/...end/__snapshots__/scenes-app-experiments--complete-funnel-experiment--light.png
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -21,7 +21,7 @@ import { NotFound } from 'lib/components/NotFound'
 import { PageHeader } from 'lib/components/PageHeader'
 import { dayjs } from 'lib/dayjs'
 import { Field } from 'lib/forms/Field'
-import { IconDelete, IconPlusMini } from 'lib/lemon-ui/icons'
+import { IconDelete, IconPlusMini, IconWarning } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -38,7 +38,7 @@ import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
 import { Query } from '~/queries/Query/Query'
-import { AvailableFeature, Experiment as ExperimentType, FunnelStep, InsightType } from '~/types'
+import { AvailableFeature, Experiment as ExperimentType, FunnelStep, InsightType, ProgressStatus } from '~/types'
 
 import { EXPERIMENT_INSIGHT_ID } from './constants'
 import { ExperimentImplementationDetails } from './ExperimentImplementationDetails'
@@ -615,6 +615,19 @@ export function Experiment(): JSX.Element {
                                 {experiment.feature_flag && (
                                     <div className="block ml-10">
                                         <div className="exp-flag-copy-label">Feature flag</div>
+                                        {getExperimentStatus(experiment) === ProgressStatus.Running &&
+                                            !experiment.feature_flag.active && (
+                                                <Tooltip
+                                                    placement="bottom"
+                                                    title="Your experiment is running, but the linked flag is disabled. No data is being collected."
+                                                >
+                                                    <IconWarning
+                                                        style={{ transform: 'translateY(2px)' }}
+                                                        className="mr-1 text-danger"
+                                                        fontSize="18px"
+                                                    />
+                                                </Tooltip>
+                                            )}
                                         <CopyToClipboardInline
                                             iconStyle={{ color: 'var(--lemon-button-icon-opacity)' }}
                                             className="font-normal text-sm"
@@ -680,7 +693,7 @@ export function Experiment(): JSX.Element {
                                 for more information.{' '}
                             </LemonBanner>
                         )}
-                        {showWarning && experiment.end_date && (
+                        {showWarning && experiment.end_date && experiment.feature_flag?.active && (
                             <LemonBanner type="info" onClose={() => setShowWarning(false)}>
                                 <strong>Your experiment is complete, but the feature flag is still enabled.</strong> We
                                 recommend removing the feature flag from your code completely, instead of relying on