Phase 4: Webhooks, Backup/Restore UI, Onboarding/Tutorial
- Webhooks Backend: model, schema, service (HMAC-SHA256, httpx), routes, event bus dispatcher, migration 0042 - Webhooks Frontend: SettingsWebhooksPage (CRUD, test button, event multi-select), API client - Backup/Restore Backend: model, schema, service (pg_dump/pg_restore), routes (admin-only), migration 0043 - Backup/Restore Frontend: SettingsBackupPage (create, list, restore dialog with RESTORE confirmation, auto-refresh) - Onboarding: OnboardingTour (8 steps, custom CSS overlay), WelcomeDialog, onboardingStore (zustand + localStorage) - Onboarding integrated into AppShell - Routes: /settings/webhooks, /settings/backup registered - Settings nav: Webhooks, Backup & Restore entries added - Migration conflict fixed: 0042_webhooks → 0043_backups chain
This commit is contained in:
Agent Zero
@@ -0,0 +1,628 @@
|
||||
/**
|
||||
* SettingsWebhooks page — Webhook management.
|
||||
*
|
||||
* Features:
|
||||
* - Table listing all webhooks with URL, events, status toggle, test/edit/delete buttons
|
||||
* - Create/edit modal: URL, events (multi-select checkboxes), secret, retry_count, timeout
|
||||
* - Test button sends test payload, shows result
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import clsx from 'clsx';
|
||||
import { Plus, Pencil, Trash2, AlertTriangle, Send, Webhook as WebhookIcon, CheckCircle, XCircle } from 'lucide-react';
|
||||
import {
|
||||
fetchWebhooks,
|
||||
createWebhook,
|
||||
updateWebhook,
|
||||
deleteWebhook,
|
||||
testWebhook,
|
||||
useWebhooks,
|
||||
useCreateWebhook,
|
||||
useUpdateWebhook,
|
||||
useDeleteWebhook,
|
||||
useTestWebhook,
|
||||
type Webhook,
|
||||
type CreateWebhookPayload,
|
||||
type UpdateWebhookPayload,
|
||||
type WebhookTestResult,
|
||||
} from '@/api/webhooks';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
|
||||
// ─── Available Events ───────────────────────────────────────────────────────
|
||||
|
||||
const AVAILABLE_EVENTS = [
|
||||
'contact.created',
|
||||
'contact.updated',
|
||||
'contact.deleted',
|
||||
'company.created',
|
||||
'company.updated',
|
||||
'company.deleted',
|
||||
'user.created',
|
||||
'user.updated',
|
||||
'deal.created',
|
||||
'deal.updated',
|
||||
'deal.deleted',
|
||||
'task.created',
|
||||
'task.updated',
|
||||
'task.deleted',
|
||||
'note.created',
|
||||
'note.updated',
|
||||
'note.deleted',
|
||||
];
|
||||
|
||||
// ─── Webhook Form Modal (shared for create & edit) ───────────────────────────
|
||||
|
||||
interface WebhookFormModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
webhook?: Webhook | null;
|
||||
onSubmit: (data: CreateWebhookPayload | UpdateWebhookPayload) => void;
|
||||
isSubmitting: boolean;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
function WebhookFormModal({ open, onClose, webhook, onSubmit, isSubmitting, error }: WebhookFormModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const isEdit = !!webhook;
|
||||
|
||||
const [url, setUrl] = useState(webhook?.url ?? '');
|
||||
const [events, setEvents] = useState<string[]>(webhook?.events ?? []);
|
||||
const [secret, setSecret] = useState(webhook?.secret ?? '');
|
||||
const [retryCount, setRetryCount] = useState(webhook?.retry_count ?? 3);
|
||||
const [timeoutSeconds, setTimeoutSeconds] = useState(webhook?.timeout_seconds ?? 30);
|
||||
|
||||
// Reset form when modal opens or webhook changes
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setUrl(webhook?.url ?? '');
|
||||
setEvents(webhook?.events ?? []);
|
||||
setSecret(webhook?.secret ?? '');
|
||||
setRetryCount(webhook?.retry_count ?? 3);
|
||||
setTimeoutSeconds(webhook?.timeout_seconds ?? 30);
|
||||
}
|
||||
}, [open, webhook]);
|
||||
|
||||
const toggleEvent = useCallback((event: string) => {
|
||||
setEvents((prev) =>
|
||||
prev.includes(event)
|
||||
? prev.filter((e) => e !== event)
|
||||
: [...prev, event]
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const trimmedUrl = url.trim();
|
||||
if (!trimmedUrl || events.length === 0) return;
|
||||
const data: CreateWebhookPayload | UpdateWebhookPayload = {
|
||||
url: trimmedUrl,
|
||||
events,
|
||||
secret: secret.trim() || null,
|
||||
retry_count: retryCount,
|
||||
timeout_seconds: timeoutSeconds,
|
||||
};
|
||||
if (!isEdit) {
|
||||
(data as CreateWebhookPayload).is_active = true;
|
||||
}
|
||||
onSubmit(data);
|
||||
},
|
||||
[url, events, secret, retryCount, timeoutSeconds, isEdit, onSubmit]
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={isEdit ? t('webhooks.editTitle', 'Webhook bearbeiten') : t('webhooks.createTitle', 'Neuer Webhook')}
|
||||
size="lg"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* URL */}
|
||||
<Input
|
||||
label={t('webhooks.url', 'URL')}
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
required
|
||||
placeholder={t('webhooks.urlPlaceholder', 'https://example.com/webhook')}
|
||||
autoFocus
|
||||
data-testid="webhook-form-url"
|
||||
/>
|
||||
|
||||
{/* Events multi-select */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1.5">
|
||||
{t('webhooks.events', 'Events')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto border border-secondary-200 rounded-md p-2">
|
||||
{AVAILABLE_EVENTS.map((event) => (
|
||||
<label
|
||||
key={event}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer text-sm',
|
||||
'hover:bg-secondary-50 transition-colors',
|
||||
events.includes(event) ? 'bg-primary-50 text-primary-700' : 'text-secondary-700'
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={events.includes(event)}
|
||||
onChange={() => toggleEvent(event)}
|
||||
className="rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||||
/>
|
||||
<span>{event}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{events.length === 0 && (
|
||||
<p className="text-xs text-danger-600 mt-1">
|
||||
{t('webhooks.eventsRequired', 'Mindestens ein Event erforderlich')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Secret */}
|
||||
<Input
|
||||
label={t('webhooks.secret', 'Secret (optional)')}
|
||||
value={secret}
|
||||
onChange={(e) => setSecret(e.target.value)}
|
||||
placeholder={t('webhooks.secretPlaceholder', 'HMAC-Signing Secret')}
|
||||
type="password"
|
||||
data-testid="webhook-form-secret"
|
||||
/>
|
||||
|
||||
{/* Retry Count & Timeout */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
label={t('webhooks.retryCount', 'Retry Count')}
|
||||
value={String(retryCount)}
|
||||
onChange={(e) => setRetryCount(parseInt(e.target.value) || 3)}
|
||||
type="number"
|
||||
min={0}
|
||||
max={10}
|
||||
data-testid="webhook-form-retry"
|
||||
/>
|
||||
<Input
|
||||
label={t('webhooks.timeout', 'Timeout (s)')}
|
||||
value={String(timeoutSeconds)}
|
||||
onChange={(e) => setTimeoutSeconds(parseInt(e.target.value) || 30)}
|
||||
type="number"
|
||||
min={1}
|
||||
max={120}
|
||||
data-testid="webhook-form-timeout"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="rounded-md bg-danger-50 border border-danger-200 px-3 py-2 text-sm text-danger-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
{t('common.cancel', 'Abbrechen')}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
isLoading={isSubmitting}
|
||||
disabled={!url.trim() || events.length === 0}
|
||||
icon={<Plus className="h-4 w-4" />}
|
||||
data-testid="webhook-form-submit"
|
||||
>
|
||||
{isEdit ? t('common.save', 'Speichern') : t('webhooks.create', 'Erstellen')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Delete Confirmation Modal ──────────────────────────────────────────────
|
||||
|
||||
interface DeleteModalProps {
|
||||
open: boolean;
|
||||
webhook: Webhook | null;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
isDeleting: boolean;
|
||||
}
|
||||
|
||||
function DeleteModal({ open, webhook, onConfirm, onCancel, isDeleting }: DeleteModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onCancel} title={t('webhooks.deleteTitle', 'Webhook löschen')} size="sm">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 rounded-full bg-danger-100 p-2">
|
||||
<AlertTriangle className="h-5 w-5 text-danger-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-secondary-700">
|
||||
{t('webhooks.deleteConfirm', 'Möchten Sie den Webhook')}{' '}
|
||||
<span className="font-semibold text-secondary-900 break-all">{webhook?.url}</span>{' '}
|
||||
{t('webhooks.deleteConfirmEnd', 'wirklich löschen?')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="ghost" onClick={onCancel} disabled={isDeleting}>
|
||||
{t('common.cancel', 'Abbrechen')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="danger"
|
||||
onClick={onConfirm}
|
||||
isLoading={isDeleting}
|
||||
data-testid="webhook-delete-confirm"
|
||||
>
|
||||
{t('webhooks.delete', 'Löschen')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Test Result Modal ──────────────────────────────────────────────────────
|
||||
|
||||
interface TestResultModalProps {
|
||||
open: boolean;
|
||||
result: WebhookTestResult | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function TestResultModal({ open, result, onClose }: TestResultModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={t('webhooks.testResult', 'Test-Ergebnis')} size="sm">
|
||||
<div className="space-y-4">
|
||||
<div className={clsx(
|
||||
'flex items-start gap-3',
|
||||
result.success ? 'text-success-700' : 'text-danger-700'
|
||||
)}>
|
||||
<div className={clsx(
|
||||
'flex-shrink-0 rounded-full p-2',
|
||||
result.success ? 'bg-success-100' : 'bg-danger-100'
|
||||
)}>
|
||||
{result.success
|
||||
? <CheckCircle className="h-5 w-5" aria-hidden="true" />
|
||||
: <XCircle className="h-5 w-5" aria-hidden="true" />
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
{result.success
|
||||
? t('webhooks.testSuccess', 'Webhook erfolgreich gesendet')
|
||||
: t('webhooks.testFailed', 'Webhook fehlgeschlagen')
|
||||
}
|
||||
</p>
|
||||
{result.status_code && (
|
||||
<p className="text-sm mt-1">
|
||||
{t('webhooks.statusCode', 'Status-Code')}: {result.status_code}
|
||||
</p>
|
||||
)}
|
||||
{result.error && (
|
||||
<p className="text-sm mt-1">
|
||||
{t('webhooks.error', 'Fehler')}: {result.error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end pt-2">
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
{t('common.close', 'Schließen')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page Component ─────────────────────────────────────────────────────
|
||||
|
||||
export function SettingsWebhooksPage() {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: webhooks = [], isLoading, error } = useWebhooks();
|
||||
const createMutation = useCreateWebhook();
|
||||
const updateMutation = useUpdateWebhook();
|
||||
const deleteMutation = useDeleteWebhook();
|
||||
const testMutation = useTestWebhook();
|
||||
|
||||
// Modal state
|
||||
const [formModalOpen, setFormModalOpen] = useState(false);
|
||||
const [editingWebhook, setEditingWebhook] = useState<Webhook | null>(null);
|
||||
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
|
||||
const [deletingWebhook, setDeletingWebhook] = useState<Webhook | null>(null);
|
||||
const [testResultModalOpen, setTestResultModalOpen] = useState(false);
|
||||
const [testResult, setTestResult] = useState<WebhookTestResult | null>(null);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
|
||||
// Handlers
|
||||
const handleCreate = useCallback(() => {
|
||||
setEditingWebhook(null);
|
||||
setFormError(null);
|
||||
setFormModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleEdit = useCallback((webhook: Webhook) => {
|
||||
setEditingWebhook(webhook);
|
||||
setFormError(null);
|
||||
setFormModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleFormSubmit = useCallback(
|
||||
(data: CreateWebhookPayload | UpdateWebhookPayload) => {
|
||||
setFormError(null);
|
||||
if (editingWebhook) {
|
||||
updateMutation.mutate(
|
||||
{ id: editingWebhook.id, data: data as UpdateWebhookPayload },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setFormModalOpen(false);
|
||||
setEditingWebhook(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
setFormError(err?.message || t('webhooks.updateError', 'Fehler beim Aktualisieren'));
|
||||
},
|
||||
}
|
||||
);
|
||||
} else {
|
||||
createMutation.mutate(data as CreateWebhookPayload, {
|
||||
onSuccess: () => {
|
||||
setFormModalOpen(false);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
setFormError(err?.message || t('webhooks.createError', 'Fehler beim Erstellen'));
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
[editingWebhook, createMutation, updateMutation, t]
|
||||
);
|
||||
|
||||
const handleDeleteClick = useCallback((webhook: Webhook) => {
|
||||
setDeletingWebhook(webhook);
|
||||
setDeleteModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleDeleteConfirm = useCallback(() => {
|
||||
if (!deletingWebhook) return;
|
||||
deleteMutation.mutate(deletingWebhook.id, {
|
||||
onSuccess: () => {
|
||||
setDeleteModalOpen(false);
|
||||
setDeletingWebhook(null);
|
||||
},
|
||||
});
|
||||
}, [deletingWebhook, deleteMutation]);
|
||||
|
||||
const handleTest = useCallback(
|
||||
(webhook: Webhook) => {
|
||||
testMutation.mutate(webhook.id, {
|
||||
onSuccess: (result) => {
|
||||
setTestResult(result);
|
||||
setTestResultModalOpen(true);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
setTestResult({ success: false, status_code: null, error: err?.message || 'Unknown error' });
|
||||
setTestResultModalOpen(true);
|
||||
},
|
||||
});
|
||||
},
|
||||
[testMutation]
|
||||
);
|
||||
|
||||
const handleToggleActive = useCallback(
|
||||
(webhook: Webhook) => {
|
||||
updateMutation.mutate({
|
||||
id: webhook.id,
|
||||
data: { is_active: !webhook.is_active },
|
||||
});
|
||||
},
|
||||
[updateMutation]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-secondary-900">
|
||||
{t('webhooks.title', 'Webhooks')}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-secondary-500">
|
||||
{t('webhooks.description', 'Verwalten Sie ausgehende Webhook-Abonnements für Ereignisbenachrichtigungen')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleCreate}
|
||||
icon={<Plus className="h-4 w-4" />}
|
||||
data-testid="webhook-create-btn"
|
||||
>
|
||||
{t('webhooks.add', '+ Neuer Webhook')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<Card>
|
||||
<div className="p-4 text-center text-danger-600">
|
||||
{t('webhooks.loadError', 'Fehler beim Laden der Webhooks')}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && !error && webhooks.length === 0 && (
|
||||
<Card>
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<WebhookIcon className="h-12 w-12 text-secondary-300 mb-4" />
|
||||
<h3 className="text-lg font-medium text-secondary-900">
|
||||
{t('webhooks.noWebhooks', 'Keine Webhooks')}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-secondary-500 max-w-sm">
|
||||
{t('webhooks.noWebhooksDesc', 'Erstellen Sie Ihren ersten Webhook, um Ereignisbenachrichtigungen an externe Dienste zu senden.')}
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="mt-4"
|
||||
onClick={handleCreate}
|
||||
icon={<Plus className="h-4 w-4" />}
|
||||
>
|
||||
{t('webhooks.createFirst', 'Ersten Webhook erstellen')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Webhook list */}
|
||||
{!isLoading && !error && webhooks.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{webhooks.map((webhook) => (
|
||||
<Card key={webhook.id}>
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={clsx(
|
||||
'inline-block w-2 h-2 rounded-full',
|
||||
webhook.is_active ? 'bg-success-500' : 'bg-secondary-300'
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="text-sm font-medium text-secondary-900 break-all">
|
||||
{webhook.url}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap gap-1.5">
|
||||
{webhook.events.slice(0, 5).map((event) => (
|
||||
<span
|
||||
key={event}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-50 text-primary-700"
|
||||
>
|
||||
{event}
|
||||
</span>
|
||||
))}
|
||||
{webhook.events.length > 5 && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-600">
|
||||
+{webhook.events.length - 5}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-secondary-400">
|
||||
{t('webhooks.retryCount', 'Retries')}: {webhook.retry_count} |{' '}
|
||||
{t('webhooks.timeout', 'Timeout')}: {webhook.timeout_seconds}s
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 ml-4 flex-shrink-0">
|
||||
{/* Toggle active */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggleActive(webhook)}
|
||||
className={clsx(
|
||||
'relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',
|
||||
webhook.is_active ? 'bg-success-500' : 'bg-secondary-200'
|
||||
)}
|
||||
role="switch"
|
||||
aria-checked={webhook.is_active}
|
||||
aria-label={t('webhooks.toggleActive', 'Aktiv/Inaktiv umschalten')}
|
||||
>
|
||||
<span
|
||||
className={clsx(
|
||||
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
|
||||
webhook.is_active ? 'translate-x-4' : 'translate-x-0'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Test */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTest(webhook)}
|
||||
className="p-1.5 rounded-md text-secondary-400 hover:text-primary-600 hover:bg-primary-50 transition-colors"
|
||||
title={t('webhooks.test', 'Testen')}
|
||||
data-testid="webhook-test-btn"
|
||||
>
|
||||
<Send className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* Edit */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleEdit(webhook)}
|
||||
className="p-1.5 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 transition-colors"
|
||||
title={t('common.edit', 'Bearbeiten')}
|
||||
data-testid="webhook-edit-btn"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
{/* Delete */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDeleteClick(webhook)}
|
||||
className="p-1.5 rounded-md text-secondary-400 hover:text-danger-600 hover:bg-danger-50 transition-colors"
|
||||
title={t('common.delete', 'Löschen')}
|
||||
data-testid="webhook-delete-btn"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<WebhookFormModal
|
||||
open={formModalOpen}
|
||||
onClose={() => { setFormModalOpen(false); setEditingWebhook(null); setFormError(null); }}
|
||||
webhook={editingWebhook}
|
||||
onSubmit={handleFormSubmit}
|
||||
isSubmitting={createMutation.isPending || updateMutation.isPending}
|
||||
error={formError}
|
||||
/>
|
||||
|
||||
<DeleteModal
|
||||
open={deleteModalOpen}
|
||||
webhook={deletingWebhook}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
onCancel={() => { setDeleteModalOpen(false); setDeletingWebhook(null); }}
|
||||
isDeleting={deleteMutation.isPending}
|
||||
/>
|
||||
|
||||
<TestResultModal
|
||||
open={testResultModalOpen}
|
||||
result={testResult}
|
||||
onClose={() => { setTestResultModalOpen(false); setTestResult(null); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsWebhooksPage;
|
||||
Reference in New Issue
Block a user