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

package/dist/admin/surface/ResultsRoute.js

@@ -1,23 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTestDocument } from './useTestDocument.js';
-import { TestHeader } from './test/TestHeader.js';
+import { ResultsHeader, ReaderResultsShell } from './results/ResultsHeader.js';
 import { ResultsBody } from './results/ResultsBody.js';
 import { TEST_PAGE as C } from '../copy/testPage.js';
-import './test/testPage.css';
+import { Button } from '../../ui/Button.js';
 export function ResultsRoute(props) {
     // Results-only readers cannot load the manager-only experiment or preflight.
     return props.surface.canManage ? /*#__PURE__*/ _jsx(ManagedResults, {
         ...props
     }) : /*#__PURE__*/ _jsx(ResultsBody, {
-        ...props
+        ...props,
+        renderPage: ({ children, data })=>/*#__PURE__*/ _jsx(ReaderResultsShell, {
+                surface: props.surface,
+                data: data,
+                children: children
+            })
     });
 }
-function ManagedResults({ id, surface }) {
+function ManagedResults({ id, surface, onTitleChange }) {
     const test = useTestDocument(id, {
         apiRoute: surface.apiRoute
     });
+    useEffect(()=>{
+        if (test.doc?.name) onTitleChange?.(test.doc.name);
+    }, [
+        test.doc?.name,
+        onTitleChange
+    ]);
     const [resultsVersion, setResultsVersion] = useState(0);
     // Add-goal changes metrics while status, phase and allocation stay the same.
     const bodyKey = test.doc ? JSON.stringify([
@@ -27,36 +38,50 @@ function ManagedResults({ id, surface }) {
         test.doc.metrics
     ]) : 'loading';
     // ResultsBody's Decide is the shared DecideDialog, which reloads the page; Recompute keeps status.
-    return /*#__PURE__*/ _jsxs("main", {
-        className: "xp-test-page",
-        children: [
-            test.loadState === 'ready' && test.doc ? /*#__PURE__*/ _jsx(TestHeader, {
+    if (test.loadState === 'ready' && test.doc) return /*#__PURE__*/ _jsx(ResultsBody, {
+        id: id,
+        surface: surface,
+        onRecomputed: ()=>setResultsVersion((value)=>value + 1),
+        onPagesReleased: ()=>{
+            void test.reload();
+        },
+        renderPage: (parts)=>/*#__PURE__*/ _jsx(ResultsHeader, {
                 test: test,
                 surface: surface,
-                view: "results",
-                resultsVersion: resultsVersion
-            }) : /*#__PURE__*/ _jsx("p", {
-                role: "status",
-                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,
-            test.errors._section ? /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                children: test.errors._section
-            }) : null,
-            test.preflightError ? /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                children: test.preflightError
-            }) : null,
-            test.loadState !== 'loading' && test.loadState !== 'missing' && test.loadState !== 'forbidden' ? /*#__PURE__*/ _jsx(ResultsBody, {
-                id: id,
-                surface: surface,
-                onRecomputed: ()=>setResultsVersion((value)=>value + 1)
-            }, bodyKey) : null
-        ]
+                resultsVersion: resultsVersion,
+                ...parts
+            }, `${test.doc.id}/${test.doc.status}`)
+    }, bodyKey);
+    return /*#__PURE__*/ _jsx(ReaderResultsShell, {
+        surface: surface,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-test-page",
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    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,
+                test.errors._section ? /*#__PURE__*/ _jsx("p", {
+                    role: "alert",
+                    children: test.errors._section
+                }) : null,
+                test.preflightError ? /*#__PURE__*/ _jsx("p", {
+                    role: "alert",
+                    children: test.preflightError
+                }) : null,
+                test.loadState !== 'loading' && test.loadState !== 'missing' && test.loadState !== 'forbidden' ? /*#__PURE__*/ _jsx(ResultsBody, {
+                    id: id,
+                    surface: surface,
+                    onRecomputed: ()=>setResultsVersion((value)=>value + 1),
+                    onPagesReleased: ()=>{
+                        void test.reload();
+                    }
+                }, bodyKey) : null
+            ]
+        })
     });
 }

package/dist/admin/surface/SurfaceShell.d.ts

@@ -1,7 +1,16 @@
 import '../theme.css';
 import type { ReactNode } from 'react';
 import './surface.css';
-export declare function SurfaceShell({ adminRoute, children }: {
+export interface SurfaceShellProps {
     adminRoute: string;
     children: ReactNode;
-}): import("react").JSX.Element;
+    crumbs?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    title?: string;
+    status?: ReactNode;
+    actions?: ReactNode;
+    subtitle?: ReactNode;
+}
+export declare function SurfaceShell({ adminRoute, children, crumbs, title, status, actions, subtitle }: SurfaceShellProps): import("react").JSX.Element;

package/dist/admin/surface/SurfaceShell.js

@@ -1,34 +1,69 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '../theme.css';
-import { Link } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
+import { Breadcrumb } from '../../ui/Breadcrumb.js';
+import { Button } from '../../ui/Button.js';
 import { SURFACE_COPY } from '../copy/surface.js';
 import './surface.css';
-export function SurfaceShell({ adminRoute, children }) {
+export function SurfaceShell({ adminRoute, children, crumbs = [
+    {
+        label: SURFACE_COPY.title
+    }
+], title = SURFACE_COPY.title, status, actions, subtitle }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-tests-surface",
         children: [
             /*#__PURE__*/ _jsxs("header", {
                 className: "xp-tests-shell-header",
                 children: [
-                    /*#__PURE__*/ _jsx(Link, {
-                        href: formatAdminURL({
-                            adminRoute,
-                            path: '/experiments'
-                        }),
-                        children: SURFACE_COPY.title
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-tests-container xp-tests-shell-top",
+                        children: [
+                            /*#__PURE__*/ _jsx(Breadcrumb, {
+                                items: crumbs
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "quiet",
+                                size: "sm",
+                                href: formatAdminURL({
+                                    adminRoute
+                                }),
+                                children: SURFACE_COPY.backToAdmin
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ _jsx(Link, {
-                        href: formatAdminURL({
-                            adminRoute
-                        }),
-                        children: SURFACE_COPY.backToAdmin
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-tests-container xp-tests-shell-main",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "xp-tests-shell-heading",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "xp-tests-shell-title",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h1", {
+                                                children: title
+                                            }),
+                                            status
+                                        ]
+                                    }),
+                                    subtitle ? /*#__PURE__*/ _jsx("div", {
+                                        className: "xp-tests-shell-subtitle",
+                                        children: subtitle
+                                    }) : null
+                                ]
+                            }),
+                            actions ? /*#__PURE__*/ _jsx("div", {
+                                className: "xp-tests-shell-actions",
+                                children: actions
+                            }) : null
+                        ]
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx("main", {
-                className: "xp-tests-main",
+                className: "xp-tests-container xp-tests-main",
                 children: children
             })
         ]

package/dist/admin/surface/TestsHome.d.ts

@@ -1,4 +1,9 @@
-export declare function TestsHome({ adminRoute, apiRoute }: {
+import type { SurfaceShellProps } from './SurfaceShell.js';
+import type { ReadinessContext } from './readiness/readiness.model.js';
+export declare function TestsHome({ adminRoute, apiRoute, canManage, crumbs, flagPoints }: {
     adminRoute: string;
     apiRoute: string;
+    canManage?: boolean;
+    crumbs?: SurfaceShellProps['crumbs'];
+    flagPoints?: ReadinessContext['flagPoints'];
 }): import("react").JSX.Element;

package/dist/admin/surface/TestsHome.js

@@ -1,12 +1,31 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Link, Pill } from '@payloadcms/ui';
+import { Link } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
 import { createApi } from '../api.js';
-import { SURFACE_COPY } from '../copy/surface.js';
+import { noMatchesLine, SURFACE_COPY } from '../copy/surface.js';
+import { Banner, EmptyState, StatusChip } from '../../ui/Feedback.js';
+import { Button } from '../../ui/Button.js';
+import { SearchInput } from '../../ui/Inputs.js';
+import { SurfaceShell } from './SurfaceShell.js';
 import { groupTests, homeCard } from './home.model.js';
-export function TestsHome({ adminRoute, apiRoute }) {
+const HOME_FIELDS = [
+    'name',
+    'kind',
+    'status',
+    'analysis',
+    'arms',
+    'decidedAt',
+    'decision',
+    'unitType',
+    'flagPoint'
+];
+// Typecheck fails if HomeTest gains a field the list request does not select (Payload always returns id).
+const homeFieldsComplete = true;
+void homeFieldsComplete;
+const HOME_SELECT = HOME_FIELDS.map((field)=>`select[${field}]=true`).join('&');
+export function TestsHome({ adminRoute, apiRoute, canManage = false, crumbs, flagPoints }) {
     const api = useMemo(()=>createApi(apiRoute), [
         apiRoute
     ]);
@@ -23,7 +42,7 @@ export function TestsHome({ adminRoute, apiRoute }) {
         });
         async function load() {
             try {
-                const response = await fetch(`${apiRoute.replace(/\/$/, '')}/xp-experiments?depth=0&sort=-updatedAt&limit=200`, {
+                const response = await fetch(`${apiRoute.replace(/\/$/, '')}/xp-experiments?depth=0&sort=-updatedAt&limit=200&${HOME_SELECT}`, {
                     credentials: 'include',
                     signal: controller.signal
                 });
@@ -56,132 +75,161 @@ export function TestsHome({ adminRoute, apiRoute }) {
         apiRoute,
         attempt
     ]);
-    const retry = /*#__PURE__*/ _jsx("button", {
-        type: "button",
+    const retry = /*#__PURE__*/ _jsx(Button, {
+        size: "sm",
         onClick: ()=>setAttempt((value)=>value + 1),
         children: SURFACE_COPY.retry
     });
-    const newTest = /*#__PURE__*/ _jsx(Link, {
-        className: "xp-tests-primary",
+    const newTest = /*#__PURE__*/ _jsx(Button, {
+        variant: "primary",
         href: formatAdminURL({
             adminRoute,
             path: '/experiments/new'
         }),
         children: SURFACE_COPY.newTest
     });
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "xp-tests-toolbar",
-                children: [
-                    /*#__PURE__*/ _jsx("h1", {
-                        children: SURFACE_COPY.title
-                    }),
-                    /*#__PURE__*/ _jsxs("label", {
-                        children: [
-                            SURFACE_COPY.search,
-                            /*#__PURE__*/ _jsx("input", {
-                                type: "search",
-                                value: search,
-                                onChange: (event)=>setSearch(event.target.value)
-                            })
-                        ]
-                    }),
-                    newTest,
-                    /*#__PURE__*/ _jsx(Link, {
-                        href: formatAdminURL({
-                            adminRoute,
-                            path: '/experiments/goals'
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: adminRoute,
+        crumbs: crumbs,
+        actions: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "xp-tests-search",
+                    children: [
+                        /*#__PURE__*/ _jsxs("svg", {
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("circle", {
+                                    cx: "7",
+                                    cy: "7",
+                                    r: "4.5"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "m10.5 10.5 3.5 3.5"
+                                })
+                            ]
                         }),
-                        children: SURFACE_COPY.goals
-                    })
-                ]
-            }),
-            state.loading ? /*#__PURE__*/ _jsx("p", {
-                role: "status",
-                children: SURFACE_COPY.loading
-            }) : state.error ? /*#__PURE__*/ _jsxs("div", {
-                role: "alert",
-                children: [
-                    SURFACE_COPY.loadError,
-                    " ",
-                    retry
-                ]
-            }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    state.limited ? /*#__PURE__*/ _jsx("p", {
-                        children: SURFACE_COPY.limitedList
-                    }) : null,
-                    state.summaryError ? /*#__PURE__*/ _jsxs("div", {
-                        role: "alert",
-                        children: [
-                            SURFACE_COPY.summaryError,
-                            " ",
-                            retry
-                        ]
-                    }) : null,
-                    state.tests.length === 0 ? /*#__PURE__*/ _jsxs("div", {
-                        children: [
-                            /*#__PURE__*/ _jsx("p", {
-                                children: SURFACE_COPY.empty
-                            }),
-                            newTest
-                        ]
-                    }) : /*#__PURE__*/ _jsx(TestGroups, {
-                        tests: state.tests,
-                        summaries: state.summaries,
-                        adminRoute: adminRoute,
-                        search: search
-                    })
-                ]
-            })
-        ]
+                        /*#__PURE__*/ _jsx(SearchInput, {
+                            id: "xp-tests-search",
+                            label: SURFACE_COPY.search,
+                            placeholder: SURFACE_COPY.search,
+                            value: search,
+                            onChange: (event)=>setSearch(event.target.value)
+                        })
+                    ]
+                }),
+                canManage ? /*#__PURE__*/ _jsx(Button, {
+                    href: formatAdminURL({
+                        adminRoute,
+                        path: '/experiments/goals'
+                    }),
+                    children: SURFACE_COPY.goals
+                }) : null,
+                newTest
+            ]
+        }),
+        children: state.loading ? /*#__PURE__*/ _jsx("p", {
+            role: "status",
+            children: SURFACE_COPY.loading
+        }) : state.error ? /*#__PURE__*/ _jsx(Banner, {
+            tone: "error",
+            action: retry,
+            children: SURFACE_COPY.loadError
+        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                state.summaryError ? /*#__PURE__*/ _jsx(Banner, {
+                    tone: "error",
+                    action: retry,
+                    children: SURFACE_COPY.summaryError
+                }) : null,
+                state.tests.length === 0 ? /*#__PURE__*/ _jsx(EmptyState, {
+                    action: newTest,
+                    children: SURFACE_COPY.empty
+                }) : /*#__PURE__*/ _jsx(TestGroups, {
+                    tests: state.tests,
+                    summaries: state.summaries,
+                    adminRoute: adminRoute,
+                    flagPoints: flagPoints,
+                    search: search,
+                    clear: ()=>setSearch('')
+                }),
+                state.limited ? /*#__PURE__*/ _jsx("p", {
+                    className: "xp-tests-limited",
+                    children: SURFACE_COPY.limitedList
+                }) : null
+            ]
+        })
     });
 }
-function TestGroups({ tests, summaries, adminRoute, search }) {
+function TestGroups({ tests, summaries, adminRoute, flagPoints, search, clear }) {
     const groups = groupTests(tests, summaries, search);
-    if (!groups.some((group)=>group.tests.length)) return /*#__PURE__*/ _jsx("p", {
-        children: SURFACE_COPY.noMatches
+    if (!groups.some((group)=>group.tests.length)) return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-tests-no-matches",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: noMatchesLine(search)
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "quiet",
+                size: "sm",
+                onClick: clear,
+                children: SURFACE_COPY.clear
+            })
+        ]
     });
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: groups.map((group, index)=>{
             if (!group.tests.length) return null;
-            const cards = /*#__PURE__*/ _jsx("div", {
-                className: "xp-tests-cards",
+            const rows = /*#__PURE__*/ _jsx("div", {
+                className: "xp-tests-list",
                 children: group.tests.map((test)=>{
-                    const card = homeCard(test, summaries[test.id], adminRoute);
+                    const card = homeCard(test, summaries[test.id], adminRoute, flagPoints);
                     return /*#__PURE__*/ _jsxs("article", {
-                        className: "xp-tests-card",
+                        className: "xp-tests-row",
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "xp-tests-card-heading",
+                                className: "xp-tests-row-main",
                                 children: [
-                                    /*#__PURE__*/ _jsx("h3", {
-                                        children: test.name
-                                    }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        children: card.kind
-                                    }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        title: card.pill.tooltip,
-                                        children: /*#__PURE__*/ _jsx(Pill, {
-                                            children: card.pill.label
-                                        })
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "xp-tests-row-name",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Link, {
+                                                href: card.href,
+                                                children: test.name
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "xp-tests-kind",
+                                                children: card.kind
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                title: card.pill.tooltip,
+                                                children: /*#__PURE__*/ _jsx(StatusChip, {
+                                                    status: test.status
+                                                })
+                                            })
+                                        ]
                                     }),
-                                    test.status === 'running' && card.health ? /*#__PURE__*/ _jsx("span", {
-                                        role: "img",
-                                        "aria-label": SURFACE_COPY.health[card.health],
-                                        className: `xp-tests-health xp-tests-health--${card.health}`
-                                    }) : null
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "xp-tests-row-line",
+                                        children: [
+                                            test.status === 'running' && card.health ? /*#__PURE__*/ _jsx("span", {
+                                                className: `xp-tests-health xp-tests-health--${card.health}`,
+                                                children: SURFACE_COPY.health[card.health]
+                                            }) : null,
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: card.line
+                                            })
+                                        ]
+                                    })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsx("p", {
-                                children: card.line
-                            }),
-                            card.headline ? /*#__PURE__*/ _jsx("p", {
-                                children: card.headline
-                            }) : null,
-                            /*#__PURE__*/ _jsx(Link, {
+                            /*#__PURE__*/ _jsx(Button, {
+                                className: "xp-tests-row-action",
+                                size: "sm",
                                 href: card.href,
                                 children: card.action
                             })
@@ -189,22 +237,45 @@ function TestGroups({ tests, summaries, adminRoute, search }) {
                     }, test.id);
                 })
             });
+            const heading = /*#__PURE__*/ _jsxs("div", {
+                className: "xp-tests-group-head",
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        id: `xp-tests-group-${index}`,
+                        children: group.label
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: group.tests.length
+                    })
+                ]
+            });
             return index === 5 ? /*#__PURE__*/ _jsxs("details", {
                 className: "xp-tests-group",
                 children: [
                     /*#__PURE__*/ _jsx("summary", {
-                        children: group.label
+                        children: /*#__PURE__*/ _jsxs("h2", {
+                            className: "xp-tests-group-head",
+                            children: [
+                                group.label,
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: group.tests.length
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "xp-tests-group-chevron",
+                                    "aria-hidden": "true",
+                                    children: "›"
+                                })
+                            ]
+                        })
                     }),
-                    cards
+                    rows
                 ]
             }, group.label) : /*#__PURE__*/ _jsxs("section", {
                 className: "xp-tests-group",
-                "aria-label": group.label,
+                "aria-labelledby": `xp-tests-group-${index}`,
                 children: [
-                    /*#__PURE__*/ _jsx("h2", {
-                        children: group.label
-                    }),
-                    cards
+                    heading,
+                    rows
                 ]
             }, group.label);
         })