import { Form, Head, Link } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; import AppLayout from '@/layouts/app-layout'; import { index as integrationsIndex } from '@/routes/admin/integrations'; import { index, store, update, destroy } from '@/routes/admin/integrations/settings'; type Integration = { id: number; key: string; name: string; }; type IntegrationSetting = { id: number; key: string; value: string | null; }; type Props = { integration: Integration; settings: IntegrationSetting[]; }; export default function IntegrationSettings({ integration, settings }: Props) { const [editingId, setEditingId] = useState(null); const [createOpen, setCreateOpen] = useState(false); const breadcrumbs = [ { title: 'Integrations', href: integrationsIndex.url() }, { title: integration.name, href: index.url(integration.id) }, ]; return (

{integration.name} Settings

← Back to integrations
Add setting Add a new key-value setting for {integration.name}.
setCreateOpen(false)} > {({ processing, errors }) => (
{errors.key && (
{errors.key}
)}
{errors.value && (
{errors.value}
)}
)}
{settings.map((setting) => ( ))}
Key Value
{setting.key} {setting.value ?? '—'}
setEditingId(open ? setting.id : null)} > Edit setting Update the {setting.key} setting.
setEditingId(null)} > {({ processing, errors }) => (
{errors.key && (
{errors.key}
)}
{errors.value && (
{errors.value}
)}
)}
{({ processing }) => ( )}
{settings.length === 0 && (
No settings configured yet.
)}
); }