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

package/dist/admin/surface/test/TestPage.js

@@ -1,93 +1,171 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
 import { useTestDocument } from '../useTestDocument.js';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { pageBlockParts } from '../pageBlock/parts.js';
 import { settingParts } from '../setting/parts.js';
 import { pageParts } from './pageParts.js';
-import { TestHeader } from './TestHeader.js';
 import { Section } from './Section.js';
-import { Hypothesis } from './fields.js';
+import { Hypothesis, TestName } from './fields.js';
 import { VersionsSection } from './VersionsSection.js';
 import { GoalSection } from './GoalSection.js';
 import { TargetingSection } from './TargetingSection.js';
 import { LengthSection } from './LengthSection.js';
 import { AdvancedSection } from './AdvancedSection.js';
+import { SurfaceShell } from '../SurfaceShell.js';
+import { Button } from '../../../ui/Button.js';
+import { Banner, StatusChip } from '../../../ui/Feedback.js';
+import { Rail } from './Rail.js';
+import { ReadinessBar } from './ReadinessBar.js';
 import './testPage.css';
-export function TestPage({ id, surface }) {
+export function TestPage({ id, surface, onTitleChange }) {
+    const [barHeight, setBarHeight] = useState();
     const test = useTestDocument(id, {
         apiRoute: surface.apiRoute
     });
-    if (test.loadState !== 'ready' || !test.doc) return /*#__PURE__*/ _jsxs("div", {
-        className: "xp-test-page",
-        role: test.loadState === 'error' ? 'alert' : 'status',
-        children: [
-            /*#__PURE__*/ _jsx("p", {
-                children: test.loadState === 'forbidden' ? C.forbidden : test.loadState === 'missing' ? C.missing : test.loadState === 'error' ? C.error : C.loading
-            }),
-            test.loadState === 'error' ? /*#__PURE__*/ _jsx("button", {
-                type: "button",
-                onClick: ()=>void test.reload(),
-                children: C.retry
-            }) : null
-        ]
+    useEffect(()=>{
+        if (test.doc?.name) onTitleChange?.(test.doc.name);
+    }, [
+        test.doc?.name,
+        onTitleChange
+    ]);
+    if (test.loadState !== 'ready' || !test.doc) return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: C.test,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: C.test
+            }
+        ],
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-test-page",
+            role: test.loadState === 'error' ? 'alert' : 'status',
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    children: test.loadState === 'forbidden' ? C.forbidden : test.loadState === 'missing' ? C.missing : test.loadState === 'error' ? C.error : C.loading
+                }),
+                test.loadState === 'error' ? /*#__PURE__*/ _jsx(Button, {
+                    onClick: ()=>void test.reload(),
+                    children: C.retry
+                }) : null
+            ]
+        })
     });
     const parts = test.doc.kind === 'block' ? pageBlockParts : test.doc.kind === 'page' ? pageParts : settingParts;
     const props = {
         test,
         surface
     };
-    return /*#__PURE__*/ _jsxs("main", {
-        className: "xp-test-page",
-        children: [
-            /*#__PURE__*/ _jsx(TestHeader, {
-                ...props
-            }),
-            test.errors._section ? /*#__PURE__*/ _jsxs("div", {
-                role: "alert",
-                children: [
-                    /*#__PURE__*/ _jsx("p", {
-                        children: test.errors._section
-                    }),
-                    test.stale ? /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        onClick: ()=>void test.reload(),
-                        children: C.reload
-                    }) : null
-                ]
-            }) : null,
-            test.preflightError ? /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                children: test.preflightError
-            }) : null,
-            /*#__PURE__*/ _jsxs(Section, {
-                test: test,
-                sectionId: "what",
-                children: [
-                    /*#__PURE__*/ _jsx(parts.Binding, {
-                        ...props
-                    }),
-                    /*#__PURE__*/ _jsx(Hypothesis, {
-                        ...props
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(VersionsSection, {
-                ...props,
-                parts: parts
-            }),
-            /*#__PURE__*/ _jsx(GoalSection, {
-                ...props
-            }),
-            /*#__PURE__*/ _jsx(TargetingSection, {
-                ...props
-            }),
-            /*#__PURE__*/ _jsx(LengthSection, {
-                ...props
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: test.doc.name,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: test.doc.name
+            }
+        ],
+        status: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "xp-tests-kind",
+                    children: C.kinds[test.doc.kind]
+                }),
+                /*#__PURE__*/ _jsx(StatusChip, {
+                    status: test.doc.status
+                })
+            ]
+        }),
+        actions: surface.canReadResults && [
+            'running',
+            'stopped',
+            'decided'
+        ].includes(test.doc.status) ? /*#__PURE__*/ _jsx(Button, {
+            variant: "secondary",
+            href: formatAdminURL({
+                adminRoute: surface.adminRoute,
+                path: `/experiments/${encodeURIComponent(String(test.doc.id))}/results`
             }),
-            /*#__PURE__*/ _jsx(AdvancedSection, {
-                ...props
-            })
-        ]
+            children: C.results
+        }) : undefined,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-test-page xp-test-page--setup",
+            style: {
+                paddingBottom: barHeight === undefined ? undefined : `${barHeight}px`
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "xp-test-layout",
+                    children: [
+                        /*#__PURE__*/ _jsx(Rail, {
+                            test: test
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "xp-test-content",
+                            children: [
+                                test.errors._section ? /*#__PURE__*/ _jsx(Banner, {
+                                    tone: "error",
+                                    action: test.stale ? /*#__PURE__*/ _jsx(Button, {
+                                        onClick: ()=>void test.reload(),
+                                        children: C.reload
+                                    }) : undefined,
+                                    children: test.errors._section
+                                }) : null,
+                                /*#__PURE__*/ _jsxs(Section, {
+                                    test: test,
+                                    sectionId: "what",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TestName, {
+                                            ...props
+                                        }),
+                                        /*#__PURE__*/ _jsx(parts.Binding, {
+                                            ...props
+                                        }),
+                                        /*#__PURE__*/ _jsx(Hypothesis, {
+                                            ...props
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(VersionsSection, {
+                                    ...props,
+                                    parts: parts
+                                }),
+                                /*#__PURE__*/ _jsx(GoalSection, {
+                                    ...props
+                                }),
+                                /*#__PURE__*/ _jsx(TargetingSection, {
+                                    ...props
+                                }),
+                                /*#__PURE__*/ _jsx(LengthSection, {
+                                    ...props
+                                }),
+                                /*#__PURE__*/ _jsx(AdvancedSection, {
+                                    ...props
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(ReadinessBar, {
+                    ...props,
+                    onHeightChange: setBarHeight
+                })
+            ]
+        })
     });
 }

package/dist/admin/surface/test/VersionsSection.js

@@ -1,6 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { theme } from '../../theme.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Button } from '../../../ui/Button.js';
+import { Range } from '../../../ui/Inputs.js';
 import { useEffect, useRef, useState } from 'react';
 import { TEST_PAGE as C } from '../../copy/testPage.js';
 import { ARMS_COPY, GROUP_LABELS, issueMessage } from '../../copy/arms.js';
@@ -9,14 +11,15 @@ import { allocationSentence } from '../../allocation.model.js';
 import { balanceWeight, orderedVersions, trafficShares } from './testPage.model.js';
 import { FieldErrors, ReadOnly, reasonFor, save, TextEdit } from './fields.js';
 import { Section } from './Section.js';
-const COLOURS = [
-    theme.color.success,
-    theme.color.accent,
-    theme.color.warning,
-    theme.color.error,
-    theme.color.inputBorder
-];
+const COLOURS = {
+    control: 'var(--xp-series-muted)',
+    variantA: 'var(--xp-series-a)',
+    variantB: 'var(--xp-series-b)',
+    variantC: 'var(--xp-series-c)',
+    holdout: 'var(--xp-series-muted)'
+};
 export function VersionsSection({ test, surface, parts }) {
+    const id = useId();
     const doc = test.doc;
     const [weightEdit, setWeightEdit] = useState(null);
     const releasedAllocation = useRef(null);
@@ -46,66 +49,85 @@ export function VersionsSection({ test, surface, parts }) {
         test: test,
         sectionId: "versions",
         children: [
-            /*#__PURE__*/ _jsx("div", {
+            reason ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: reason
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
                 className: "xp-version-rows",
-                children: ordered.map(({ arm, index }, position)=>/*#__PURE__*/ _jsxs("article", {
-                        className: "xp-version-row",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-version-grid-head",
+                        "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ _jsxs("h3", {
-                                children: [
-                                    /*#__PURE__*/ _jsx("span", {
-                                        style: {
-                                            background: COLOURS[position]
-                                        },
-                                        className: "xp-version-colour"
-                                    }),
-                                    GROUP_LABELS[arm.key]
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(TextEdit, {
-                                label: `${GROUP_LABELS[arm.key]}: ${C.label}`,
-                                value: arm.label,
-                                reason: reason,
-                                onCommit: (label)=>update((arms)=>arms.map((current)=>current.key === arm.key ? {
-                                                ...current,
-                                                label
-                                            } : current))
-                            }),
-                            /*#__PURE__*/ _jsx(TextEdit, {
-                                label: `${GROUP_LABELS[arm.key]}: ${C.weight}`,
-                                type: "number",
-                                min: 0,
-                                max: 100,
-                                value: doc.arms[index].weight,
-                                reason: reason,
-                                validate: (raw)=>raw.trim() !== '' && Number.isInteger(Number(raw)) && Number(raw) >= 0 && Number(raw) <= 100,
-                                invalidMessage: C.invalidShare,
-                                onDraft: (value)=>setWeightEdit({
-                                        key: arm.key,
-                                        weight: Number(value)
-                                    }),
-                                onCommit: (value)=>update((arms)=>balanceWeight(arms, arm.key, Number(value)))
-                            }),
-                            /*#__PURE__*/ _jsx(parts.VersionContent, {
-                                test: test,
-                                surface: surface,
-                                armIndex: index
+                            /*#__PURE__*/ _jsx("span", {
+                                children: C.label
                             }),
-                            issues.rows[index]?.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
-                                    role: "alert",
-                                    children: issueMessage(issue, totalWeight(live))
-                                }, i)),
-                            /*#__PURE__*/ _jsx(FieldErrors, {
-                                test: test,
-                                path: `arms.${index}`
+                            /*#__PURE__*/ _jsx("span", {
+                                children: C.weight
                             }),
-                            !reason && arm.kind !== 'control' ? /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>update((arms)=>splitEvenly(removeArm(arms, arm.key))),
-                                children: C.remove
-                            }) : null
+                            /*#__PURE__*/ _jsx("span", {}),
+                            /*#__PURE__*/ _jsx("span", {})
                         ]
-                    }, arm.key))
+                    }),
+                    ordered.map(({ arm, index })=>/*#__PURE__*/ _jsxs("article", {
+                            className: "xp-version-row",
+                            children: [
+                                /*#__PURE__*/ _jsx(TextEdit, {
+                                    label: `${GROUP_LABELS[arm.key]}: ${C.label}`,
+                                    value: arm.label,
+                                    reason: reason,
+                                    hideLabel: true,
+                                    disabled: Boolean(reason),
+                                    onCommit: (label)=>update((arms)=>arms.map((current)=>current.key === arm.key ? {
+                                                    ...current,
+                                                    label
+                                                } : current))
+                                }),
+                                /*#__PURE__*/ _jsx(TextEdit, {
+                                    label: `${GROUP_LABELS[arm.key]}: ${C.weight}`,
+                                    type: "number",
+                                    min: 0,
+                                    max: 100,
+                                    value: doc.arms[index].weight,
+                                    reason: reason,
+                                    hideLabel: true,
+                                    disabled: Boolean(reason),
+                                    validate: (raw)=>raw.trim() !== '' && Number.isInteger(Number(raw)) && Number(raw) >= 0 && Number(raw) <= 100,
+                                    invalidMessage: C.invalidShare,
+                                    onDraft: (value)=>setWeightEdit({
+                                            key: arm.key,
+                                            weight: Number(value)
+                                        }),
+                                    onCommit: (value)=>update((arms)=>balanceWeight(arms, arm.key, Number(value)))
+                                }),
+                                /*#__PURE__*/ _jsx(parts.VersionContent, {
+                                    test: test,
+                                    surface: surface,
+                                    armIndex: index
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "xp-ui-button-group xp-version-remove",
+                                    children: arm.kind !== 'control' ? /*#__PURE__*/ _jsx(Button, {
+                                        variant: "quiet",
+                                        size: "sm",
+                                        disabled: Boolean(reason),
+                                        title: reason ?? undefined,
+                                        onClick: ()=>update((arms)=>splitEvenly(removeArm(arms, arm.key))),
+                                        children: C.remove
+                                    }) : null
+                                }),
+                                issues.rows[index]?.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
+                                        role: "alert",
+                                        children: issueMessage(issue, totalWeight(live))
+                                    }, i)),
+                                /*#__PURE__*/ _jsx(FieldErrors, {
+                                    test: test,
+                                    path: `arms.${index}`
+                                })
+                            ]
+                        }, arm.key))
+                ]
             }),
             /*#__PURE__*/ _jsx("div", {
                 className: "xp-traffic-bar",
@@ -114,10 +136,30 @@ export function VersionsSection({ test, surface, parts }) {
                 children: ordered.map(({ arm }, i)=>/*#__PURE__*/ _jsx("span", {
                         style: {
                             width: `${shares[i]}%`,
-                            background: COLOURS[i]
+                            background: COLOURS[arm.key]
                         }
                     }, arm.key))
             }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-split-legend",
+                children: ordered.map(({ arm })=>/*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            /*#__PURE__*/ _jsx("i", {
+                                style: {
+                                    background: COLOURS[arm.key]
+                                }
+                            }),
+                            arm.label,
+                            " ",
+                            arm.weight,
+                            "%"
+                        ]
+                    }, arm.key))
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: C.balanceHelp
+            }),
             issues.form.map((issue, i)=>/*#__PURE__*/ _jsx("p", {
                     role: "alert",
                     children: issueMessage(issue, totalWeight(live))
@@ -126,71 +168,60 @@ export function VersionsSection({ test, surface, parts }) {
                 role: "alert",
                 children: test.errors.arms
             }) : null,
-            !reason ? /*#__PURE__*/ _jsxs(_Fragment, {
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-section-actions xp-ui-button-group",
+                title: reason ?? undefined,
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "xp-section-actions",
-                        children: [
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                disabled: doc.arms.filter((arm)=>arm.kind === 'variant').length >= 3,
-                                onClick: ()=>update((arms)=>addVariant(arms, doc.kind)),
-                                children: C.addVersion
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                disabled: doc.arms.some((arm)=>arm.kind === 'holdout'),
-                                onClick: ()=>update(addHoldoutArm),
-                                children: C.addHoldout
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>update(splitEvenly),
-                                children: C.split
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason) || doc.arms.filter((arm)=>arm.kind === 'variant').length >= 3,
+                        onClick: ()=>update((arms)=>addVariant(arms, doc.kind)),
+                        children: C.addVersion
                     }),
-                    /*#__PURE__*/ _jsx("p", {
-                        children: ARMS_COPY.holdout
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason) || doc.arms.some((arm)=>arm.kind === 'holdout'),
+                        onClick: ()=>update(addHoldoutArm),
+                        children: C.addHoldout
                     }),
-                    /*#__PURE__*/ _jsx("p", {
-                        children: C.balanceHelp
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: Boolean(reason),
+                        onClick: ()=>update(splitEvenly),
+                        children: C.split
                     })
                 ]
+            }),
+            doc.arms.some((arm)=>arm.kind === 'holdout') ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: ARMS_COPY.holdout
             }) : null,
             reasonFor(test, 'allocation') ? /*#__PURE__*/ _jsx(ReadOnly, {
                 label: C.allocation,
                 value: `${doc.allocation}%`,
                 reason: reasonFor(test, 'allocation')
-            }) : /*#__PURE__*/ _jsxs("label", {
-                className: "xp-field",
-                children: [
-                    C.allocation,
-                    /*#__PURE__*/ _jsx("input", {
-                        type: "range",
-                        min: 1,
-                        max: 100,
-                        value: allocation,
-                        onChange: (e)=>{
-                            releasedAllocation.current = null;
-                            setAllocation(Number(e.target.value));
-                        },
-                        onPointerUp: commitAllocation,
-                        onKeyUp: (e)=>{
-                            if ([
-                                'ArrowLeft',
-                                'ArrowRight',
-                                'ArrowUp',
-                                'ArrowDown',
-                                'Home',
-                                'End',
-                                'PageUp',
-                                'PageDown'
-                            ].includes(e.key)) commitAllocation();
-                        },
-                        onBlur: commitAllocation
-                    })
-                ]
+            }) : /*#__PURE__*/ _jsx(Range, {
+                id: id,
+                label: C.allocation,
+                help: `${allocation}%`,
+                min: 1,
+                max: 100,
+                value: allocation,
+                onChange: (e)=>{
+                    releasedAllocation.current = null;
+                    setAllocation(Number(e.target.value));
+                },
+                onPointerUp: commitAllocation,
+                onKeyUp: (e)=>{
+                    if ([
+                        'ArrowLeft',
+                        'ArrowRight',
+                        'ArrowUp',
+                        'ArrowDown',
+                        'Home',
+                        'End',
+                        'PageUp',
+                        'PageDown'
+                    ].includes(e.key)) commitAllocation();
+                },
+                onBlur: commitAllocation
             }),
             /*#__PURE__*/ _jsx("p", {
                 children: allocationSentence({

package/dist/admin/surface/test/fields.d.ts

@@ -8,13 +8,14 @@ export declare function FieldErrors({ test, path }: {
     test: TestDocApi;
     path: string;
 }): import("react").JSX.Element;
-export declare function ReadOnly({ label, value, reason }: {
+export declare function ReadOnly({ label, value, reason, labelAction }: {
     label: string;
     value: ReactNode;
     reason: string | null;
+    labelAction?: ReactNode;
 }): import("react").JSX.Element;
 /** Local typing is intentionally separate from staging: build the current group on commit. */
-export declare function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type, min, max, required, onDraft, validate, invalidMessage }: {
+export declare function TextEdit({ label, value, onCommit, reason, multiline, placeholder, type, min, max, required, onDraft, validate, invalidMessage, hideLabel, disabled, help }: {
     label: string;
     value: string | number;
     onCommit: (value: string) => void;
@@ -28,9 +29,12 @@ export declare function TextEdit({ label, value, onCommit, reason, multiline, pl
     required?: boolean;
     validate?: (value: string) => boolean;
     invalidMessage?: string;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    help?: string;
 }): import("react").JSX.Element;
 export declare const positiveInteger: (raw: string) => boolean;
-export declare function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue }: {
+export declare function SelectEdit({ label, value, options, reason, onCommit, readOnlyValue, labelAction }: {
     label: string;
     value: string;
     options: readonly {
@@ -40,8 +44,9 @@ export declare function SelectEdit({ label, value, options, reason, onCommit, re
     reason?: string | null;
     onCommit: (value: string) => void;
     readOnlyValue?: string;
+    labelAction?: ReactNode;
 }): import("react").JSX.Element;
-export declare function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue }: {
+export declare function CheckboxList({ label, value, options, reason, onToggle, readOnlyValue, searchable }: {
     label: string;
     value: string[];
     options: readonly {
@@ -51,5 +56,7 @@ export declare function CheckboxList({ label, value, options, reason, onToggle,
     reason?: string | null;
     onToggle: (value: string, checked: boolean) => void;
     readOnlyValue?: string;
+    searchable?: boolean;
 }): import("react").JSX.Element;
+export declare function TestName({ test }: SectionProps): import("react").JSX.Element;
 export declare function Hypothesis({ test }: SectionProps): import("react").JSX.Element;