diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index b3edb1d6971..cb5831d6a05 100644 --- a/frontend/src/lib/constants.tsx +++ b/frontend/src/lib/constants.tsx @@ -230,6 +230,7 @@ export const FEATURE_FLAGS = { EDIT_DWH_SOURCE_CONFIG: 'edit_dwh_source_config', // owner: @Gilbert09 #team-data-warehouse AI_SURVEY_RESPONSE_SUMMARY: 'ai-survey-response-summary', // owner: @pauldambra CUSTOM_CHANNEL_TYPE_RULES: 'custom-channel-type-rules', // owner: @robbie-c #team-web-analytics + EXPERIMENTS_MIGRATION_DISABLE_UI: 'experiments-migration-disable-ui', // owner: @jurajmajerik #team-experiments } as const export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS] diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx index cb7c1762cbc..1e0ad4f535b 100644 --- a/frontend/src/scenes/experiments/ExperimentForm.tsx +++ b/frontend/src/scenes/experiments/ExperimentForm.tsx @@ -14,6 +14,7 @@ import { capitalizeFirstLetter } from 'lib/utils' import { experimentsLogic } from 'scenes/experiments/experimentsLogic' import { experimentLogic } from './experimentLogic' +import { ExperimentsDisabledBanner } from './Experiments' const ExperimentFormFields = (): JSX.Element => { const { experiment, featureFlags, groupTypes, aggregationLabel, dynamicFeatureFlagKey } = useValues(experimentLogic) @@ -21,7 +22,9 @@ const ExperimentFormFields = (): JSX.Element => { useActions(experimentLogic) const { webExperimentsAvailable } = useValues(experimentsLogic) - return ( + return featureFlags[FEATURE_FLAGS.EXPERIMENTS_MIGRATION_DISABLE_UI] ? ( + + ) : (
diff --git a/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx b/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx index 8225391583f..446ee2fdf45 100644 --- a/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx +++ b/frontend/src/scenes/experiments/ExperimentView/ExperimentView.tsx @@ -2,11 +2,13 @@ import '../Experiment.scss' import { LemonDivider, LemonTabs } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' +import { FEATURE_FLAGS } from 'lib/constants' import { PostHogFeature } from 'posthog-js/react' import { WebExperimentImplementationDetails } from 'scenes/experiments/WebExperimentImplementationDetails' import { ExperimentImplementationDetails } from '../ExperimentImplementationDetails' import { experimentLogic } from '../experimentLogic' +import { ExperimentsDisabledBanner } from '../Experiments' import { ExperimentLoadingAnimation, LoadingState, @@ -67,14 +69,16 @@ const VariantsTab = (): JSX.Element => { } export function ExperimentView(): JSX.Element { - const { experimentLoading, experimentResultsLoading, experimentId, experimentResults, tabKey } = + const { experimentLoading, experimentResultsLoading, experimentId, experimentResults, tabKey, featureFlags } = useValues(experimentLogic) const { setTabKey } = useActions(experimentLogic) const hasResultsInsight = experimentResults && experimentResults.insight - return ( + return featureFlags[FEATURE_FLAGS.EXPERIMENTS_MIGRATION_DISABLE_UI] ? ( + + ) : ( <>
diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx index e0846346935..a9e4779319b 100644 --- a/frontend/src/scenes/experiments/Experiments.tsx +++ b/frontend/src/scenes/experiments/Experiments.tsx @@ -1,7 +1,7 @@ import { LemonDialog, LemonInput, LemonSelect } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { router } from 'kea-router' -import { ExperimentsHog } from 'lib/components/hedgehogs' +import { DetectiveHog, ExperimentsHog } from 'lib/components/hedgehogs' import { MemberSelect } from 'lib/components/MemberSelect' import { PageHeader } from 'lib/components/PageHeader' import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction' @@ -16,6 +16,7 @@ import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink' import { LemonTabs } from 'lib/lemon-ui/LemonTabs' import { Link } from 'lib/lemon-ui/Link' import stringWithWBR from 'lib/utils/stringWithWBR' +import posthog from 'posthog-js' import { SceneExport } from 'scenes/sceneTypes' import { urls } from 'scenes/urls' @@ -30,6 +31,33 @@ export const scene: SceneExport = { logic: experimentsLogic, } +export const ExperimentsDisabledBanner = (): JSX.Element => { + const payload = posthog.getFeatureFlagPayload(FEATURE_FLAGS.EXPERIMENTS_MIGRATION_DISABLE_UI) + + return ( +
+
+
+
+ +
+
+
+

We'll be right back!

+

+ We’re upgrading experiments to a new schema to make them faster, more reliable, and ready for + future improvements. +

+

+ We expect to be done by {payload}. Thanks for your + patience! +

+
+
+
+ ) +} + export function Experiments(): JSX.Element { const { filteredExperiments, @@ -189,7 +217,9 @@ export function Experiments(): JSX.Element { }, ] - return ( + return featureFlags[FEATURE_FLAGS.EXPERIMENTS_MIGRATION_DISABLE_UI] ? ( + + ) : (