Александр Зимин
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { Badge, Tabs, type TabItem } from '@/ui'
|
||
import { generateEventPreviews } from './eventPreview'
|
||
import type { DataScope, JsonSchema } from '@/api/client'
|
||
|
||
type Props = {
|
||
dictionaryName: string
|
||
dataScope: DataScope
|
||
bundle: string
|
||
schema: JsonSchema
|
||
businessKeyField?: string
|
||
}
|
||
|
||
/**
|
||
* Preview tab inside DictionaryEditorDialog. Показывает sample JSON envelope
|
||
* для каждого event type, который Kafka получит после save'а dict / records.
|
||
*
|
||
* <p>Помогает integrators (Альтум, Геопортал, etc) понять shape события до
|
||
* того как dict published. Без этого они вынуждены ждать live event'а
|
||
* чтобы посмотреть payload.
|
||
*
|
||
* <p>Pure client-side preview — не отправляет ничего в Kafka. Sample data
|
||
* генерится из schema properties (string → "sample", integer → 42, и т.д.).
|
||
*/
|
||
export const EventsPreviewTab = ({
|
||
dictionaryName,
|
||
dataScope,
|
||
bundle,
|
||
schema,
|
||
businessKeyField,
|
||
}: Props) => {
|
||
const { t } = useTranslation()
|
||
const previews = generateEventPreviews(
|
||
dictionaryName || 'sample_dict',
|
||
dataScope,
|
||
bundle || 'cuod',
|
||
schema,
|
||
businessKeyField,
|
||
)
|
||
const [active, setActive] = useState(previews[0]?.eventType ?? 'RecordCreated')
|
||
const current = previews.find((p) => p.eventType === active) ?? previews[0]
|
||
const tabs: TabItem[] = previews.map((p) => ({
|
||
id: p.eventType,
|
||
label: p.label,
|
||
}))
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<p className="text-sm text-ink-2">
|
||
{t('schema.events.intro')}
|
||
</p>
|
||
|
||
<Tabs items={tabs} value={active} onValueChange={setActive} />
|
||
|
||
{current && (
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<Badge variant="info">{current.eventType}</Badge>
|
||
<span className="text-2xs text-ink-2">
|
||
{t('schema.events.topic')}:
|
||
</span>
|
||
<code className="text-2xs font-mono text-accent">
|
||
{current.topic}
|
||
</code>
|
||
</div>
|
||
<p className="text-2xs text-mute">{current.description}</p>
|
||
<pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
|
||
{JSON.stringify(current.envelope, null, 2)}
|
||
</pre>
|
||
<p className="text-2xs text-mute">
|
||
{t('schema.events.disclaimer')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|