diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx index b618e432692d1..1db1f9b9d93ad 100644 --- a/frontend/src/scenes/experiments/ExperimentView/components.tsx +++ b/frontend/src/scenes/experiments/ExperimentView/components.tsx @@ -1,10 +1,9 @@ import '../Experiment.scss' -import { IconArchive, IconCheck, IconInfo, IconMagicWand, IconX } from '@posthog/icons' +import { IconArchive, IconCheck, IconFlask, IconX } from '@posthog/icons' import { LemonBanner, LemonButton, - LemonCheckbox, LemonDialog, LemonDivider, LemonModal, @@ -159,7 +158,7 @@ export function ExploreButton({ icon = }: { icon?: JSX.Element return ( - } - onClick={() => openMakeDecisionModal()} - > - Make decision - - + + } + onClick={() => openShipVariantModal()} + > + Ship a variant + + + )} @@ -492,15 +492,12 @@ export function PageHeaderCustom(): JSX.Element { ) } -export function MakeDecisionModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element { - const { experiment, sortedWinProbabilities, isMakeDecisionModalOpen, isExperimentStopped } = useValues( - experimentLogic({ experimentId }) - ) - const { closeMakeDecisionModal, shipVariant } = useActions(experimentLogic({ experimentId })) +export function ShipVariantModal({ experimentId }: { experimentId: Experiment['id'] }): JSX.Element { + const { experiment, sortedWinProbabilities, isShipVariantModalOpen } = useValues(experimentLogic({ experimentId })) + const { closeShipVariantModal, shipVariant } = useActions(experimentLogic({ experimentId })) const { aggregationLabel } = useValues(groupsModel) const [selectedVariantKey, setSelectedVariantKey] = useState() - const [shouldStopExperiment, setShouldStopExperiment] = useState(true) useEffect(() => setSelectedVariantKey(sortedWinProbabilities[0]?.key), [sortedWinProbabilities]) const aggregationTargetName = @@ -510,17 +507,19 @@ export function MakeDecisionModal({ experimentId }: { experimentId: Experiment[' return ( - + Cancel shipVariant({ selectedVariantKey, shouldStopExperiment })} + // TODO: revisit if it always makes sense to stop the experiment when shipping a variant + // does it make sense to still *monitor* the experiment after shipping the variant? + onClick={() => shipVariant({ selectedVariantKey, shouldStopExperiment: true })} type="primary" > Ship variant @@ -530,7 +529,8 @@ export function MakeDecisionModal({ experimentId }: { experimentId: Experiment[' >
- This action will roll out the selected variant to 100% of {aggregationTargetName}. + This will roll out the selected variant to 100% of {aggregationTargetName} and stop the + experiment.
@@ -554,29 +554,6 @@ export function MakeDecisionModal({ experimentId }: { experimentId: Experiment[' }))} />
- {!isExperimentStopped && ( - <> - -
- -
Stop experiment
- - - -
- } - onChange={() => setShouldStopExperiment(!shouldStopExperiment)} - checked={shouldStopExperiment} - /> -
- - )}
For more precise control over your release, adjust the rollout percentage and release conditions in diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx index 2583872689995..bdcd2b51d4f62 100644 --- a/frontend/src/scenes/experiments/experimentLogic.tsx +++ b/frontend/src/scenes/experiments/experimentLogic.tsx @@ -165,8 +165,8 @@ export const experimentLogic = kea([ closeExperimentExposureModal: true, openExperimentCollectionGoalModal: true, closeExperimentCollectionGoalModal: true, - openMakeDecisionModal: true, - closeMakeDecisionModal: true, + openShipVariantModal: true, + closeShipVariantModal: true, setCurrentFormStep: (stepIndex: number) => ({ stepIndex }), moveToNextFormStep: true, }), @@ -305,11 +305,11 @@ export const experimentLogic = kea([ closeExperimentCollectionGoalModal: () => false, }, ], - isMakeDecisionModalOpen: [ + isShipVariantModalOpen: [ false, { - openMakeDecisionModal: () => true, - closeMakeDecisionModal: () => false, + openShipVariantModal: () => true, + closeShipVariantModal: () => false, }, ], experimentValuesChangedLocally: [ @@ -706,8 +706,8 @@ export const experimentLogic = kea([ }, shipVariantSuccess: ({ payload }) => { lemonToast.success('The selected variant has been shipped') - actions.closeMakeDecisionModal() - if (payload.shouldStopExperiment) { + actions.closeShipVariantModal() + if (payload.shouldStopExperiment && !values.isExperimentStopped) { actions.endExperiment() } actions.loadExperiment() @@ -715,7 +715,7 @@ export const experimentLogic = kea([ }, shipVariantFailure: ({ error }) => { lemonToast.error(error) - actions.closeMakeDecisionModal() + actions.closeShipVariantModal() }, })), loaders(({ actions, props, values }) => ({