Wire Settings Integrations to real backend API
Replaces mock integration data in Settings.tsx with live calls to api.listIntegrations/createIntegration/updateIntegration/testIntegration. Also fixes apiFetch sending Content-Type: application/json on bodyless requests, which made Fastify reject Test Connection calls with 400. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude
parent
e2793b06fe
commit
5c1fc911c9
2 changed files with 180 additions and 68 deletions
|
|
@ -20,7 +20,7 @@ export class ApiError extends Error {
|
|||
export async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
|
||||
const token = getToken()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.body ? { 'Content-Type': 'application/json' } : {}),
|
||||
...(options.headers as Record<string, string> | undefined),
|
||||
}
|
||||
if (token) headers.Authorization = `Bearer ${token}`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useRef, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { api, ApiError, type Integration } from '../lib/api'
|
||||
import {
|
||||
User,
|
||||
Palette,
|
||||
|
|
@ -34,16 +35,16 @@ const accentColors = [
|
|||
{ name: 'Red', color: '#E74C3C' },
|
||||
]
|
||||
|
||||
type IntegrationField = { label: string; value: string; secret?: boolean }
|
||||
type FieldDef = { key: string; label: string; secret?: boolean }
|
||||
|
||||
const integrations: { name: string; online: boolean; fields: IntegrationField[] }[] = [
|
||||
{ name: 'Proxmox', online: true, fields: [{ label: 'Host URL', value: 'https://pve1.local:8006' }, { label: 'API Token', value: '••••••••••••', secret: true }] },
|
||||
{ name: 'Docker', online: true, fields: [{ label: 'Socket / Remote URL', value: 'unix:///var/run/docker.sock' }] },
|
||||
{ name: 'NetBird', online: true, fields: [{ label: 'API Key', value: '••••••••••••', secret: true }] },
|
||||
{ name: 'Cloudflare', online: true, fields: [{ label: 'API Token', value: '••••••••••••', secret: true }, { label: 'Zone ID', value: 'a1b2c3d4e5f6' }] },
|
||||
{ name: 'AWS', online: true, fields: [{ label: 'Access Key', value: 'AKIA••••••••' }, { label: 'Secret', value: '••••••••••••', secret: true }, { label: 'Region', value: 'us-east-1' }] },
|
||||
{ name: 'Uptime Kuma', online: false, fields: [{ label: 'URL', value: '' }, { label: 'API Key', value: '', secret: true }] },
|
||||
{ name: 'Weather API', online: true, fields: [{ label: 'Location', value: 'Charlotte, NC' }, { label: 'Units', value: 'Imperial' }] },
|
||||
const integrationTypeDefs: { type: string; name: string; fields: FieldDef[] }[] = [
|
||||
{ type: 'proxmox', name: 'Proxmox', fields: [{ key: 'baseUrl', label: 'Host URL' }, { key: 'apiKey', label: 'API Token', secret: true }] },
|
||||
{ type: 'docker', name: 'Docker', fields: [{ key: 'baseUrl', label: 'Socket / Remote URL' }] },
|
||||
{ type: 'netbird', name: 'NetBird', fields: [{ key: 'apiKey', label: 'API Key', secret: true }] },
|
||||
{ type: 'cloudflare', name: 'Cloudflare', fields: [{ key: 'apiKey', label: 'API Token', secret: true }, { key: 'zoneId', label: 'Zone ID' }] },
|
||||
{ type: 'aws', name: 'AWS', fields: [{ key: 'accessKey', label: 'Access Key' }, { key: 'secretKey', label: 'Secret', secret: true }, { key: 'region', label: 'Region' }] },
|
||||
{ type: 'uptime_kuma', name: 'Uptime Kuma', fields: [{ key: 'baseUrl', label: 'URL' }, { key: 'apiKey', label: 'API Key', secret: true }] },
|
||||
{ type: 'weather', name: 'Weather API', fields: [{ key: 'location', label: 'Location' }, { key: 'units', label: 'Units' }] },
|
||||
]
|
||||
|
||||
const cardBase: React.CSSProperties = {
|
||||
|
|
@ -315,7 +316,15 @@ function AppearanceSection() {
|
|||
}
|
||||
|
||||
function IntegrationsSection() {
|
||||
const [integrations, setIntegrations] = useState<Integration[] | null>(null)
|
||||
const [revealed, setRevealed] = useState<Set<string>>(new Set())
|
||||
const [drafts, setDrafts] = useState<Record<string, Record<string, string>>>({})
|
||||
const [statusMsg, setStatusMsg] = useState<Record<string, string>>({})
|
||||
const [busy, setBusy] = useState<Set<string>>(new Set())
|
||||
|
||||
useEffect(() => {
|
||||
api.listIntegrations().then(({ integrations }) => setIntegrations(integrations))
|
||||
}, [])
|
||||
|
||||
function toggleReveal(key: string) {
|
||||
setRevealed((prev) => {
|
||||
|
|
@ -326,68 +335,171 @@ function IntegrationsSection() {
|
|||
})
|
||||
}
|
||||
|
||||
function setBusyFlag(type: string, value: boolean) {
|
||||
setBusy((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (value) next.add(type)
|
||||
else next.delete(type)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function setDraftField(type: string, fieldKey: string, value: string) {
|
||||
setDrafts((prev) => ({ ...prev, [type]: { ...prev[type], [fieldKey]: value } }))
|
||||
}
|
||||
|
||||
async function handleSave(def: (typeof integrationTypeDefs)[number], existing: Integration | undefined) {
|
||||
setBusyFlag(def.type, true)
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: '' }))
|
||||
try {
|
||||
const draft = drafts[def.type] ?? {}
|
||||
const config: Record<string, string> = {}
|
||||
const secrets: Record<string, string> = {}
|
||||
for (const f of def.fields) {
|
||||
const value = draft[f.key]
|
||||
if (value === undefined) continue
|
||||
if (f.secret) secrets[f.key] = value
|
||||
else config[f.key] = value
|
||||
}
|
||||
let integration: Integration
|
||||
if (existing) {
|
||||
;({ integration } = await api.updateIntegration(existing.id, { config, secrets }))
|
||||
} else {
|
||||
;({ integration } = await api.createIntegration({ type: def.type, name: def.name, config, secrets }))
|
||||
}
|
||||
setIntegrations((prev) => {
|
||||
const others = (prev ?? []).filter((i) => i.id !== integration.id)
|
||||
return [...others, integration]
|
||||
})
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: 'Saved' }))
|
||||
} catch (err) {
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: err instanceof ApiError ? err.message : 'Save failed' }))
|
||||
} finally {
|
||||
setBusyFlag(def.type, false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTest(def: (typeof integrationTypeDefs)[number], existing: Integration | undefined) {
|
||||
if (!existing) {
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: 'Save the integration before testing' }))
|
||||
return
|
||||
}
|
||||
setBusyFlag(def.type, true)
|
||||
try {
|
||||
const result = await api.testIntegration(existing.id)
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: result.message }))
|
||||
const { integrations } = await api.listIntegrations()
|
||||
setIntegrations(integrations)
|
||||
} catch (err) {
|
||||
setStatusMsg((prev) => ({ ...prev, [def.type]: err instanceof ApiError ? err.message : 'Test failed' }))
|
||||
} finally {
|
||||
setBusyFlag(def.type, false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!integrations) {
|
||||
return (
|
||||
<div style={cardBase}>
|
||||
<p style={{ fontSize: '12px', color: '#7A7D85' }}>Loading integrations…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{integrations.map((integ) => (
|
||||
<div key={integ.name} style={cardBase}>
|
||||
<div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: integ.online ? '#2ECC71' : '#4A4D55',
|
||||
boxShadow: integ.online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{integ.name}</span>
|
||||
{integrationTypeDefs.map((def) => {
|
||||
const existing = integrations.find((i) => i.type === def.type)
|
||||
const online = existing?.status === 'connected'
|
||||
const draft = drafts[def.type] ?? {}
|
||||
|
||||
return (
|
||||
<div key={def.type} style={cardBase}>
|
||||
<div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: online ? '#2ECC71' : '#4A4D55',
|
||||
boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{def.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{statusMsg[def.type] && (
|
||||
<span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[def.type]}</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleSave(def, existing)}
|
||||
disabled={busy.has(def.type)}
|
||||
className="cursor-pointer border-none"
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
color: '#0A0B0D',
|
||||
backgroundColor: '#C8A434',
|
||||
borderRadius: '6px',
|
||||
padding: '6px 12px',
|
||||
opacity: busy.has(def.type) ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTest(def, existing)}
|
||||
disabled={busy.has(def.type)}
|
||||
className="cursor-pointer border-none"
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
color: '#C8A434',
|
||||
backgroundColor: 'rgba(200,164,52,0.08)',
|
||||
border: '1px solid rgba(200,164,52,0.2)',
|
||||
borderRadius: '6px',
|
||||
padding: '6px 12px',
|
||||
opacity: busy.has(def.type) ? 0.6 : 1,
|
||||
}}
|
||||
>
|
||||
Test Connection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="cursor-pointer border-none"
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
color: '#C8A434',
|
||||
backgroundColor: 'rgba(200,164,52,0.08)',
|
||||
border: '1px solid rgba(200,164,52,0.2)',
|
||||
borderRadius: '6px',
|
||||
padding: '6px 12px',
|
||||
}}
|
||||
>
|
||||
Test Connection
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{integ.fields.map((f) => {
|
||||
const key = `${integ.name}-${f.label}`
|
||||
const isRevealed = revealed.has(key)
|
||||
return (
|
||||
<div key={key}>
|
||||
<label style={labelStyle}>{f.label}</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
style={inputStyle}
|
||||
type={f.secret && !isRevealed ? 'password' : 'text'}
|
||||
defaultValue={f.value}
|
||||
placeholder={f.value ? undefined : 'Not configured'}
|
||||
/>
|
||||
{f.secret && (
|
||||
<button
|
||||
onClick={() => toggleReveal(key)}
|
||||
className="absolute cursor-pointer border-none bg-transparent"
|
||||
style={{ right: '8px', top: '50%', transform: 'translateY(-50%)', color: '#7A7D85' }}
|
||||
>
|
||||
{isRevealed ? <EyeOff size={13} /> : <Eye size={13} />}
|
||||
</button>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{def.fields.map((f) => {
|
||||
const key = `${def.type}-${f.key}`
|
||||
const isRevealed = revealed.has(key)
|
||||
const savedValue = f.secret ? '' : existing?.config[f.key] ?? ''
|
||||
const value = draft[f.key] ?? savedValue
|
||||
return (
|
||||
<div key={key}>
|
||||
<label style={labelStyle}>{f.label}</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
style={inputStyle}
|
||||
type={f.secret && !isRevealed ? 'password' : 'text'}
|
||||
value={value}
|
||||
onChange={(e) => setDraftField(def.type, f.key, e.target.value)}
|
||||
placeholder={f.secret && existing ? '••••••••••••' : 'Not configured'}
|
||||
/>
|
||||
{f.secret && (
|
||||
<button
|
||||
onClick={() => toggleReveal(key)}
|
||||
className="absolute cursor-pointer border-none bg-transparent"
|
||||
style={{ right: '8px', top: '50%', transform: 'translateY(-50%)', color: '#7A7D85' }}
|
||||
>
|
||||
{isRevealed ? <EyeOff size={13} /> : <Eye size={13} />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue