feat: create experiment from a funnel

frontend/src/queries/utils.ts

@@ -489,3 +489,10 @@ export function isValidBreakdown(breakdownFilter?: BreakdownFilter | null): brea
             (breakdownFilter.breakdowns && breakdownFilter.breakdowns.length > 0))
     )
 }
+
+export function isValidQueryForExperiment(query: Node): boolean {
+    return (
+        isNodeWithSource(query) &&
+        (isFunnelsQuery(query.source) || (isTrendsQuery(query.source) && query.source.series.length === 1))
+    )
+}

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -17,6 +17,7 @@ import { validateFeatureFlagKey } from 'scenes/feature-flags/featureFlagLogic'
 import { featureFlagsLogic } from 'scenes/feature-flags/featureFlagsLogic'
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
+import { insightsApi } from 'scenes/insights/utils/api'
 import { cleanFilters, getDefaultEvent } from 'scenes/insights/utils/cleanFilters'
 import { projectLogic } from 'scenes/projectLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -36,6 +37,8 @@ import {
     ExperimentTrendsQuery,
     NodeKind,
 } from '~/queries/schema'
+import { isFunnelsQuery, isTrendsQuery } from '~/queries/utils'
+import { isNodeWithSource, isValidQueryForExperiment } from '~/queries/utils'
 import {
     Breadcrumb,
     BreakdownAttributionType,
@@ -51,10 +54,12 @@ import {
     FunnelExperimentVariant,
     FunnelStep,
     FunnelVizType,
+    type InsightShortId,
     InsightType,
     MultivariateFlagVariant,
     ProductKey,
     PropertyMathType,
+    type QueryBasedInsightModel,
     TrendExperimentVariant,
     TrendResult,
     TrendsFilterType,
@@ -580,6 +585,10 @@ export const experimentLogic = kea<experimentLogicType>([
                 actions.touchExperimentField(`parameters.feature_flag_variants.${i}.key`)
             )
 
+            const insight = values.insight as QueryBasedInsightModel | null
+
+            const experimentMetric = getExperimentMetricFromInsight(insight)
+
             if (hasFormErrors(values.experimentErrors)) {
                 return
             }
@@ -607,6 +616,7 @@ export const experimentLogic = kea<experimentLogicType>([
                                 recommended_sample_size: recommendedSampleSize,
                                 minimum_detectable_effect: minimumDetectableEffect,
                             },
+                            metrics: experimentMetric ? [experimentMetric] : [],
                             ...(!draft && { start_date: dayjs() }),
                             // backwards compatibility: Remove any global properties set on the experiment.
                             // These were used to change feature flag targeting, but this is controlled directly
@@ -619,6 +629,7 @@ export const experimentLogic = kea<experimentLogicType>([
                             },
                         }
                     )
+
                     if (response?.id) {
                         actions.updateExperiments(response)
                         actions.setEditExperiment(false)
@@ -635,6 +646,7 @@ export const experimentLogic = kea<experimentLogicType>([
                             minimum_detectable_effect: minimumDetectableEffect,
                         },
                         ...(!draft && { start_date: dayjs() }),
+                        metrics: experimentMetric ? [experimentMetric] : [],
                     })
                     if (response) {
                         actions.reportExperimentCreated(response)
@@ -959,6 +971,12 @@ export const experimentLogic = kea<experimentLogicType>([
                 return response
             },
         },
+        insight: {
+            loadInsight: async (shortId: InsightShortId): Promise<QueryBasedInsightModel | null> => {
+                const insight = await insightsApi.getByShortId(shortId, undefined, 'async')
+                return insight
+            },
+        },
         metricResults: [
             null as (CachedExperimentTrendsQueryResponse | CachedExperimentFunnelsQueryResponse | null)[] | null,
             {
@@ -1756,19 +1774,26 @@ export const experimentLogic = kea<experimentLogicType>([
         },
     })),
     urlToAction(({ actions, values }) => ({
-        '/experiments/:id': ({ id }, _, __, currentLocation, previousLocation) => {
+        '/experiments/:id': ({ id }, query, __, currentLocation, previousLocation) => {
             const didPathChange = currentLocation.initial || currentLocation.pathname !== previousLocation?.pathname
 
             actions.setEditExperiment(false)
 
             if (id && didPathChange) {
                 const parsedId = id === 'new' ? 'new' : parseInt(id)
                 if (parsedId === 'new') {
-                    actions.resetExperiment()
+                    actions.resetExperiment({
+                        ...NEW_EXPERIMENT,
+                        name: query.name ?? '',
+                    })
                 }
                 if (parsedId !== 'new' && parsedId === values.experimentId) {
                     actions.loadExperiment()
                 }
+
+                if (query.insight) {
+                    actions.loadInsight(query.insight as InsightShortId)
+                }
             }
         },
     })),
@@ -1891,3 +1916,31 @@ export function getDefaultFunnelsMetric(): ExperimentFunnelsQuery {
         },
     }
 }
+
+export function getExperimentMetricFromInsight(
+    insight: QueryBasedInsightModel | null
+): ExperimentTrendsQuery | ExperimentFunnelsQuery | undefined {
+    if (!insight?.query || !isValidQueryForExperiment(insight?.query) || !isNodeWithSource(insight.query)) {
+        return undefined
+    }
+
+    const metricName = (insight?.name || insight?.derived_name) ?? undefined
+
+    if (isFunnelsQuery(insight.query.source)) {
+        return {
+            kind: NodeKind.ExperimentFunnelsQuery,
+            funnels_query: insight.query.source,
+            name: metricName,
+        }
+    }
+
+    if (isTrendsQuery(insight.query.source)) {
+        return {
+            kind: NodeKind.ExperimentTrendsQuery,
+            count_query: insight.query.source,
+            name: metricName,
+        }
+    }
+
+    return undefined
+}

frontend/src/scenes/insights/InsightPageHeader.tsx

@@ -1,3 +1,4 @@
+import { IconTestTube } from '@posthog/icons'
 import { useActions, useMountedLogic, useValues } from 'kea'
 import { router } from 'kea-router'
 import { AddToDashboard } from 'lib/components/AddToDashboard/AddToDashboard'
@@ -38,7 +39,13 @@ import { userLogic } from 'scenes/userLogic'
 
 import { tagsModel } from '~/models/tagsModel'
 import { DataTableNode, NodeKind } from '~/queries/schema'
-import { isDataTableNode, isDataVisualizationNode, isEventsQuery, isHogQLQuery } from '~/queries/utils'
+import {
+    isDataTableNode,
+    isDataVisualizationNode,
+    isEventsQuery,
+    isHogQLQuery,
+    isValidQueryForExperiment,
+} from '~/queries/utils'
 import {
     ExporterFormat,
     InsightLogicProps,
@@ -366,6 +373,20 @@ export function InsightPageHeader({ insightLogicProps }: { insightLogicProps: In
                                 <AddToDashboard insight={insight} setOpenModal={setAddToDashboardModalOpenModal} />
                             </>
                         )}
+                        {insightMode !== ItemMode.Edit &&
+                            insight?.query &&
+                            isValidQueryForExperiment(insight.query) && (
+                                <LemonButton
+                                    icon={<IconTestTube />}
+                                    type="secondary"
+                                    to={urls.experiment('new', {
+                                        insight: insight.short_id ?? undefined,
+                                        name: (insight.name || insight.derived_name) ?? undefined,
+                                    })}
+                                >
+                                    Run Experiment
+                                </LemonButton>
+                            )}
 
                         {insightMode !== ItemMode.Edit ? (
                             canEditInsight && (

frontend/src/scenes/urls.ts

@@ -1,5 +1,6 @@
 import { combineUrl } from 'kea-router'
 import { AlertType } from 'lib/components/Alerts/types'
+import { toParams } from 'lib/utils'
 import { getCurrentTeamId } from 'lib/utils/getAppContext'
 
 import { ExportOptions } from '~/exporter/types'
@@ -157,7 +158,13 @@ export const urls = {
         `/groups/${groupTypeIndex}/${encode ? encodeURIComponent(groupKey) : groupKey}${tab ? `/${tab}` : ''}`,
     cohort: (id: string | number): string => `/cohorts/${id}`,
     cohorts: (): string => '/cohorts',
-    experiment: (id: string | number): string => `/experiments/${id}`,
+    experiment: (
+        id: string | number,
+        options?: {
+            insight?: string
+            name?: string
+        }
+    ): string => `/experiments/${id}${options ? `?${toParams(options)}` : ''}`,
     experiments: (): string => '/experiments',
     experimentsSharedMetrics: (): string => '/experiments/shared-metrics',
     experimentsSharedMetric: (id: string | number): string => `/experiments/shared-metrics/${id}`,