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

package/dist/admin/surface/TestsHome.js

@@ -1,12 +1,33 @@
 '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 { fetchAllDocs } from '../../lib/fetchAllDocs.js';
 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',
+    'updatedAt'
+];
+// 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,19 +44,18 @@ 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 fetchAllDocs(`${apiRoute.replace(/\/$/, '')}/xp-experiments?depth=0&sort=id&${HOME_SELECT}`, {
                     credentials: 'include',
                     signal: controller.signal
                 });
                 if (!response.ok) throw new Error('list');
-                const { docs, totalDocs } = await response.json();
+                const docs = response.docs.sort((a, b)=>(Date.parse(b.updatedAt ?? '') || 0) - (Date.parse(a.updatedAt ?? '') || 0));
                 if (!active) return;
                 const summary = await api.summary(docs.map((doc)=>doc.id));
                 if (active) setState({
                     loading: false,
                     error: false,
                     tests: docs,
-                    limited: totalDocs > docs.length,
                     summaries: summary.ok ? summary.data ?? {} : {},
                     summaryError: !summary.ok
                 });
@@ -56,132 +76,157 @@ 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('')
+                })
+            ]
+        })
     });
 }
-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__*/ _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
+                                                })
+                                            })
+                                        ]
                                     }),
-                                    /*#__PURE__*/ _jsx("span", {
-                                        title: card.pill.tooltip,
-                                        children: /*#__PURE__*/ _jsx(Pill, {
-                                            children: card.pill.label
-                                        })
-                                    }),
-                                    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 +234,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);
         })

package/dist/admin/surface/TestsSurface.js

@@ -1,5 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
+import { SURFACE_COPY } from '../copy/surface.js';
 import { NewTest } from './newTest/NewTest.js';
 import { TestPage } from './test/TestPage.js';
 import { ResultsRoute } from './ResultsRoute.js';
@@ -8,6 +11,14 @@ import { GoalForm } from './goals/GoalForm.js';
 import { GoalsList } from './goals/GoalsList.js';
 import { TestsHome } from './TestsHome.js';
 export function TestsSurface(props) {
+    // Reset loaded names when navigation selects another page or document.
+    return /*#__PURE__*/ _jsx(SurfacePage, {
+        ...props
+    }, `${props.route}/${props.id ?? ''}`);
+}
+function SurfacePage(props) {
+    const [loadedTitle, setLoadedTitle] = useState();
+    const title = props.route === 'home' ? SURFACE_COPY.title : props.route === 'new' ? SURFACE_COPY.newTest : loadedTitle ?? SURFACE_COPY.test;
     const surface = {
         adminRoute: props.adminRoute,
         apiRoute: props.apiRoute,
@@ -19,27 +30,56 @@ export function TestsSurface(props) {
         metricSources: props.metricSources,
         descriptions: props.admin?.descriptions
     };
+    const crumbs = [
+        {
+            label: SURFACE_COPY.title
+        }
+    ];
+    if (props.route !== 'home') {
+        crumbs[0].href = formatAdminURL({
+            adminRoute: props.adminRoute,
+            path: '/experiments'
+        });
+        crumbs.push({
+            label: props.route === 'new' ? SURFACE_COPY.newTest : props.route === 'results' ? SURFACE_COPY.resultsTitle : SURFACE_COPY.test
+        });
+    }
+    if (props.route === 'home') return /*#__PURE__*/ _jsx(TestsHome, {
+        adminRoute: props.adminRoute,
+        apiRoute: props.apiRoute,
+        canManage: props.canManage,
+        flagPoints: props.flagPoints,
+        crumbs: crumbs
+    });
+    if (props.route === 'test' && props.id !== undefined) return /*#__PURE__*/ _jsx(TestPage, {
+        id: props.id,
+        surface: surface
+    }, props.id);
+    if (props.route === 'goals') return /*#__PURE__*/ _jsx(GoalsList, {
+        surface: surface,
+        returnToTest: props.returnToTest
+    });
+    if (props.route === 'goalNew' || props.route === 'goal') return /*#__PURE__*/ _jsx(GoalForm, {
+        surface: surface,
+        id: props.route === 'goal' ? props.id : undefined,
+        returnToTest: props.returnToTest
+    }, props.route === 'goalNew' ? 'new' : props.id);
+    if (props.route === 'results' && props.id !== undefined) return /*#__PURE__*/ _jsx(ResultsRoute, {
+        id: props.id,
+        surface: surface,
+        onTitleChange: setLoadedTitle
+    }, props.id);
     return /*#__PURE__*/ _jsx(SurfaceShell, {
         adminRoute: props.adminRoute,
-        children: props.route === 'home' ? /*#__PURE__*/ _jsx(TestsHome, {
-            adminRoute: props.adminRoute,
-            apiRoute: props.apiRoute
-        }) : props.route === 'goals' ? /*#__PURE__*/ _jsx(GoalsList, {
-            surface: surface,
-            returnToTest: props.returnToTest
-        }) : props.route === 'goalNew' || props.route === 'goal' ? /*#__PURE__*/ _jsx(GoalForm, {
-            surface: surface,
-            id: props.route === 'goal' ? props.id : undefined,
-            returnToTest: props.returnToTest
-        }, props.route === 'goalNew' ? 'new' : props.id) : props.route === 'new' ? /*#__PURE__*/ _jsx(NewTest, {
+        crumbs: crumbs,
+        title: title,
+        children: props.route === 'new' ? /*#__PURE__*/ _jsx(NewTest, {
             surface: surface,
             pages: props.pages
-        }) : props.id === undefined ? null : props.route === 'test' ? /*#__PURE__*/ _jsx(TestPage, {
-            id: props.id,
-            surface: surface
-        }, props.id) : /*#__PURE__*/ _jsx(ResultsRoute, {
+        }) : props.id === undefined ? null : /*#__PURE__*/ _jsx(ResultsRoute, {
             id: props.id,
-            surface: surface
+            surface: surface,
+            onTitleChange: setLoadedTitle
         }, props.id)
     });
 }