feat(experiments HogQL): add disabled UI placeholder (#26251)

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]
 

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] ? (
+        <ExperimentsDisabledBanner />
+    ) : (
         <div>
             <div className="space-y-8">
                 <div className="space-y-6 max-w-120">

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] ? (
+        <ExperimentsDisabledBanner />
+    ) : (
         <>
             <PageHeaderCustom />
             <div className="space-y-8 experiment-view">

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 (
+        <div className="border-2 border-dashed border-border w-full p-8 justify-center rounded mt-2 mb-4">
+            <div className="flex items-center gap-8 w-full justify-center flex-wrap">
+                <div>
+                    <div className="w-50 mx-auto mb-4">
+                        <DetectiveHog className="w-full h-full" />
+                    </div>
+                </div>
+                <div className="flex-shrink max-w-140">
+                    <h2>We'll be right back!</h2>
+                    <p>
+                        We’re upgrading experiments to a new schema to make them faster, more reliable, and ready for
+                        future improvements.
+                    </p>
+                    <p>
+                        We expect to be done by <span className="font-semibold">{payload}</span>. Thanks for your
+                        patience!
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
 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] ? (
+        <ExperimentsDisabledBanner />
+    ) : (
         <div>
             <PageHeader
                 buttons={