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

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

@@ -1,16 +1,32 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation.js';
-import { Link } from '@payloadcms/ui';
 import { formatAdminURL } from 'payload/shared';
-import { GOALS_COPY as C, goalUsedBy } from '../../copy/goals.js';
+import { GOALS_COPY as C, goalDeleteLocked, goalInUse } from '../../copy/goals.js';
 import { metricSourceHint, metricSourceOptions } from '../../metricSource.model.js';
 import { validateCappingType, validateCappingValue } from '../../../collections/metricValidation.js';
 import { goalSlug, goalUsage } from './goals.model.js';
-import { goalPages, goalResponse } from './data.js';
-import { GoalsBreadcrumb } from './GoalsBreadcrumb.js';
+import { GoalResponseError, goalPages, goalResponse } from './data.js';
+import { SURFACE_COPY } from '../../copy/surface.js';
+import { SurfaceShell } from '../SurfaceShell.js';
+import { Button } from '../../../ui/Button.js';
+import { TextInput, NumberInput, Select } from '../../../ui/Inputs.js';
+import { Card } from '../../../ui/Card.js';
+import { Banner } from '../../../ui/Feedback.js';
+import { Dialog } from '../../../ui/Dialog.js';
 import './goals.css';
+const fieldNames = {
+    name: 'name',
+    slug: 'slug',
+    source: 'source',
+    direction: 'direction',
+    attributionWindowHours: 'attributionWindowHours',
+    minSampleSize: 'minSampleSize',
+    'capping.type': 'capType',
+    'capping.value': 'capValue',
+    guardrailThreshold: 'warningPercent'
+};
 const empty = ()=>({
         name: '',
         slug: '',
@@ -36,6 +52,13 @@ export function GoalForm({ surface, id, returnToTest }) {
     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.capType || fieldErrors.capValue || fieldErrors.warningPercent)) advanced.current.open = true;
+    }, [
+        fieldErrors
+    ]);
     const returnQuery = returnToTest ? `?${new URLSearchParams({
         return: returnToTest
     })}` : '';
@@ -54,7 +77,9 @@ export function GoalForm({ surface, id, returnToTest }) {
                         fetch(`${base}/xp-metrics/${encodeURIComponent(id)}?depth=0`, {
                             credentials: 'include',
                             signal: controller.signal
-                        }).then((response)=>goalResponse(response, C.loadError)),
+                        }).then((response)=>goalResponse(response, C.loadError, {
+                                notFound: C.notFound
+                            })),
                         goalPages(base, 'xp-experiments', controller.signal)
                     ]);
                     if (loaded.id == null) throw new Error(C.missing);
@@ -90,7 +115,7 @@ export function GoalForm({ surface, id, returnToTest }) {
                 [key]: value
             }));
     async function submit() {
-        if (inFlight.current || !ready) return;
+        if (inFlight.current || !ready || !surface.canManage) return;
         const capValue = draft.capValue.trim() === '' ? null : Number(draft.capValue);
         const typeError = validateCappingType(draft.capType || null, capValue, source?.kind);
         const valueError = validateCappingValue(capValue, draft.capType || null);
@@ -116,7 +141,7 @@ export function GoalForm({ surface, id, returnToTest }) {
             const body = {
                 name: draft.name,
                 slug: usedBy && goal ? goal.slug : draft.slug,
-                source: draft.source,
+                source: usedBy && goal ? goal.source : draft.source,
                 direction: draft.direction,
                 attributionWindowHours: draft.attributionWindowHours,
                 minSampleSize: draft.minSampleSize,
@@ -134,7 +159,9 @@ export function GoalForm({ surface, id, returnToTest }) {
                 },
                 body: JSON.stringify(body)
             });
-            const saved = await goalResponse(response, C.saveError);
+            const saved = await goalResponse(response, C.saveError, {
+                notFound: C.notFound
+            });
             if (saved.doc?.id == null) throw new Error(C.saveError);
             router.push(id === undefined && returnToTest ? formatAdminURL({
                 adminRoute: surface.adminRoute,
@@ -144,21 +171,30 @@ export function GoalForm({ surface, id, returnToTest }) {
             }) : listUrl);
         } catch (cause) {
             setError(cause instanceof Error ? cause.message : C.saveError);
+            if (cause instanceof GoalResponseError) setFieldErrors(Object.fromEntries(Object.entries(cause.fields).flatMap(([path, message])=>fieldNames[path] ? [
+                    [
+                        fieldNames[path],
+                        message
+                    ]
+                ] : [])));
             inFlight.current = false;
             setPending(null);
         }
     }
     async function remove() {
-        if (inFlight.current || !ready || usedBy || id === undefined) return;
+        if (inFlight.current || !confirmDelete || !ready || !surface.canManage || usedBy || id === undefined) return;
         inFlight.current = true;
         setPending('delete');
         setError('');
+        setConfirmDelete(false);
         try {
             const response = await fetch(`${base}/xp-metrics/${encodeURIComponent(id)}`, {
                 method: 'DELETE',
                 credentials: 'include'
             });
-            await goalResponse(response, C.deleteError);
+            await goalResponse(response, C.deleteError, {
+                notFound: C.notFound
+            });
             router.push(listUrl);
         } catch (cause) {
             setError(cause instanceof Error ? cause.message : C.deleteError);
@@ -166,305 +202,302 @@ export function GoalForm({ surface, id, returnToTest }) {
             setPending(null);
         }
     }
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "xp-goals",
-        children: [
-            /*#__PURE__*/ _jsx(GoalsBreadcrumb, {
-                adminRoute: surface.adminRoute,
-                name: goal?.name ?? (id === undefined ? C.newGoal : undefined),
-                returnQuery: returnQuery
-            }),
-            /*#__PURE__*/ _jsx("h1", {
-                children: goal?.name ?? (id === undefined ? C.newGoal : C.title)
-            }),
-            loadError ? /*#__PURE__*/ _jsxs("p", {
-                role: "alert",
-                children: [
-                    loadError,
-                    ' ',
-                    /*#__PURE__*/ _jsx("button", {
-                        type: "button",
+    const title = goal?.name ?? (id === undefined ? C.newGoal : C.goal);
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: title,
+        crumbs: [
+            {
+                label: SURFACE_COPY.title,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: C.title,
+                href: listUrl
+            },
+            {
+                label: title
+            }
+        ],
+        status: usedBy ? /*#__PURE__*/ _jsx("span", {
+            className: "xp-tests-kind",
+            children: goalInUse(usedBy)
+        }) : undefined,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-goals",
+            children: [
+                loadError ? /*#__PURE__*/ _jsx(Banner, {
+                    tone: "error",
+                    action: /*#__PURE__*/ _jsx(Button, {
+                        size: "sm",
                         onClick: ()=>setAttempt((n)=>n + 1),
                         children: C.retry
-                    })
-                ]
-            }) : !ready ? /*#__PURE__*/ _jsx("p", {
-                role: "status",
-                children: C.loading
-            }) : /*#__PURE__*/ _jsxs("form", {
-                className: "xp-goal-form",
-                onSubmit: (event)=>{
-                    event.preventDefault();
-                    void submit();
-                },
-                children: [
-                    /*#__PURE__*/ _jsxs("fieldset", {
-                        disabled: pending !== null,
-                        children: [
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.name,
-                                    /*#__PURE__*/ _jsx("input", {
-                                        required: true,
-                                        value: draft.name,
-                                        onChange: (event)=>{
-                                            const name = event.currentTarget.value;
-                                            setDraft((current)=>({
-                                                    ...current,
-                                                    name,
-                                                    ...!slugEdited && !usedBy ? {
-                                                        slug: goalSlug(name)
-                                                    } : {}
-                                                }));
-                                        }
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.slug,
-                                    /*#__PURE__*/ _jsx("input", {
-                                        required: true,
-                                        value: draft.slug,
-                                        readOnly: usedBy > 0,
-                                        "aria-describedby": "xp-goal-slug-help",
-                                        onChange: (event)=>{
-                                            setSlugEdited(true);
-                                            set('slug', event.currentTarget.value);
-                                        }
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx("p", {
-                                id: "xp-goal-slug-help",
-                                children: usedBy ? C.slugLocked : C.slugHelp
-                            }),
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.source,
-                                    /*#__PURE__*/ _jsxs("select", {
-                                        required: true,
-                                        value: draft.source,
-                                        onChange: (event)=>{
-                                            const sourceId = event.currentTarget.value;
-                                            const revenue = surface.metricSources.find((source)=>source.id === sourceId)?.kind === 'revenue';
-                                            setDraft((current)=>({
-                                                    ...current,
-                                                    source: sourceId,
-                                                    capType: revenue ? 'percentile' : '',
-                                                    capValue: revenue ? '0.99' : ''
-                                                }));
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsx("option", {
-                                                value: "",
-                                                children: C.chooseSource
-                                            }),
-                                            options.map((option)=>/*#__PURE__*/ _jsx("option", {
-                                                    value: option.value,
-                                                    children: option.label
-                                                }, option.value)),
-                                            draft.source && !options.some((option)=>option.value === draft.source) ? /*#__PURE__*/ _jsx("option", {
-                                                value: draft.source,
-                                                children: draft.source
-                                            }) : null
-                                        ]
-                                    })
-                                ]
-                            }),
-                            hint ? /*#__PURE__*/ _jsx("p", {
-                                children: hint
-                            }) : null,
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.direction,
-                                    /*#__PURE__*/ _jsxs("select", {
-                                        value: draft.direction,
-                                        onChange: (event)=>set('direction', event.currentTarget.value),
-                                        children: [
-                                            /*#__PURE__*/ _jsx("option", {
-                                                value: "increase",
-                                                children: C.increase
-                                            }),
-                                            /*#__PURE__*/ _jsx("option", {
-                                                value: "decrease",
-                                                children: C.decrease
-                                            })
-                                        ]
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.window,
-                                    /*#__PURE__*/ _jsx("input", {
-                                        required: true,
-                                        type: "number",
-                                        min: "1",
-                                        step: "any",
-                                        value: draft.attributionWindowHours ?? '',
-                                        onChange: (event)=>set('attributionWindowHours', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("label", {
-                                className: "xp-field",
-                                children: [
-                                    C.minimum,
-                                    /*#__PURE__*/ _jsx("input", {
-                                        required: true,
-                                        type: "number",
-                                        min: "1",
-                                        step: "any",
-                                        value: draft.minSampleSize ?? '',
-                                        onChange: (event)=>set('minSampleSize', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs("details", {
-                                children: [
-                                    /*#__PURE__*/ _jsx("summary", {
-                                        children: C.advanced
-                                    }),
-                                    /*#__PURE__*/ _jsxs("fieldset", {
-                                        children: [
-                                            /*#__PURE__*/ _jsx("legend", {
-                                                children: C.capping
-                                            }),
-                                            /*#__PURE__*/ _jsxs("label", {
-                                                className: "xp-field",
-                                                children: [
-                                                    C.capType,
-                                                    /*#__PURE__*/ _jsxs("select", {
-                                                        required: source?.kind === 'revenue',
-                                                        value: draft.capType,
-                                                        "aria-invalid": fieldErrors.capType ? true : undefined,
-                                                        "aria-describedby": fieldErrors.capType ? 'xp-goal-cap-type-error' : undefined,
-                                                        onChange: (event)=>{
-                                                            const capType = event.currentTarget.value;
-                                                            setDraft((current)=>({
-                                                                    ...current,
-                                                                    capType,
-                                                                    capValue: capType ? current.capValue : ''
-                                                                }));
-                                                        },
-                                                        children: [
-                                                            source?.kind !== 'revenue' ? /*#__PURE__*/ _jsx("option", {
-                                                                value: "",
-                                                                children: C.noCap
-                                                            }) : null,
-                                                            /*#__PURE__*/ _jsx("option", {
-                                                                value: "percentile",
-                                                                children: C.percentile
-                                                            }),
-                                                            /*#__PURE__*/ _jsx("option", {
-                                                                value: "absolute",
-                                                                children: C.absolute
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            fieldErrors.capType ? /*#__PURE__*/ _jsx("p", {
-                                                id: "xp-goal-cap-type-error",
-                                                role: "alert",
-                                                children: fieldErrors.capType
-                                            }) : null,
-                                            /*#__PURE__*/ _jsxs("label", {
-                                                className: "xp-field",
-                                                children: [
-                                                    C.capValue,
-                                                    /*#__PURE__*/ _jsx("input", {
-                                                        type: "number",
-                                                        step: "any",
-                                                        min: "0",
-                                                        disabled: !draft.capType,
-                                                        value: draft.capValue,
-                                                        "aria-invalid": fieldErrors.capValue ? true : undefined,
-                                                        "aria-describedby": fieldErrors.capValue ? 'xp-goal-cap-value-error' : undefined,
-                                                        onChange: (event)=>set('capValue', event.currentTarget.value)
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsx("p", {
-                                                children: C.capHelp
-                                            }),
-                                            fieldErrors.capValue ? /*#__PURE__*/ _jsx("p", {
-                                                id: "xp-goal-cap-value-error",
-                                                role: "alert",
-                                                children: fieldErrors.capValue
-                                            }) : null
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs("label", {
-                                        className: "xp-field",
-                                        children: [
-                                            C.threshold,
-                                            /*#__PURE__*/ _jsx("input", {
-                                                type: "number",
-                                                min: "0",
-                                                step: "any",
-                                                value: draft.warningPercent,
-                                                "aria-invalid": fieldErrors.warningPercent ? true : undefined,
-                                                "aria-describedby": fieldErrors.warningPercent ? 'xp-goal-threshold-error' : undefined,
-                                                onInvalid: ()=>setFieldErrors((current)=>({
-                                                            ...current,
-                                                            warningPercent: C.thresholdError
-                                                        })),
-                                                onChange: (event)=>set('warningPercent', event.currentTarget.value)
-                                            })
-                                        ]
-                                    }),
-                                    fieldErrors.warningPercent ? /*#__PURE__*/ _jsx("p", {
-                                        id: "xp-goal-threshold-error",
-                                        role: "alert",
-                                        children: fieldErrors.warningPercent
-                                    }) : null
-                                ]
-                            })
-                        ]
                     }),
-                    error ? /*#__PURE__*/ _jsx("p", {
-                        role: "alert",
-                        children: error
-                    }) : null,
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "xp-tests-toolbar",
-                        children: [
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "submit",
-                                disabled: pending !== null,
-                                children: pending === 'save' ? C.saving : C.save
-                            }),
-                            /*#__PURE__*/ _jsx(Link, {
-                                className: "xp-goal-cancel",
-                                href: listUrl,
-                                children: C.cancel
-                            }),
-                            id === undefined ? null : /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    /*#__PURE__*/ _jsx("button", {
-                                        type: "button",
-                                        disabled: pending !== null || usedBy > 0,
-                                        "aria-describedby": usedBy ? 'xp-goal-used' : undefined,
-                                        onClick: ()=>void remove(),
-                                        children: pending === 'delete' ? C.deleting : C.remove
-                                    }),
-                                    usedBy ? /*#__PURE__*/ _jsx("span", {
-                                        id: "xp-goal-used",
-                                        children: goalUsedBy(usedBy)
-                                    }) : null
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
+                    children: loadError
+                }) : !ready ? /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    children: C.loading
+                }) : /*#__PURE__*/ _jsxs("form", {
+                    className: "xp-goal-form",
+                    onSubmit: (event)=>{
+                        event.preventDefault();
+                        void submit();
+                    },
+                    children: [
+                        error ? /*#__PURE__*/ _jsx(Banner, {
+                            tone: "error",
+                            children: error
+                        }) : null,
+                        /*#__PURE__*/ _jsxs(Card, {
+                            className: "xp-goal-card",
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: C.fields
+                                }),
+                                /*#__PURE__*/ _jsxs("fieldset", {
+                                    disabled: pending !== null || !surface.canManage,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextInput, {
+                                            id: "xp-goal-name",
+                                            label: C.name,
+                                            required: true,
+                                            value: draft.name,
+                                            error: fieldErrors.name,
+                                            onChange: (event)=>{
+                                                const name = event.currentTarget.value;
+                                                setDraft((current)=>({
+                                                        ...current,
+                                                        name,
+                                                        ...!slugEdited && !usedBy ? {
+                                                            slug: goalSlug(name)
+                                                        } : {}
+                                                    }));
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextInput, {
+                                            id: "xp-goal-slug",
+                                            label: C.slug,
+                                            required: true,
+                                            value: draft.slug,
+                                            readOnly: usedBy > 0,
+                                            help: usedBy ? C.slugLocked : C.slugHelp,
+                                            error: fieldErrors.slug,
+                                            onChange: (event)=>{
+                                                setSlugEdited(true);
+                                                set('slug', event.currentTarget.value);
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Select, {
+                                            id: "xp-goal-source",
+                                            label: C.source,
+                                            required: true,
+                                            value: draft.source,
+                                            disabled: usedBy > 0,
+                                            help: usedBy ? C.sourceLocked : hint || undefined,
+                                            error: fieldErrors.source,
+                                            onChange: (event)=>{
+                                                const sourceId = event.currentTarget.value;
+                                                const revenue = surface.metricSources.find((source)=>source.id === sourceId)?.kind === 'revenue';
+                                                setDraft((current)=>({
+                                                        ...current,
+                                                        source: sourceId,
+                                                        capType: revenue ? 'percentile' : '',
+                                                        capValue: revenue ? '0.99' : ''
+                                                    }));
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "",
+                                                    children: C.chooseSource
+                                                }),
+                                                options.map((option)=>/*#__PURE__*/ _jsx("option", {
+                                                        value: option.value,
+                                                        children: option.label
+                                                    }, option.value)),
+                                                draft.source && !options.some((option)=>option.value === draft.source) ? /*#__PURE__*/ _jsx("option", {
+                                                    value: draft.source,
+                                                    children: draft.source
+                                                }) : null
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Select, {
+                                            id: "xp-goal-direction",
+                                            label: C.direction,
+                                            value: draft.direction,
+                                            error: fieldErrors.direction,
+                                            onChange: (event)=>set('direction', event.currentTarget.value),
+                                            children: [
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "increase",
+                                                    children: C.increase
+                                                }),
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "decrease",
+                                                    children: C.decrease
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(NumberInput, {
+                                            id: "xp-goal-window",
+                                            label: C.window,
+                                            required: true,
+                                            min: "1",
+                                            step: "any",
+                                            value: draft.attributionWindowHours ?? '',
+                                            error: fieldErrors.attributionWindowHours,
+                                            onChange: (event)=>set('attributionWindowHours', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
+                                        }),
+                                        /*#__PURE__*/ _jsx(NumberInput, {
+                                            id: "xp-goal-minimum",
+                                            label: C.minimum,
+                                            required: true,
+                                            min: "1",
+                                            step: "any",
+                                            value: draft.minSampleSize ?? '',
+                                            error: fieldErrors.minSampleSize,
+                                            onChange: (event)=>set('minSampleSize', event.currentTarget.value === '' ? null : Number(event.currentTarget.value))
+                                        }),
+                                        /*#__PURE__*/ _jsxs("details", {
+                                            className: "xp-goal-advanced",
+                                            ref: advanced,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("summary", {
+                                                    children: C.advanced
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "xp-goal-advanced-fields",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs("fieldset", {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("legend", {
+                                                                    children: C.capping
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs(Select, {
+                                                                    id: "xp-goal-cap-type",
+                                                                    label: C.capType,
+                                                                    required: source?.kind === 'revenue',
+                                                                    value: draft.capType,
+                                                                    error: fieldErrors.capType,
+                                                                    onChange: (event)=>{
+                                                                        const capType = event.currentTarget.value;
+                                                                        setDraft((current)=>({
+                                                                                ...current,
+                                                                                capType,
+                                                                                capValue: capType ? current.capValue : ''
+                                                                            }));
+                                                                    },
+                                                                    children: [
+                                                                        source?.kind !== 'revenue' ? /*#__PURE__*/ _jsx("option", {
+                                                                            value: "",
+                                                                            children: C.noCap
+                                                                        }) : null,
+                                                                        /*#__PURE__*/ _jsx("option", {
+                                                                            value: "percentile",
+                                                                            children: C.percentile
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("option", {
+                                                                            value: "absolute",
+                                                                            children: C.absolute
+                                                                        })
+                                                                    ]
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(NumberInput, {
+                                                                    id: "xp-goal-cap-value",
+                                                                    label: C.capValue,
+                                                                    step: "any",
+                                                                    min: "0",
+                                                                    disabled: !draft.capType,
+                                                                    value: draft.capValue,
+                                                                    error: fieldErrors.capValue,
+                                                                    help: C.capHelp,
+                                                                    onChange: (event)=>set('capValue', event.currentTarget.value)
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(NumberInput, {
+                                                            id: "xp-goal-threshold",
+                                                            label: C.threshold,
+                                                            min: "0",
+                                                            step: "any",
+                                                            value: draft.warningPercent,
+                                                            error: fieldErrors.warningPercent,
+                                                            onInvalid: ()=>setFieldErrors((current)=>({
+                                                                        ...current,
+                                                                        warningPercent: C.thresholdError
+                                                                    })),
+                                                            onChange: (event)=>set('warningPercent', event.currentTarget.value)
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "xp-ui-button-group",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "primary",
+                                            type: "submit",
+                                            disabled: pending !== null || !surface.canManage,
+                                            busy: pending === 'save',
+                                            children: pending === 'save' ? C.saving : C.save
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "quiet",
+                                            href: listUrl,
+                                            children: C.cancel
+                                        }),
+                                        id === undefined ? null : /*#__PURE__*/ _jsx(Button, {
+                                            variant: "danger",
+                                            disabled: pending !== null || usedBy > 0 || !surface.canManage,
+                                            "aria-describedby": usedBy ? 'xp-goal-used' : undefined,
+                                            onClick: ()=>setConfirmDelete(true),
+                                            children: pending === 'delete' ? C.deleting : C.remove
+                                        })
+                                    ]
+                                }),
+                                id !== undefined && usedBy ? /*#__PURE__*/ _jsx("p", {
+                                    className: "xp-ui-help",
+                                    id: "xp-goal-used",
+                                    children: goalDeleteLocked(usedBy)
+                                }) : null
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Dialog, {
+                    open: confirmDelete,
+                    initialFocus: "cancel",
+                    title: C.deleteTitle,
+                    onClose: ()=>setConfirmDelete(false),
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            children: C.deleteBody
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "xp-ui-button-group",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "quiet",
+                                    "data-dialog-cancel": true,
+                                    onClick: ()=>setConfirmDelete(false),
+                                    children: C.cancel
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "danger",
+                                    disabled: pending !== null,
+                                    onClick: ()=>void remove(),
+                                    children: C.confirmDelete
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
     });
 }