@delmaredigital/payload-experiments 0.2.0-rc.7 → 0.3.0-rc.4

package/dist/admin/surface/results/ResultsBody.js

@@ -3,34 +3,46 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { theme } from '../../theme.js';
 import '../../styles.js';
 import { useEffect, useRef, useState } from 'react';
-import { Button } from '@payloadcms/ui';
+import { Button } from '../../../ui/Button.js';
+import { Select } from '../../../ui/Inputs.js';
 import { RESULTS_COPY as C } from '../../copy/results.js';
-import { RESULTS_SURFACE_COPY } from '../../copy/recommendation.js';
+import { formatDate } from '../../format/date.js';
 import { ACTIONS_COPY } from '../../copy/actions.js';
+import { METRICS_COPY } from '../../copy/metrics.js';
 import { API_MESSAGES } from '../../copy/common.js';
 import { armLabel } from '../../labels.js';
 import { PreviewLinks } from '../../PreviewLinks.js';
-import { VerdictCard } from '../../results/VerdictCard.js';
-import { ArmTable } from '../../results/ArmTable.js';
+import { actionablePreviewPages } from '../../previewLinks.model.js';
+import { VerdictHero } from '../../results/VerdictHero.js';
+import { StatTile } from '../../results/StatTile.js';
+import { DataTable, Swatch } from '../../results/DataTable.js';
+import { daysOfPlan } from '../../copy/results.js';
+import { formatCount, formatPercent } from '../../results/format.js';
 import { DataQualityPanel } from '../../results/DataQualityPanel.js';
 import { CiChart } from '../../results/CiChart.js';
 import { armRows, collectingLine, dataQuality, defaultRound, guardrailChips, powerLine, rolloutLine, roundOptions, verdictCard } from '../../results/results.model.js';
 import { recommendation } from './recommendation.model.js';
 import { useResults } from './useResults.js';
 import { DecideDialog } from '../../actions/DecideDialog.js';
-export function ResultsBody({ id, surface, onRecomputed }) {
+import { Banner } from '../../../ui/Banner.js';
+import { canReleasePages } from '../../results/releasePages.model.js';
+import { PagesReleased, ReleasePagesDialog } from './ReleasePages.js';
+export function ResultsBody({ id, surface, onRecomputed, onPagesReleased, renderPage }) {
     // A different test owns an independent selection and action lifecycle.
     return /*#__PURE__*/ _jsx(ResultsContent, {
         id: id,
         surface: surface,
-        onRecomputed: onRecomputed
+        onRecomputed: onRecomputed,
+        onPagesReleased: onPagesReleased,
+        renderPage: renderPage
     }, `${surface.apiRoute}/${id}`);
 }
-function ResultsContent({ id, surface, onRecomputed }) {
+function ResultsContent({ id, surface, onRecomputed, onPagesReleased, renderPage }) {
     const results = useResults(id, surface);
     const { api, doc, round, phases, state, data } = results;
     const manage = surface.canManage && surface.canReadResults;
     const [placements, setPlacements] = useState(null);
+    const [checks, setChecks] = useState([]);
     const [previewError, setPreviewError] = useState(null);
     const [previewRefresh, setPreviewRefresh] = useState(0);
     const [busy, setBusy] = useState(false);
@@ -38,6 +50,7 @@ function ResultsContent({ id, surface, onRecomputed }) {
     const mounted = useRef(true);
     const [actionError, setActionError] = useState(null);
     const [deciding, setDeciding] = useState(false);
+    const [releasing, setReleasing] = useState(false);
     useEffect(()=>{
         mounted.current = true;
         return ()=>{
@@ -47,11 +60,14 @@ function ResultsContent({ id, surface, onRecomputed }) {
     useEffect(()=>{
         let active = true;
         setPlacements(null);
+        setChecks([]);
         setPreviewError(null);
         if (manage) void api.preflight(id).then((result)=>{
             if (!active) return;
-            if (result.ok && result.data) setPlacements(result.data.placements);
-            else setPreviewError(result.ok ? API_MESSAGES.unreadable : result.message);
+            if (result.ok && result.data) {
+                setPlacements(result.data.placements);
+                setChecks(result.data.checks);
+            } else setPreviewError(result.ok ? API_MESSAGES.unreadable : result.message);
         });
         return ()=>{
             active = false;
@@ -91,14 +107,17 @@ function ResultsContent({ id, surface, onRecomputed }) {
     // ADM-06b: an older round never inherits the live test's running status.
     const lineStatus = status === 'running' && round === newestRound ? 'running' : 'stopped';
     const isDecidedTestRound = status === 'decided' && phase?.phaseKind === 'test' && decision?.phase === round;
+    const showingDecision = isDecidedTestRound && Boolean(data?.decisionSnapshot);
+    const shown = showingDecision ? data.decisionSnapshot : snapshot;
     const winner = phase?.arms.find((arm)=>arm.key === decision?.winnerArm)?.label ?? armLabel(decision?.winnerArm ?? 'control');
-    const card = snapshot ? verdictCard({
-        snapshot,
+    const card = shown ? verdictCard({
+        snapshot: shown,
         decisionSnapshot: data?.decisionSnapshot,
         isDecidedTestRound,
         winnerLabel: winner
     }) : null;
     const context = {
+        status,
         phase,
         inLayer: doc?.layer != null,
         layerSlices: doc?.layerSlices,
@@ -106,25 +125,97 @@ function ResultsContent({ id, surface, onRecomputed }) {
     };
     const primary = phase?.metrics.find((metric)=>metric.role === 'primary');
     // The endpoint decides the current round; historical rounds are read-only.
-    const canDecide = manage && (status === 'running' || status === 'stopped') && phase?.phaseKind === 'test' && round === newestRound && state === 'ready' && Boolean(snapshot);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "xp-results",
-        style: {
-            color: theme.color.text
-        },
+    const canDecide = manage && (status === 'running' || status === 'stopped') && phase?.phaseKind === 'test' && round === newestRound && state === 'ready' && Boolean(shown);
+    const actions = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            canDecide ? /*#__PURE__*/ _jsx(Button, {
+                disabled: busy || deciding || releasing,
+                onClick: ()=>setDeciding(true),
+                children: ACTIONS_COPY.decide
+            }) : null,
+            manage && doc && canReleasePages(doc) ? /*#__PURE__*/ _jsx(Button, {
+                variant: "secondary",
+                disabled: busy || deciding || releasing,
+                onClick: ()=>{
+                    setActionError(null);
+                    setReleasing(true);
+                },
+                children: C.releasePages
+            }) : null
+        ]
+    });
+    // Release details come only from the manager's own document, never the results response.
+    const released = manage && doc?.decision?.pagesReleasedAt ? /*#__PURE__*/ _jsx(PagesReleased, {
+        decision: doc.decision,
+        apiRoute: surface.apiRoute
+    }) : null;
+    const meta = /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            phases.length > 0 ? /*#__PURE__*/ _jsxs("label", {
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-round-meta",
                 children: [
-                    C.round,
-                    /*#__PURE__*/ _jsx("select", {
-                        disabled: deciding,
+                    phases.length > 0 ? /*#__PURE__*/ _jsx(Select, {
+                        id: "xp-results-round",
+                        label: C.round,
+                        disabled: deciding || releasing,
                         value: round ?? '',
                         onChange: (event)=>results.setRound(Number(event.target.value)),
                         children: roundOptions(phases).map((option)=>/*#__PURE__*/ _jsx("option", {
                                 value: option.value,
                                 children: option.label
                             }, option.value))
-                    })
+                    }) : null,
+                    manage && shown ? /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "· ",
+                            C.methods[shown.method]
+                        ]
+                    }) : null,
+                    showingDecision ? /*#__PURE__*/ _jsxs("span", {
+                        className: "xp-results-as-of",
+                        children: [
+                            manage ? '· ' : '',
+                            C.asOfDecision(formatDate(data.decisionSnapshot.computedAt))
+                        ]
+                    }) : null
+                ]
+            }),
+            manage && !showingDecision ? /*#__PURE__*/ _jsx(Button, {
+                variant: "quiet",
+                size: "sm",
+                disabled: busy || deciding || releasing,
+                onClick: ()=>{
+                    void recompute();
+                },
+                children: busy ? C.recomputing : C.recompute
+            }) : null
+        ]
+    });
+    const leader = shown?.verdict.recommendedArm;
+    const leadingComparison = shown?.metrics.find((metric)=>metric.role === 'primary')?.comparisons.find((item)=>item.arm === leader);
+    const chance = shown?.method === 'bayesian' && ![
+        'collecting',
+        'rollout-collecting'
+    ].includes(shown.verdict.code) ? leadingComparison?.chanceToWin : undefined;
+    const days = shown ? Math.max(0, Math.floor((Date.parse(shown.window.to) - Date.parse(phase?.startedAt ?? shown.window.from)) / 86400000)) : undefined;
+    const planned = doc?.analysis?.plannedDurationDays;
+    const content = /*#__PURE__*/ _jsxs("div", {
+        className: "xp-results",
+        style: {
+            color: theme.color.text
+        },
+        children: [
+            actionError ? /*#__PURE__*/ _jsx(Banner, {
+                tone: "error",
+                children: actionError
+            }) : null,
+            !renderPage ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "xp-ui-button-group",
+                        children: actions
+                    }),
+                    released
                 ]
             }) : null,
             state === 'loading' ? /*#__PURE__*/ _jsx("p", {
@@ -135,7 +226,7 @@ function ResultsContent({ id, surface, onRecomputed }) {
                 children: C.forbidden
             }) : state === 'missing' ? /*#__PURE__*/ _jsx("p", {
                 role: "alert",
-                children: RESULTS_SURFACE_COPY.missing
+                children: results.error
             }) : state === 'error' ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
                     /*#__PURE__*/ _jsx("p", {
@@ -148,85 +239,113 @@ function ResultsContent({ id, surface, onRecomputed }) {
                     })
                 ]
             }) : null,
-            phase && snapshot ? /*#__PURE__*/ _jsxs(_Fragment, {
+            phase && shown ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
+                    /*#__PURE__*/ _jsx(VerdictHero, {
+                        model: card,
+                        meta: meta,
+                        recommendation: recommendation({
+                            snapshot: shown,
+                            phase,
+                            status: lineStatus,
+                            plannedDurationDays: round === newestRound ? doc?.analysis?.plannedDurationDays : undefined
+                        }),
+                        guardrails: guardrailChips(shown),
+                        power: powerLine({
+                            snapshot: shown,
+                            phaseKind: phase.phaseKind,
+                            status: lineStatus
+                        }),
+                        collecting: collectingLine({
+                            snapshot: shown,
+                            phaseKind: phase.phaseKind,
+                            status: lineStatus
+                        }, context),
+                        sinceShipping: rolloutLine(shown, phase, phases, decision ?? undefined)
+                    }),
                     /*#__PURE__*/ _jsxs("div", {
-                        style: {
-                            background: theme.color.surface,
-                            paddingTop: '1rem'
-                        },
+                        className: "xp-stat-tiles",
                         children: [
-                            /*#__PURE__*/ _jsx("p", {
-                                className: "xp-recommendation",
-                                style: {
-                                    margin: '0 1rem'
-                                },
-                                children: recommendation({
-                                    snapshot,
-                                    phase,
-                                    status: lineStatus,
-                                    plannedDurationDays: round === newestRound ? doc?.analysis?.plannedDurationDays : undefined
-                                })
+                            /*#__PURE__*/ _jsx(StatTile, {
+                                label: C.people,
+                                value: formatCount(shown.exposures.total)
                             }),
-                            /*#__PURE__*/ _jsx(VerdictCard, {
-                                model: card,
-                                guardrails: guardrailChips(snapshot),
-                                power: powerLine({
-                                    snapshot,
-                                    phaseKind: phase.phaseKind,
-                                    status: lineStatus
-                                }),
-                                collecting: collectingLine({
-                                    snapshot,
-                                    phaseKind: phase.phaseKind,
-                                    status: lineStatus
-                                }, context),
-                                sinceShipping: rolloutLine(snapshot, phase, phases, decision ?? undefined)
+                            /*#__PURE__*/ _jsx(StatTile, {
+                                label: C.days,
+                                value: planned ? daysOfPlan(formatCount(days), formatCount(planned)) : formatCount(days)
+                            }),
+                            /*#__PURE__*/ _jsx(StatTile, {
+                                label: C.chanceToWin,
+                                value: formatPercent(chance),
+                                detail: chance != null && leader ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Swatch, {
+                                            arm: leader
+                                        }),
+                                        phase.arms.find((arm)=>arm.key === leader)?.label ?? armLabel(leader)
+                                    ]
+                                }) : undefined
                             })
                         ]
                     }),
+                    phase.metrics.filter((metric)=>metric.role === 'primary').map((metric)=>/*#__PURE__*/ _jsx(MetricTable, {
+                            metric: metric,
+                            snapshot: shown,
+                            phase: phase,
+                            leader: leader
+                        }, metric.metricId)),
+                    primary ? /*#__PURE__*/ _jsxs("details", {
+                        className: "xp-results-panel xp-chart-details",
+                        children: [
+                            /*#__PURE__*/ _jsx("summary", {
+                                children: C.chart
+                            }),
+                            /*#__PURE__*/ _jsx(CiChart, {
+                                series: data?.series,
+                                metricId: primary.metricId,
+                                metricName: primary.name,
+                                phase: phase,
+                                contentChanges: shown.contentChanges
+                            })
+                        ]
+                    }) : null,
                     /*#__PURE__*/ _jsx(DataQualityPanel, {
-                        items: dataQuality(snapshot, context)
+                        problem: shown.verdict.code === 'data-problem',
+                        items: dataQuality(shown, context)
                     }),
                     [
-                        'primary',
-                        'secondary',
-                        'guardrail'
-                    ].map((role)=>{
-                        const metrics = phase.metrics.filter((metric)=>metric.role === role);
-                        return metrics.length ? /*#__PURE__*/ _jsxs("section", {
-                            children: [
-                                /*#__PURE__*/ _jsx("h2", {
-                                    children: C[role]
-                                }),
-                                metrics.map((metric)=>/*#__PURE__*/ _jsx(ArmTable, {
-                                        caption: metric.name,
-                                        method: snapshot.method,
-                                        metricKind: metric.kind,
-                                        rows: armRows({
-                                            snapshot,
-                                            phase,
-                                            metricId: metric.metricId
-                                        })
-                                    }, metric.metricId))
-                            ]
-                        }, role) : null;
-                    }),
-                    primary ? /*#__PURE__*/ _jsx(CiChart, {
-                        series: data?.series,
-                        metricId: primary.metricId,
-                        metricName: primary.name,
-                        phase: phase,
-                        contentChanges: snapshot.contentChanges
+                        'guardrail',
+                        'secondary'
+                    ].map((role)=>phase.metrics.filter((metric)=>metric.role === role).map((metric)=>/*#__PURE__*/ _jsx(MetricTable, {
+                                metric: metric,
+                                snapshot: shown,
+                                phase: phase
+                            }, metric.metricId)))
+                ]
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    meta,
+                    state === 'empty' || state === 'ready' ? /*#__PURE__*/ _jsx("p", {
+                        children: C.empty
                     }) : null
                 ]
-            }) : state === 'empty' || state === 'ready' ? /*#__PURE__*/ _jsx("p", {
-                children: C.empty
-            }) : null,
-            manage && placements ? /*#__PURE__*/ _jsx(PreviewLinks, {
-                experimentId: id,
-                placements: placements,
-                arms: doc?.arms ?? []
+            }),
+            manage && placements && actionablePreviewPages(placements, doc?.flagPoint).length > 0 ? /*#__PURE__*/ _jsxs("section", {
+                className: "xp-results-block",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "xp-results-block-head",
+                        children: /*#__PURE__*/ _jsx("h2", {
+                            children: C.previews
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(PreviewLinks, {
+                        experimentId: id,
+                        flagPoint: doc?.flagPoint,
+                        placements: placements,
+                        arms: doc?.arms ?? []
+                    })
+                ]
             }) : null,
             manage && previewError ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
@@ -240,27 +359,80 @@ function ResultsContent({ id, surface, onRecomputed }) {
                     })
                 ]
             }) : null,
-            manage ? /*#__PURE__*/ _jsx(Button, {
-                disabled: busy || deciding,
-                onClick: ()=>{
-                    void recompute();
-                },
-                children: busy ? C.recomputing : C.recompute
-            }) : null,
-            canDecide ? /*#__PURE__*/ _jsx(Button, {
-                disabled: busy || deciding,
-                onClick: ()=>setDeciding(true),
-                children: ACTIONS_COPY.decide
-            }) : null,
             deciding && manage && phase ? /*#__PURE__*/ _jsx(DecideDialog, {
                 id: id,
                 arms: phase.arms,
+                checks: checks,
                 onClose: ()=>setDeciding(false)
             }) : null,
-            actionError ? /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                children: actionError
+            releasing && manage ? /*#__PURE__*/ _jsx(ReleasePagesDialog, {
+                id: id,
+                apiRoute: surface.apiRoute,
+                onClose: ()=>setReleasing(false),
+                onRefusal: setActionError,
+                onSuccess: ()=>{
+                    results.reload();
+                    onPagesReleased?.();
+                }
             }) : null
         ]
     });
+    return renderPage ? renderPage({
+        children: content,
+        actions,
+        released,
+        data
+    }) : content;
+}
+function MetricTable({ metric, snapshot, phase, leader }) {
+    const rows = armRows({
+        snapshot,
+        phase,
+        metricId: metric.metricId
+    });
+    const guardrail = snapshot.guardrails.find((item)=>item.metricId === metric.metricId);
+    const notices = [
+        ...new Set(rows.map((row)=>row.capped.notice).filter(Boolean))
+    ];
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-results-block",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-results-block-head",
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        children: C[metric.role]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-results-block-meta",
+                        children: [
+                            metric.name,
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "xp-tests-kind",
+                                children: C.kinds[metric.kind]
+                            }),
+                            metric.role === 'guardrail' && guardrail ? /*#__PURE__*/ _jsx("span", {
+                                className: `xp-quality-chip xp-quality-chip--${guardrail.status === 'failing' ? 'problem' : guardrail.status === 'ok' ? 'ok' : 'watch'}`,
+                                children: C.guardrails[guardrail.status]
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DataTable, {
+                caption: metric.name,
+                method: snapshot.method,
+                metricKind: metric.kind,
+                rows: rows,
+                primary: metric.role === 'primary',
+                leader: leader
+            }),
+            metric.kind === 'revenue' ? (notices.length ? notices : [
+                METRICS_COPY.revenueHint
+            ]).map((notice)=>/*#__PURE__*/ _jsx("p", {
+                    className: "xp-results-cap-help",
+                    children: notice
+                }, notice)) : null
+        ]
+    });
 }

package/dist/admin/surface/results/ResultsHeader.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { ResultsResponse } from '../../../types/endpoints.js';
+import type { SectionProps } from '../contracts.js';
+import type { ResultsPageParts } from './ResultsBody.js';
+export declare function ResultsHeader({ test, surface, resultsVersion, children, actions, released }: SectionProps & ResultsPageParts): import("react").JSX.Element;
+export declare function ReaderResultsShell({ surface, children, data }: {
+    surface: SectionProps['surface'];
+    children: ReactNode;
+    data?: ResultsResponse;
+}): import("react").JSX.Element;