@delmaredigital/payload-experiments 0.2.0-rc.4 → 0.2.0-rc.5

package/README.md

@@ -466,6 +466,13 @@ for these patterns.
 
 ## Admin and client
 
+The sidebar includes a **Tests** group with **All tests** and **Goals**. The
+dashboard also includes **Tests** and **Goals** cards above its widgets. Goals
+appears only for users who can manage tests. Both additions follow the host's
+admin route and keep host-provided navigation and dashboard entries first.
+After upgrading, run `payload generate:importmap` to register the dashboard card
+component.
+
 ### Client assignments and exposure
 
 Read assignments on the server and pass them to `ExperimentsProvider` from

package/dist/admin/PreviewLinks.js

@@ -6,6 +6,7 @@ import { armLabel } from './labels.js';
 import { useApi } from './useApi.js';
 import { REVIEW_COPY as C } from './copy/review.js';
 import { API_MESSAGES } from './copy/common.js';
+import { previewPages } from './previewLinks.model.js';
 export function PreviewLinks({ experimentId, placements, arms }) {
     const api = useApi();
     const inFlight = useRef(false);
@@ -39,10 +40,13 @@ export function PreviewLinks({ experimentId, placements, arms }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-preview-links",
         children: [
-            placements.map((placement)=>/*#__PURE__*/ _jsxs("div", {
+            previewPages(placements).map((placement)=>/*#__PURE__*/ _jsxs("div", {
                     children: [
-                        /*#__PURE__*/ _jsx("p", {
-                            children: placement.title
+                        /*#__PURE__*/ _jsxs("p", {
+                            children: [
+                                placement.title,
+                                placement.slotCount > 1 ? ` ${C.placedTimes(placement.slotCount)}` : null
+                            ]
                         }),
                         placement.url ? arms.filter((arm)=>arm.kind !== 'holdout' && arm.key !== 'holdout').map((arm)=>/*#__PURE__*/ _jsxs(Button, {
                                 disabled: busy,
@@ -59,7 +63,7 @@ export function PreviewLinks({ experimentId, placements, arms }) {
                             children: C.noPreview
                         })
                     ]
-                }, `${placement.collection}/${placement.id}`)),
+                }, placement.key)),
             error ? /*#__PURE__*/ _jsx("p", {
                 role: "alert",
                 children: error

package/dist/admin/TestsDashboardCards.d.ts

@@ -0,0 +1,3 @@
+import './theme.css';
+import './dashboard.css';
+export declare function TestsDashboardCards(): import("react").JSX.Element | null;

package/dist/admin/TestsDashboardCards.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './theme.css';
+import './dashboard.css';
+import { Card, useAuth, useConfig } from '@payloadcms/ui';
+import { formatAdminURL } from 'payload/shared';
+import { SURFACE_COPY } from './copy/surface.js';
+export function TestsDashboardCards() {
+    const { config } = useConfig();
+    const { permissions } = useAuth();
+    const testPermissions = permissions?.collections?.['xp-experiments'];
+    const canManage = testPermissions?.update === true;
+    if (!canManage) return null;
+    const href = (path)=>formatAdminURL({
+            adminRoute: config.routes.admin,
+            path
+        });
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-dash-group",
+        "aria-labelledby": "xp-dash-title",
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: "xp-dash-label",
+                id: "xp-dash-title",
+                children: SURFACE_COPY.title
+            }),
+            /*#__PURE__*/ _jsxs("ul", {
+                className: "xp-dash-card-list",
+                children: [
+                    /*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: SURFACE_COPY.navAllTests,
+                            titleAs: "h3",
+                            buttonAriaLabel: SURFACE_COPY.dashShowTests,
+                            href: href('/experiments'),
+                            id: "card-xp-tests"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: SURFACE_COPY.navGoals,
+                            titleAs: "h3",
+                            buttonAriaLabel: SURFACE_COPY.dashShowGoals,
+                            href: href('/experiments/goals'),
+                            id: "card-xp-goals"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/admin/TestsNavLink.d.ts

@@ -1,2 +1,3 @@
 import './theme.css';
-export declare function TestsNavLink(): import("react").JSX.Element;
+declare function TestsNav(): import("react").JSX.Element | null;
+export { TestsNav as TestsNavLink };

package/dist/admin/TestsNavLink.js

@@ -1,31 +1,74 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './theme.css';
-import { Link, useConfig } from '@payloadcms/ui';
+import { Link, NavGroup, useAuth, useConfig } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
 import { usePathname } from 'next/navigation.js';
 import { SURFACE_COPY } from './copy/surface.js';
-export function TestsNavLink() {
+function TestsNav() {
     const { config } = useConfig();
-    const path = usePathname();
+    const { permissions } = useAuth();
+    const pathname = usePathname();
     const href = formatAdminURL({
         adminRoute: config.routes.admin,
         path: '/experiments'
     });
+    const goalsHref = formatAdminURL({
+        adminRoute: config.routes.admin,
+        path: '/experiments/goals'
+    });
     const base = href.replace(/\/$/, '');
-    const active = path === base || path?.startsWith(`${base}/`);
-    return /*#__PURE__*/ _jsxs(Link, {
-        href: href,
-        className: "nav__link",
-        "aria-current": active ? 'page' : undefined,
-        children: [
-            active ? /*#__PURE__*/ _jsx("div", {
-                className: "nav__link-indicator"
-            }) : null,
-            /*#__PURE__*/ _jsx("span", {
-                className: "nav__link-label",
-                children: SURFACE_COPY.title
-            })
-        ]
+    const goalsBase = goalsHref.replace(/\/$/, '');
+    const goalsActive = pathname === goalsBase || Boolean(pathname?.startsWith(`${goalsBase}/`));
+    const testsActive = !goalsActive && (pathname === base || Boolean(pathname?.startsWith(`${base}/`)));
+    const testPermissions = permissions?.collections?.['xp-experiments'];
+    const canManage = testPermissions?.update === true;
+    if (!canManage) return null;
+    const entries = [
+        {
+            id: 'nav-xp-tests',
+            href,
+            label: SURFACE_COPY.navAllTests,
+            active: testsActive
+        },
+        {
+            id: 'nav-xp-goals',
+            href: goalsHref,
+            label: SURFACE_COPY.navGoals,
+            active: goalsActive
+        }
+    ];
+    // getPreference is async and can fetch; let NavGroup default to open.
+    return /*#__PURE__*/ _jsx(NavGroup, {
+        label: SURFACE_COPY.title,
+        children: entries.map((entry)=>{
+            const props = {
+                className: 'nav__link',
+                id: entry.id,
+                'aria-current': entry.active ? 'page' : undefined
+            };
+            const content = /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    entry.active ? /*#__PURE__*/ _jsx("div", {
+                        className: "nav__link-indicator"
+                    }) : null,
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "nav__link-label",
+                        children: entry.label
+                    })
+                ]
+            });
+            return pathname === entry.href ? /*#__PURE__*/ _jsx("div", {
+                ...props,
+                children: content
+            }, entry.id) : /*#__PURE__*/ _jsx(Link, {
+                ...props,
+                href: entry.href,
+                prefetch: false,
+                children: content
+            }, entry.id);
+        })
     });
 }
+// Preserve the existing import-map key.
+export { TestsNav as TestsNavLink };

package/dist/admin/copy/review.d.ts

@@ -1,6 +1,7 @@
 export declare const REVIEW_COPY: {
     readonly noBaseline: "No data yet for this metric.";
     readonly preview: "Preview";
+    readonly placedTimes: (n: number) => string;
     readonly noPreview: "Preview isn't set up for this page type";
     readonly raise: "Raise allocation";
     readonly addMetric: "Add a metric";

package/dist/admin/copy/review.js

@@ -1,6 +1,7 @@
 export const REVIEW_COPY = {
     noBaseline: 'No data yet for this metric.',
     preview: 'Preview',
+    placedTimes: (n)=>`(placed ${n} times on this page)`,
     noPreview: "Preview isn't set up for this page type",
     raise: 'Raise allocation',
     addMetric: 'Add a metric',

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

@@ -3,6 +3,10 @@ export declare const SURFACE_COPY: {
     readonly newTest: "New test";
     readonly goals: "Goals";
     readonly search: "Search tests";
+    readonly navAllTests: "All tests";
+    readonly navGoals: "Goals";
+    readonly dashShowTests: "Show all tests";
+    readonly dashShowGoals: "Show all goals";
     readonly backToAdmin: "Back to admin";
     readonly limitedList: "Showing the 200 most recent tests.";
     readonly notInstalled: "The Tests screen isn't installed yet. Run `payload generate:importmap` and reload.";

package/dist/admin/copy/surface.js

@@ -3,6 +3,10 @@ export const SURFACE_COPY = {
     newTest: 'New test',
     goals: 'Goals',
     search: 'Search tests',
+    navAllTests: 'All tests',
+    navGoals: 'Goals',
+    dashShowTests: 'Show all tests',
+    dashShowGoals: 'Show all goals',
     backToAdmin: 'Back to admin',
     limitedList: 'Showing the 200 most recent tests.',
     notInstalled: "The Tests screen isn't installed yet. Run `payload generate:importmap` and reload.",

package/dist/admin/dashboard.css

@@ -0,0 +1,35 @@
+.xp-dash-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xp-space-4);
+  margin-bottom: var(--xp-space-4);
+}
+
+.xp-dash-label { margin: 0; }
+
+.xp-dash-card-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--xp-dash-card-gap);
+}
+
+.xp-dash-card-list .card { height: 100%; }
+
+@media (max-width: 1440px) {
+  .xp-dash-card-list { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (max-width: 1024px) {
+  .xp-dash-card-list { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .xp-dash-card-list { gap: var(--xp-dash-card-gap-small); }
+}
+
+@media (max-width: 400px) {
+  .xp-dash-card-list { grid-template-columns: repeat(1, 1fr); }
+}

package/dist/admin/paths.d.ts

@@ -6,3 +6,4 @@ export declare const XP_TESTS_LIST_REDIRECT = "@delmaredigital/payload-experimen
 export declare const XP_TEST_EDIT_REDIRECT = "@delmaredigital/payload-experiments/admin/rsc#CollectionEditRedirect";
 export declare const XP_TESTS_NAV_LINK = "@delmaredigital/payload-experiments/admin/client#TestsNavLink";
 export declare const XP_TESTS_SURFACE = "@delmaredigital/payload-experiments/admin/client#TestsSurface";
+export declare const XP_TESTS_DASHBOARD_CARDS = "@delmaredigital/payload-experiments/admin/client#TestsDashboardCards";

package/dist/admin/paths.js

@@ -6,3 +6,4 @@ export const XP_TESTS_LIST_REDIRECT = '@delmaredigital/payload-experiments/admin
 export const XP_TEST_EDIT_REDIRECT = '@delmaredigital/payload-experiments/admin/rsc#CollectionEditRedirect';
 export const XP_TESTS_NAV_LINK = '@delmaredigital/payload-experiments/admin/client#TestsNavLink';
 export const XP_TESTS_SURFACE = '@delmaredigital/payload-experiments/admin/client#TestsSurface';
+export const XP_TESTS_DASHBOARD_CARDS = '@delmaredigital/payload-experiments/admin/client#TestsDashboardCards';

package/dist/admin/previewLinks.model.d.ts

@@ -0,0 +1,9 @@
+import type { PreflightResult } from '../types/endpoints.js';
+type Placement = PreflightResult['placements'][number];
+type PreviewPage = Pick<Placement, 'collection' | 'id' | 'title' | 'url'> & {
+    key: string;
+    slotCount: number;
+};
+/** Preview URLs identify pages; counts use the most placements in any one version. */
+export declare function previewPages(placements: readonly Placement[]): PreviewPage[];
+export {};

package/dist/admin/previewLinks.model.js

@@ -0,0 +1,34 @@
+/** Preview URLs identify pages; counts use the most placements in any one version. */ export function previewPages(placements) {
+    const pages = new Map();
+    for (const placement of placements){
+        const key = `${placement.collection}\u0000${String(placement.id)}`;
+        const existing = pages.get(key);
+        if (existing) {
+            const { page, versions } = existing;
+            const count = (versions.get(placement.detail) ?? 0) + 1;
+            versions.set(placement.detail, count);
+            page.slotCount = Math.max(page.slotCount, count);
+            if (!page.url && placement.url) page.url = placement.url;
+        } else {
+            pages.set(key, {
+                page: {
+                    key,
+                    collection: placement.collection,
+                    id: placement.id,
+                    title: placement.title,
+                    url: placement.url,
+                    slotCount: 1
+                },
+                versions: new Map([
+                    [
+                        placement.detail,
+                        1
+                    ]
+                ])
+            });
+        }
+    }
+    return [
+        ...pages.values()
+    ].map(({ page })=>page);
+}

package/dist/admin/theme.css

@@ -36,6 +36,8 @@
   --xp-space-4: calc(var(--base) * 1);
   --xp-space-5: calc(var(--base) * 1.5);
   --xp-space-6: calc(var(--base) * 2);
+  --xp-dash-card-gap: 12px;
+  --xp-dash-card-gap-small: calc(var(--base) * 0.4);
   --xp-font-body: var(--font-body);
   --xp-font-size-small: calc(var(--base) * 0.65);
   --xp-font-size-body: calc(var(--base) * 0.75);

package/dist/collections/events.js

@@ -4,6 +4,7 @@ export function eventsCollection(options) {
         slug: 'xp-events',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         admin: {
             hidden: true
         },

package/dist/collections/identities.js

@@ -4,6 +4,7 @@ export function identitiesCollection(options) {
         slug: 'xp-identities',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         admin: {
             hidden: true
         },

package/dist/collections/layers.js

@@ -12,6 +12,7 @@ export function layersCollection(options) {
         slug: 'xp-layers',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         // group:false hides navigation while keeping collection routes reachable (hidden causes 404s).
         labels: {
             singular: 'Test group',

package/dist/collections/metrics.js

@@ -8,6 +8,7 @@ export function metricsCollection(options) {
         slug: 'xp-metrics',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         // group:false hides navigation while keeping collection routes reachable (hidden causes 404s).
         labels: {
             singular: 'Goal',

package/dist/collections/phases.js

@@ -4,6 +4,7 @@ export function phasesCollection(options) {
         slug: 'xp-phases',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         admin: {
             hidden: true
         },

package/dist/collections/snapshots.js

@@ -4,6 +4,7 @@ export function snapshotsCollection(options) {
         slug: 'xp-results-snapshots',
         graphQL: false,
         disableDuplicate: true,
+        versions: false,
         admin: {
             hidden: true
         },

package/dist/exports/adminClient.d.ts

@@ -3,3 +3,4 @@ export { MetricSourceSelect } from '../admin/MetricSourceSelect.js';
 export { ArmSelectField } from '../admin/armSelect/ArmSelectField.js';
 export { TestsNavLink } from '../admin/TestsNavLink.js';
 export { TestsSurface } from '../admin/surface/TestsSurface.js';
+export { TestsDashboardCards } from '../admin/TestsDashboardCards.js';

package/dist/exports/adminClient.js

@@ -4,3 +4,4 @@ export { MetricSourceSelect } from '../admin/MetricSourceSelect.js';
 export { ArmSelectField } from '../admin/armSelect/ArmSelectField.js';
 export { TestsNavLink } from '../admin/TestsNavLink.js';
 export { TestsSurface } from '../admin/surface/TestsSurface.js';
+export { TestsDashboardCards } from '../admin/TestsDashboardCards.js';

package/dist/globals/state.js

@@ -4,6 +4,7 @@ export function stateGlobal(options) {
         slug: 'xp-state',
         dbName: 'xp_state',
         graphQL: false,
+        versions: false,
         admin: {
             hidden: true
         },

package/dist/plugin.js

@@ -15,6 +15,8 @@ export function createExperimentsPlugin(input) {
         // Erase the user subtype only at this non-generic factory boundary.
         const { collections, globals } = buildCollections(options);
         const onInit = createOnInit(options);
+        const beforeDashboard = config.admin?.components?.beforeDashboard ?? [];
+        const beforeNavLinks = config.admin?.components?.beforeNavLinks ?? [];
         return {
             ...config,
             admin: {
@@ -35,8 +37,12 @@ export function createExperimentsPlugin(input) {
                             path: '/experiments/:segments*'
                         }
                     },
-                    beforeNavLinks: [
-                        ...config.admin?.components?.beforeNavLinks ?? [],
+                    beforeDashboard: beforeDashboard.includes(paths.XP_TESTS_DASHBOARD_CARDS) ? beforeDashboard : [
+                        ...beforeDashboard,
+                        paths.XP_TESTS_DASHBOARD_CARDS
+                    ],
+                    beforeNavLinks: beforeNavLinks.includes(paths.XP_TESTS_NAV_LINK) ? beforeNavLinks : [
+                        ...beforeNavLinks,
                         paths.XP_TESTS_NAV_LINK
                     ]
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-experiments",
-  "version": "0.2.0-rc.4",
+  "version": "0.2.0-rc.5",
   "description": "No-code A/B testing for Payload CMS and Next.js: block, page and flag experiments with holdouts, layers, exposure logging and honest statistics inside the admin — no vendor",
   "type": "module",
   "license": "MIT",