@delmaredigital/payload-experiments 0.2.0-rc.6 → 0.3.0-rc.1

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

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../ui/Button.js';
 import { useId, useState } from 'react';
-import { ChipsInput } from '../../components/ChipsInput.js';
+import { ChipsInput } from '../../../ui/ChipsInput.js';
 import { AUDIENCE_COPY } from '../../copy/audience.js';
 import { coerceValue, emptyListHint, humaniseAttribute, opLabel, opsFor, readListValue, readTargetingRules, valueInput } from '../../targeting/targeting.model.js';
 import { TEST_PAGE as C, NUMBER_COMPARISONS } from '../../copy/testPage.js';
@@ -17,145 +18,170 @@ export function TargetingSection({ test, surface }) {
     const update = (transform)=>save(test, 'targeting', ()=>({
                 targeting: transform(readTargetingRules(test.doc.targeting ?? []))
             }));
-    const keys = Object.keys(surface.attributeKeys);
-    return /*#__PURE__*/ _jsx(Section, {
+    // Page block tests are scoped by their page; path rules belong to setting and flag tests (ruling Nov 3).
+    const blockPath = (key)=>test.doc.kind === 'block' && key === 'path';
+    const keys = Object.keys(surface.attributeKeys).filter((key)=>!blockPath(key));
+    return /*#__PURE__*/ _jsxs(Section, {
         test: test,
         sectionId: "who",
-        children: /*#__PURE__*/ _jsxs("details", {
-            children: [
-                /*#__PURE__*/ _jsx("summary", {
-                    children: rules.length ? C.rulesSummary : C.everyone
-                }),
-                rules.map((rule, index)=>{
-                    const attribute = surface.attributeKeys[rule.attribute];
-                    const input = valueInput(attribute, rule.op);
-                    const setRule = (partial)=>update((current)=>current.map((row, i)=>i === index ? {
-                                    ...row,
-                                    ...partial
-                                } : row));
-                    const hint = emptyListHint(rule.op, rule.value);
-                    const changeValue = (raw)=>{
-                        const current = test.doc.targeting?.[index];
-                        const schema = current && surface.attributeKeys[current.attribute];
-                        if (!current || !schema) return;
-                        const value = coerceValue(schema.type, current.op, raw);
-                        if (value !== null) setRule({
-                            value
-                        });
-                    };
-                    return /*#__PURE__*/ _jsxs("div", {
-                        className: "xp-targeting-row",
-                        children: [
-                            /*#__PURE__*/ _jsx(SelectEdit, {
-                                label: C.attribute,
-                                reason: reason,
-                                value: rule.attribute,
-                                options: [
-                                    ...keys,
-                                    ...!attribute ? [
-                                        rule.attribute
-                                    ] : []
-                                ].map((key)=>({
-                                        value: key,
-                                        label: humaniseAttribute(key)
-                                    })),
-                                onCommit: (value)=>{
-                                    const key = String(value);
-                                    const type = surface.attributeKeys[key].type;
-                                    setRule({
-                                        attribute: key,
-                                        op: 'eq',
-                                        value: type === 'boolean' ? false : type === 'number' ? 0 : ''
-                                    });
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx(SelectEdit, {
-                                label: C.comparison,
-                                reason: reason,
-                                value: rule.op,
-                                options: opsFor(attribute?.type).map((op)=>({
-                                        value: op,
-                                        label: attribute?.type === 'number' ? NUMBER_COMPARISONS[op] : opLabel(attribute.type, op)
-                                    })),
-                                onCommit: (value)=>{
-                                    const op = value;
-                                    const current = readTargetingRules(test.doc.targeting ?? [])[index];
-                                    setRule({
-                                        op,
-                                        value: coerceValue(attribute.type, op, current?.value) ?? ''
-                                    });
-                                }
-                            }),
-                            input.kind === 'multiselect' ? /*#__PURE__*/ _jsx(CheckboxList, {
-                                label: C.value,
-                                reason: reason,
-                                value: readListValue(rule.value),
-                                options: input.options ?? [],
-                                onToggle: (value, checked)=>{
-                                    const values = readListValue(test.doc.targeting?.[index]?.value);
-                                    changeValue(checked ? [
-                                        ...new Set([
-                                            ...values,
-                                            value
-                                        ])
-                                    ] : values.filter((saved)=>saved !== value));
-                                }
-                            }) : input.kind === 'chips' ? /*#__PURE__*/ _jsx(ChipsInput, {
-                                id: `${id}-${index}-value`,
-                                label: C.value,
-                                value: readListValue(rule.value),
-                                disabled: Boolean(reason),
-                                description: reason ?? AUDIENCE_COPY.listDescription,
-                                placeholder: AUDIENCE_COPY.listPlaceholder,
-                                onChange: changeValue
-                            }, `${rule.attribute}-${rule.op}`) : input.kind === 'select' ? /*#__PURE__*/ _jsx(SelectEdit, {
-                                label: C.value,
-                                reason: reason,
-                                value: String(rule.value),
-                                options: input.options ?? [],
-                                onCommit: changeValue
-                            }) : input.kind === 'boolean' ? /*#__PURE__*/ _jsx(SelectEdit, {
-                                label: C.value,
-                                reason: reason,
-                                value: String(rule.value),
-                                options: [
-                                    {
-                                        value: 'true',
-                                        label: C.yes
-                                    },
-                                    {
-                                        value: 'false',
-                                        label: C.no
-                                    }
-                                ],
-                                onCommit: changeValue
-                            }) : /*#__PURE__*/ _jsx(TextEdit, {
-                                label: C.value,
-                                reason: reason,
-                                value: Array.isArray(rule.value) ? rule.value.join(', ') : String(rule.value),
-                                type: input.kind === 'number' ? 'number' : 'text',
-                                onCommit: changeValue
-                            }),
-                            hint ? /*#__PURE__*/ _jsx("p", {
-                                children: hint
-                            }) : null,
-                            /*#__PURE__*/ _jsx(FieldErrors, {
-                                test: test,
-                                path: `targeting.${index}`
-                            }),
-                            !reason ? /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>{
-                                    setRowsRevision((revision)=>revision + 1);
-                                    update((current)=>current.filter((_, i)=>i !== index));
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: rules.length ? C.rulesSummary : C.everyone
+            }),
+            rules.map((rule, index)=>{
+                const remove = ()=>{
+                    setRowsRevision((revision)=>revision + 1);
+                    update((current)=>current.filter((_, i)=>i !== index));
+                };
+                if (blockPath(rule.attribute)) return /*#__PURE__*/ _jsxs("div", {
+                    className: "xp-targeting-row",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "xp-ui-help",
+                            children: C.blockPathRule
+                        }),
+                        !reason ? /*#__PURE__*/ _jsx("div", {
+                            className: "xp-ui-button-group",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "link",
+                                size: "sm",
+                                onClick: remove,
+                                children: C.removeRule
+                            })
+                        }) : null
+                    ]
+                }, `${rowsRevision}-${index}`);
+                const attribute = surface.attributeKeys[rule.attribute];
+                const input = valueInput(attribute, rule.op);
+                const setRule = (partial)=>update((current)=>current.map((row, i)=>i === index ? {
+                                ...row,
+                                ...partial
+                            } : row));
+                const hint = emptyListHint(rule.op, rule.value);
+                const changeValue = (raw)=>{
+                    const current = test.doc.targeting?.[index];
+                    const schema = current && surface.attributeKeys[current.attribute];
+                    if (!current || !schema) return;
+                    const value = coerceValue(schema.type, current.op, raw);
+                    if (value !== null) setRule({
+                        value
+                    });
+                };
+                return /*#__PURE__*/ _jsxs("div", {
+                    className: "xp-targeting-row",
+                    children: [
+                        /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.attribute,
+                            reason: reason,
+                            value: rule.attribute,
+                            options: [
+                                ...keys,
+                                ...!attribute ? [
+                                    rule.attribute
+                                ] : []
+                            ].map((key)=>({
+                                    value: key,
+                                    label: humaniseAttribute(key)
+                                })),
+                            onCommit: (value)=>{
+                                const key = String(value);
+                                const type = surface.attributeKeys[key].type;
+                                setRule({
+                                    attribute: key,
+                                    op: 'eq',
+                                    value: type === 'boolean' ? false : type === 'number' ? 0 : ''
+                                });
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.comparison,
+                            reason: reason,
+                            value: rule.op,
+                            options: opsFor(attribute?.type).map((op)=>({
+                                    value: op,
+                                    label: attribute?.type === 'number' ? NUMBER_COMPARISONS[op] : opLabel(attribute.type, op)
+                                })),
+                            onCommit: (value)=>{
+                                const op = value;
+                                const current = readTargetingRules(test.doc.targeting ?? [])[index];
+                                setRule({
+                                    op,
+                                    value: coerceValue(attribute.type, op, current?.value) ?? ''
+                                });
+                            }
+                        }),
+                        input.kind === 'multiselect' ? /*#__PURE__*/ _jsx(CheckboxList, {
+                            label: C.value,
+                            reason: reason,
+                            value: readListValue(rule.value),
+                            options: input.options ?? [],
+                            onToggle: (value, checked)=>{
+                                const values = readListValue(test.doc.targeting?.[index]?.value);
+                                changeValue(checked ? [
+                                    ...new Set([
+                                        ...values,
+                                        value
+                                    ])
+                                ] : values.filter((saved)=>saved !== value));
+                            }
+                        }) : input.kind === 'chips' ? /*#__PURE__*/ _jsx(ChipsInput, {
+                            id: `${id}-${index}-value`,
+                            label: C.value,
+                            value: readListValue(rule.value),
+                            disabled: Boolean(reason),
+                            description: reason ?? AUDIENCE_COPY.listDescription,
+                            placeholder: AUDIENCE_COPY.listPlaceholder,
+                            onChange: changeValue
+                        }, `${rule.attribute}-${rule.op}`) : input.kind === 'select' ? /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.value,
+                            reason: reason,
+                            value: String(rule.value),
+                            options: input.options ?? [],
+                            onCommit: changeValue
+                        }) : input.kind === 'boolean' ? /*#__PURE__*/ _jsx(SelectEdit, {
+                            label: C.value,
+                            reason: reason,
+                            value: String(rule.value),
+                            options: [
+                                {
+                                    value: 'true',
+                                    label: C.yes
                                 },
+                                {
+                                    value: 'false',
+                                    label: C.no
+                                }
+                            ],
+                            onCommit: changeValue
+                        }) : /*#__PURE__*/ _jsx(TextEdit, {
+                            label: C.value,
+                            reason: reason,
+                            value: Array.isArray(rule.value) ? rule.value.join(', ') : String(rule.value),
+                            type: input.kind === 'number' ? 'number' : 'text',
+                            onCommit: changeValue
+                        }),
+                        hint ? /*#__PURE__*/ _jsx("p", {
+                            children: hint
+                        }) : null,
+                        /*#__PURE__*/ _jsx(FieldErrors, {
+                            test: test,
+                            path: `targeting.${index}`
+                        }),
+                        !reason ? /*#__PURE__*/ _jsx("div", {
+                            className: "xp-ui-button-group",
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "link",
+                                size: "sm",
+                                onClick: remove,
                                 children: C.removeRule
-                            }) : null
-                        ]
-                    }, `${rowsRevision}-${index}`);
-                }),
-                !reason ? /*#__PURE__*/ _jsx("button", {
-                    type: "button",
+                            })
+                        }) : null
+                    ]
+                }, `${rowsRevision}-${index}`);
+            }),
+            !reason ? /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-button-group",
+                children: /*#__PURE__*/ _jsx(Button, {
                     disabled: !keys.length,
                     onClick: ()=>{
                         const attribute = keys[0];
@@ -170,12 +196,12 @@ export function TargetingSection({ test, surface }) {
                             ]);
                     },
                     children: C.addRule
-                }) : null,
-                /*#__PURE__*/ _jsx(FieldErrors, {
-                    test: test,
-                    path: "targeting"
                 })
-            ]
-        })
+            }) : null,
+            /*#__PURE__*/ _jsx(FieldErrors, {
+                test: test,
+                path: "targeting"
+            })
+        ]
     });
 }

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

@@ -1,7 +1,8 @@
 import type { DocId } from '../../../types/contracts.js';
 import type { SurfaceProps } from '../contracts.js';
 import './testPage.css';
-export declare function TestPage({ id, surface }: {
+export declare function TestPage({ id, surface, onTitleChange }: {
     id: DocId;
     surface: SurfaceProps;
+    onTitleChange?: (title: string) => void;
 }): import("react").JSX.Element;

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

@@ -1,84 +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__*/ _jsx("p", {
-                role: "alert",
-                children: test.errors._section
-            }) : 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
+                })
+            ]
+        })
     });
 }