feat(webhook): Phase 4 — admin-ui /webhooks page
Routes: - /webhooks (layout) → /webhooks/index (list) + /webhooks/$id (detail) - nav link добавлен в __root.tsx между Outbox и Language switch List page (webhooks.index.tsx): - Table: name | URL | scope filter (colored dots) | dictionaries | status - ScopeChips reuse SCOPE_DOT из lib/scope-style.ts (consistency с dictionaries scope coloring) - Create dialog: name, URL, scope filter (MultiSelect), dictionary & event type (CSV inputs), description. Client-side validation (URL scheme, name required) дублирует server-side @Pattern. - Secret reveal modal после create: warning + plaintext + copy button. Single-time view — после закрытия secret не получить, только rotate. Detail page (webhooks.$id.tsx): - Subscription metadata grid (URL, status, filters, masked secret, createdBy + timestamp) - Action buttons: rotate-secret + delete (с confirmation) - Delivery history table: outboxEventId | status badge (delivered/ retrying/pending/dlq) | attempts | last attempt | HTTP code | error - Pagination 50/page - Status badges: delivered=success, retrying=warning, pending=neutral, dlq=error API client (queries + mutations): - 4 queries: subscriptions list, subscription by id, deliveries page, DLQ page (last unused в UI пока, но готов для admin DLQ tab) - 4 mutations: create, update, delete, rotateSecret. Все invalidate правильные query keys. i18n: 50 ключей × 2 локали (ru-RU + en-US) под webhooks.*
This commit is contained in:
Zimin A.N.
@@ -44,6 +44,13 @@ function RootLayout() {
|
||||
>
|
||||
{t('nav.outbox')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/webhooks"
|
||||
className="text-carbon hover:text-ultramarain"
|
||||
activeProps={{ className: 'text-ultramarain font-medium' }}
|
||||
>
|
||||
{t('nav.webhooks')}
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<LanguageSwitch
|
||||
|
||||
@@ -0,0 +1,314 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
EmptyState,
|
||||
IconButton,
|
||||
LoadingBlock,
|
||||
PageHeader,
|
||||
Panel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
} from '@nstart/ui'
|
||||
import {
|
||||
ArrowsClockwiseIcon,
|
||||
KeyIcon,
|
||||
TrashIcon,
|
||||
} from '@phosphor-icons/react'
|
||||
import {
|
||||
useWebhookDeliveries,
|
||||
useWebhookSubscription,
|
||||
} from '@/api/queries'
|
||||
import {
|
||||
useDeleteWebhook,
|
||||
useRotateWebhookSecret,
|
||||
} from '@/api/mutations'
|
||||
import { SCOPE_DOT } from '@/lib/scope-style'
|
||||
|
||||
export const Route = createFileRoute('/webhooks/$id')({
|
||||
component: WebhookDetailPage,
|
||||
})
|
||||
|
||||
const STATUS_BADGE: Record<string, 'success' | 'warning' | 'error' | 'neutral'> = {
|
||||
delivered: 'success',
|
||||
retrying: 'warning',
|
||||
pending: 'neutral',
|
||||
dlq: 'error',
|
||||
}
|
||||
|
||||
function WebhookDetailPage() {
|
||||
const { id } = Route.useParams()
|
||||
const { t } = useTranslation()
|
||||
const sub = useWebhookSubscription(id)
|
||||
const [page, setPage] = useState(0)
|
||||
const deliveries = useWebhookDeliveries(id, page, 50)
|
||||
const rotateMut = useRotateWebhookSecret()
|
||||
const deleteMut = useDeleteWebhook()
|
||||
const [revealedSecret, setRevealedSecret] = useState<string | null>(null)
|
||||
|
||||
const handleRotate = () => {
|
||||
if (!window.confirm(t('webhooks.confirmRotate'))) return
|
||||
rotateMut.mutate(id, {
|
||||
onSuccess: (s) => setRevealedSecret(s.hmacSecret),
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!sub.data) return
|
||||
if (!window.confirm(t('webhooks.confirmDelete', { name: sub.data.name }))) return
|
||||
deleteMut.mutate(id, {
|
||||
onSuccess: () => {
|
||||
window.location.assign('/webhooks')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (sub.isLoading) return <LoadingBlock size="md" label={t('loading')} />
|
||||
if (sub.error || !sub.data) {
|
||||
return (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(sub.error ?? t('webhooks.notFound'))}
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
const data = sub.data
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
breadcrumb={
|
||||
<Link to="/webhooks" className="text-sm text-carbon/70 hover:text-ultramarain">
|
||||
← {t('nav.webhooks')}
|
||||
</Link>
|
||||
}
|
||||
title={data.name}
|
||||
description={data.description ?? data.url}
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
leftIcon={<KeyIcon weight="bold" size={16} />}
|
||||
loading={rotateMut.isPending}
|
||||
onClick={handleRotate}
|
||||
>
|
||||
{t('webhooks.action.rotateSecret')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
leftIcon={<TrashIcon weight="bold" size={16} />}
|
||||
loading={deleteMut.isPending}
|
||||
onClick={handleDelete}
|
||||
>
|
||||
{t('webhooks.action.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<Panel>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
|
||||
<InfoRow label={t('webhooks.field.url')}>
|
||||
<code className="font-mono text-2xs break-all">{data.url}</code>
|
||||
</InfoRow>
|
||||
<InfoRow label={t('webhooks.col.status')}>
|
||||
<Badge variant={data.active ? 'success' : 'neutral'}>
|
||||
{data.active ? t('webhooks.active') : t('webhooks.inactive')}
|
||||
</Badge>
|
||||
</InfoRow>
|
||||
<InfoRow label={t('webhooks.field.scopeFilter')}>
|
||||
{data.scopeFilter && data.scopeFilter.length > 0 ? (
|
||||
<div className="flex gap-2">
|
||||
{data.scopeFilter.map((s) => (
|
||||
<span
|
||||
key={s}
|
||||
className="inline-flex items-center gap-1 text-2xs uppercase tracking-label"
|
||||
>
|
||||
<span className={`inline-block size-2 rounded-full ${SCOPE_DOT[s]}`} aria-hidden />
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xs text-carbon/50">{t('webhooks.allScopes')}</span>
|
||||
)}
|
||||
</InfoRow>
|
||||
<InfoRow label={t('webhooks.field.dictionaryFilter')}>
|
||||
<span className="text-2xs">
|
||||
{data.dictionaryFilter && data.dictionaryFilter.length > 0
|
||||
? data.dictionaryFilter.join(', ')
|
||||
: t('webhooks.allDicts')}
|
||||
</span>
|
||||
</InfoRow>
|
||||
<InfoRow label={t('webhooks.field.eventTypeFilter')}>
|
||||
<span className="text-2xs">
|
||||
{data.eventTypeFilter && data.eventTypeFilter.length > 0
|
||||
? data.eventTypeFilter.join(', ')
|
||||
: t('webhooks.allEvents')}
|
||||
</span>
|
||||
</InfoRow>
|
||||
<InfoRow label="HMAC secret">
|
||||
<code className="font-mono text-2xs">{data.hmacSecret}</code>
|
||||
</InfoRow>
|
||||
<InfoRow label={t('webhooks.field.createdBy')}>
|
||||
<span className="text-2xs">
|
||||
{data.createdBy} · {new Date(data.createdAt).toLocaleString()}
|
||||
</span>
|
||||
</InfoRow>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="font-primary text-base text-ultramarain">
|
||||
{t('webhooks.deliveries.title')}
|
||||
</h2>
|
||||
<IconButton
|
||||
label={t('audit.filter.apply')}
|
||||
variant="default"
|
||||
icon={<ArrowsClockwiseIcon weight="regular" />}
|
||||
onClick={() => deliveries.refetch()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{deliveries.isLoading ? (
|
||||
<LoadingBlock size="sm" />
|
||||
) : !deliveries.data || deliveries.data.content.length === 0 ? (
|
||||
<EmptyState title={t('webhooks.deliveries.empty')} />
|
||||
) : (
|
||||
<Panel>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>{t('webhooks.deliveries.col.eventId')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.col.status')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.deliveries.col.attempts')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.deliveries.col.lastAttempt')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.deliveries.col.lastStatusCode')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.deliveries.col.lastError')}</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{deliveries.data.content.map((d) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">{d.outboxEventId}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={STATUS_BADGE[d.status] ?? 'neutral'}>
|
||||
{d.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">{d.attemptCount}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-2xs text-carbon/70">
|
||||
{d.lastAttemptAt
|
||||
? new Date(d.lastAttemptAt).toLocaleString()
|
||||
: '—'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs">
|
||||
{d.lastStatusCode ?? '—'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-2xs text-carbon/70 line-clamp-2 max-w-md inline-block">
|
||||
{d.lastError ?? '—'}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
{deliveries.data && (deliveries.data.totalPages ?? 0) > 1 && (
|
||||
<div className="flex justify-center gap-2 mt-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={page === 0}
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
>
|
||||
←
|
||||
</Button>
|
||||
<span className="text-sm text-carbon/70 self-center">
|
||||
{page + 1} / {deliveries.data.totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
disabled={(page + 1) >= (deliveries.data.totalPages ?? 0)}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
→
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{revealedSecret && (
|
||||
<RotateRevealModal
|
||||
secret={revealedSecret}
|
||||
onClose={() => setRevealedSecret(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text-2xs uppercase tracking-label text-carbon/60 mb-1">
|
||||
{label}
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RotateRevealModal({
|
||||
secret,
|
||||
onClose,
|
||||
}: {
|
||||
secret: string
|
||||
onClose: () => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-lg p-6 max-w-xl w-full space-y-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="font-primary text-lg text-ultramarain">
|
||||
{t('webhooks.secret.rotatedTitle')}
|
||||
</h3>
|
||||
<Alert variant="warning" title={t('webhooks.secret.warningTitle')}>
|
||||
{t('webhooks.secret.rotatedWarning')}
|
||||
</Alert>
|
||||
<div className="bg-carbon/5 border border-regolith rounded-md p-3">
|
||||
<code className="font-mono text-2xs break-all">{secret}</code>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="primary" onClick={onClose}>
|
||||
{t('webhooks.secret.acknowledge')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
EmptyState,
|
||||
IconButton,
|
||||
LoadingBlock,
|
||||
Modal,
|
||||
MultiSelect,
|
||||
PageHeader,
|
||||
Panel,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
TextArea,
|
||||
TextInput,
|
||||
type SelectOption,
|
||||
} from '@nstart/ui'
|
||||
import {
|
||||
CopyIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
} from '@phosphor-icons/react'
|
||||
import { useWebhookSubscriptions } from '@/api/queries'
|
||||
import {
|
||||
useCreateWebhook,
|
||||
useDeleteWebhook,
|
||||
} from '@/api/mutations'
|
||||
import type {
|
||||
CreateWebhookSubscriptionRequest,
|
||||
DataScope,
|
||||
WebhookSubscription,
|
||||
} from '@/api/client'
|
||||
import { SCOPE_DOT } from '@/lib/scope-style'
|
||||
|
||||
export const Route = createFileRoute('/webhooks/')({
|
||||
component: WebhooksPage,
|
||||
})
|
||||
|
||||
const SCOPE_OPTIONS: SelectOption[] = [
|
||||
{ id: 'PUBLIC', label: 'PUBLIC' },
|
||||
{ id: 'INTERNAL', label: 'INTERNAL' },
|
||||
{ id: 'RESTRICTED', label: 'RESTRICTED' },
|
||||
]
|
||||
|
||||
function WebhooksPage() {
|
||||
const { t } = useTranslation()
|
||||
const { data, isLoading, error } = useWebhookSubscriptions()
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [revealedSecret, setRevealedSecret] = useState<{
|
||||
name: string
|
||||
secret: string
|
||||
} | null>(null)
|
||||
const deleteMut = useDeleteWebhook()
|
||||
|
||||
const handleDelete = (sub: WebhookSubscription) => {
|
||||
if (!window.confirm(t('webhooks.confirmDelete', { name: sub.name }))) return
|
||||
deleteMut.mutate(sub.id)
|
||||
}
|
||||
|
||||
if (isLoading) return <LoadingBlock size="md" label={t('loading')} />
|
||||
if (error) {
|
||||
return (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(error)}
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={t('webhooks.title')}
|
||||
description={t('webhooks.subtitle')}
|
||||
actions={
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
leftIcon={<PlusIcon weight="bold" size={16} />}
|
||||
onClick={() => setCreateOpen(true)}
|
||||
>
|
||||
{t('webhooks.action.create')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{!data || data.length === 0 ? (
|
||||
<EmptyState title={t('webhooks.empty')} />
|
||||
) : (
|
||||
<Panel>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeaderCell>{t('webhooks.col.name')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.col.url')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.col.scopes')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.col.dictionaries')}</TableHeaderCell>
|
||||
<TableHeaderCell>{t('webhooks.col.status')}</TableHeaderCell>
|
||||
<TableHeaderCell align="right">{t('dict.col.actions')}</TableHeaderCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((sub) => (
|
||||
<TableRow key={sub.id}>
|
||||
<TableCell>
|
||||
<Link
|
||||
to="/webhooks/$id"
|
||||
params={{ id: sub.id }}
|
||||
className="font-medium text-ultramarain hover:underline"
|
||||
>
|
||||
{sub.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-mono text-2xs truncate max-w-xs inline-block align-middle">
|
||||
{sub.url}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<ScopeChips scopes={sub.scopeFilter} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{sub.dictionaryFilter && sub.dictionaryFilter.length > 0 ? (
|
||||
<span className="text-2xs text-carbon">
|
||||
{sub.dictionaryFilter.slice(0, 3).join(', ')}
|
||||
{sub.dictionaryFilter.length > 3 && ` +${sub.dictionaryFilter.length - 3}`}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-2xs text-carbon/50">{t('webhooks.allDicts')}</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={sub.active ? 'success' : 'neutral'}>
|
||||
{sub.active ? t('webhooks.active') : t('webhooks.inactive')}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<IconButton
|
||||
label={t('webhooks.action.delete')}
|
||||
variant="danger"
|
||||
icon={<TrashIcon weight="regular" />}
|
||||
onClick={() => handleDelete(sub)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Panel>
|
||||
)}
|
||||
|
||||
<CreateWebhookDialog
|
||||
open={createOpen}
|
||||
onClose={() => setCreateOpen(false)}
|
||||
onSuccess={(sub, secret) => {
|
||||
setCreateOpen(false)
|
||||
setRevealedSecret({ name: sub.name, secret })
|
||||
}}
|
||||
/>
|
||||
|
||||
<SecretRevealModal
|
||||
revealed={revealedSecret}
|
||||
onClose={() => setRevealedSecret(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ScopeChips({ scopes }: { scopes?: DataScope[] | null }) {
|
||||
const { t } = useTranslation()
|
||||
if (!scopes || scopes.length === 0) {
|
||||
return <span className="text-2xs text-carbon/50">{t('webhooks.allScopes')}</span>
|
||||
}
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{scopes.map((s) => (
|
||||
<span
|
||||
key={s}
|
||||
className="inline-flex items-center gap-1 text-2xs uppercase tracking-label"
|
||||
title={s}
|
||||
>
|
||||
<span className={`inline-block size-2 rounded-full ${SCOPE_DOT[s]}`} aria-hidden />
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type CreateDialogProps = {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: (sub: WebhookSubscription, secret: string) => void
|
||||
}
|
||||
|
||||
function CreateWebhookDialog({ open, onClose, onSuccess }: CreateDialogProps) {
|
||||
const { t } = useTranslation()
|
||||
const create = useCreateWebhook()
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [url, setUrl] = useState('')
|
||||
const [scopeFilter, setScopeFilter] = useState<string[]>([])
|
||||
const [dictionaryFilterCsv, setDictionaryFilterCsv] = useState('')
|
||||
const [eventTypeFilterCsv, setEventTypeFilterCsv] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null)
|
||||
|
||||
const reset = () => {
|
||||
setName('')
|
||||
setUrl('')
|
||||
setScopeFilter([])
|
||||
setDictionaryFilterCsv('')
|
||||
setEventTypeFilterCsv('')
|
||||
setDescription('')
|
||||
setErrorMsg(null)
|
||||
}
|
||||
|
||||
const csvToArray = (s: string): string[] | undefined => {
|
||||
const arr = s
|
||||
.split(',')
|
||||
.map((x) => x.trim())
|
||||
.filter(Boolean)
|
||||
return arr.length > 0 ? arr : undefined
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
setErrorMsg(null)
|
||||
if (!name.trim() || !url.trim()) {
|
||||
setErrorMsg(t('webhooks.error.nameUrlRequired'))
|
||||
return
|
||||
}
|
||||
if (!/^https?:\/\//.test(url)) {
|
||||
setErrorMsg(t('webhooks.error.urlScheme'))
|
||||
return
|
||||
}
|
||||
const req: CreateWebhookSubscriptionRequest = {
|
||||
name: name.trim(),
|
||||
url: url.trim(),
|
||||
scopeFilter: scopeFilter.length > 0 ? (scopeFilter as DataScope[]) : undefined,
|
||||
dictionaryFilter: csvToArray(dictionaryFilterCsv),
|
||||
eventTypeFilter: csvToArray(eventTypeFilterCsv),
|
||||
active: true,
|
||||
description: description.trim() || undefined,
|
||||
}
|
||||
create.mutate(req, {
|
||||
onSuccess: (sub) => {
|
||||
const plaintext = sub.hmacSecret
|
||||
reset()
|
||||
onSuccess(sub, plaintext)
|
||||
},
|
||||
onError: (e) => setErrorMsg(String(e)),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={open}
|
||||
onClose={() => {
|
||||
reset()
|
||||
onClose()
|
||||
}}
|
||||
title={t('webhooks.action.create')}
|
||||
maxWidth="max-w-2xl"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<TextInput
|
||||
label={t('webhooks.field.name')}
|
||||
required
|
||||
placeholder="altum-imaging-pull"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label={t('webhooks.field.url')}
|
||||
required
|
||||
placeholder="https://altum.example.com/hooks/ordinis"
|
||||
hint={t('webhooks.field.urlHint')}
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
/>
|
||||
<MultiSelect
|
||||
label={t('webhooks.field.scopeFilter')}
|
||||
options={SCOPE_OPTIONS}
|
||||
value={scopeFilter}
|
||||
onChange={(ids) => setScopeFilter(ids as string[])}
|
||||
hint={t('webhooks.field.scopeFilterHint')}
|
||||
/>
|
||||
<TextInput
|
||||
label={t('webhooks.field.dictionaryFilter')}
|
||||
placeholder="spacecraft, satellite_type"
|
||||
hint={t('webhooks.field.dictionaryFilterHint')}
|
||||
value={dictionaryFilterCsv}
|
||||
onChange={(e) => setDictionaryFilterCsv(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
label={t('webhooks.field.eventTypeFilter')}
|
||||
placeholder="record.created, record.updated"
|
||||
hint={t('webhooks.field.eventTypeFilterHint')}
|
||||
value={eventTypeFilterCsv}
|
||||
onChange={(e) => setEventTypeFilterCsv(e.target.value)}
|
||||
/>
|
||||
<TextArea
|
||||
label={t('webhooks.field.description')}
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
|
||||
{errorMsg && <Alert variant="error">{errorMsg}</Alert>}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
reset()
|
||||
onClose()
|
||||
}}
|
||||
disabled={create.isPending}
|
||||
>
|
||||
{t('form.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
loading={create.isPending}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{t('webhooks.action.create')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
function SecretRevealModal({
|
||||
revealed,
|
||||
onClose,
|
||||
}: {
|
||||
revealed: { name: string; secret: string } | null
|
||||
onClose: () => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
if (!revealed) return null
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard?.writeText(revealed.secret).then(() => {
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
title={t('webhooks.secret.title', { name: revealed.name })}
|
||||
maxWidth="max-w-xl"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Alert variant="warning" title={t('webhooks.secret.warningTitle')}>
|
||||
{t('webhooks.secret.warning')}
|
||||
</Alert>
|
||||
<div className="bg-carbon/5 border border-regolith rounded-md p-3">
|
||||
<code className="font-mono text-2xs break-all">{revealed.secret}</code>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
leftIcon={<CopyIcon weight="bold" size={16} />}
|
||||
onClick={handleCopy}
|
||||
>
|
||||
{copied ? t('webhooks.secret.copied') : t('webhooks.secret.copy')}
|
||||
</Button>
|
||||
<Button variant="primary" onClick={onClose}>
|
||||
{t('webhooks.secret.acknowledge')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute, Outlet } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/webhooks')({
|
||||
component: WebhooksLayout,
|
||||
})
|
||||
|
||||
function WebhooksLayout() {
|
||||
return <Outlet />
|
||||
}
|
||||
Reference in New Issue
Block a user