feat(experimentation): add experiment creation wizard frontend

frontend/common/services/useExperiment.ts

@@ -0,0 +1,30 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const experimentService = service
+  .enhanceEndpoints({ addTagTypes: ['Experiment'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createExperiment: builder.mutation<
+        Res['experiment'],
+        Req['createExperiment']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ body, environmentId }) => ({
+          body,
+          method: 'POST',
+          url: `environments/${environmentId}/experiments/`,
+        }),
+      }),
+      getExperiments: builder.query<Res['experiments'], Req['getExperiments']>({
+        providesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId }) => ({
+          url: `environments/${environmentId}/experiments/`,
+        }),
+      }),
+    }),
+  })
+
+export const { useCreateExperimentMutation, useGetExperimentsQuery } =
+  experimentService

frontend/common/types/requests.ts

@@ -984,5 +984,10 @@ export type Req = {
     name?: string
     config?: Record<string, string>
   }
+  getExperiments: { environmentId: string }
+  createExperiment: {
+    environmentId: string
+    body: { name: string; hypothesis: string; feature: number }
+  }
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -571,6 +571,20 @@ export type MultivariateOption = {
 
 export type FeatureType = 'STANDARD' | 'MULTIVARIATE'
 
+export type ExperimentStatus = 'created' | 'running' | 'paused' | 'completed'
+
+export type Experiment = {
+  id: number
+  name: string
+  hypothesis: string
+  feature: number
+  status: ExperimentStatus
+  created_at: string
+  updated_at: string
+  started_at: string | null
+  ended_at: string | null
+}
+
 export enum TagStrategy {
   INTERSECTION = 'INTERSECTION',
   UNION = 'UNION',
@@ -1343,5 +1357,7 @@ export type Res = {
   gitlabIssues: PagedResponse<GitLabIssue>
   gitlabMergeRequests: PagedResponse<GitLabMergeRequest>
   warehouseConnections: WarehouseConnection[]
+  experiments: Experiment[]
+  experiment: Experiment
   // END OF TYPES
 }

frontend/web/components/base/grid/ContentCard.scss

@@ -0,0 +1,22 @@
+.content-card {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-size: var(--font-body-size, 0.875rem);
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--color-text-default);
+    margin: 0;
+  }
+}

frontend/web/components/base/grid/ContentCard.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react'
+import cn from 'classnames'
+import './ContentCard.scss'
+
+type ContentCardProps = {
+  title?: string
+  action?: ReactNode
+  className?: string
+  children: ReactNode
+}
+
+const ContentCard: FC<ContentCardProps> = ({
+  action,
+  children,
+  className,
+  title,
+}) => {
+  return (
+    <div className={cn('content-card', className)}>
+      {(title || action) && (
+        <div className='content-card__header'>
+          {title && <h3 className='content-card__title'>{title}</h3>}
+          {action}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default ContentCard

frontend/web/components/experiments/CreateExperimentWizard.tsx

@@ -0,0 +1,168 @@
+import { FC, useCallback, useMemo, useState } from 'react'
+import { ProjectFlag } from 'common/types/responses'
+import { useCreateExperimentMutation } from 'common/services/useExperiment'
+import WizardStepper from './WizardStepper'
+import WizardNavButtons from './WizardNavButtons'
+import LivePreviewPanel from './LivePreviewPanel'
+import SetupStep from './steps/SetupStep'
+import AudienceStep from './steps/AudienceStep'
+import MeasurementStep from './steps/MeasurementStep'
+import ReviewStep from './steps/ReviewStep'
+
+const TOTAL_STEPS = 4
+
+type CreateExperimentWizardProps = {
+  environmentId: string
+  projectId: number
+  onCreated: () => void
+}
+
+const CreateExperimentWizard: FC<CreateExperimentWizardProps> = ({
+  environmentId,
+  onCreated,
+  projectId,
+}) => {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [name, setName] = useState('')
+  const [hypothesis, setHypothesis] = useState('')
+  const [selectedFeature, setSelectedFeature] = useState<ProjectFlag | null>(
+    null,
+  )
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
+
+  const [createExperiment, { isLoading: isSubmitting }] =
+    useCreateExperimentMutation()
+
+  const isStep1Valid = useMemo(
+    () =>
+      name.trim().length > 0 &&
+      hypothesis.trim().length > 0 &&
+      selectedFeature !== null,
+    [name, hypothesis, selectedFeature],
+  )
+
+  const canContinue = currentStep === 0 ? isStep1Valid : true
+
+  const handleContinue = useCallback(() => {
+    if (currentStep < TOTAL_STEPS - 1) {
+      setCompletedSteps((prev) => new Set(prev).add(currentStep))
+      setCurrentStep(currentStep + 1)
+    }
+  }, [currentStep])
+
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1)
+    }
+  }, [currentStep])
+
+  const handleStepClick = useCallback(
+    (step: number) => {
+      if (completedSteps.has(step) || step < currentStep) {
+        setCurrentStep(step)
+      }
+    },
+    [completedSteps, currentStep],
+  )
+
+  const doCreate = useCallback(async () => {
+    if (!selectedFeature) return
+    try {
+      await createExperiment({
+        body: {
+          feature: selectedFeature.id,
+          hypothesis: hypothesis.trim(),
+          name: name.trim(),
+        },
+        environmentId,
+      }).unwrap()
+      toast('Experiment created successfully')
+      onCreated()
+    } catch {
+      toast('Failed to create experiment', 'danger')
+    }
+  }, [
+    createExperiment,
+    environmentId,
+    hypothesis,
+    name,
+    onCreated,
+    selectedFeature,
+  ])
+
+  const handleLaunch = useCallback(() => {
+    if (!selectedFeature) return
+    openConfirm({
+      body: (
+        <span>
+          This will start serving variations of{' '}
+          <strong>{selectedFeature.name}</strong> to{' '}
+          <strong>100% of all users in the environment</strong>. You can pause
+          or stop the experiment at any time.
+        </span>
+      ),
+      noText: 'Cancel',
+      onYes: doCreate,
+      title: 'Create experiment?',
+      yesText: 'Create',
+    })
+  }, [selectedFeature, doCreate])
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <SetupStep
+            name={name}
+            hypothesis={hypothesis}
+            selectedFeature={selectedFeature}
+            projectId={projectId}
+            environmentId={environmentId}
+            onNameChange={setName}
+            onHypothesisChange={setHypothesis}
+            onFeatureSelect={setSelectedFeature}
+          />
+        )
+      case 1:
+        return <AudienceStep />
+      case 2:
+        return <MeasurementStep />
+      case 3:
+        return (
+          <ReviewStep
+            name={name}
+            hypothesis={hypothesis}
+            selectedFeature={selectedFeature}
+            onEditSetup={() => setCurrentStep(0)}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className='d-flex gap-4'>
+      <WizardStepper
+        currentStep={currentStep}
+        completedSteps={completedSteps}
+        onStepClick={handleStepClick}
+      />
+      <div className='flex-fill' style={{ minWidth: 0 }}>
+        {renderStep()}
+        <WizardNavButtons
+          currentStep={currentStep}
+          totalSteps={TOTAL_STEPS}
+          canContinue={canContinue}
+          isSubmitting={isSubmitting}
+          onBack={handleBack}
+          onContinue={handleContinue}
+          onLaunch={handleLaunch}
+        />
+      </div>
+      <LivePreviewPanel />
+    </div>
+  )
+}
+
+export default CreateExperimentWizard

frontend/web/components/experiments/LivePreviewPanel.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import ContentCard from 'components/base/grid/ContentCard'
+
+const LivePreviewPanel: FC = () => {
+  return (
+    <div className='d-none d-xl-block' style={{ flexShrink: 0, width: 320 }}>
+      <ContentCard title='Live Preview'>
+        <p className='text-muted mb-0' style={{ fontSize: 13 }}>
+          Coming soon
+        </p>
+      </ContentCard>
+    </div>
+  )
+}
+
+export default LivePreviewPanel