Merge branch 'fix/reviews-dict-uuid-to-name' into 'main'
fix(admin-ui): reviews+sidebar polish (6 фиксов одной пачкой) See merge request 2-6/2-6-4/terravault/ordinis!259
This commit is contained in:
Александр Зимин
@@ -442,6 +442,10 @@ export const useApproveDraft = () => {
|
||||
qc.invalidateQueries({ queryKey: ['review-queue'] })
|
||||
qc.invalidateQueries({ queryKey: ['records'] })
|
||||
qc.invalidateQueries({ queryKey: ['draft'] })
|
||||
// ['drafts'] = my-drafts list + by-dict list. Без этого "Мои" tab
|
||||
// badge продолжал показывать счётчик после approve (status
|
||||
// pending → decided, но cached list не обновлялся).
|
||||
qc.invalidateQueries({ queryKey: ['drafts'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -467,6 +471,8 @@ export const useRejectDraft = () => {
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['review-queue'] })
|
||||
qc.invalidateQueries({ queryKey: ['draft'] })
|
||||
// Та же причина что в useApproveDraft — "Мои" badge не обновлялся.
|
||||
qc.invalidateQueries({ queryKey: ['drafts'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { useMemo, type ReactNode } from 'react'
|
||||
|
||||
/**
|
||||
* Лёгкий JSON viewer с token-based syntax highlight + diff-подсветкой
|
||||
* top-level ключей. Никаких внешних зависимостей: regex-проход по
|
||||
* `JSON.stringify(..., null, 2)`.
|
||||
*
|
||||
* <p>Syntax: ключи (aurora), строки (pink), числа (warn), true/false/null
|
||||
* (accent), пунктуация (mute).
|
||||
*
|
||||
* <p>Diff (опционально): передай diff — массив { kind, keys }. Строки
|
||||
* JSON где key в added/removed/changed получают bg-цвет (зелёный /
|
||||
* красный / жёлтый). Подсветка — top-level only (для глубокого diff'а
|
||||
* есть DraftDiffSummary).
|
||||
*/
|
||||
export type JsonDiff = {
|
||||
added?: Set<string> | readonly string[]
|
||||
removed?: Set<string> | readonly string[]
|
||||
changed?: Set<string> | readonly string[]
|
||||
}
|
||||
|
||||
type JsonViewProps = {
|
||||
value: unknown
|
||||
diff?: JsonDiff
|
||||
className?: string
|
||||
}
|
||||
|
||||
const TOKEN_RE =
|
||||
/("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(true|false|null)|([{}[\],])/g
|
||||
|
||||
const toSet = (v: Set<string> | readonly string[] | undefined): Set<string> =>
|
||||
v instanceof Set ? v : new Set(v ?? [])
|
||||
|
||||
const tokenize = (line: string): ReactNode[] => {
|
||||
const out: ReactNode[] = []
|
||||
let last = 0
|
||||
let i = 0
|
||||
for (const m of line.matchAll(TOKEN_RE)) {
|
||||
const idx = m.index ?? 0
|
||||
if (idx > last) out.push(line.slice(last, idx))
|
||||
const [whole, str, colon, num, lit, punct] = m
|
||||
if (str && colon) {
|
||||
out.push(
|
||||
<span key={`k${i}`} className="text-aurora">
|
||||
{str}
|
||||
</span>,
|
||||
)
|
||||
out.push(
|
||||
<span key={`c${i}`} className="text-mute">
|
||||
{colon}
|
||||
</span>,
|
||||
)
|
||||
} else if (str) {
|
||||
out.push(
|
||||
<span key={`s${i}`} className="text-pink">
|
||||
{str}
|
||||
</span>,
|
||||
)
|
||||
} else if (num) {
|
||||
out.push(
|
||||
<span key={`n${i}`} className="text-warn">
|
||||
{num}
|
||||
</span>,
|
||||
)
|
||||
} else if (lit) {
|
||||
out.push(
|
||||
<span key={`l${i}`} className="text-accent">
|
||||
{lit}
|
||||
</span>,
|
||||
)
|
||||
} else if (punct) {
|
||||
out.push(
|
||||
<span key={`p${i}`} className="text-mute">
|
||||
{punct}
|
||||
</span>,
|
||||
)
|
||||
} else {
|
||||
out.push(whole)
|
||||
}
|
||||
last = idx + whole.length
|
||||
i++
|
||||
}
|
||||
if (last < line.length) out.push(line.slice(last))
|
||||
return out
|
||||
}
|
||||
|
||||
const LINE_KEY_RE = /^ {2}"((?:\\.|[^"\\])*)":/
|
||||
|
||||
const lineDiffClass = (
|
||||
line: string,
|
||||
added: Set<string>,
|
||||
removed: Set<string>,
|
||||
changed: Set<string>,
|
||||
): string => {
|
||||
const m = LINE_KEY_RE.exec(line)
|
||||
if (!m) return ''
|
||||
const k = m[1]
|
||||
if (added.has(k)) return 'bg-aurora/15 -mx-2 px-2 border-l-2 border-aurora'
|
||||
if (removed.has(k)) return 'bg-danger/15 -mx-2 px-2 border-l-2 border-danger'
|
||||
if (changed.has(k)) return 'bg-warn/15 -mx-2 px-2 border-l-2 border-warn'
|
||||
return ''
|
||||
}
|
||||
|
||||
export const JsonView = ({ value, diff, className }: JsonViewProps) => {
|
||||
const added = useMemo(() => toSet(diff?.added), [diff?.added])
|
||||
const removed = useMemo(() => toSet(diff?.removed), [diff?.removed])
|
||||
const changed = useMemo(() => toSet(diff?.changed), [diff?.changed])
|
||||
|
||||
const lines = useMemo(() => {
|
||||
try {
|
||||
return JSON.stringify(value, null, 2).split('\n')
|
||||
} catch {
|
||||
return [String(value)]
|
||||
}
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<pre
|
||||
className={
|
||||
'text-mono text-cell bg-line/20 rounded p-2 overflow-x-auto whitespace-pre ' +
|
||||
(className ?? '')
|
||||
}
|
||||
>
|
||||
{lines.map((line, i) => {
|
||||
const dc = lineDiffClass(line, added, removed, changed)
|
||||
return (
|
||||
<div key={i} className={dc}>
|
||||
{tokenize(line)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</pre>
|
||||
)
|
||||
}
|
||||
@@ -583,7 +583,17 @@ function SidebarLink({
|
||||
<Link
|
||||
to={to}
|
||||
onClick={onClick}
|
||||
title={collapsed ? (typeof label === 'string' ? label : undefined) : undefined}
|
||||
// Tooltip в collapsed-mode включает label + текущий badge (если есть),
|
||||
// чтобы юзер видел число при hover на узкой полоске.
|
||||
title={
|
||||
collapsed
|
||||
? typeof label === 'string'
|
||||
? badge !== undefined
|
||||
? `${label} (${badge})`
|
||||
: label
|
||||
: undefined
|
||||
: undefined
|
||||
}
|
||||
className={cn(
|
||||
// text-body = 13px workhorse per handoff (см. styles.css @utility).
|
||||
'group flex items-center rounded-md text-body transition-colors',
|
||||
@@ -593,9 +603,28 @@ function SidebarLink({
|
||||
: 'text-ink-2 hover:text-ink hover:bg-surface-2',
|
||||
)}
|
||||
>
|
||||
<Icon size={collapsed ? 18 : 15} strokeWidth={1.75} className="shrink-0" />
|
||||
{!collapsed && (
|
||||
{/* Icon + corner-badge overlay в collapsed-mode. Wrapper relative нужен
|
||||
для absolute badge'а; в expanded-mode иконка без обёртки + badge
|
||||
справа от label'а как было. */}
|
||||
{collapsed ? (
|
||||
<span className="relative inline-flex items-center justify-center">
|
||||
<Icon size={18} strokeWidth={1.75} className="shrink-0" />
|
||||
{badge !== undefined && (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
'absolute -top-1.5 -right-1.5 inline-flex items-center justify-center',
|
||||
'min-w-[1rem] h-4 px-1 rounded-full text-cap font-mono leading-none',
|
||||
'bg-accent text-on-accent ring-1 ring-surface',
|
||||
)}
|
||||
>
|
||||
{typeof badge === 'number' && badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Icon size={15} strokeWidth={1.75} className="shrink-0" />
|
||||
<span className="flex-1 truncate">{label}</span>
|
||||
{badge !== undefined && (
|
||||
<span
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
} from '@/ui'
|
||||
import { useMyDrafts, useMySchemaDrafts } from '@/api/queries'
|
||||
import { useDictionaries, useMyDrafts, useMySchemaDrafts } from '@/api/queries'
|
||||
import { UserCell } from '@/lib/useUserDisplay'
|
||||
import type {
|
||||
DraftOperation,
|
||||
@@ -303,6 +303,14 @@ function RecordRow({
|
||||
onClick: () => void
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
// DraftResponse несёт только dictionaryId (UUID) — резолвим в name через
|
||||
// global dictionaries list (кешируется TanStack Query). Fallback на
|
||||
// UUID-prefix без link'а если dict не в выдаче (scope-hide / deleted).
|
||||
const dictionaries = useDictionaries()
|
||||
const dictName = useMemo(
|
||||
() => dictionaries.data?.find((d) => d.id === draft.dictionaryId)?.name,
|
||||
[dictionaries.data, draft.dictionaryId],
|
||||
)
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
@@ -311,15 +319,23 @@ function RecordRow({
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: draft.dictionaryId }}
|
||||
className="text-mono text-accent hover:underline"
|
||||
>
|
||||
<span className="text-mute">{draft.dictionaryId.slice(0, 8)}…</span>
|
||||
<span className="mx-1 text-mute">/</span>
|
||||
<span>{draft.businessKey}</span>
|
||||
</Link>
|
||||
{dictName ? (
|
||||
<Link
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: dictName }}
|
||||
className="text-mono text-accent hover:underline"
|
||||
>
|
||||
<span>{dictName}</span>
|
||||
<span className="mx-1 text-mute">/</span>
|
||||
<span>{draft.businessKey}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-mono" title={draft.dictionaryId}>
|
||||
<span className="text-mute">{draft.dictionaryId.slice(0, 8)}…</span>
|
||||
<span className="mx-1 text-mute">/</span>
|
||||
<span>{draft.businessKey}</span>
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={operationVariant(draft.operation)}>{draft.operation}</Badge>
|
||||
|
||||
@@ -263,8 +263,14 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
|
||||
isOpen={open}
|
||||
onClose={onClose}
|
||||
title={isEdit ? `${t('schema.action.edit')}: ${initial?.name}` : t('schema.action.create')}
|
||||
maxWidth="max-w-5xl"
|
||||
panelClassName="max-h-[calc(100vh-2rem)] my-4 flex flex-col"
|
||||
// Desktop ≥880px — expanded (max-w 1400px, реально ~95vw на меньших
|
||||
// десктопных широтах). Mobile <880px — наследует w-[95vw] от
|
||||
// DialogContent (compact, full-width modal). Override через
|
||||
// panelClassName c `!` чтобы перебить SIZE_CLASSES.xl (880px).
|
||||
// Раньше maxWidth="max-w-5xl" → xl → 880px — на 1440p мониторе
|
||||
// editor выглядел вжатым, форма с tabs не помещалась без скролла.
|
||||
size="md"
|
||||
panelClassName="max-h-[calc(100vh-2rem)] my-4 flex flex-col min-[880px]:!max-w-[1400px]"
|
||||
bodyClassName="overflow-y-auto flex-1"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -27,6 +27,7 @@ import axios from 'axios'
|
||||
import { useAuth } from 'react-oidc-context'
|
||||
import { ArrowCounterClockwiseIcon, CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react'
|
||||
import {
|
||||
useDictionaries,
|
||||
useDraft,
|
||||
useLiveRecord,
|
||||
useMyDrafts,
|
||||
@@ -44,6 +45,7 @@ import {
|
||||
classifyRecordStatus,
|
||||
classifySchemaStatus,
|
||||
} from '@/components/reviews/MyDraftsPanel'
|
||||
import { JsonView } from '@/components/JsonView'
|
||||
|
||||
export const Route = createFileRoute('/reviews')({
|
||||
component: ReviewsPage,
|
||||
@@ -162,6 +164,15 @@ function ReviewsPage() {
|
||||
const { t } = useTranslation()
|
||||
const queue = useReviewQueue(0, 50)
|
||||
const schemaQueue = useSchemaReviewQueue(0, 50)
|
||||
// DraftResponse несёт только dictionaryId (UUID) — резолвим в name через
|
||||
// global dictionaries list (кешируется TanStack Query, ~free). Fallback на
|
||||
// UUID-prefix когда dict недоступен (scope-hide / deleted).
|
||||
const dictionaries = useDictionaries()
|
||||
const dictNameById = useMemo(() => {
|
||||
const map = new Map<string, string>()
|
||||
for (const d of dictionaries.data ?? []) map.set(d.id, d.name)
|
||||
return map
|
||||
}, [dictionaries.data])
|
||||
// Counts для "Мои" tab badge — sum of attention-needing drafts (pending +
|
||||
// WIP). Recompute дешёвый (linear over ≤100 items), refetch interval 30s
|
||||
// делает badge самозаживляющим без manual invalidation.
|
||||
@@ -463,13 +474,27 @@ function ReviewsPage() {
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: d.dictionaryId }}
|
||||
className="text-mono text-accent hover:underline"
|
||||
>
|
||||
{d.dictionaryId.slice(0, 8)}…
|
||||
</Link>
|
||||
{(() => {
|
||||
const dictName = dictNameById.get(d.dictionaryId)
|
||||
if (dictName) {
|
||||
return (
|
||||
<Link
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: dictName }}
|
||||
className="text-mono text-accent hover:underline"
|
||||
>
|
||||
{dictName}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
// Dict скрыт scope-фильтром или удалён — UUID-prefix
|
||||
// как fallback, без link'а (вёл бы в 404).
|
||||
return (
|
||||
<span className="text-mono text-mute" title={d.dictionaryId}>
|
||||
{d.dictionaryId.slice(0, 8)}…
|
||||
</span>
|
||||
)
|
||||
})()}
|
||||
</TableCell>
|
||||
<TableCell className="text-mono">{d.businessKey}</TableCell>
|
||||
<TableCell>
|
||||
@@ -614,12 +639,21 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
|
||||
const currentSub = auth.user?.profile?.sub
|
||||
const draftQ = useDraft(draftId)
|
||||
const draft = draftQ.data
|
||||
// DraftResponse несёт только dictionaryId (UUID); /api/v1/dictionaries/{name}/...
|
||||
// ожидает имя словаря. Резолвим через useDictionaries (TanStack кеш).
|
||||
// До этого useLiveRecord(draft.dictionaryId, ...) валился с 404
|
||||
// "Dictionary not found: <uuid>" → live-блок drawer'а оставался пустым.
|
||||
const dictionariesQ = useDictionaries()
|
||||
const dictName = useMemo(
|
||||
() => dictionariesQ.data?.find((d) => d.id === draft?.dictionaryId)?.name,
|
||||
[dictionariesQ.data, draft?.dictionaryId],
|
||||
)
|
||||
// CREATE-черновик не имеет live-записи по определению — не пробуем её
|
||||
// загружать (GET /dictionaries/{id}/records/{key} → 404, красный шум в
|
||||
// загружать (GET /dictionaries/{name}/records/{key} → 404, красный шум в
|
||||
// консоли на каждый CREATE-draft). Для UPDATE/CLOSE — грузим как раньше.
|
||||
const isCreateDraft = draft?.operation === 'CREATE'
|
||||
const liveQ = useLiveRecord(
|
||||
draft && !isCreateDraft ? draft.dictionaryId : undefined,
|
||||
draft && !isCreateDraft ? dictName : undefined,
|
||||
draft && !isCreateDraft ? draft.businessKey : undefined,
|
||||
)
|
||||
const approveMut = useApproveDraft()
|
||||
@@ -749,6 +783,20 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
|
||||
<div className="space-y-1 text-cell">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant={operationVariant(draft.operation)}>{draft.operation}</Badge>
|
||||
{dictName ? (
|
||||
<Link
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: dictName }}
|
||||
className="text-mono text-accent hover:underline"
|
||||
>
|
||||
{dictName}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-mono text-mute" title={draft.dictionaryId}>
|
||||
{draft.dictionaryId.slice(0, 8)}…
|
||||
</span>
|
||||
)}
|
||||
<span className="text-mute">/</span>
|
||||
<span className="font-mono">{draft.businessKey}</span>
|
||||
<DrawerStatusBadge status={draft.status} />
|
||||
</div>
|
||||
@@ -808,38 +856,63 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
|
||||
operation={draft.operation}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-cap text-mute mb-1">
|
||||
{t('reviews.drawer.live')}
|
||||
</p>
|
||||
{liveQ.isLoading && <LoadingBlock size="sm" label={t('loading')} />}
|
||||
{(liveQ.data === null || isCreateDraft) && (
|
||||
<p className="text-cell text-mute italic">
|
||||
{t('reviews.drawer.noLive')}
|
||||
</p>
|
||||
)}
|
||||
{liveQ.data && (
|
||||
<pre className="text-mono bg-line/30 rounded p-2 overflow-x-auto whitespace-pre-wrap">
|
||||
{JSON.stringify(liveQ.data.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-cap text-mute mb-1">
|
||||
{t('reviews.drawer.proposed')}
|
||||
</p>
|
||||
{draft.operation === 'CLOSE' ? (
|
||||
<p className="text-cell text-aurora italic">
|
||||
{t('reviews.drawer.closeNote')}
|
||||
</p>
|
||||
) : (
|
||||
<pre className="text-mono bg-accent/4 rounded p-2 overflow-x-auto whitespace-pre-wrap">
|
||||
{JSON.stringify(draft.data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
// Считаем diff один раз для обеих колонок: changed/added/removed
|
||||
// keys (top-level) подсветим через JsonView в обоих side-by-side
|
||||
// блоках — reviewer видит точку изменения визуально, не сравнивая
|
||||
// глазами длинные JSON-объекты.
|
||||
const liveData =
|
||||
(liveQ.data?.data as Record<string, unknown> | null | undefined) ?? null
|
||||
const proposedData =
|
||||
(draft.data as Record<string, unknown> | null | undefined) ?? null
|
||||
const diff =
|
||||
draft.operation === 'CLOSE'
|
||||
? null
|
||||
: shallowDiffSummary(liveData, proposedData)
|
||||
const liveDiff = diff
|
||||
? { removed: diff.removed, changed: diff.changed }
|
||||
: undefined
|
||||
const proposedDiff = diff
|
||||
? { added: diff.added, changed: diff.changed }
|
||||
: undefined
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="text-cap text-mute mb-1">
|
||||
{t('reviews.drawer.live')}
|
||||
</p>
|
||||
{liveQ.isLoading && <LoadingBlock size="sm" label={t('loading')} />}
|
||||
{liveQ.error && (
|
||||
<p className="text-cell text-danger italic">
|
||||
{t('reviews.drawer.liveError', {
|
||||
defaultValue: 'Не удалось загрузить текущую запись',
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
{!liveQ.isLoading && !liveQ.error && (liveQ.data === null || isCreateDraft) && (
|
||||
<p className="text-cell text-mute italic">
|
||||
{t('reviews.drawer.noLive')}
|
||||
</p>
|
||||
)}
|
||||
{liveQ.data && (
|
||||
<JsonView value={liveQ.data.data} diff={liveDiff} />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-cap text-mute mb-1">
|
||||
{t('reviews.drawer.proposed')}
|
||||
</p>
|
||||
{draft.operation === 'CLOSE' ? (
|
||||
<p className="text-cell text-aurora italic">
|
||||
{t('reviews.drawer.closeNote')}
|
||||
</p>
|
||||
) : (
|
||||
<JsonView value={draft.data} diff={proposedDiff} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{(approveMut.error || rejectMut.error || withdrawMut.error) && (() => {
|
||||
const err = approveMut.error || rejectMut.error || withdrawMut.error
|
||||
|
||||
Reference in New Issue
Block a user