@orthacms/webhooks-admin 0.5.0

package/dist/lib/presentation/components/WebhookForm/index.js

@@ -0,0 +1,412 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Alert, AlertDescription, Button, Checkbox, ConfirmDialog, Input, InputField, Label, MultiSelect, Switch } from '@orthacms/design-system';
+import { Plus, X } from 'lucide-react';
+import { fromHeaderRows, rejectionFor, toHeaderRows } from '../../../domain/headerRules';
+import { addContentTypeNames, contentTypeChoices, grantedContentTypes, parseContentTypeNames } from '../../../domain/contentTypeChoices';
+const messages = defineMessages({
+    target: {
+        id: 'webhooks.form.target',
+        defaultMessage: 'Where deliveries go'
+    },
+    subscription: {
+        id: 'webhooks.form.subscription',
+        defaultMessage: 'What this endpoint receives'
+    },
+    name: { id: 'webhooks.form.name', defaultMessage: 'Name' },
+    namePlaceholder: {
+        id: 'webhooks.form.namePlaceholder',
+        defaultMessage: 'Rebuild the storefront'
+    },
+    url: { id: 'webhooks.form.url', defaultMessage: 'URL' },
+    urlHint: {
+        id: 'webhooks.form.urlHint',
+        defaultMessage: 'Must be https:// and reachable on the public internet.'
+    },
+    workspaces: {
+        id: 'webhooks.form.workspaces',
+        defaultMessage: 'Workspaces'
+    },
+    allWorkspaces: {
+        id: 'webhooks.form.allWorkspaces',
+        defaultMessage: 'All workspaces, including ones created later'
+    },
+    workspacesHint: {
+        id: 'webhooks.form.workspacesHint',
+        defaultMessage: 'A record that belongs to no workspace is only sent to endpoints that take them all.'
+    },
+    workspacesPlaceholder: {
+        id: 'webhooks.form.workspacesPlaceholder',
+        defaultMessage: 'Choose workspaces'
+    },
+    events: { id: 'webhooks.form.events', defaultMessage: 'Events' },
+    allEvents: {
+        id: 'webhooks.form.allEvents',
+        defaultMessage: 'Every event, including ones added later'
+    },
+    eventsPlaceholder: {
+        id: 'webhooks.form.eventsPlaceholder',
+        defaultMessage: 'Choose events'
+    },
+    contentTypes: {
+        id: 'webhooks.form.contentTypes',
+        defaultMessage: 'Content types'
+    },
+    allContentTypes: {
+        id: 'webhooks.form.allContentTypes',
+        defaultMessage: 'Every content type, including ones added later'
+    },
+    contentTypesPlaceholder: {
+        id: 'webhooks.form.contentTypesPlaceholder',
+        defaultMessage: 'Choose content types'
+    },
+    contentTypesHint: {
+        id: 'webhooks.form.contentTypesHint',
+        defaultMessage: 'Pick from the types this build defines, or add one by machine name — a type you are about to create can be subscribed to before it exists.'
+    },
+    noContentTypes: {
+        id: 'webhooks.form.noContentTypes',
+        defaultMessage: 'Nothing chosen yet, so this endpoint still receives every type.'
+    },
+    contentTypeSearch: {
+        id: 'webhooks.form.contentTypeSearch',
+        defaultMessage: 'Search, or type a machine name'
+    },
+    addContentType: {
+        id: 'webhooks.form.addContentType',
+        defaultMessage: 'Add “{name}”'
+    },
+    unknownContentType: {
+        id: 'webhooks.form.unknownContentType',
+        defaultMessage: '{name} (not defined here)'
+    },
+    contentTypesNeedWorkspace: {
+        id: 'webhooks.form.contentTypesNeedWorkspace',
+        defaultMessage: 'Choose a workspace first — which types exist depends on what those workspaces were granted.'
+    },
+    contentTypesNoneGranted: {
+        id: 'webhooks.form.contentTypesNoneGranted',
+        defaultMessage: 'The chosen workspaces were granted no content types, so there is nothing to pick from — a machine name can still be typed into the picker.'
+    },
+    contentTypesScoped: {
+        id: 'webhooks.form.contentTypesScoped',
+        defaultMessage: 'Listing only what the chosen workspaces were granted.'
+    },
+    status: { id: 'webhooks.form.status', defaultMessage: 'Status' },
+    enabled: { id: 'webhooks.form.enabled', defaultMessage: 'Enabled' },
+    disabled: { id: 'webhooks.form.disabled', defaultMessage: 'Disabled' },
+    enabledHint: {
+        id: 'webhooks.form.enabledHint',
+        defaultMessage: 'Deliveries are sent as content changes.'
+    },
+    disabledHint: {
+        id: 'webhooks.form.disabledHint',
+        defaultMessage: 'Nothing is sent while this is off.'
+    },
+    disableTitle: {
+        id: 'webhooks.form.disableTitle',
+        defaultMessage: 'Turn this endpoint off?'
+    },
+    disableBody: {
+        id: 'webhooks.form.disableBody',
+        defaultMessage: 'Events that happen while it is off are not queued for later — there is nothing to catch up on when you turn it back on. Deliveries already waiting are closed as failed.'
+    },
+    disableConfirm: {
+        id: 'webhooks.form.disableConfirm',
+        defaultMessage: 'Turn it off'
+    },
+    cancelDisable: {
+        id: 'webhooks.form.cancelDisable',
+        defaultMessage: 'Keep it on'
+    },
+    headers: {
+        id: 'webhooks.form.headers',
+        defaultMessage: 'Custom headers'
+    },
+    headersHint: {
+        id: 'webhooks.form.headersHint',
+        defaultMessage: 'Sent with every delivery — an Authorization header, say, if the receiver wants one of its own on top of the signature.'
+    },
+    headerName: {
+        id: 'webhooks.form.headerName',
+        defaultMessage: 'Header name'
+    },
+    headerValue: {
+        id: 'webhooks.form.headerValue',
+        defaultMessage: 'Header value'
+    },
+    addHeader: { id: 'webhooks.form.addHeader', defaultMessage: 'Add header' },
+    removeHeader: {
+        id: 'webhooks.form.removeHeader',
+        defaultMessage: 'Remove {name}'
+    },
+    headerReserved: {
+        id: 'webhooks.form.headerReserved',
+        defaultMessage: '“{name}” is reserved for the delivery’s own metadata and can’t be set here.'
+    },
+    headerMalformed: {
+        id: 'webhooks.form.headerMalformed',
+        defaultMessage: '“{name}” is not a valid header name.'
+    },
+    save: { id: 'webhooks.form.save', defaultMessage: 'Save' },
+    create: { id: 'webhooks.form.create', defaultMessage: 'Create webhook' },
+    cancel: { id: 'webhooks.form.cancel', defaultMessage: 'Cancel' },
+    nameRequired: {
+        id: 'webhooks.form.nameRequired',
+        defaultMessage: 'Give the webhook a name.'
+    },
+    urlRequired: {
+        id: 'webhooks.form.urlRequired',
+        defaultMessage: 'Enter the URL deliveries should be posted to.'
+    },
+    noWorkspaces: {
+        id: 'webhooks.form.noWorkspaces',
+        defaultMessage: 'Choose at least one workspace, or switch on “All workspaces”. As it stands this endpoint would receive nothing.'
+    }
+});
+/** The values a fresh dialog opens with. */
+function emptyValues() {
+    return {
+        name: '',
+        url: '',
+        enabled: true,
+        // Defaults to false: reaching across every workspace should be
+        // something someone chose, not something they forgot to narrow.
+        allWorkspaces: false,
+        workspaceIds: [],
+        // Defaults to true, for the opposite reason: an endpoint that takes no
+        // events is not a safer endpoint, it is a broken one.
+        allEvents: true,
+        eventKinds: [],
+        // Same reasoning as events: a subscription narrowed to nothing is not
+        // a safer one, so the default is the whole registry.
+        allContentTypes: true,
+        contentTypes: [],
+        headers: []
+    };
+}
+/** An existing endpoint, as the form edits it. */
+function valuesOf(endpoint) {
+    return {
+        name: endpoint.name,
+        url: endpoint.url,
+        enabled: endpoint.enabled,
+        allWorkspaces: endpoint.allWorkspaces,
+        workspaceIds: endpoint.workspaceIds,
+        allEvents: endpoint.eventKinds.length === 0,
+        eventKinds: endpoint.eventKinds,
+        allContentTypes: endpoint.contentTypes.length === 0,
+        contentTypes: endpoint.contentTypes,
+        headers: toHeaderRows(endpoint.headers)
+    };
+}
+/**
+ * Create and edit an endpoint.
+ *
+ * The three filters are each an "All…" toggle over a picker, and the toggle is
+ * not cosmetic: it is the difference between "everything, including what does
+ * not exist yet" and an enumerated list that silently stops covering the next
+ * workspace or event kind. Turning one on sends **no** value for that filter,
+ * which is exactly how the server reads "all".
+ */
+export function WebhookForm({ endpoint, events, workspaces, contentTypes, pending, error, onSubmit, onCancel }) {
+    const intl = useIntl();
+    const [values, setValues] = useState(emptyValues);
+    const [touched, setTouched] = useState(false);
+    // Switching an endpoint off is not undoable in the way a form field is:
+    // what happens while it is off is simply not recorded, so the switch asks.
+    const [confirmDisable, setConfirmDisable] = useState(false);
+    // Rows need a key that survives editing the name — using the name itself
+    // would remount the input on every keystroke and lose the caret.
+    const nextRowKey = useRef(0);
+    // Seed once the endpoint arrives — the page mounts before its query
+    // resolves. Keyed on the id rather than the object, so a background refetch
+    // cannot discard edits in progress by re-seeding from the server's copy.
+    // Depending on the id rather than the object is deliberate: a background
+    // refetch hands back a new object with the same contents, and re-seeding on
+    // that would discard whatever is half-typed. `useRef` holds the endpoint so
+    // the effect can read it without listing it.
+    const latest = useRef(endpoint);
+    latest.current = endpoint;
+    const endpointId = endpoint?.id;
+    useEffect(() => {
+        const seed = latest.current;
+        if (!seed)
+            return;
+        setValues(valuesOf(seed));
+        setTouched(false);
+    }, [endpointId]);
+    const eventOptions = useMemo(() => events
+        // `ping` is what the Send-test button produces; it is not
+        // something an endpoint subscribes to.
+        .filter((event) => event.kind !== 'ping')
+        .map((event) => ({ value: event.kind, label: event.label })), [events]);
+    const workspaceOptions = useMemo(() => workspaces.map((workspace) => ({
+        value: workspace.id,
+        label: workspace.name
+    })), [workspaces]);
+    // The registry's types plus any selected name it does not know. The unknown
+    // ones are labelled as such rather than hidden: an endpoint subscribed to a
+    // type that has been removed, or to one with a typo in its name, is
+    // receiving nothing and this is the only place that shows.
+    // Narrowed to what the chosen workspaces were actually granted: a delivery
+    // needs the event's workspace *and* its type to match, so a type none of
+    // them can hold would never fire here.
+    const offeredContentTypes = useMemo(() => grantedContentTypes(contentTypes, workspaces, {
+        allWorkspaces: values.allWorkspaces,
+        workspaceIds: values.workspaceIds
+    }), [contentTypes, workspaces, values.allWorkspaces, values.workspaceIds]);
+    const contentTypeOptions = useMemo(() => contentTypeChoices(offeredContentTypes, values.contentTypes).map((choice) => ({
+        value: choice.value,
+        label: choice.known
+            ? choice.label
+            : intl.formatMessage(messages.unknownContentType, {
+                name: choice.value
+            })
+    })), [offeredContentTypes, values.contentTypes, intl]);
+    // Which types are on offer is a question about the workspaces, so it cannot
+    // be asked before they are chosen. An endpoint that already carries a type
+    // filter is the exception — hiding it would leave a saved subscription
+    // invisible and uneditable.
+    const workspaceChosen = values.allWorkspaces || values.workspaceIds.length > 0;
+    const contentTypesAnswerable = workspaceChosen || values.contentTypes.length > 0;
+    // Chosen workspaces that were granted nothing: the picker is empty for a
+    // reason worth stating, rather than looking broken.
+    const noGrants = workspaceChosen &&
+        !values.allWorkspaces &&
+        offeredContentTypes.length === 0;
+    const addTypedContentTypes = (raw) => {
+        const names = parseContentTypeNames(raw);
+        if (names.length === 0)
+            return;
+        setValues((prev) => ({
+            ...prev,
+            contentTypes: addContentTypeNames(prev.contentTypes, names)
+        }));
+    };
+    const setHeaders = (next) => setValues((prev) => ({ ...prev, headers: next }));
+    // Named rows only: an untouched empty row is someone about to type.
+    const headerErrors = values.headers.map((row) => {
+        if (row.name.trim().length === 0)
+            return null;
+        const rejection = rejectionFor(row.name);
+        if (!rejection)
+            return null;
+        return intl.formatMessage(rejection === 'reserved'
+            ? messages.headerReserved
+            : messages.headerMalformed, { name: row.name.trim() });
+    });
+    const headersValid = headerErrors.every((error) => error === null);
+    const nameError = touched && values.name.trim().length === 0
+        ? intl.formatMessage(messages.nameRequired)
+        : undefined;
+    const urlError = touched && values.url.trim().length === 0
+        ? intl.formatMessage(messages.urlRequired)
+        : undefined;
+    // Not a hard error — the server accepts it — but an endpoint scoped to no
+    // workspace receives nothing, which is never what someone meant.
+    const emptyWorkspaces = !values.allWorkspaces && values.workspaceIds.length === 0;
+    const submit = () => {
+        setTouched(true);
+        if (values.name.trim().length === 0 ||
+            values.url.trim().length === 0 ||
+            // The server refuses these too; stopping here keeps the message
+            // beside the row that caused it.
+            !headersValid) {
+            return;
+        }
+        onSubmit({
+            name: values.name.trim(),
+            url: values.url.trim(),
+            enabled: values.enabled,
+            allWorkspaces: values.allWorkspaces,
+            workspaceIds: values.allWorkspaces ? [] : values.workspaceIds,
+            // An empty list is how "all" is spelled on the wire, for both.
+            eventKinds: values.allEvents ? [] : values.eventKinds,
+            contentTypes: values.allContentTypes ? [] : values.contentTypes,
+            headers: fromHeaderRows(values.headers)
+        });
+    };
+    return (
+    // Two columns on a wide screen, one on a narrow one. The split is the
+    // two questions an endpoint answers — where a delivery goes, and what
+    // is worth sending — which is also the order they are decided in.
+    _jsxs("div", { className: "grid max-w-5xl gap-x-12 gap-y-8 lg:grid-cols-2", children: [_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: intl.formatMessage(messages.target) }), _jsx(InputField, { id: "webhook-name", label: intl.formatMessage(messages.name), value: values.name, placeholder: intl.formatMessage(messages.namePlaceholder), error: nameError, onChange: (event) => setValues((prev) => ({
+                            ...prev,
+                            name: event.target.value
+                        })) }), _jsx(InputField, { id: "webhook-url", label: intl.formatMessage(messages.url), value: values.url, type: "url", placeholder: "https://example.com/hooks/ortha", description: intl.formatMessage(messages.urlHint), error: urlError, onChange: (event) => setValues((prev) => ({
+                            ...prev,
+                            url: event.target.value
+                        })) }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium", children: intl.formatMessage(messages.status) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { id: "webhook-enabled", checked: values.enabled, onCheckedChange: (checked) => {
+                                            // Turning it on is harmless and immediate;
+                                            // turning it off loses whatever happens next,
+                                            // so only that direction asks.
+                                            if (checked) {
+                                                setValues((prev) => ({
+                                                    ...prev,
+                                                    enabled: true
+                                                }));
+                                                return;
+                                            }
+                                            setConfirmDisable(true);
+                                        } }), _jsx(Label, { htmlFor: "webhook-enabled", className: "text-sm font-normal", children: intl.formatMessage(values.enabled
+                                            ? messages.enabled
+                                            : messages.disabled) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(values.enabled
+                                    ? messages.enabledHint
+                                    : messages.disabledHint) })] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium", children: intl.formatMessage(messages.headers) }), values.headers.map((row, index) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: `webhook-header-name-${row.key}`, className: "sr-only", children: intl.formatMessage(messages.headerName) }), _jsx(Input, { id: `webhook-header-name-${row.key}`, value: row.name, placeholder: "Authorization", className: "font-mono text-sm", "aria-invalid": headerErrors[index] !== null
+                                                    ? true
+                                                    : undefined, onChange: (event) => setHeaders(values.headers.map((candidate) => candidate.key === row.key
+                                                    ? {
+                                                        ...candidate,
+                                                        name: event.target
+                                                            .value
+                                                    }
+                                                    : candidate)) }), _jsx(Label, { htmlFor: `webhook-header-value-${row.key}`, className: "sr-only", children: intl.formatMessage(messages.headerValue) }), _jsx(Input, { id: `webhook-header-value-${row.key}`, value: row.value, placeholder: "Bearer \u2026", className: "font-mono text-sm", onChange: (event) => setHeaders(values.headers.map((candidate) => candidate.key === row.key
+                                                    ? {
+                                                        ...candidate,
+                                                        value: event.target
+                                                            .value
+                                                    }
+                                                    : candidate)) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": intl.formatMessage(messages.removeHeader, {
+                                                    name: row.name.trim() ||
+                                                        intl.formatMessage(messages.headerName)
+                                                }), onClick: () => setHeaders(values.headers.filter((candidate) => candidate.key !== row.key)), children: _jsx(X, { "aria-hidden": true }) })] }), headerErrors[index] ? (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: headerErrors[index] })) : null] }, row.key))), _jsx("div", { children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setHeaders([
+                                        ...values.headers,
+                                        {
+                                            key: `row-${nextRowKey.current++}`,
+                                            name: '',
+                                            value: ''
+                                        }
+                                    ]), children: [_jsx(Plus, {}), intl.formatMessage(messages.addHeader)] }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.headersHint) })] })] }), _jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: intl.formatMessage(messages.subscription) }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium", children: intl.formatMessage(messages.workspaces) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "webhook-all-workspaces", checked: values.allWorkspaces, onCheckedChange: (checked) => setValues((prev) => ({
+                                            ...prev,
+                                            allWorkspaces: checked === true
+                                        })) }), _jsx(Label, { htmlFor: "webhook-all-workspaces", className: "text-sm font-normal", children: intl.formatMessage(messages.allWorkspaces) })] }), !values.allWorkspaces ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "webhook-workspaces", className: "sr-only", children: intl.formatMessage(messages.workspaces) }), _jsx(MultiSelect, { id: "webhook-workspaces", options: workspaceOptions, value: values.workspaceIds, onChange: (next) => setValues((prev) => ({
+                                            ...prev,
+                                            workspaceIds: next
+                                        })), placeholder: intl.formatMessage(messages.workspacesPlaceholder) })] })) : null, _jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.workspacesHint) }), emptyWorkspaces ? (_jsx("p", { className: "text-xs text-destructive", children: intl.formatMessage(messages.noWorkspaces) })) : null] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium", children: intl.formatMessage(messages.events) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "webhook-all-events", checked: values.allEvents, onCheckedChange: (checked) => setValues((prev) => ({
+                                            ...prev,
+                                            allEvents: checked === true
+                                        })) }), _jsx(Label, { htmlFor: "webhook-all-events", className: "text-sm font-normal", children: intl.formatMessage(messages.allEvents) })] }), !values.allEvents ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "webhook-events", className: "sr-only", children: intl.formatMessage(messages.events) }), _jsx(MultiSelect, { id: "webhook-events", options: eventOptions, value: values.eventKinds, onChange: (next) => setValues((prev) => ({
+                                            ...prev,
+                                            eventKinds: next
+                                        })), placeholder: intl.formatMessage(messages.eventsPlaceholder) })] })) : null] }), _jsxs("fieldset", { className: "flex flex-col gap-2", children: [_jsx("legend", { className: "text-sm font-medium", children: intl.formatMessage(messages.contentTypes) }), !contentTypesAnswerable ? (_jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.contentTypesNeedWorkspace) })) : null, contentTypesAnswerable ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "webhook-all-content-types", checked: values.allContentTypes, onCheckedChange: (checked) => setValues((prev) => ({
+                                            ...prev,
+                                            allContentTypes: checked === true
+                                        })) }), _jsx(Label, { htmlFor: "webhook-all-content-types", className: "text-sm font-normal", children: intl.formatMessage(messages.allContentTypes) })] })) : null, contentTypesAnswerable && !values.allContentTypes ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "webhook-content-types", className: "sr-only", children: intl.formatMessage(messages.contentTypes) }), _jsx(MultiSelect, { id: "webhook-content-types", options: contentTypeOptions, value: values.contentTypes, onChange: (next) => setValues((prev) => ({
+                                            ...prev,
+                                            contentTypes: next
+                                        })), placeholder: intl.formatMessage(messages.contentTypesPlaceholder), searchPlaceholder: intl.formatMessage(messages.contentTypeSearch), 
+                                        // The search box doubles as the way in for
+                                        // a name the registry has no row for — one
+                                        // control instead of a picker beside a
+                                        // second field that meant the same thing.
+                                        onCreate: addTypedContentTypes, createLabel: (name) => intl.formatMessage(messages.addContentType, { name }) }), noGrants ? (_jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.contentTypesNoneGranted) })) : null, !noGrants && values.contentTypes.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.noContentTypes) })) : null] })) : null, contentTypesAnswerable && !noGrants ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: [intl.formatMessage(messages.contentTypesHint), !values.allContentTypes &&
+                                        !values.allWorkspaces &&
+                                        values.workspaceIds.length > 0
+                                        ? ` ${intl.formatMessage(messages.contentTypesScoped)}`
+                                        : ''] })) : null] })] }), _jsxs("div", { className: "flex flex-col gap-4 lg:col-span-2", children: [error ? (_jsx(Alert, { variant: "destructive", role: "alert", children: _jsx(AlertDescription, { children: error }) })) : null, _jsxs("div", { className: "flex items-center gap-2 border-t pt-4", children: [_jsx(Button, { onClick: submit, disabled: pending, children: intl.formatMessage(endpoint ? messages.save : messages.create) }), _jsx(Button, { variant: "ghost", onClick: onCancel, children: intl.formatMessage(messages.cancel) })] })] }), _jsx(ConfirmDialog, { open: confirmDisable, onOpenChange: setConfirmDisable, title: intl.formatMessage(messages.disableTitle), description: intl.formatMessage(messages.disableBody), confirmLabel: intl.formatMessage(messages.disableConfirm), cancelLabel: intl.formatMessage(messages.cancelDisable), confirmVariant: "destructive", onConfirm: () => {
+                    setValues((prev) => ({ ...prev, enabled: false }));
+                    setConfirmDisable(false);
+                } })] }));
+}

package/dist/lib/presentation/components/WebhooksEmpty/index.d.ts

@@ -0,0 +1,5 @@
+/** The empty state: nothing is configured yet. Offers the create action when allowed. */
+export declare function WebhooksEmpty({ onCreate }: {
+    onCreate?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WebhooksEmpty/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WebhooksEmpty/index.tsx"],"names":[],"mappings":"AAoBA,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAmBpE"}

package/dist/lib/presentation/components/WebhooksEmpty/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Plus, Webhook } from 'lucide-react';
+import { Button } from '@orthacms/design-system';
+const messages = defineMessages({
+    title: {
+        id: 'webhooks.empty.title',
+        defaultMessage: 'No webhooks yet'
+    },
+    description: {
+        id: 'webhooks.empty.description',
+        defaultMessage: 'Add an endpoint to have this CMS notify another system when content changes — a site rebuild, a cache purge, a search re-index.'
+    },
+    create: {
+        id: 'webhooks.empty.create',
+        defaultMessage: 'New webhook'
+    }
+});
+/** The empty state: nothing is configured yet. Offers the create action when allowed. */
+export function WebhooksEmpty({ onCreate }) {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "mt-8 flex flex-col items-center gap-3 text-center", children: [_jsx(Webhook, { className: "size-10 text-muted-foreground", "aria-hidden": true }), _jsx("h2", { className: "text-lg font-medium", children: intl.formatMessage(messages.title) }), _jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: intl.formatMessage(messages.description) }), onCreate ? (_jsxs(Button, { className: "mt-2", onClick: onCreate, children: [_jsx(Plus, {}), intl.formatMessage(messages.create)] })) : null] }));
+}

package/dist/lib/presentation/components/WebhooksNoAccess/index.d.ts

@@ -0,0 +1,3 @@
+/** Shown when the signed-in user lacks `webhooks:read`. */
+export declare function WebhooksNoAccess(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WebhooksNoAccess/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WebhooksNoAccess/index.tsx"],"names":[],"mappings":"AAeA,2DAA2D;AAC3D,wBAAgB,gBAAgB,gCAgB/B"}

package/dist/lib/presentation/components/WebhooksNoAccess/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { ShieldAlert } from 'lucide-react';
+const messages = defineMessages({
+    title: {
+        id: 'webhooks.noAccess.title',
+        defaultMessage: 'You don’t have access to webhooks'
+    },
+    description: {
+        id: 'webhooks.noAccess.description',
+        defaultMessage: 'Ask an administrator for the “webhooks:read” permission. Webhooks reach across every workspace and hold a signing secret, so both viewing and managing them are administrator-only.'
+    }
+});
+/** Shown when the signed-in user lacks `webhooks:read`. */
+export function WebhooksNoAccess() {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "mt-8 flex flex-col items-center gap-3 text-center", children: [_jsx(ShieldAlert, { className: "size-10 text-muted-foreground", "aria-hidden": true }), _jsx("h2", { className: "text-lg font-medium", children: intl.formatMessage(messages.title) }), _jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: intl.formatMessage(messages.description) })] }));
+}

package/dist/lib/presentation/components/WebhooksSkeleton/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The table placeholder shown while the list loads. Built from the real `Table`
+ * primitives inside the same card frame the loaded table uses, so the columns
+ * line up and nothing reflows on swap. Owns the single `role="status"`
+ * announcement; the table itself is `aria-hidden`.
+ */
+export declare function WebhooksSkeleton({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+/**
+ * Full-page placeholder for the lazy route's `Suspense` fallback.
+ *
+ * The chrome — the top bar and the container header — is **real**, not
+ * skeleton: it is the page's identity, so it must be there from the first paint
+ * rather than popping in when the chunk resolves. Only the table is a skeleton,
+ * which is exactly what the page then swaps for its own pending state, so the
+ * chunk boundary is invisible.
+ */
+export declare function WebhooksPageSkeleton(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WebhooksSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WebhooksSkeleton/index.tsx"],"names":[],"mappings":"AA4BA;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAyD/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,gCAuBnC"}

package/dist/lib/presentation/components/WebhooksSkeleton/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Webhook } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { Container, ContainerHeader, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@orthacms/design-system';
+/** Intl descriptors for the webhook skeletons, co-located here. */
+const messages = defineMessages({
+    title: { id: 'webhooks.page.title', defaultMessage: 'Webhooks' },
+    subtitle: {
+        id: 'webhooks.page.subtitle',
+        defaultMessage: 'Endpoints this CMS notifies when content changes.'
+    },
+    loading: {
+        id: 'webhooks.skeleton.loading',
+        defaultMessage: 'Loading webhooks…'
+    }
+});
+/**
+ * The table placeholder shown while the list loads. Built from the real `Table`
+ * primitives inside the same card frame the loaded table uses, so the columns
+ * line up and nothing reflows on swap. Owns the single `role="status"`
+ * announcement; the table itself is `aria-hidden`.
+ */
+export function WebhooksSkeleton({ rows = 4 }) {
+    const intl = useIntl();
+    return (_jsxs("div", { role: "status", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loading) }), _jsx("div", { "aria-hidden": true, className: "mt-4 overflow-hidden rounded-xl border bg-card shadow-xs", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-40" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-28" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, index) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-32" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-56" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-24 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-16 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, index))) })] }) })] }));
+}
+/**
+ * Full-page placeholder for the lazy route's `Suspense` fallback.
+ *
+ * The chrome — the top bar and the container header — is **real**, not
+ * skeleton: it is the page's identity, so it must be there from the first paint
+ * rather than popping in when the chunk resolves. Only the table is a skeleton,
+ * which is exactly what the page then swaps for its own pending state, so the
+ * chunk boundary is invisible.
+ */
+export function WebhooksPageSkeleton() {
+    const intl = useIntl();
+    return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Webhook, crumbs: [
+                    {
+                        key: 'webhooks',
+                        label: intl.formatMessage(messages.title)
+                    }
+                ] }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: intl.formatMessage(messages.title), subtitle: intl.formatMessage(messages.subtitle) }), _jsx(WebhooksSkeleton, {})] })] }));
+}

package/dist/lib/presentation/components/WebhooksTable/index.d.ts

@@ -0,0 +1,12 @@
+import type { WebhookEndpoint } from '../../../domain/types/webhook';
+/**
+ * The endpoint list.
+ *
+ * The filter columns read as chips rather than as lists, because the question
+ * from the list is "roughly what does this one take?" — the exact set belongs on
+ * the detail page, where it can be edited.
+ */
+export declare function WebhooksTable({ endpoints }: {
+    endpoints: WebhookEndpoint[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/components/WebhooksTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/components/WebhooksTable/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AA2CrE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,eAAe,EAAE,CAAA;CAAE,+BAwI5E"}