@@ -60,6 +65,7 @@ export function ExperimentView(): JSX.Element {
+ {featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOLDOUTS] && }
diff --git a/frontend/src/scenes/experiments/ExperimentView/HoldoutSelector.tsx b/frontend/src/scenes/experiments/ExperimentView/HoldoutSelector.tsx
new file mode 100644
index 0000000000000..f8982ad3d3636
--- /dev/null
+++ b/frontend/src/scenes/experiments/ExperimentView/HoldoutSelector.tsx
@@ -0,0 +1,47 @@
+import { IconInfo } from '@posthog/icons'
+import { LemonSelect, Tooltip } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { experimentLogic } from '../experimentLogic'
+
+export function HoldoutSelector(): JSX.Element {
+ const { experiment, holdouts, isExperimentRunning } = useValues(experimentLogic)
+ const { setExperiment, updateExperiment } = useActions(experimentLogic)
+
+ const holdoutOptions = holdouts.map((holdout) => ({
+ value: holdout.id,
+ label: holdout.name,
+ }))
+ holdoutOptions.unshift({ value: null, label: 'No holdout' })
+
+ return (
+
+
+
Holdout group
+
+
+
+
+
+ {
+ setExperiment({
+ ...experiment,
+ holdout_id: value,
+ })
+ updateExperiment({ holdout_id: value })
+ }}
+ data-attr="experiment-holdout-selector"
+ />
+
+
+ )
+}
diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
index 71e6c7f35dd25..b4e092bf8f77f 100644
--- a/frontend/src/scenes/experiments/ExperimentView/components.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -50,10 +50,25 @@ export function VariantTag({
experimentId: number | 'new'
variantKey: string
}): JSX.Element {
- const { experimentResults, getIndexForVariant } = useValues(experimentLogic({ experimentId }))
+ const { experiment, experimentResults, getIndexForVariant } = useValues(experimentLogic({ experimentId }))
+
+ if (experiment.holdout && variantKey === `holdout-${experiment.holdout_id}`) {
+ return (
+
+
+ {experiment.holdout.name}
+
+ )
+ }
return (
-
+
- {tab === ExperimentsTabs.Archived ? (
-
+
+ {featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOLDOUTS] && tab === ExperimentsTabs.Holdouts ? (
+
) : (
- router.actions.push(urls.experiment('new'))}
- isEmpty={shouldShowEmptyState}
- customHog={ExperimentsHog}
- />
- )}
- {!shouldShowEmptyState && (
<>
-
-
+ ) : (
+
router.actions.push(urls.experiment('new'))}
+ isEmpty={shouldShowEmptyState}
+ customHog={ExperimentsHog}
/>
-
-
- Status
-
-
{
- if (status) {
- setSearchStatus(status as ProgressStatus | 'all')
- }
+ )}
+ {!shouldShowEmptyState && (
+ <>
+
+
+
+
+ Status
+
+ {
+ if (status) {
+ setSearchStatus(status as ProgressStatus | 'all')
+ }
+ }}
+ options={
+ [
+ { label: 'All', value: 'all' },
+ { label: 'Draft', value: ProgressStatus.Draft },
+ { label: 'Running', value: ProgressStatus.Running },
+ { label: 'Complete', value: ProgressStatus.Complete },
+ ] as { label: string; value: string }[]
+ }
+ value={searchStatus ?? 'all'}
+ dropdownMatchSelectWidth={false}
+ dropdownMaxContentWidth
+ />
+
+ Created by
+
+ setUserFilter(user?.uuid ?? null)}
+ />
+
+
diff --git a/frontend/src/scenes/experiments/Holdouts.tsx b/frontend/src/scenes/experiments/Holdouts.tsx
new file mode 100644
index 0000000000000..e6d7d6a13f328
--- /dev/null
+++ b/frontend/src/scenes/experiments/Holdouts.tsx
@@ -0,0 +1,229 @@
+import { IconPencil, IconTrash } from '@posthog/icons'
+import {
+ LemonBanner,
+ LemonButton,
+ LemonDialog,
+ LemonDivider,
+ LemonInput,
+ LemonLabel,
+ LemonModal,
+ LemonTable,
+ LemonTableColumns,
+} from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { LemonSlider } from 'lib/lemon-ui/LemonSlider'
+import { useState } from 'react'
+
+import { Holdout, holdoutsLogic, NEW_HOLDOUT } from './holdoutsLogic'
+
+export function Holdouts(): JSX.Element {
+ const { holdouts, holdoutsLoading, holdout } = useValues(holdoutsLogic)
+ const { createHoldout, deleteHoldout, setHoldout, updateHoldout } = useActions(holdoutsLogic)
+
+ const [isHoldoutModalOpen, setIsHoldoutModalOpen] = useState(false)
+ const [editingHoldout, setEditingHoldout] = useState
(null)
+
+ const openEditModal = (holdout: Holdout): void => {
+ setEditingHoldout(holdout)
+ setHoldout(holdout)
+ setIsHoldoutModalOpen(true)
+ }
+
+ const openCreateModal = (): void => {
+ setEditingHoldout(null)
+ setHoldout({ ...NEW_HOLDOUT })
+ setIsHoldoutModalOpen(true)
+ }
+
+ const closeModal = (): void => {
+ setIsHoldoutModalOpen(false)
+ setEditingHoldout(null)
+ }
+
+ const getDisabledReason = (): string | undefined => {
+ if (!holdout.name) {
+ return 'Name is required'
+ }
+ if (holdout.filters?.[0]?.rollout_percentage === undefined) {
+ return 'Rollout percentage is required'
+ }
+ }
+
+ const columns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ render: (name: string) => {name}
,
+ },
+ {
+ title: 'Description',
+ dataIndex: 'description',
+ key: 'description',
+ },
+ {
+ title: 'Rollout Percentage',
+ dataIndex: 'filters',
+ key: 'rollout',
+ render: (filters: Holdout['filters']) => {
+ const percentage = filters?.[0]?.rollout_percentage || 0
+ return {percentage} %
+ },
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ render: (_: any, record: Holdout) => (
+
+
}
+ onClick={() => openEditModal(record)}
+ />
+
}
+ size="xsmall"
+ status="danger"
+ onClick={() => {
+ LemonDialog.open({
+ title: 'Delete this holdout?',
+ content: (
+
+ Are you sure you want to delete the holdout "{record.name}"? This action
+ cannot be undone.
+
+ ),
+ primaryButton: {
+ children: 'Delete',
+ type: 'primary',
+ status: 'danger',
+ onClick: () => deleteHoldout(record.id),
+ size: 'small',
+ },
+ secondaryButton: {
+ children: 'Cancel',
+ type: 'tertiary',
+ size: 'small',
+ },
+ })
+ }}
+ />
+
+
+ Cancel
+ {
+ if (editingHoldout) {
+ updateHoldout(editingHoldout.id, holdout)
+ } else {
+ createHoldout()
+ }
+ closeModal()
+ }}
+ disabledReason={getDisabledReason()}
+ >
+ {editingHoldout ? 'Update' : 'Save'}
+
+
+ }
+ >
+
+
+ Name
+ setHoldout({ name })}
+ placeholder="e.g. 'Frontend holdout group 1'"
+ />
+
+
+ Description
+ setHoldout({ description })}
+ />
+
+
+
+
+
+
+ Specify the percentage population that should be included in this holdout group.
+ This is stable across experiments.
+
+
+
+ Roll out to{' '}
+
+ setHoldout({
+ filters: [{ properties: [], rollout_percentage }],
+ })
+ }
+ min={0}
+ max={100}
+ step={1}
+ className="ml-1.5 w-20"
+ />
+
+ setHoldout({
+ filters: [{ properties: [], rollout_percentage }],
+ })
+ }
+ min={0}
+ max={100}
+ step="any"
+ suffix={%}
+ />
+ of total users.
+
+
+
+
+
+
+
+ Holdouts are stable groups of users excluded from experiment variations.They act as a baseline,
+ helping you see how users behave without any changes applied. This lets you directly compare
+ their behavior to those exposed to the experiment variations. Once a holdout is configured, you
+ can apply it to an experiment during creation.
+
+
+
+
You have not created any holdouts yet.
+ )
+}
diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
index 09b6597176fc8..19e33aca83831 100644
--- a/frontend/src/scenes/experiments/experimentLogic.tsx
+++ b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -54,6 +54,7 @@ import {
import { EXPERIMENT_EXPOSURE_INSIGHT_ID, EXPERIMENT_INSIGHT_ID } from './constants'
import type { experimentLogicType } from './experimentLogicType'
import { experimentsLogic } from './experimentsLogic'
+import { holdoutsLogic } from './holdoutsLogic'
import { getMinimumDetectableEffect, transformFiltersForWinningVariant } from './utils'
const NEW_EXPERIMENT: Experiment = {
@@ -71,6 +72,7 @@ const NEW_EXPERIMENT: Experiment = {
created_at: null,
created_by: null,
updated_at: null,
+ holdout_id: null,
}
export interface ExperimentLogicProps {
@@ -112,6 +114,8 @@ export const experimentLogic = kea