@@ -20,6 +20,7 @@ import type { Experiment } from '~/types'
2020
2121import { ExperimentTypePanel } from './ExperimentTypePanel'
2222import { ExposureCriteriaPanel } from './ExposureCriteriaPanel'
23+ import { MetricsPanel } from './MetricsPanel/MetricsPanel'
2324import { VariantsPanel } from './VariantsPanel'
2425import { createExperimentLogic } from './createExperimentLogic'
2526
@@ -44,8 +45,12 @@ const SHOW_TARGETING_PANEL = false
4445export const CreateExperiment = ( { draftExperiment } : CreateExperimentProps ) : JSX . Element => {
4546 const { HogfettiComponent } = useHogfetti ( { count : 100 , duration : 3000 } )
4647
47- const { experiment, experimentErrors } = useValues ( createExperimentLogic ( { experiment : draftExperiment } ) )
48- const { setExperimentValue } = useActions ( createExperimentLogic ( { experiment : draftExperiment } ) )
48+ const { experiment, experimentErrors, sharedMetrics } = useValues (
49+ createExperimentLogic ( { experiment : draftExperiment } )
50+ )
51+ const { setExperimentValue, setExperiment, setSharedMetrics } = useActions (
52+ createExperimentLogic ( { experiment : draftExperiment } )
53+ )
4954
5055 const [ selectedPanel , setSelectedPanel ] = useState < string | null > ( null )
5156
@@ -171,9 +176,79 @@ export const CreateExperiment = ({ draftExperiment }: CreateExperimentProps): JS
171176 key : 'experiment-metrics' ,
172177 header : 'Metrics' ,
173178 content : (
174- < div className = "p-4" >
175- < span > Metrics Panel Goes Here</ span >
176- </ div >
179+ < MetricsPanel
180+ experiment = { experiment }
181+ sharedMetrics = { sharedMetrics }
182+ onSaveMetric = { ( metric , context ) => {
183+ const isNew = ! experiment [ context . field ] . some ( ( m ) => m . uuid === metric . uuid )
184+
185+ setExperiment ( {
186+ ...experiment ,
187+ [ context . field ] : isNew
188+ ? [ ...experiment [ context . field ] , metric ]
189+ : experiment [ context . field ] . map ( ( m ) =>
190+ m . uuid === metric . uuid ? metric : m
191+ ) ,
192+ ...( isNew && {
193+ [ context . orderingField ] : [
194+ ...( experiment [ context . orderingField ] ?? [ ] ) ,
195+ metric . uuid ,
196+ ] ,
197+ } ) ,
198+ } )
199+ } }
200+ onDeleteMetric = { ( metric , context ) => {
201+ if ( metric . isSharedMetric ) {
202+ setExperiment ( {
203+ ...experiment ,
204+ [ context . orderingField ] : (
205+ experiment [ context . orderingField ] ?? [ ]
206+ ) . filter ( ( uuid ) => uuid !== metric . uuid ) ,
207+ } )
208+ setSharedMetrics ( {
209+ ...sharedMetrics ,
210+ [ context . type ] : sharedMetrics [ context . type ] . filter (
211+ ( m ) => m . uuid !== metric . uuid
212+ ) ,
213+ } )
214+ return
215+ }
216+
217+ const metricIndex = experiment [ context . field ] . findIndex (
218+ ( { uuid } ) => uuid === metric . uuid
219+ )
220+ if ( metricIndex !== - 1 ) {
221+ setExperiment ( {
222+ ...experiment ,
223+ [ context . field ] : experiment [ context . field ] . filter (
224+ ( { uuid } ) => uuid !== metric . uuid
225+ ) ,
226+ [ context . orderingField ] : (
227+ experiment [ context . orderingField ] ?? [ ]
228+ ) . filter ( ( uuid ) => uuid !== metric . uuid ) ,
229+ } )
230+ }
231+ } }
232+ onSaveSharedMetrics = { ( metrics , context ) => {
233+ setExperiment ( {
234+ ...experiment ,
235+ [ context . orderingField ] : [
236+ ...( experiment [ context . orderingField ] ?? [ ] ) ,
237+ ...metrics . map ( ( metric ) => metric . uuid ) ,
238+ ] ,
239+ saved_metrics : [
240+ ...( experiment . saved_metrics ?? [ ] ) ,
241+ ...metrics . map ( ( metric ) => ( {
242+ saved_metric : metric . sharedMetricId ,
243+ } ) ) ,
244+ ] ,
245+ } )
246+ setSharedMetrics ( {
247+ ...sharedMetrics ,
248+ [ context . type ] : [ ...sharedMetrics [ context . type ] , ...metrics ] ,
249+ } )
250+ } }
251+ />
177252 ) ,
178253 } ,
179254 ] }
0 commit comments