@orthacms/webhooks-admin 0.5.0

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@orthacms/design-system';
+import { DeliveryStatusBadge } from '../DeliveryStatusBadge';
+const messages = defineMessages({
+    caption: {
+        id: 'webhooks.table.caption',
+        defaultMessage: 'Configured webhook endpoints'
+    },
+    name: { id: 'webhooks.table.name', defaultMessage: 'Name' },
+    url: { id: 'webhooks.table.url', defaultMessage: 'URL' },
+    events: { id: 'webhooks.table.events', defaultMessage: 'Sends' },
+    state: { id: 'webhooks.table.state', defaultMessage: 'State' },
+    lastDelivery: {
+        id: 'webhooks.table.lastDelivery',
+        defaultMessage: 'Last delivery'
+    },
+    active: { id: 'webhooks.table.active', defaultMessage: 'Active' },
+    paused: { id: 'webhooks.table.paused', defaultMessage: 'Paused' },
+    autoDisabled: {
+        id: 'webhooks.table.autoDisabled',
+        defaultMessage: 'Stopped after failures'
+    },
+    allEvents: { id: 'webhooks.table.allEvents', defaultMessage: 'All events' },
+    someEvents: {
+        id: 'webhooks.table.someEvents',
+        defaultMessage: '{count, plural, one {# event} other {# events}}'
+    },
+    allWorkspaces: {
+        id: 'webhooks.table.allWorkspaces',
+        defaultMessage: 'All workspaces'
+    },
+    someWorkspaces: {
+        id: 'webhooks.table.someWorkspaces',
+        defaultMessage: '{count, plural, one {# workspace} other {# workspaces}}'
+    },
+    someTypes: {
+        id: 'webhooks.table.someTypes',
+        defaultMessage: '{count, plural, one {# type} other {# types}}'
+    },
+    never: { id: 'webhooks.table.never', defaultMessage: 'Nothing sent yet' }
+});
+/**
+ * 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 function WebhooksTable({ endpoints }) {
+    const intl = useIntl();
+    return (_jsx("div", { className: "mt-4 overflow-hidden rounded-xl border bg-card shadow-xs", children: _jsxs(Table, { children: [_jsx("caption", { className: "sr-only", children: intl.formatMessage(messages.caption) }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: intl.formatMessage(messages.name) }), _jsx(TableHead, { children: intl.formatMessage(messages.url) }), _jsx(TableHead, { children: intl.formatMessage(messages.events) }), _jsx(TableHead, { children: intl.formatMessage(messages.state) }), _jsx(TableHead, { children: intl.formatMessage(messages.lastDelivery) })] }) }), _jsx(TableBody, { children: endpoints.map((endpoint) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: _jsx(Link, { to: `/webhooks/${endpoint.id}`, className: "underline-offset-4 hover:underline focus-visible:underline", children: endpoint.name }) }), _jsx(TableCell, { className: "max-w-[24rem] truncate font-mono text-xs text-muted-foreground", children: endpoint.url }), _jsx(TableCell, { children: _jsxs("div", { className: "flex flex-wrap gap-1", children: [_jsx(Badge, { variant: "outline", children: endpoint.eventKinds.length === 0
+                                                ? intl.formatMessage(messages.allEvents)
+                                                : intl.formatMessage(messages.someEvents, {
+                                                    count: endpoint.eventKinds
+                                                        .length
+                                                }) }), _jsx(Badge, { variant: "outline", children: endpoint.allWorkspaces
+                                                ? intl.formatMessage(messages.allWorkspaces)
+                                                : intl.formatMessage(messages.someWorkspaces, {
+                                                    count: endpoint
+                                                        .workspaceIds.length
+                                                }) }), endpoint.contentTypes.length > 0 ? (_jsx(Badge, { variant: "outline", children: intl.formatMessage(messages.someTypes, {
+                                                count: endpoint.contentTypes
+                                                    .length
+                                            }) })) : null] }) }), _jsx(TableCell, { children: endpoint.enabled ? (_jsx(Badge, { variant: "secondary", children: intl.formatMessage(messages.active) })) : (
+                                // An endpoint the server switched off is a
+                                // different situation from one someone
+                                // paused, and the operator has to be able
+                                // to tell them apart at a glance.
+                                _jsx(Badge, { variant: endpoint.disabledReason
+                                        ? 'destructive'
+                                        : 'outline', children: intl.formatMessage(endpoint.disabledReason
+                                        ? messages.autoDisabled
+                                        : messages.paused) })) }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: endpoint.lastDelivery ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(DeliveryStatusBadge, { status: endpoint.lastDelivery.status }), _jsx("span", { children: intl.formatDate(endpoint.lastDelivery.createdAt, {
+                                                dateStyle: 'medium',
+                                                timeStyle: 'short'
+                                            }) })] })) : (intl.formatMessage(messages.never)) })] }, endpoint.id))) })] }) }));
+}

package/dist/lib/presentation/pages/WebhookDetailPage/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * One endpoint: its configuration, and its delivery log.
+ *
+ * The two tabs answer the two questions someone comes here with — "what does
+ * this send?" and "did it arrive?" — and the second is where almost all the
+ * time is spent, which is why the log polls itself rather than waiting to be
+ * refreshed.
+ */
+export declare function WebhookDetailPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/WebhookDetailPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/WebhookDetailPage/index.tsx"],"names":[],"mappings":"AAgJA;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,gCAsRhC"}

package/dist/lib/presentation/pages/WebhookDetailPage/index.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Pencil, Send, Trash2, TriangleAlert, Webhook } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useDocumentTitle } from '@orthacms/utils-admin';
+import { Alert, AlertDescription, Button, ConfirmDialog, Container, ContainerHeader, Spinner, Tabs, TabsContent, TabsList, TabsTrigger, toast } from '@orthacms/design-system';
+import { useWebhookEndpoint } from '../../../application/useWebhookEndpoints';
+import { useDeleteWebhook, useRotateWebhookSecret, useTestWebhook } from '../../../application/useWebhookMutations';
+import { RevealWebhookSecretDialog } from '../../components/RevealWebhookSecretDialog';
+import { WebhookDeliveriesPanel } from '../../components/WebhookDeliveriesPanel';
+import { WebhooksNoAccess } from '../../components/WebhooksNoAccess';
+const messages = defineMessages({
+    listTitle: { id: 'webhooks.page.title', defaultMessage: 'Webhooks' },
+    settings: {
+        id: 'webhooks.detail.settings',
+        defaultMessage: 'Settings'
+    },
+    deliveries: {
+        id: 'webhooks.detail.deliveries',
+        defaultMessage: 'Deliveries'
+    },
+    edit: { id: 'webhooks.detail.edit', defaultMessage: 'Edit' },
+    test: { id: 'webhooks.detail.test', defaultMessage: 'Send test' },
+    rotate: {
+        id: 'webhooks.detail.rotate',
+        defaultMessage: 'Rotate secret'
+    },
+    remove: { id: 'webhooks.detail.remove', defaultMessage: 'Delete' },
+    url: { id: 'webhooks.detail.url', defaultMessage: 'URL' },
+    secret: { id: 'webhooks.detail.secret', defaultMessage: 'Signing secret' },
+    headers: {
+        id: 'webhooks.detail.headers',
+        defaultMessage: 'Custom headers'
+    },
+    noHeaders: {
+        id: 'webhooks.detail.noHeaders',
+        defaultMessage: 'None'
+    },
+    secretValue: {
+        id: 'webhooks.detail.secretValue',
+        defaultMessage: 'Ends in {hint}'
+    },
+    events: { id: 'webhooks.detail.events', defaultMessage: 'Events' },
+    allEvents: {
+        id: 'webhooks.detail.allEvents',
+        defaultMessage: 'All events'
+    },
+    workspaces: {
+        id: 'webhooks.detail.workspaces',
+        defaultMessage: 'Workspaces'
+    },
+    allWorkspaces: {
+        id: 'webhooks.detail.allWorkspaces',
+        defaultMessage: 'All workspaces'
+    },
+    contentTypes: {
+        id: 'webhooks.detail.contentTypes',
+        defaultMessage: 'Content types'
+    },
+    allContentTypes: {
+        id: 'webhooks.detail.allContentTypes',
+        defaultMessage: 'All content types'
+    },
+    state: { id: 'webhooks.detail.state', defaultMessage: 'State' },
+    active: { id: 'webhooks.detail.active', defaultMessage: 'Active' },
+    paused: { id: 'webhooks.detail.paused', defaultMessage: 'Paused' },
+    notFound: {
+        id: 'webhooks.detail.notFound',
+        defaultMessage: 'That webhook no longer exists.'
+    },
+    back: { id: 'webhooks.detail.back', defaultMessage: 'Back to webhooks' },
+    deleted: {
+        id: 'webhooks.detail.deleted',
+        defaultMessage: 'Webhook deleted'
+    },
+    deleteFailed: {
+        id: 'webhooks.detail.deleteFailed',
+        defaultMessage: 'Couldn’t delete the webhook. Please try again.'
+    },
+    confirmDeleteTitle: {
+        id: 'webhooks.detail.confirmDeleteTitle',
+        defaultMessage: 'Delete this webhook?'
+    },
+    confirmDeleteBody: {
+        id: 'webhooks.detail.confirmDeleteBody',
+        defaultMessage: 'Deliveries stop immediately and the delivery log goes with it. This cannot be undone.'
+    },
+    confirmDelete: {
+        id: 'webhooks.detail.confirmDelete',
+        defaultMessage: 'Delete webhook'
+    },
+    cancel: { id: 'webhooks.detail.cancel', defaultMessage: 'Cancel' },
+    testOk: {
+        id: 'webhooks.detail.testOk',
+        defaultMessage: 'Receiver answered {status} in {ms} ms'
+    },
+    testFailed: {
+        id: 'webhooks.detail.testFailed',
+        defaultMessage: 'Test delivery failed: {reason}'
+    },
+    autoDisabled: {
+        id: 'webhooks.detail.autoDisabled',
+        defaultMessage: '{reason} Fix the receiver, then switch the webhook back on from Edit.'
+    }
+});
+/** One labelled fact in the settings summary. */
+function Fact({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: label }), _jsx("dd", { className: "text-sm", children: children })] }));
+}
+/**
+ * One endpoint: its configuration, and its delivery log.
+ *
+ * The two tabs answer the two questions someone comes here with — "what does
+ * this send?" and "did it arrive?" — and the second is where almost all the
+ * time is spent, which is why the log polls itself rather than waiting to be
+ * refreshed.
+ */
+export function WebhookDetailPage() {
+    const intl = useIntl();
+    const navigate = useNavigate();
+    const { id = '' } = useParams();
+    const canRead = useHasPermission('webhooks:read');
+    const canManage = useHasPermission('webhooks:manage');
+    const [secret, setSecret] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const { data: endpoint, isPending, isError } = useWebhookEndpoint(id, canRead && id.length > 0);
+    const remove = useDeleteWebhook();
+    const rotate = useRotateWebhookSecret();
+    const test = useTestWebhook();
+    useDocumentTitle(endpoint?.name ?? intl.formatMessage(messages.listTitle));
+    if (!canRead) {
+        return (_jsx(Container, { children: _jsx(WebhooksNoAccess, {}) }));
+    }
+    if (isPending) {
+        return (_jsx(Container, { children: _jsx("div", { className: "flex justify-center py-16", children: _jsx(Spinner, {}) }) }));
+    }
+    if (isError || !endpoint) {
+        return (_jsx(Container, { children: _jsx(Alert, { variant: "destructive", role: "alert", className: "mt-8", children: _jsxs(AlertDescription, { className: "flex items-center justify-between gap-4", children: [intl.formatMessage(messages.notFound), _jsx(Button, { size: "sm", variant: "outline", onClick: () => navigate('/webhooks'), children: intl.formatMessage(messages.back) })] }) }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Webhook, crumbs: [
+                    {
+                        key: 'webhooks',
+                        label: intl.formatMessage(messages.listTitle),
+                        to: '/webhooks'
+                    },
+                    { key: endpoint.id, label: endpoint.name }
+                ] }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: endpoint.name, subtitle: endpoint.url, actions: canManage ? (_jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", disabled: test.isPending, onClick: () => test.mutate(endpoint.id, {
+                                        onSuccess: (result) => {
+                                            if (result.ok) {
+                                                toast.success(intl.formatMessage(messages.testOk, {
+                                                    status: result.statusCode,
+                                                    ms: result.durationMs
+                                                }));
+                                            }
+                                            else {
+                                                toast.error(intl.formatMessage(messages.testFailed, {
+                                                    reason: result.error ??
+                                                        `HTTP ${result.statusCode}`
+                                                }));
+                                            }
+                                        }
+                                    }), children: [_jsx(Send, { "aria-hidden": true }), intl.formatMessage(messages.test)] }), _jsxs(Button, { variant: "outline", onClick: () => navigate(`/webhooks/${endpoint.id}/edit`), children: [_jsx(Pencil, { "aria-hidden": true }), intl.formatMessage(messages.edit)] })] })) : undefined }), endpoint.disabledReason ? (_jsxs(Alert, { variant: "destructive", role: "alert", className: "mt-4", children: [_jsx(TriangleAlert, { "aria-hidden": true }), _jsx(AlertDescription, { children: intl.formatMessage(messages.autoDisabled, {
+                                    reason: endpoint.disabledReason
+                                }) })] })) : null, _jsxs(Tabs, { defaultValue: "deliveries", className: "mt-6", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "deliveries", children: intl.formatMessage(messages.deliveries) }), _jsx(TabsTrigger, { value: "settings", children: intl.formatMessage(messages.settings) })] }), _jsx(TabsContent, { value: "deliveries", className: "mt-4", children: _jsx(WebhookDeliveriesPanel, { endpointId: endpoint.id, canRedeliver: canManage }) }), _jsxs(TabsContent, { value: "settings", className: "mt-4", children: [_jsxs("dl", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Fact, { label: intl.formatMessage(messages.url), children: _jsx("span", { className: "font-mono text-xs break-all", children: endpoint.url }) }), _jsx(Fact, { label: intl.formatMessage(messages.state), children: intl.formatMessage(endpoint.enabled
+                                                    ? messages.active
+                                                    : messages.paused) }), _jsx(Fact, { label: intl.formatMessage(messages.events), children: endpoint.eventKinds.length === 0
+                                                    ? intl.formatMessage(messages.allEvents)
+                                                    : endpoint.eventKinds.join(', ') }), _jsx(Fact, { label: intl.formatMessage(messages.contentTypes), children: endpoint.contentTypes.length === 0
+                                                    ? intl.formatMessage(messages.allContentTypes)
+                                                    : endpoint.contentTypes.join(', ') }), _jsx(Fact, { label: intl.formatMessage(messages.workspaces), children: endpoint.allWorkspaces
+                                                    ? intl.formatMessage(messages.allWorkspaces)
+                                                    : endpoint.workspaceIds.length }), _jsx(Fact, { label: intl.formatMessage(messages.headers), children: _jsx("span", { className: "font-mono text-xs break-all", children: Object.keys(endpoint.headers).length === 0
+                                                        ? intl.formatMessage(messages.noHeaders)
+                                                        : Object.keys(endpoint.headers).join(', ') }) }), _jsx(Fact, { label: intl.formatMessage(messages.secret), children: _jsx("span", { className: "font-mono text-xs", children: intl.formatMessage(messages.secretValue, {
+                                                        hint: endpoint.secretHint
+                                                    }) }) })] }), canManage ? (_jsxs("div", { className: "mt-8 flex flex-wrap gap-2 border-t pt-4", children: [_jsx(Button, { variant: "outline", disabled: rotate.isPending, onClick: () => rotate.mutate(endpoint.id, {
+                                                    onSuccess: ({ secret: minted }) => setSecret(minted)
+                                                }), children: intl.formatMessage(messages.rotate) }), _jsxs(Button, { variant: "destructive", onClick: () => setConfirmDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), intl.formatMessage(messages.remove)] })] })) : null] })] })] }), _jsx(RevealWebhookSecretDialog, { secret: secret, rotated: true, open: secret !== null, onOpenChange: (next) => {
+                    if (!next)
+                        setSecret(null);
+                } }), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: intl.formatMessage(messages.confirmDeleteTitle), description: intl.formatMessage(messages.confirmDeleteBody), confirmLabel: intl.formatMessage(messages.confirmDelete), cancelLabel: intl.formatMessage(messages.cancel), confirmVariant: "destructive", busy: remove.isPending, onConfirm: () => remove.mutate(endpoint.id, {
+                    onSuccess: () => {
+                        toast.success(intl.formatMessage(messages.deleted));
+                        navigate('/webhooks');
+                    },
+                    onError: () => toast.error(intl.formatMessage(messages.deleteFailed))
+                }) })] }));
+}

package/dist/lib/presentation/pages/WebhookEditorPage/index.d.ts

@@ -0,0 +1,28 @@
+/** Props for {@link WebhookEditorPage}. */
+export type WebhookEditorPageProps = {
+    /**
+     * `'create'` mounts a blank form; `'edit'` (the default) loads the endpoint
+     * named by the route.
+     *
+     * One component for both, as in the alarms rule editor: the two forms are
+     * the same form. The only differences are what seeds it and where saving
+     * goes afterwards, and a second page would duplicate the whole subscription
+     * surface for that.
+     */
+    mode?: 'create' | 'edit';
+};
+/**
+ * Creates or edits one endpoint, as a page rather than a dialog.
+ *
+ * The form asks eight questions across three filters, two of which are pickers
+ * that open their own popovers; inside a modal that meant a scrolling box with
+ * popovers portalled into it to survive the scroll lock. On a page the two
+ * halves — where deliveries go, and what is worth sending — sit side by side,
+ * and the browser's own back button is the way out.
+ *
+ * Creating ends on the one-time secret: it exists nowhere else from that moment
+ * on, so the reveal opens here and only then does the page move to the new
+ * endpoint.
+ */
+export declare function WebhookEditorPage({ mode }?: WebhookEditorPageProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/WebhookEditorPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/WebhookEditorPage/index.tsx"],"names":[],"mappings":"AA6DA,2CAA2C;AAC3C,MAAM,MAAM,sBAAsB,GAAG;IACjC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,IAAa,EAChB,GAAE,sBAA2B,+BAsL7B"}

package/dist/lib/presentation/pages/WebhookEditorPage/index.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Webhook } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useDocumentTitle } from '@orthacms/utils-admin';
+import { Alert, AlertDescription, Button, Container, ContainerHeader, Spinner, toast } from '@orthacms/design-system';
+import { useWebhookEndpoint } from '../../../application/useWebhookEndpoints';
+import { useWebhookEvents } from '../../../application/useWebhookEvents';
+import { useWorkspaceOptions } from '../../../application/useWorkspaceOptions';
+import { useContentTypeOptions } from '../../../application/useContentTypeOptions';
+import { useCreateWebhook, useUpdateWebhook } from '../../../application/useWebhookMutations';
+import { serverMessageOf } from '../../../infrastructure/serverMessageOf';
+import { WebhookForm } from '../../components/WebhookForm';
+import { RevealWebhookSecretDialog } from '../../components/RevealWebhookSecretDialog';
+import { WebhooksNoAccess } from '../../components/WebhooksNoAccess';
+const messages = defineMessages({
+    listTitle: { id: 'webhooks.page.title', defaultMessage: 'Webhooks' },
+    createTitle: {
+        id: 'webhooks.editor.createTitle',
+        defaultMessage: 'New webhook'
+    },
+    editTitle: {
+        id: 'webhooks.editor.editTitle',
+        defaultMessage: 'Edit webhook'
+    },
+    subtitle: {
+        id: 'webhooks.editor.subtitle',
+        defaultMessage: 'Choose where deliveries go and which changes are worth sending.'
+    },
+    created: { id: 'webhooks.page.created', defaultMessage: 'Webhook created' },
+    saved: { id: 'webhooks.detail.saved', defaultMessage: 'Webhook updated' },
+    createFailed: {
+        id: 'webhooks.page.createFailed',
+        defaultMessage: 'Couldn’t create the webhook. Please try again.'
+    },
+    saveFailed: {
+        id: 'webhooks.detail.saveFailed',
+        defaultMessage: 'Couldn’t save the webhook. Please try again.'
+    },
+    notFound: {
+        id: 'webhooks.detail.notFound',
+        defaultMessage: 'That webhook no longer exists.'
+    },
+    back: { id: 'webhooks.detail.back', defaultMessage: 'Back to webhooks' }
+});
+/**
+ * Creates or edits one endpoint, as a page rather than a dialog.
+ *
+ * The form asks eight questions across three filters, two of which are pickers
+ * that open their own popovers; inside a modal that meant a scrolling box with
+ * popovers portalled into it to survive the scroll lock. On a page the two
+ * halves — where deliveries go, and what is worth sending — sit side by side,
+ * and the browser's own back button is the way out.
+ *
+ * Creating ends on the one-time secret: it exists nowhere else from that moment
+ * on, so the reveal opens here and only then does the page move to the new
+ * endpoint.
+ */
+export function WebhookEditorPage({ mode = 'edit' } = {}) {
+    const intl = useIntl();
+    const navigate = useNavigate();
+    const { id = '' } = useParams();
+    const isCreate = mode === 'create';
+    const canRead = useHasPermission('webhooks:read');
+    const canManage = useHasPermission('webhooks:manage');
+    const [formError, setFormError] = useState(null);
+    const [created, setCreated] = useState(null);
+    const { data: endpoint, isPending, isError } = useWebhookEndpoint(id, canRead && !isCreate && id.length > 0);
+    // The pickers are the page now, so unlike the dialog they load with it.
+    const { data: events } = useWebhookEvents(canManage);
+    const { data: workspaces } = useWorkspaceOptions(canManage);
+    const { data: contentTypes } = useContentTypeOptions(canManage);
+    const create = useCreateWebhook();
+    const update = useUpdateWebhook();
+    const title = intl.formatMessage(isCreate ? messages.createTitle : messages.editTitle);
+    useDocumentTitle(title);
+    const crumbs = [
+        {
+            key: 'webhooks',
+            label: intl.formatMessage(messages.listTitle),
+            to: '/webhooks'
+        },
+        ...(isCreate
+            ? []
+            : [
+                {
+                    key: 'endpoint',
+                    label: endpoint?.name ?? title,
+                    to: `/webhooks/${id}`
+                }
+            ]),
+        { key: 'editor', label: title }
+    ];
+    // `webhooks:manage` and not merely `webhooks:read`: this page only exists
+    // to write. Reaching it by URL without the key gets the same answer the nav
+    // gives, rather than a form whose Save would be refused.
+    if (!canRead || !canManage) {
+        return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Webhook, crumbs: crumbs }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: title }), _jsx(WebhooksNoAccess, {})] })] }));
+    }
+    if (!isCreate && isPending) {
+        return (_jsx(Container, { children: _jsx("div", { className: "flex justify-center py-16", children: _jsx(Spinner, {}) }) }));
+    }
+    if (!isCreate && (isError || !endpoint)) {
+        return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Webhook, crumbs: crumbs }), _jsx(Container, { children: _jsx(Alert, { variant: "destructive", role: "alert", className: "mt-8", children: _jsxs(AlertDescription, { className: "flex items-center justify-between gap-4", children: [intl.formatMessage(messages.notFound), _jsx(Button, { size: "sm", variant: "outline", onClick: () => navigate('/webhooks'), children: intl.formatMessage(messages.back) })] }) }) })] }));
+    }
+    const leave = () => navigate(isCreate ? '/webhooks' : `/webhooks/${id}`, { replace: true });
+    return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Webhook, crumbs: crumbs }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: title, subtitle: intl.formatMessage(messages.subtitle) }), _jsx("div", { className: "mt-6", children: _jsx(WebhookForm, { endpoint: isCreate ? undefined : endpoint, events: events ?? [], workspaces: workspaces ?? [], contentTypes: contentTypes ?? [], pending: create.isPending || update.isPending, error: formError, onCancel: leave, onSubmit: (input) => {
+                                setFormError(null);
+                                // A refused URL comes back with a message written
+                                // for whoever typed it; show that rather than a
+                                // generic failure, and stay on the form so it can
+                                // be corrected in place.
+                                const onError = (error) => setFormError(serverMessageOf(error) ??
+                                    intl.formatMessage(isCreate
+                                        ? messages.createFailed
+                                        : messages.saveFailed));
+                                if (isCreate) {
+                                    create.mutate(input, {
+                                        onSuccess: ({ endpoint: made, secret }) => {
+                                            toast.success(intl.formatMessage(messages.created));
+                                            // The secret exists nowhere else from
+                                            // here on, so the page waits on the
+                                            // reveal rather than navigating past
+                                            // it.
+                                            setCreated({ id: made.id, secret });
+                                        },
+                                        onError
+                                    });
+                                    return;
+                                }
+                                update.mutate({ id, input }, {
+                                    onSuccess: () => {
+                                        toast.success(intl.formatMessage(messages.saved));
+                                        navigate(`/webhooks/${id}`, {
+                                            replace: true
+                                        });
+                                    },
+                                    onError
+                                });
+                            } }) })] }), _jsx(RevealWebhookSecretDialog, { secret: created?.secret ?? null, open: created !== null, onOpenChange: (next) => {
+                    if (next || !created)
+                        return;
+                    navigate(`/webhooks/${created.id}`, { replace: true });
+                    setCreated(null);
+                } })] }));
+}

package/dist/lib/presentation/pages/WebhooksPage/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The global webhooks page (`/webhooks`, in the sidebar's directory group — no
+ * workspace context).
+ *
+ * Everything here is gated on `webhooks:read`, and both keys are
+ * administrator-only: an endpoint spans every workspace it names and holds a
+ * signing secret, so this is deployment configuration rather than an editorial
+ * surface.
+ */
+export declare function WebhooksPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/WebhooksPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/WebhooksPage/index.tsx"],"names":[],"mappings":"AAqCA;;;;;;;;GAQG;AACH,wBAAgB,YAAY,gCAuG3B"}

package/dist/lib/presentation/pages/WebhooksPage/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Webhook } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useDocumentTitle } from '@orthacms/utils-admin';
+import { Alert, AlertDescription, Button, Container, ContainerHeader } from '@orthacms/design-system';
+import { useWebhookEndpoints } from '../../../application/useWebhookEndpoints';
+import { WebhooksTable } from '../../components/WebhooksTable';
+import { WebhooksEmpty } from '../../components/WebhooksEmpty';
+import { WebhooksNoAccess } from '../../components/WebhooksNoAccess';
+import { WebhooksSkeleton } from '../../components/WebhooksSkeleton';
+const messages = defineMessages({
+    title: { id: 'webhooks.page.title', defaultMessage: 'Webhooks' },
+    subtitle: {
+        id: 'webhooks.page.subtitle',
+        defaultMessage: 'Endpoints this CMS notifies when content changes.'
+    },
+    create: { id: 'webhooks.page.create', defaultMessage: 'New webhook' },
+    error: {
+        id: 'webhooks.page.error',
+        defaultMessage: 'Couldn’t load webhooks. Please try again.'
+    },
+    retry: { id: 'webhooks.page.retry', defaultMessage: 'Retry' },
+    count: {
+        id: 'webhooks.page.count',
+        defaultMessage: '{count, plural, one {# webhook} other {# webhooks}}'
+    }
+});
+/**
+ * The global webhooks page (`/webhooks`, in the sidebar's directory group — no
+ * workspace context).
+ *
+ * Everything here is gated on `webhooks:read`, and both keys are
+ * administrator-only: an endpoint spans every workspace it names and holds a
+ * signing secret, so this is deployment configuration rather than an editorial
+ * surface.
+ */
+export function WebhooksPage() {
+    const intl = useIntl();
+    useDocumentTitle(intl.formatMessage(messages.title));
+    const canRead = useHasPermission('webhooks:read');
+    const canManage = useHasPermission('webhooks:manage');
+    const navigate = useNavigate();
+    const { data, isPending, isError, refetch } = useWebhookEndpoints(canRead);
+    if (!canRead) {
+        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) }), _jsx(WebhooksNoAccess, {})] })] }));
+    }
+    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), actions: canManage && (data?.length ?? 0) > 0 ? (_jsxs(Button, { onClick: () => navigate('/webhooks/new'), children: [_jsx(Plus, {}), intl.formatMessage(messages.create)] })) : undefined }), isPending ? _jsx(WebhooksSkeleton, {}) : null, isError ? (_jsx(Alert, { variant: "destructive", role: "alert", className: "mt-4", children: _jsxs(AlertDescription, { className: "flex items-center justify-between gap-4", children: [intl.formatMessage(messages.error), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: intl.formatMessage(messages.retry) })] }) })) : null, data && data.length === 0 ? (_jsx(WebhooksEmpty, { onCreate: canManage
+                            ? () => navigate('/webhooks/new')
+                            : undefined })) : null, data && data.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(WebhooksTable, { endpoints: data }), _jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: intl.formatMessage(messages.count, {
+                                    count: data.length
+                                }) })] })) : null] })] }));
+}

package/dist/lib/utils/webhooksPlugin/index.d.ts

@@ -0,0 +1,35 @@
+import type { AdminPlugin } from '@orthacms/bootstrap-admin';
+/**
+ * Admin-side webhooks plugin shape. A thin alias of {@link AdminPlugin}, kept
+ * named so future config has a home.
+ */
+export type WebhooksAdminPlugin = AdminPlugin;
+/**
+ * Creates the admin-side webhooks plugin.
+ *
+ * It owns the global webhook-management feature — `/webhooks`,
+ * `/webhooks/new`, `/webhooks/:id` and `/webhooks/:id/edit` — rendered inside
+ * the shell's authenticated layout, plus an
+ * entry in the **global** sidebar's `directory` group alongside Workspaces,
+ * Members and API tokens — reachable without selecting a workspace, because an
+ * endpoint is not scoped to one.
+ *
+ * The nav row and both pages gate on `webhooks:read`, which is
+ * administrator-only: the rows hold a signing secret and reach across every
+ * workspace they name.
+ *
+ * @example
+ * ```typescript
+ * createAdmin({
+ *   plugins: [
+ *     IdentityPlugin(),
+ *     ShellPlugin(),
+ *     WorkspacesPlugin(),
+ *     ApiTokensPlugin(),
+ *     WebhooksPlugin(),
+ *   ],
+ * });
+ * ```
+ */
+export declare function WebhooksPlugin(): WebhooksAdminPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/utils/webhooksPlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/webhooksPlugin/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AA0B7D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,IAAI,mBAAmB,CA2DpD"}