tliu93
ef2bd3c9c5
- GET /api/config renders sections; secret fields shown as empty password inputs - save handles full-field submission semantics: always send non-secret values, send secret only when user typed a new value (blank secret keeps old) - SMTP test button reflects tri-state (success / config-error 400 / failed 502) by reading ApiError.body.result - typed client only; responsive Mantine layout; vitest tests
399 lines
12 KiB
TypeScript
399 lines
12 KiB
TypeScript
/**
|
|
* ConfigPage — config editor (M2-T08).
|
|
*
|
|
* Behaviours:
|
|
* 1. Load config: GET /api/config → render sections (grouped) with Mantine inputs.
|
|
* - Non-secret fields show their value.
|
|
* - Secret fields render as empty PasswordInput (never show a masked value).
|
|
* 2. Save config: PUT /api/config with full-field submission semantics.
|
|
* - All non-secret fields are ALWAYS included (to avoid backend zeroing absent fields).
|
|
* - Secret fields are included ONLY when the user typed a new (non-empty) value.
|
|
* - On success: show a success notice and refetch config.
|
|
* - On ApiError 422: show an error notice, nothing was written.
|
|
* 3. SMTP test button: POST /api/config/smtp/test.
|
|
* - Tri-state: success / config-error / failed.
|
|
* - Errors read `err.body.result` from ApiError.
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import {
|
|
Container,
|
|
Title,
|
|
Text,
|
|
TextInput,
|
|
PasswordInput,
|
|
Button,
|
|
Alert,
|
|
Stack,
|
|
Group,
|
|
Divider,
|
|
Loader,
|
|
Center,
|
|
Paper,
|
|
Badge,
|
|
} from '@mantine/core'
|
|
import apiClient, { ApiError } from '../api/client'
|
|
import type { components } from '../api/schema.d.ts'
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
|
|
type ConfigField = components['schemas']['ConfigField']
|
|
type ConfigSection = components['schemas']['ConfigSection']
|
|
|
|
/** SMTP test result tri-state. */
|
|
type SmtpResult =
|
|
| { kind: 'success'; message: string }
|
|
| { kind: 'config-error'; message: string }
|
|
| { kind: 'failed'; message: string }
|
|
| null
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Hook: load config
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function useConfig() {
|
|
return useQuery({
|
|
queryKey: ['config'],
|
|
queryFn: async () => {
|
|
const res = await apiClient.GET('/api/config')
|
|
return res.data
|
|
},
|
|
})
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helper: build updates map for PUT /api/config
|
|
//
|
|
// Full-field submission semantics (§6):
|
|
// - Non-secret fields: ALWAYS include current value (even if unchanged) so
|
|
// the backend does not zero out absent fields.
|
|
// - Secret fields: include ONLY when the user typed a non-empty value.
|
|
// Blank secret = keep old value; sending blank would also keep it per
|
|
// backend semantics, but we omit it to be explicit and avoid confusion.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function buildUpdates(
|
|
sections: ConfigSection[],
|
|
localValues: Record<string, string>,
|
|
): Record<string, string> {
|
|
const updates: Record<string, string> = {}
|
|
|
|
for (const section of sections) {
|
|
for (const field of section.fields) {
|
|
const localVal = localValues[field.env_name] ?? ''
|
|
if (field.secret) {
|
|
// Only include secret if the user typed something (non-empty).
|
|
if (localVal !== '') {
|
|
updates[field.env_name] = localVal
|
|
}
|
|
// blank secret → omit → backend keeps the existing stored value
|
|
} else {
|
|
// Non-secret: always include current local value.
|
|
updates[field.env_name] = localVal
|
|
}
|
|
}
|
|
}
|
|
|
|
return updates
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// ConfigFieldInput — renders a single config field
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface ConfigFieldInputProps {
|
|
field: ConfigField
|
|
value: string
|
|
onChange: (envName: string, value: string) => void
|
|
}
|
|
|
|
function ConfigFieldInput({ field, value, onChange }: ConfigFieldInputProps) {
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onChange(field.env_name, e.currentTarget.value)
|
|
}
|
|
|
|
if (field.secret) {
|
|
return (
|
|
<PasswordInput
|
|
label={field.label}
|
|
placeholder={field.configured ? '(configured — leave blank to keep)' : 'Enter value'}
|
|
value={value}
|
|
onChange={handleChange}
|
|
data-testid={`field-secret-${field.env_name}`}
|
|
autoComplete="off"
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (field.input_type === 'number') {
|
|
return (
|
|
<TextInput
|
|
label={field.label}
|
|
type="number"
|
|
value={value}
|
|
onChange={handleChange}
|
|
data-testid={`field-${field.env_name}`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<TextInput
|
|
label={field.label}
|
|
type={field.input_type === 'email' ? 'email' : 'text'}
|
|
value={value}
|
|
onChange={handleChange}
|
|
data-testid={`field-${field.env_name}`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// ConfigSectionPanel — one section
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface ConfigSectionPanelProps {
|
|
section: ConfigSection
|
|
localValues: Record<string, string>
|
|
onChange: (envName: string, value: string) => void
|
|
}
|
|
|
|
function ConfigSectionPanel({ section, localValues, onChange }: ConfigSectionPanelProps) {
|
|
return (
|
|
<Paper withBorder p="md" radius="md">
|
|
<Title order={4} mb="md">
|
|
{section.name}
|
|
</Title>
|
|
<Stack gap="sm">
|
|
{section.fields.map((field) => (
|
|
<ConfigFieldInput
|
|
key={field.env_name}
|
|
field={field}
|
|
value={localValues[field.env_name] ?? ''}
|
|
onChange={onChange}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// SmtpTestButton — sends POST /api/config/smtp/test and displays tri-state result
|
|
// ---------------------------------------------------------------------------
|
|
|
|
interface SmtpTestButtonProps {
|
|
smtpResult: SmtpResult
|
|
setSmtpResult: (r: SmtpResult) => void
|
|
}
|
|
|
|
function SmtpTestButton({ smtpResult, setSmtpResult }: SmtpTestButtonProps) {
|
|
const [testing, setTesting] = useState(false)
|
|
|
|
async function handleTest() {
|
|
setSmtpResult(null)
|
|
setTesting(true)
|
|
try {
|
|
const res = await apiClient.POST('/api/config/smtp/test')
|
|
if (res.data) {
|
|
setSmtpResult({ kind: 'success', message: res.data.message })
|
|
}
|
|
} catch (err) {
|
|
if (err instanceof ApiError) {
|
|
const body = err.body as { result?: string; message?: string } | null
|
|
const result = body?.result
|
|
const message = body?.message ?? 'Unknown error'
|
|
if (result === 'config-error') {
|
|
setSmtpResult({ kind: 'config-error', message })
|
|
} else {
|
|
// result === 'failed' or any other error
|
|
setSmtpResult({ kind: 'failed', message })
|
|
}
|
|
} else {
|
|
setSmtpResult({ kind: 'failed', message: 'Unexpected error sending test email.' })
|
|
}
|
|
} finally {
|
|
setTesting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Stack gap="xs">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleTest}
|
|
loading={testing}
|
|
data-testid="smtp-test-button"
|
|
>
|
|
Send Test Email
|
|
</Button>
|
|
|
|
{smtpResult?.kind === 'success' && (
|
|
<Alert color="green" data-testid="smtp-result-success">
|
|
Test email sent successfully. {smtpResult.message}
|
|
</Alert>
|
|
)}
|
|
{smtpResult?.kind === 'config-error' && (
|
|
<Alert color="orange" data-testid="smtp-result-config-error">
|
|
SMTP configuration error — check your SMTP settings. {smtpResult.message}
|
|
</Alert>
|
|
)}
|
|
{smtpResult?.kind === 'failed' && (
|
|
<Alert color="red" data-testid="smtp-result-failed">
|
|
Test email send failed. {smtpResult.message}
|
|
</Alert>
|
|
)}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// ConfigPage — main component
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export function ConfigPage() {
|
|
const queryClient = useQueryClient()
|
|
const { data, isLoading, isError } = useConfig()
|
|
|
|
// Local field values — mirrors the loaded config but allows user edits.
|
|
// Secret fields always start as empty string (never display masked values).
|
|
const [localValues, setLocalValues] = useState<Record<string, string>>({})
|
|
const [valuesInitialized, setValuesInitialized] = useState(false)
|
|
|
|
// Initialise local state once when data arrives (or re-arrives after refetch).
|
|
if (data && !valuesInitialized) {
|
|
const initial: Record<string, string> = {}
|
|
for (const section of data.sections) {
|
|
for (const field of section.fields) {
|
|
// Secret fields start empty (never display the masked/empty backend value).
|
|
initial[field.env_name] = field.secret ? '' : (field.value ?? '')
|
|
}
|
|
}
|
|
setLocalValues(initial)
|
|
setValuesInitialized(true)
|
|
}
|
|
|
|
// Save notice state
|
|
const [saveStatus, setSaveStatus] = useState<'success' | 'error' | null>(null)
|
|
|
|
// SMTP test tri-state
|
|
const [smtpResult, setSmtpResult] = useState<SmtpResult>(null)
|
|
|
|
function handleChange(envName: string, value: string) {
|
|
setLocalValues((prev) => ({ ...prev, [envName]: value }))
|
|
setSaveStatus(null)
|
|
}
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (!data) return
|
|
const updates = buildUpdates(data.sections, localValues)
|
|
await apiClient.PUT('/api/config', { body: { updates } })
|
|
},
|
|
})
|
|
|
|
async function handleSave(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setSaveStatus(null)
|
|
try {
|
|
await saveMutation.mutateAsync()
|
|
setSaveStatus('success')
|
|
// Refetch config so the page reflects the saved state.
|
|
await queryClient.invalidateQueries({ queryKey: ['config'] })
|
|
// After refetch, reset initialised flag so local state rebuilds from fresh data.
|
|
setValuesInitialized(false)
|
|
} catch {
|
|
setSaveStatus('error')
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Render states
|
|
// ---------------------------------------------------------------------------
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Center pt="xl">
|
|
<Loader data-testid="config-loading" />
|
|
</Center>
|
|
)
|
|
}
|
|
|
|
if (isError || !data) {
|
|
return (
|
|
<Container pt="xl">
|
|
<Alert color="red" data-testid="config-load-error">
|
|
Failed to load configuration. Please refresh the page.
|
|
</Alert>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
// Detect if there is an SMTP section (to show the test button).
|
|
const hasSmtpSection = data.sections.some((s) =>
|
|
s.name.toLowerCase().includes('smtp') || s.name.toLowerCase().includes('email'),
|
|
)
|
|
|
|
return (
|
|
<Container size="md" pt="xl" pb="xl" data-testid="config-page">
|
|
<Group justify="space-between" mb="lg" wrap="nowrap">
|
|
<Title order={2}>Configuration</Title>
|
|
<Badge variant="outline" color="gray" size="sm">
|
|
{data.sections.length} section{data.sections.length !== 1 ? 's' : ''}
|
|
</Badge>
|
|
</Group>
|
|
|
|
<form onSubmit={handleSave} data-testid="config-form">
|
|
<Stack gap="lg">
|
|
{data.sections.map((section) => (
|
|
<ConfigSectionPanel
|
|
key={section.name}
|
|
section={section}
|
|
localValues={localValues}
|
|
onChange={handleChange}
|
|
/>
|
|
))}
|
|
|
|
<Divider />
|
|
|
|
{saveStatus === 'success' && (
|
|
<Alert color="green" data-testid="save-success">
|
|
Configuration saved successfully.
|
|
</Alert>
|
|
)}
|
|
{saveStatus === 'error' && (
|
|
<Alert color="red" data-testid="save-error">
|
|
Failed to save configuration. Please check the values and try again.
|
|
</Alert>
|
|
)}
|
|
|
|
<Group justify="space-between" align="center" wrap="wrap" gap="sm">
|
|
<Button
|
|
type="submit"
|
|
loading={saveMutation.isPending}
|
|
data-testid="config-save-button"
|
|
>
|
|
Save Configuration
|
|
</Button>
|
|
|
|
{hasSmtpSection && (
|
|
<SmtpTestButton smtpResult={smtpResult} setSmtpResult={setSmtpResult} />
|
|
)}
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
|
|
{!hasSmtpSection && (
|
|
<Stack mt="md">
|
|
<Text c="dimmed" size="sm">
|
|
Configure SMTP settings to enable email notifications.
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|