feat(feature-mgmt): Set up success/failure/exposure metrics

frontend/src/lib/api.ts

@@ -5,7 +5,7 @@ import { ActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { apiStatusLogic } from 'lib/logic/apiStatusLogic'
 import { objectClean, toParams } from 'lib/utils'
 import posthog from 'posthog-js'
-import { NewFeatureForm } from 'scenes/feature-management/featureManagementEditLogic'
+import { FeatureForm } from 'scenes/feature-management/featureManagementEditLogic'
 import { RecordingComment } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
 import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
 
@@ -1060,15 +1060,15 @@ const api = {
             return await new ApiRequest().feature(id, teamId).get()
         },
         async create(
-            feature: NewFeatureForm,
+            feature: FeatureForm,
             teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
         ): Promise<FeatureType> {
             return await new ApiRequest().features(teamId).create({ data: feature })
         },
         async update(
             feature: FeatureType,
             teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
-        ): Promise<FeatureType> {
+        ): Promise<FeatureForm> {
             return await new ApiRequest().feature(feature.id, teamId).update({ data: feature })
         },
     },

frontend/src/scenes/feature-management/FeatureManagementEdit.tsx

@@ -1,4 +1,5 @@
-import { LemonButton, LemonDivider, LemonInput, LemonTextArea } from '@posthog/lemon-ui'
+import { IconExternal, IconPlusSmall, IconTrash } from '@posthog/icons'
+import { LemonButton, LemonDivider, LemonInput, LemonLabel, LemonModal, LemonTextArea, Link } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { router } from 'kea-router'
@@ -7,7 +8,12 @@
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
+import { InsightModel } from '~/types'
+
 import { featureManagementEditLogic } from './featureManagementEditLogic'
+import { Query } from '~/queries/Query/Query'
+import { NodeKind } from '~/queries/schema'
+import { commonActionFilterProps } from 'scenes/experiments/Metrics/Selectors'
 
 export const scene: SceneExport = {
     component: FeatureManagementEdit,
@@ -18,14 +24,14 @@
 }
 
 function FeatureManagementEdit(): JSX.Element {
-    const { props } = useValues(featureManagementEditLogic)
+    const { props, featureForm } = useValues(featureManagementEditLogic)
 
     return (
         <Form
             id="feature-creation"
             logic={featureManagementEditLogic}
             props={props}
-            formKey="feature"
+            formKey="featureForm"
             enableFormOnSubmit
             className="space-y-4"
         >
@@ -88,6 +94,68 @@
             </div>
             <LemonDivider />
 
+            <div className="flex flex-col space-y-4">
+                <div className="flex flex-col items-start space-y-2">
+                    <LemonLabel>Success metrics (optional)</LemonLabel>
+                    {featureForm.success_metrics.map((insight) => (
+                        <FeatureManagementMetric
+                            key={insight.short_id}
+                            insight={insight}
+                            onDelete={() => alert(`Delete metric ${insight.short_id}`)}
+                        />
+                    ))}
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => alert('Add metric')}
+                        icon={<IconPlusSmall />}
+                        size="xsmall"
+                        data-attr="add-test-variant"
+                    >
+                        Add metric
+                    </LemonButton>
+                </div>
+                <div className="flex flex-col items-start space-y-2">
+                    <LemonLabel>Failure metrics (optional)</LemonLabel>
+                    {featureForm.failure_metrics.map((insight) => (
+                        <FeatureManagementMetric
+                            key={insight.short_id}
+                            insight={insight}
+                            onDelete={() => alert(`Delete metric ${insight.short_id}`)}
+                        />
+                    ))}
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => alert('Add metric')}
+                        icon={<IconPlusSmall />}
+                        size="xsmall"
+                        data-attr="add-test-variant"
+                    >
+                        Add metric
+                    </LemonButton>
+                </div>
+                <div className="flex flex-col items-start space-y-2">
+                    <LemonLabel>Exposure metrics (optional)</LemonLabel>
+                    {featureForm.exposure_metrics.map((insight) => (
+                        <FeatureManagementMetric
+                            key={insight.short_id}
+                            insight={insight}
+                            onDelete={() => alert(`Delete metric ${insight.short_id}`)}
+                        />
+                    ))}
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => alert('Add metric')}
+                        icon={<IconPlusSmall />}
+                        size="xsmall"
+                        data-attr="add-test-variant"
+                    >
+                        Add metric
+                    </LemonButton>
+                </div>
+            </div>
+
+            <LemonDivider />
+
             <div className="flex items-center gap-2 justify-end">
                 <LemonButton
                     data-attr="cancel-feature-flag"
@@ -103,3 +171,127 @@
         </Form>
     )
 }
+
+function FeatureManagementMetric({ insight, onDelete }: { insight: InsightModel; onDelete: () => void }): JSX.Element {
+    return (
+        <div>
+            <div className="flex items-center gap-2">
+                <span>{insight.name}</span>
+
+                <Link to={urls.insightView(insight.short_id)}>
+                    <LemonButton type="primary" icon={<IconExternal />}>
+                        View metric
+                    </LemonButton>
+                </Link>
+
+                <LemonButton type="secondary" icon={<IconTrash />} onClick={onDelete} />
+            </div>
+        </div>
+    )
+}
+
+function FeatureMetricModal({
+    isOpen,
+    onChange,
+    onClose,
+}: {
+    isOpen: boolean
+    onChange: (metric: InsightModel) => void
+    onClose: () => void
+}): JSX.Element {
+    const { experiment, experimentLoading } = useValues(experimentLogic({ experimentId }))
+    const { updateExperiment } = useActions(experimentLogic({ experimentId }))
+
+    return (
+        <LemonModal
+            isOpen={isOpen}
+            onClose={onClose}
+            width={1000}
+            title="Change feature metric"
+            footer={
+                <div className="flex items-center gap-2">
+                    <LemonButton form="edit-experiment-exposure-form" type="secondary" onClick={onClose}>
+                        Cancel
+                    </LemonButton>
+                    <LemonButton
+                        form="edit-experiment-exposure-form"
+                        onClick={() => {
+                            updateExperiment({
+                                metrics: experiment.metrics,
+                            })
+                        }}
+                        type="primary"
+                        loading={experimentLoading}
+                        data-attr="create-annotation-submit"
+                    >
+                        Save
+                    </LemonButton>
+                </div>
+            }
+        >
+            <PrimaryGoalTrendsExposure />
+        </LemonModal>
+    )
+}
+
+function FeatureMetricPicker({ onChange }: { onChange: (something: any) => void }): JSX.Element {
+    const hasFilters = (currentTeam?.test_account_filters || []).length > 0
+
+    if (!editingPrimaryMetricIndex && editingPrimaryMetricIndex !== 0) {
+        return <></>
+    }
+
+    const metricIdx = editingPrimaryMetricIndex
+    const currentMetric = experiment.metrics[metricIdx] as ExperimentTrendsQuery
+
+    return (
+        <>
+            <ActionFilter
+                bordered
+                filters={queryNodeToFilter(currentMetric.exposure_query as InsightQueryNode)}
+                setFilters={({ actions, events, data_warehouse }: Partial<FilterType>): void => {
+                    const series = actionsAndEventsToSeries(
+                        { actions, events, data_warehouse } as any,
+                        true,
+                        MathAvailability.All
+                    )
+
+                    setTrendsExposureMetric({
+                        metricIdx,
+                        series,
+                    })
+                }}
+                typeKey="experiment-metric"
+                buttonCopy="Add graph series"
+                showSeriesIndicator={true}
+                entitiesLimit={1}
+                showNumericalPropsOnly={true}
+                {...commonActionFilterProps}
+            />
+            <div className="mt-4 space-y-4">
+                <TestAccountFilterSwitch
+                    checked={hasFilters ? !!currentMetric.exposure_query?.filterTestAccounts : false}
+                    onChange={(checked: boolean) => {
+                        setTrendsExposureMetric({
+                            metricIdx,
+                            filterTestAccounts: checked,
+                        })
+                    }}
+                    fullWidth
+                />
+            </div>
+            <div className="mt-4">
+                <Query
+                    query={{
+                        kind: NodeKind.InsightVizNode,
+                        source: currentMetric.exposure_query,
+                        showTable: false,
+                        showLastComputation: true,
+                        showLastComputationRefresh: false,
+                    }}
+                    readOnly
+                />
+            </div>
+        </>
+    )
+}

frontend/src/scenes/feature-management/featureManagementEditLogic.ts

@@ -7,7 +7,7 @@ import api from 'lib/api'
 import { Scene } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
-import { Breadcrumb, FeatureType } from '~/types'
+import { Breadcrumb, FeatureType, InsightModel } from '~/types'
 
 import type { featureManagementEditLogicType } from './featureManagementEditLogicType'
 import { featureManagementLogic } from './featureManagementLogic'
@@ -17,12 +17,22 @@ export interface FeatureLogicProps {
     id: string
 }
 
-export type NewFeatureForm = Pick<FeatureType, 'key' | 'name' | 'description'>
+export type FeatureForm = {
+    name: string
+    key: string
+    description: string
+    success_metrics: InsightModel[]
+    failure_metrics: InsightModel[]
+    exposure_metrics: InsightModel[]
+}
 
-const NEW_FEATURE: NewFeatureForm = {
+const NEW_FEATURE: FeatureForm = {
     key: '',
     name: '',
     description: '',
+    success_metrics: [],
+    failure_metrics: [],
+    exposure_metrics: [],
 }
 
 export const featureManagementEditLogic = kea<featureManagementEditLogicType>([
@@ -32,23 +42,23 @@ export const featureManagementEditLogic = kea<featureManagementEditLogicType>([
         actions: [featureManagementLogic, ['loadFeatures']],
     }),
     loaders(({ props, actions }) => ({
-        feature: {
-            saveFeature: async (updatedFeature: NewFeatureForm | FeatureType) => {
+        featureForm: {
+            saveFeature: async (updatedFeature: FeatureForm): Promise<FeatureType> => {
                 let feature
                 if (props.id === 'new') {
                     feature = await api.features.create(updatedFeature)
                 } else {
-                    feature = await api.features.update(updatedFeature as FeatureType)
+                    feature = await api.features.update(updatedFeature)
                 }
 
                 // Reset the form after creation
                 actions.resetFeature()
-                return feature
+                return updatedFeature
             },
         },
     })),
     forms(({ actions }) => ({
-        feature: {
+        featureForm: {
             defaults: { ...NEW_FEATURE },
             // sync validation, will be shown as errors in the form
             errors: ({ name }) => {
@@ -63,7 +73,7 @@ export const featureManagementEditLogic = kea<featureManagementEditLogicType>([
         },
     })),
     reducers({
-        feature: [
+        featureForm: [
             NEW_FEATURE,
             {
                 setFeatureValue: (state, { name, value }) => {

frontend/src/scenes/feature-management/featureManagementLogic.ts

@@ -72,6 +72,7 @@ export const featureManagementLogic = kea<featureManagementLogicType>([
     }),
     listeners(({ actions, values }) => ({
         loadFeaturesSuccess: ({ features }) => {
+            console.log('loadFeaturesSuccess', { features, active: values.activeFeatureId })
             if (values.activeFeatureId === null && features.results.length > 0) {
                 actions.setActiveFeatureId(features.results[0].id)
             }
@@ -84,7 +85,9 @@ export const featureManagementLogic = kea<featureManagementLogicType>([
     }),
     urlToAction(({ actions, values }) => ({
         '/features/:id': ({ id }) => {
-            if (id && String(values.activeFeatureId) !== id && id !== 'new') {
+            console.log('urlToAction', { id })
+
+            if (id && String(values.activeFeatureId) !== id) {
                 actions.setActiveFeatureId(id)
             }
         },