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

package/dist/admin/goals/XpGoalField.js

@@ -1,9 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, FieldError, FieldLabel, TextInput, useAuth, useConfig, useField } from '@payloadcms/ui';
+import { Button, FieldError, FieldLabel, SelectInput, TextInput, useAuth, useConfig, useField } from '@payloadcms/ui';
 import { useId } from 'react';
 import { useClickGoalPicker } from '../../goals/picker/useClickGoalPicker.js';
 import { CLICK_GOAL_COPY as C } from '../../goals/picker/copy.js';
+import '../theme.css';
+import './xpGoalField.css';
 export function XpGoalField({ path, field, readOnly }) {
     const { value, setValue, showError } = useField({
         path
@@ -24,6 +26,7 @@ export function XpGoalField({ path, field, readOnly }) {
         }
     };
     return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type xp-goal-field",
         children: [
             /*#__PURE__*/ _jsx(TextInput, {
                 path: path,
@@ -43,36 +46,40 @@ export function XpGoalField({ path, field, readOnly }) {
             }),
             picker.canManage && !locked ? /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx("label", {
-                        htmlFor: `${id}-picker`,
-                        children: C.choose
-                    }),
-                    /*#__PURE__*/ _jsxs("select", {
-                        id: `${id}-picker`,
-                        value: picker.goals.some((goal)=>goal.slug === value) ? value : '',
-                        onChange: (event)=>{
-                            if (event.currentTarget.value) setValue(event.currentTarget.value);
-                        },
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-goal-field__row",
                         children: [
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: C.choose
+                            /*#__PURE__*/ _jsx(SelectInput, {
+                                name: `${path}__xpGoalPicker`,
+                                path: `${path}__xpGoalPicker`,
+                                className: "xp-goal-field__select",
+                                value: picker.goals.some((goal)=>goal.slug === value) ? value : undefined,
+                                options: picker.goals.map((goal)=>({
+                                        value: goal.slug,
+                                        label: goal.name
+                                    })),
+                                placeholder: C.choose,
+                                isClearable: false,
+                                label: C.choose,
+                                onChange: (option)=>{
+                                    if (option && !Array.isArray(option)) setValue(String(option.value));
+                                }
                             }),
-                            picker.goals.map((goal)=>/*#__PURE__*/ _jsx("option", {
-                                    value: goal.slug,
-                                    children: goal.name
-                                }, goal.id))
+                            !picker.panel.open ? /*#__PURE__*/ _jsx(Button, {
+                                type: "button",
+                                margin: false,
+                                buttonStyle: "secondary",
+                                onClick: picker.open,
+                                children: C.newGoal
+                            }) : null
                         ]
                     }),
                     picker.undefinedKey(value ?? '') ? /*#__PURE__*/ _jsx("p", {
                         role: "status",
                         children: C.undefinedKey
                     }) : null,
-                    !picker.panel.open ? /*#__PURE__*/ _jsx(Button, {
-                        type: "button",
-                        onClick: picker.open,
-                        children: C.newGoal
-                    }) : /*#__PURE__*/ _jsxs("section", {
+                    picker.panel.open ? /*#__PURE__*/ _jsxs("section", {
+                        className: "xp-goal-field__panel",
                         "aria-labelledby": `${id}-title`,
                         children: [
                             /*#__PURE__*/ _jsx("h3", {
@@ -131,20 +138,29 @@ export function XpGoalField({ path, field, readOnly }) {
                                 role: "alert",
                                 children: picker.panel.errors.general
                             }) : null,
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "button",
-                                disabled: picker.panel.pending || !picker.panel.name.trim(),
-                                onClick: ()=>void picker.create(),
-                                children: C.createGoal
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                type: "button",
-                                disabled: picker.panel.pending,
-                                onClick: picker.cancel,
-                                children: C.cancel
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "xp-goal-field__actions",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        margin: false,
+                                        buttonStyle: "primary",
+                                        disabled: picker.panel.pending || !picker.panel.name.trim(),
+                                        onClick: ()=>void picker.create(),
+                                        children: C.createGoal
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        type: "button",
+                                        margin: false,
+                                        buttonStyle: "secondary",
+                                        disabled: picker.panel.pending,
+                                        onClick: picker.cancel,
+                                        children: C.cancel
+                                    })
+                                ]
                             })
                         ]
-                    })
+                    }) : null
                 ]
             }) : null
         ]

package/dist/admin/goals/xpGoalField.css

@@ -0,0 +1,48 @@
+.xp-goal-field {
+  display: grid;
+  gap: var(--xp-field-gap);
+}
+
+.xp-goal-field__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: var(--xp-space-2);
+}
+
+.xp-goal-field__select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.xp-goal-field__panel {
+  display: grid;
+  gap: var(--xp-field-gap);
+  border: 1px solid var(--xp-border);
+  border-radius: var(--xp-radius-control);
+  padding: var(--xp-space-4);
+}
+
+.xp-goal-field > p,
+.xp-goal-field__panel > h3,
+.xp-goal-field__panel > p {
+  margin: 0;
+}
+
+.xp-goal-field__panel details[open] > summary {
+  margin-bottom: var(--xp-field-gap);
+}
+
+.xp-goal-field__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--xp-space-2);
+}
+
+/* Payload halves the gap between fields below 768px; match it inside the field. */
+@media (max-width: 768px) {
+  .xp-goal-field,
+  .xp-goal-field__panel {
+    gap: calc(var(--xp-field-gap) / 2);
+  }
+}

package/dist/admin/paths.d.ts

@@ -14,3 +14,6 @@ export declare const XP_BLOCK_STATUS = "@delmaredigital/payload-experiments/admi
 export declare const XP_BLOCK_ROW_LABEL = "@delmaredigital/payload-experiments/admin/client#BlockSlotRowLabel";
 export declare const XP_COPY_ORIGINAL = "@delmaredigital/payload-experiments/admin/client#CopyOriginalField";
 export declare const XP_GOAL_FIELD = "@delmaredigital/payload-experiments/admin/client#XpGoalField";
+export declare const XP_TESTS_COLLECTION_LIST = "@delmaredigital/payload-experiments/admin/rsc#TestsCollectionListView";
+export declare const XP_GOALS_COLLECTION_LIST = "@delmaredigital/payload-experiments/admin/rsc#GoalsCollectionListView";
+export declare const XP_GOAL_EDIT_REDIRECT = "@delmaredigital/payload-experiments/admin/rsc#GoalEditRedirect";

package/dist/admin/paths.js

@@ -14,3 +14,6 @@ export const XP_BLOCK_STATUS = '@delmaredigital/payload-experiments/admin/client
 export const XP_BLOCK_ROW_LABEL = '@delmaredigital/payload-experiments/admin/client#BlockSlotRowLabel';
 export const XP_COPY_ORIGINAL = '@delmaredigital/payload-experiments/admin/client#CopyOriginalField';
 export const XP_GOAL_FIELD = '@delmaredigital/payload-experiments/admin/client#XpGoalField';
+export const XP_TESTS_COLLECTION_LIST = '@delmaredigital/payload-experiments/admin/rsc#TestsCollectionListView';
+export const XP_GOALS_COLLECTION_LIST = '@delmaredigital/payload-experiments/admin/rsc#GoalsCollectionListView';
+export const XP_GOAL_EDIT_REDIRECT = '@delmaredigital/payload-experiments/admin/rsc#GoalEditRedirect';

package/dist/admin/surface/TestsHome.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../surfaceUrls.js';
 import { useEffect, useMemo, useState } from 'react';
 import { formatAdminURL } from 'payload/shared';
 import { fetchAllDocs } from '../../lib/fetchAllDocs.js';
@@ -154,10 +155,7 @@ export function TestsHome({ adminRoute, apiRoute, canManage = false, crumbs, fla
                     ]
                 }),
                 canManage ? /*#__PURE__*/ _jsx(Button, {
-                    href: formatAdminURL({
-                        adminRoute,
-                        path: '/experiments/goals'
-                    }),
+                    href: surfaceUrls.goals(adminRoute),
                     children: SURFACE_COPY.goals
                 }) : null,
                 newTest

package/dist/admin/surface/TestsSurface.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { surfaceUrls } from '../surfaceUrls.js';
 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';
@@ -40,10 +40,7 @@ function SurfacePage(props) {
         }
     ];
     if (props.route !== 'home') {
-        crumbs[0].href = formatAdminURL({
-            adminRoute: props.adminRoute,
-            path: '/experiments'
-        });
+        crumbs[0].href = props.canManage ? surfaceUrls.home(props.adminRoute) : undefined;
         crumbs.push({
             label: props.route === 'new' ? SURFACE_COPY.newTest : props.route === 'results' ? SURFACE_COPY.resultsTitle : SURFACE_COPY.test
         });

package/dist/admin/surface/goals/GoalForm.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation.js';
 import { formatAdminURL } from 'payload/shared';
@@ -50,24 +51,16 @@ export function GoalForm({ surface, id, returnToTest }) {
     const [loadError, setLoadError] = useState('');
     const [error, setError] = useState('');
     const [fieldErrors, setFieldErrors] = useState({});
+    const [seenFieldErrors, setSeenFieldErrors] = useState(fieldErrors);
+    const [advancedOpen, setAdvancedOpen] = useState(false);
     const [pending, setPending] = useState(null);
     const [slugEdited, setSlugEdited] = useState(false);
     const [attempt, setAttempt] = useState(0);
     const inFlight = useRef(false);
-    const advanced = useRef(null);
     const [confirmDelete, setConfirmDelete] = useState(false);
-    useEffect(()=>{
-        if (advanced.current && (fieldErrors.slug || fieldErrors.capType || fieldErrors.capValue || fieldErrors.warningPercent)) advanced.current.open = true;
-    }, [
-        fieldErrors
-    ]);
-    const returnQuery = returnToTest ? `?${new URLSearchParams({
+    const listUrl = surfaceUrls.goals(surface.adminRoute, returnToTest ? {
         return: returnToTest
-    })}` : '';
-    const listUrl = formatAdminURL({
-        adminRoute: surface.adminRoute,
-        path: `/experiments/goals${returnQuery}`
-    });
+    } : undefined);
     useEffect(()=>{
         const controller = new AbortController();
         setReady(false);
@@ -111,6 +104,11 @@ export function GoalForm({ surface, id, returnToTest }) {
     ]);
     const source = sourceFor(draft.source, surface.metricSources);
     const click = draft.source.startsWith('click:');
+    // Keep the disclosure and its new field errors in the same commit.
+    if (fieldErrors !== seenFieldErrors) {
+        setSeenFieldErrors(fieldErrors);
+        if (click && fieldErrors.slug || fieldErrors.capType || fieldErrors.capValue || fieldErrors.warningPercent) setAdvancedOpen(true);
+    }
     const hint = metricSourceHint(source);
     const options = metricSourceOptions(surface.metricSources);
     const set = (key, value)=>setDraft((current)=>({
@@ -180,7 +178,7 @@ export function GoalForm({ surface, id, returnToTest }) {
             if (cause instanceof GoalResponseError) setFieldErrors(Object.fromEntries(Object.entries(cause.fields).flatMap(([path, message])=>fieldNames[path] ? [
                     [
                         fieldNames[path],
-                        path === 'slug' ? C.duplicateSlug : message
+                        path === 'slug' ? click ? C.duplicateSlug : C.duplicateSlugMain : message
                     ]
                 ] : [])));
             inFlight.current = false;
@@ -215,10 +213,7 @@ export function GoalForm({ surface, id, returnToTest }) {
         crumbs: [
             {
                 label: SURFACE_COPY.title,
-                href: formatAdminURL({
-                    adminRoute: surface.adminRoute,
-                    path: '/experiments'
-                })
+                href: surfaceUrls.home(surface.adminRoute)
             },
             {
                 label: C.title,
@@ -326,6 +321,10 @@ export function GoalForm({ surface, id, returnToTest }) {
                                                         ...current,
                                                         slug: clickGoalSlug(draft.name) ? undefined : C.slugRule
                                                     }));
+                                                else if (sourceId === 'click:' !== click) setFieldErrors((current)=>({
+                                                        ...current,
+                                                        slug: undefined
+                                                    }));
                                             },
                                             children: [
                                                 /*#__PURE__*/ _jsx("option", {
@@ -381,7 +380,8 @@ export function GoalForm({ surface, id, returnToTest }) {
                                         }),
                                         /*#__PURE__*/ _jsxs("details", {
                                             className: "xp-goal-advanced",
-                                            ref: advanced,
+                                            open: advancedOpen,
+                                            onToggle: (event)=>setAdvancedOpen(event.currentTarget.open),
                                             children: [
                                                 /*#__PURE__*/ _jsx("summary", {
                                                     children: C.advanced

package/dist/admin/surface/goals/GoalsList.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { sourceFor } from '../../metricSource.model.js';
 import { useEffect, useState } from 'react';
 import { formatAdminURL } from 'payload/shared';
@@ -60,7 +61,7 @@ export function GoalsList({ surface, returnToTest }) {
         crumbs: [
             {
                 label: SURFACE_COPY.title,
-                href: url('/experiments')
+                href: surfaceUrls.home(surface.adminRoute)
             },
             {
                 label: C.title

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

@@ -23,11 +23,11 @@ type Summary = SummaryResponse[DocId] | undefined;
 export type Health = 'red' | 'amber' | 'green';
 export declare function healthDot(test: HomeTest, summary: Summary): Health | undefined;
 export declare function groupTests(tests: readonly HomeTest[], summaries: SummaryResponse, search?: string): {
-    label: "Needs attention" | "Running" | "Decided" | "Draft" | "Archived" | "Ready to start";
+    label: "Needs attention" | "Running" | "Decided" | "Ready to start" | "Draft" | "Archived";
     tests: HomeTest[];
 }[];
 export declare function homeCard(test: HomeTest, summary: Summary, adminRoute: string, flagPoints?: ReadinessContext['flagPoints'], goalNames?: Readonly<Record<string, string>>): {
-    kind: "Whole page" | "Page block" | "Setting";
+    kind: "Page block" | "Setting" | "Whole page";
     pill: {
         label: string;
         tone: import("../status.model.js").PillTone;

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { surfaceUrls } from '../../surfaceUrls.js';
 import { fetchAllDocs } from '../../../lib/fetchAllDocs.js';
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation.js';
@@ -372,10 +373,7 @@ export function NewTest({ surface, pages }) {
                         type: "button",
                         disabled: pending,
                         onClick: ()=>{
-                            if (step === 'kind') router.push(formatAdminURL({
-                                adminRoute: surface.adminRoute,
-                                path: '/experiments'
-                            }));
+                            if (step === 'kind') router.push(surfaceUrls.home(surface.adminRoute));
                             else {
                                 setError('');
                                 setStep(step === 'name' && kind === 'flag' ? 'setting' : 'kind');

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

@@ -5,7 +5,7 @@ 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 { PageCombobox } from '../pagePicker/PageCombobox.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';
@@ -13,6 +13,7 @@ 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 { FieldErrors } from '../test/fields.js';
 import { SaveStatus } from '../readiness/SaveStatus.js';
 import { createApi } from '../../api.js';
 import { useTransition } from '../readiness/useTransition.js';
@@ -77,7 +78,7 @@ import { useTransition } from '../readiness/useTransition.js';
         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, {
+    const picker = arm && collection ? /*#__PURE__*/ _jsx(PageCombobox, {
         collection: collection,
         test: test,
         armKey: arm.key,
@@ -173,6 +174,10 @@ import { useTransition } from '../readiness/useTransition.js';
                 collection: collection,
                 children: picker
             }) : null,
+            arm ? /*#__PURE__*/ _jsx(FieldErrors, {
+                test: test,
+                path: `arms.${doc.arms.findIndex((item)=>item.key === arm.key)}.pageTarget`
+            }) : null,
             /*#__PURE__*/ _jsxs("div", {
                 className: "xp-new-test-actions",
                 children: [

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

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

package/dist/admin/surface/pagePicker/{PagePicker.d.ts → PageCombobox.d.ts}

@@ -1,10 +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 }: {
+import './pagePicker.css';
+/** One input owns focus; list options are navigated through aria-activedescendant. */
+export declare function PageCombobox({ collection, test, armKey, apiRoute }: {
     collection: PageCollection;
     test: TestDocApi;
     armKey: string;
     apiRoute: string;
-    onChoose?: () => void;
 }): import("react").JSX.Element;