@delmaredigital/payload-experiments 0.3.0-rc.1 → 0.4.0-rc.1

package/dist/admin/surface/newTest/PageWizard.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import { useTestDocument } from '../useTestDocument.js';
+import { CopyRoute } from '../pagePicker/CopyRoute.js';
+import { PagePicker } from '../pagePicker/PagePicker.js';
+import { testPageCollection, controlFirst } from '../pagePicker/pagePicker.model.js';
+import { NEW_TEST_COPY as C } from '../../copy/newTest.js';
+import { READINESS_COPY } from '../../copy/readiness.js';
+import { TEST_PAGE } from '../../copy/testPage.js';
+import { SURFACE_COPY } from '../../copy/surface.js';
+import { pageStepCopy } from '../../copy/pages.js';
+import { READINESS, nextStep, pageReadinessContext, readinessArm } from '../readiness/readiness.model.js';
+import { SaveStatus } from '../readiness/SaveStatus.js';
+import { createApi } from '../../api.js';
+import { useTransition } from '../readiness/useTransition.js';
+/** One session stays mounted across Collection, all page steps and Review. */ export function PageWizard({ id, surface }) {
+    const router = useRouter();
+    const collections = surface.pageCollections ?? [];
+    const [step, setStep] = useState(collections.length > 1 ? 'collection' : 'control');
+    const test = useTestDocument(id, {
+        apiRoute: surface.apiRoute,
+        refetchPreflightOnFocus: step === 'review'
+    });
+    const testUrl = formatAdminURL({
+        adminRoute: surface.adminRoute,
+        path: `/experiments/${encodeURIComponent(String(id))}`
+    });
+    const transition = useTransition(test, ()=>router.push(testUrl));
+    useEffect(()=>{
+        if (step === 'review') void test.refreshPreflight();
+    }, [
+        step,
+        test.refreshPreflight
+    ]);
+    const leave = ()=>router.push(testUrl);
+    if (test.loadState === 'loading') return /*#__PURE__*/ _jsx("p", {
+        role: "status",
+        children: TEST_PAGE.loading
+    });
+    if (!test.doc || test.loadState !== 'ready') return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.loadState === 'forbidden' ? TEST_PAGE.forbidden : test.loadState === 'missing' ? TEST_PAGE.missing : TEST_PAGE.error
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>void test.reload(),
+                children: TEST_PAGE.retry
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: leave,
+                children: C.backToTest
+            })
+        ]
+    });
+    const doc = test.doc;
+    const collection = testPageCollection(collections, doc, test.preflight?.pagePlacements);
+    const arms = controlFirst(doc.arms).filter((arm)=>arm.kind !== 'holdout');
+    const steps = [
+        ...collections.length > 1 ? [
+            'collection'
+        ] : [],
+        ...arms.map((arm)=>arm.key),
+        'review'
+    ];
+    const arm = arms.find((item)=>item.key === step);
+    const ctx = pageReadinessContext(doc, test.preflight, surface);
+    const next = nextStep(test.preflight, ctx);
+    const ready = Boolean(test.preflight && !test.preflightPending && !test.preflightError && test.preflight.checks.every((check)=>check.ok));
+    const busy = test.hasUnsaved || test.saving === 'saving' || transition.busy;
+    const jump = (section, key)=>{
+        if (section === 'versions') setStep(key ?? arms.find((item)=>!item.pageTarget)?.key ?? 'control');
+        else router.push(`${testUrl}#section-${section}`);
+    };
+    const picker = arm && collection ? /*#__PURE__*/ _jsx(PagePicker, {
+        collection: collection,
+        test: test,
+        armKey: arm.key,
+        apiRoute: surface.apiRoute
+    }, `${collection.slug}/${arm.key}`) : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-new-test xp-page-wizard",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: step === 'collection' ? C.collection : step === 'review' ? C.review : arm?.kind === 'control' ? C.original : pageStepCopy(arm?.label ?? '')
+            }),
+            /*#__PURE__*/ _jsx(SaveStatus, {
+                test: test
+            }),
+            test.errors._section ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.errors._section
+            }) : null,
+            step === 'collection' ? /*#__PURE__*/ _jsxs("fieldset", {
+                children: [
+                    /*#__PURE__*/ _jsx("legend", {
+                        children: C.collection
+                    }),
+                    collections.map((entry)=>/*#__PURE__*/ _jsxs("label", {
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    type: "radio",
+                                    name: "page-collection",
+                                    checked: doc.pageCollection === entry.slug,
+                                    disabled: busy,
+                                    onChange: ()=>{
+                                        test.stage({
+                                            pageCollection: entry.slug
+                                        });
+                                        void test.commit();
+                                    }
+                                }),
+                                entry.label
+                            ]
+                        }, entry.slug))
+                ]
+            }) : step === 'review' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    test.preflightError ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: test.preflightError
+                    }) : null,
+                    /*#__PURE__*/ _jsx("ul", {
+                        children: test.preflight?.checks.map((check, index)=>{
+                            if (!Object.hasOwn(READINESS, check.code)) return check.ok ? null : /*#__PURE__*/ _jsx("li", {
+                                children: SURFACE_COPY.next
+                            }, `${check.code}/${index}`);
+                            const row = READINESS[check.code];
+                            const sentence = row.next(check.detail, ctx);
+                            const label = typeof row.nextStep === 'function' ? row.nextStep(check.detail, ctx) : row.nextStep;
+                            return sentence && !check.ok ? /*#__PURE__*/ _jsxs("li", {
+                                children: [
+                                    sentence,
+                                    label ? /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>jump(row.section, readinessArm(check.code, check.detail, ctx)),
+                                        children: label
+                                    }) : null
+                                ]
+                            }, `${check.code}/${index}`) : null;
+                        })
+                    }),
+                    ready ? /*#__PURE__*/ _jsx("p", {
+                        children: READINESS_COPY.ready
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy || test.preflightPending || !test.preflight,
+                        onClick: ()=>{
+                            if (ready) void transition.run(()=>createApi(surface.apiRoute).start(id));
+                            else if (next) jump(next.section, next.arm);
+                        },
+                        children: ready ? C.start : C.finishSetup
+                    }),
+                    transition.error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: transition.error
+                    }) : null
+                ]
+            }) : arm?.kind === 'control' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.originalHelp
+                    }),
+                    picker
+                ]
+            }) : collection ? /*#__PURE__*/ _jsx(CopyRoute, {
+                collection: collection,
+                children: picker
+            }) : null,
+            /*#__PURE__*/ _jsxs("div", {
+                className: "xp-new-test-actions",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy,
+                        onClick: ()=>{
+                            const previous = steps[steps.indexOf(step) - 1];
+                            if (previous) setStep(previous);
+                            else leave();
+                        },
+                        children: C.back
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy,
+                        onClick: leave,
+                        children: C.backToTest
+                    }),
+                    step !== 'review' ? /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: busy || step === 'collection' && !collection,
+                        onClick: ()=>setStep(steps[steps.indexOf(step) + 1] ?? 'review'),
+                        children: C.next
+                    }) : null
+                ]
+            }),
+            test.errors.pageCollection ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: test.errors.pageCollection
+            }) : null
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/CopyRoute.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { PageCollection } from './pagePicker.model.js';
+export declare function CopyRoute({ collection, children }: {
+    collection: PageCollection;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/admin/surface/pagePicker/CopyRoute.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PAGE_COPY as C, openCollectionCopy, openOriginalCopy } from '../../copy/pages.js';
+export function CopyRoute({ collection, children }) {
+    const link = /*#__PURE__*/ _jsx("a", {
+        href: collection.copyUrl,
+        target: "_blank",
+        rel: "noopener",
+        children: collection.copyLabel ?? openCollectionCopy(collection.label)
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-copy-route",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-copy-route-action"
+            }),
+            collection.copyHint ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("p", {
+                        children: [
+                            collection.copyHint,
+                            ' ',
+                            link
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.ownAddress
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs("ol", {
+                children: [
+                    /*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            openOriginalCopy(collection.label),
+                            ' ',
+                            link
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: C.duplicateStep
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: C.ownAddress
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                children: C.thenChoose
+            }),
+            children
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/PagePicker.d.ts

@@ -0,0 +1,10 @@
+import type { TestDocApi } from '../contracts.js';
+import type { PageCollection } from './pagePicker.model.js';
+/** Mount on open; every reopen and return from another tab refreshes the current query. */
+export declare function PagePicker({ collection, test, armKey, apiRoute, onChoose }: {
+    collection: PageCollection;
+    test: TestDocApi;
+    armKey: string;
+    apiRoute: string;
+    onChoose?: () => void;
+}): import("react").JSX.Element;

package/dist/admin/surface/pagePicker/PagePicker.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createApi } from '../../api.js';
+import { PAGE_COPY as C } from '../../copy/pages.js';
+import { reasonFor } from '../test/fields.js';
+import { disabledPageReason, isLatestPageRequest } from './pagePicker.model.js';
+/** Mount on open; every reopen and return from another tab refreshes the current query. */ export function PagePicker({ collection, test, armKey, apiRoute, onChoose }) {
+    const api = useMemo(()=>createApi(apiRoute), [
+        apiRoute
+    ]);
+    const id = useId();
+    const [search, setSearch] = useState('');
+    const [q, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const [refresh, setRefresh] = useState(0);
+    const [rows, setRows] = useState([]);
+    const [more, setMore] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const revision = useRef(0);
+    const reload = ()=>{
+        setPage(1);
+        setRefresh((value)=>value + 1);
+    };
+    useEffect(()=>{
+        if (search === q) return;
+        const timer = setTimeout(()=>{
+            setQuery(search);
+            setPage(1);
+            setRows([]);
+            setMore(false);
+            setLoading(true);
+            setError('');
+        }, 250);
+        return ()=>clearTimeout(timer);
+    }, [
+        search,
+        q
+    ]);
+    useEffect(()=>{
+        let lastReturn = -Infinity;
+        const focus = ()=>{
+            if (document.visibilityState !== 'visible' || Date.now() - lastReturn < 100) return;
+            lastReturn = Date.now();
+            setPage(1);
+            setRefresh((value)=>value + 1);
+        };
+        const visible = ()=>{
+            if (document.visibilityState === 'visible') focus();
+        };
+        window.addEventListener('focus', focus);
+        document.addEventListener('visibilitychange', visible);
+        return ()=>{
+            window.removeEventListener('focus', focus);
+            document.removeEventListener('visibilitychange', visible);
+        };
+    }, []);
+    useEffect(()=>{
+        const controller = new AbortController();
+        const request = ++revision.current;
+        setLoading(true);
+        setError('');
+        void api.pages({
+            collection: collection.slug,
+            q,
+            page
+        }, controller.signal).then((result)=>{
+            if (controller.signal.aborted || !isLatestPageRequest(request, revision.current)) return;
+            if (result.ok && result.data) {
+                const docs = result.data.docs;
+                setRows((current)=>{
+                    const combined = page === 1 ? docs : [
+                        ...current,
+                        ...docs
+                    ];
+                    return combined.filter((row, index)=>combined.findIndex((item)=>item.id === row.id) === index);
+                });
+                setMore(result.data.hasNextPage);
+            } else {
+                setMore(false);
+                setError(C.error);
+            }
+            setLoading(false);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        collection.slug,
+        q,
+        page,
+        refresh
+    ]);
+    const reason = reasonFor(test, 'arms');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-page-picker",
+        children: [
+            /*#__PURE__*/ _jsx("label", {
+                htmlFor: id,
+                children: C.search
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                id: id,
+                type: "search",
+                value: search,
+                onChange: (event)=>setSearch(event.currentTarget.value)
+            }),
+            loading && !rows.length ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: C.loading
+            }) : null,
+            error ? /*#__PURE__*/ _jsxs("p", {
+                role: "alert",
+                children: [
+                    error,
+                    " ",
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: reload,
+                        children: C.retry
+                    })
+                ]
+            }) : null,
+            !rows.length ? !loading && !error ? /*#__PURE__*/ _jsx("p", {
+                children: C.empty
+            }) : null : /*#__PURE__*/ _jsx("ul", {
+                children: rows.map((row)=>{
+                    const disabled = reason ?? disabledPageReason(row, armKey, test.doc?.arms ?? [], test.preflight?.pagePlacements, test.chosenPages, collection.label, collection.slug);
+                    return /*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                disabled: !!disabled || test.saving === 'saving',
+                                onClick: ()=>{
+                                    const arm = test.doc?.arms.find((item)=>item.key === armKey);
+                                    if (!arm || row.path === null || disabled) return;
+                                    void test.choosePage(arm.key, {
+                                        id: row.id,
+                                        path: row.path
+                                    });
+                                    onChoose?.();
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: row.title
+                                    }),
+                                    ' ',
+                                    row.path,
+                                    !row.published ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            " · ",
+                                            C.draft
+                                        ]
+                                    }) : null
+                                ]
+                            }),
+                            disabled ? /*#__PURE__*/ _jsx("p", {
+                                children: disabled
+                            }) : null
+                        ]
+                    }, row.id);
+                })
+            }),
+            more ? /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                disabled: loading,
+                onClick: ()=>setPage((value)=>value + 1),
+                children: C.more
+            }) : null
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/pagePicker.model.d.ts

@@ -0,0 +1,25 @@
+import type { Arm, DocId } from '../../../types/contracts.js';
+import type { PagesResult, PreflightResult } from '../../../types/endpoints.js';
+import type { TestsSurfaceProps } from '../../../types/surface.js';
+export type PageRow = PagesResult['docs'][number];
+export type PageCollection = NonNullable<TestsSurfaceProps['pageCollections']>[number];
+export type PageSelections = Partial<Record<Arm['key'], {
+    id: DocId;
+    path: string;
+}>>;
+/** The server resolves legacy collections; the client consumes its placements verbatim. */
+export declare function testPageCollection(collections: readonly PageCollection[] | undefined, doc: {
+    pageCollection?: string | null;
+}, placements: PreflightResult['pagePlacements']): {
+    slug: string;
+    label: string;
+    contentChecks: boolean;
+    copyHint?: string;
+    copyUrl?: string;
+    copyLabel?: string;
+} | undefined;
+export declare const controlFirst: (arms: readonly Arm[]) => Arm[];
+/** Identity wins over address, so distinct documents sharing an address get actionable copy. */
+export declare function disabledPageReason(row: PageRow, ownKey: string, arms: readonly Arm[], placements: PreflightResult['pagePlacements'], chosen: PageSelections, collection: string, collectionSlug?: string): string | null;
+/** Pure request revision comparison, also used after an aborted transport resolves. */
+export declare const isLatestPageRequest: (response: number, latest: number) => boolean;

package/dist/admin/surface/pagePicker/pagePicker.model.js

@@ -0,0 +1,25 @@
+import { normalisePath } from '../../../runtime/normalisePath.js';
+import { PAGE_COPY, usedAddressCopy, usedPageCopy } from '../../copy/pages.js';
+import { actionGroupLabel } from '../../actions/actions.model.js';
+/** The server resolves legacy collections; the client consumes its placements verbatim. */ export function testPageCollection(collections, doc, placements) {
+    const slug = doc.pageCollection || placements?.find((entry)=>entry.collection)?.collection;
+    return collections?.find((entry)=>entry.slug === slug);
+}
+export const controlFirst = (arms)=>[
+        ...arms
+    ].sort((a, b)=>Number(b.kind === 'control') - Number(a.kind === 'control'));
+/** Identity wins over address, so distinct documents sharing an address get actionable copy. */ export function disabledPageReason(row, ownKey, arms, placements, chosen, collection, collectionSlug) {
+    if (row.path === null || row.pathKey === null) return PAGE_COPY.noPath;
+    const others = controlFirst(arms).filter((arm)=>arm.key !== ownKey && arm.kind !== 'holdout');
+    for (const arm of others){
+        const selection = chosen[arm.key];
+        const remembered = selection && arm.pageTarget && normalisePath(selection.path) === normalisePath(arm.pageTarget) ? selection.id : undefined;
+        const id = remembered ?? placements?.find((entry)=>entry.arm === arm.key && (!collectionSlug || entry.collection === collectionSlug))?.id;
+        if (id != null ? String(id) === String(row.id) : Boolean(arm.pageTarget && normalisePath(arm.pageTarget) === row.pathKey)) {
+            return usedPageCopy(actionGroupLabel(arm.key, arm.label));
+        }
+    }
+    const same = others.find((arm)=>arm.pageTarget && normalisePath(arm.pageTarget) === row.pathKey);
+    return same ? usedAddressCopy(actionGroupLabel(same.key, same.label), row.path, collection) : null;
+}
+/** Pure request revision comparison, also used after an aborted transport resolves. */ export const isLatestPageRequest = (response, latest)=>response === latest;