Александр Зимин
1123 lines
44 KiB
TypeScript
1123 lines
44 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||
import { useTranslation } from 'react-i18next'
|
||
import {
|
||
Alert,
|
||
Badge,
|
||
Button,
|
||
Checkbox,
|
||
Drawer,
|
||
EmptyState,
|
||
LoadingBlock,
|
||
Modal,
|
||
PageHeader,
|
||
Panel,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeaderCell,
|
||
TableRow,
|
||
Tabs,
|
||
TextArea,
|
||
TextInput,
|
||
QueryErrorState,
|
||
} from '@/ui'
|
||
import axios from 'axios'
|
||
import { useAuth } from '@/auth/useAuth'
|
||
import { useIsAdmin } from '@/auth/usePermissions'
|
||
import { ArrowCounterClockwiseIcon, CheckCircleIcon, XCircleIcon } from '@phosphor-icons/react'
|
||
import {
|
||
useDictionaries,
|
||
useDraft,
|
||
useLiveRecord,
|
||
useMyDrafts,
|
||
useMySchemaDrafts,
|
||
useReviewQueue,
|
||
useSchemaReviewQueue,
|
||
} from '@/api/queries'
|
||
import { useApproveDraft, useRejectDraft, useWithdrawDraft } from '@/api/mutations'
|
||
import type { DraftOperation, DraftResponse, DraftStatus } from '@/api/client'
|
||
import { UserCell } from '@/lib/useUserDisplay'
|
||
import { shallowDiffSummary, isEmptyDiffSummary } from '@/lib/diff'
|
||
import { humanizeBulkReason } from '@/lib/bulkReason'
|
||
import {
|
||
MyDraftsPanel,
|
||
classifyRecordStatus,
|
||
classifySchemaStatus,
|
||
} from '@/components/reviews/MyDraftsPanel'
|
||
import { JsonView } from '@/components/JsonView'
|
||
|
||
export const Route = createFileRoute('/reviews')({
|
||
component: ReviewsPage,
|
||
})
|
||
|
||
const operationVariant = (op: DraftOperation): 'info' | 'success' | 'warning' => {
|
||
if (op === 'CREATE') return 'success'
|
||
if (op === 'CLOSE') return 'warning'
|
||
return 'info'
|
||
}
|
||
|
||
/**
|
||
* Record draft status badge — используется в drawer header'е, чтобы maker
|
||
* сразу видел "в каком состоянии мой draft" без скролла к decision banner.
|
||
*
|
||
* <p>Visual mapping повторяет {@link MyDraftsPanel} badge'и для consistency:
|
||
* PENDING=info, APPROVED=success, REJECTED=danger, WITHDRAWN=default.
|
||
*/
|
||
function DrawerStatusBadge({ status }: { status: DraftStatus }) {
|
||
const { t } = useTranslation()
|
||
const variant: 'info' | 'success' | 'danger' | 'default' = (() => {
|
||
switch (status) {
|
||
case 'PENDING':
|
||
return 'info'
|
||
case 'APPROVED':
|
||
return 'success'
|
||
case 'REJECTED':
|
||
return 'danger'
|
||
case 'WITHDRAWN':
|
||
return 'default'
|
||
}
|
||
})()
|
||
const fallback: Record<DraftStatus, string> = {
|
||
PENDING: 'На ревью',
|
||
APPROVED: 'Одобрено',
|
||
REJECTED: 'Отклонён',
|
||
WITHDRAWN: 'Отозван',
|
||
}
|
||
return (
|
||
<Badge variant={variant}>
|
||
{t(`reviews.mine.recordStatus.${status}`, { defaultValue: fallback[status] })}
|
||
</Badge>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Diff summary chips for the ReviewDrawer — "+N added (fields), −M removed,
|
||
* ~K changed" above the side-by-side JSON panes. Reviewer sees the gist
|
||
* without eyeball-diffing long records.
|
||
*
|
||
* Backed by `shallowDiffSummary` from `@/lib/diff` (extracted there during
|
||
* the 2026-05-14 eng review of MR !186 for reuse — RecordHistoryDrawer and
|
||
* audit row summaries will plug into the same helper). Memo'd against the
|
||
* three actual inputs so it doesn't recompute on unrelated state changes
|
||
* (textarea typing, drawer resize, etc.).
|
||
*/
|
||
function DraftDiffSummary({
|
||
live,
|
||
proposed,
|
||
operation,
|
||
}: {
|
||
live: Record<string, unknown> | null | undefined
|
||
proposed: Record<string, unknown> | null | undefined
|
||
operation: DraftOperation
|
||
}) {
|
||
const summary = useMemo(() => {
|
||
// CLOSE op has no proposed payload by design — skip without computing.
|
||
if (operation === 'CLOSE') return null
|
||
return shallowDiffSummary(live, proposed)
|
||
}, [live, proposed, operation])
|
||
|
||
if (!summary || isEmptyDiffSummary(summary)) return null
|
||
return (
|
||
<div className="flex flex-wrap items-center gap-3 text-mono text-cap tabular-nums">
|
||
{summary.added.length > 0 && (
|
||
<span className="inline-flex items-center gap-1 text-aurora">
|
||
<span className="font-bold">+</span>
|
||
<span>{summary.added.length}</span>
|
||
<span className="text-mute lowercase">({summary.added.join(', ')})</span>
|
||
</span>
|
||
)}
|
||
{summary.removed.length > 0 && (
|
||
<span className="inline-flex items-center gap-1 text-danger">
|
||
<span className="font-bold">−</span>
|
||
<span>{summary.removed.length}</span>
|
||
<span className="text-mute lowercase">({summary.removed.join(', ')})</span>
|
||
</span>
|
||
)}
|
||
{summary.changed.length > 0 && (
|
||
<span className="inline-flex items-center gap-1 text-warn">
|
||
<span className="font-bold">~</span>
|
||
<span>{summary.changed.length}</span>
|
||
<span className="text-mute lowercase">({summary.changed.join(', ')})</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Approval Workflow v2 — reviewer queue (D3=A pool model).
|
||
*
|
||
* <p>Все pending drafts в ordinis FIFO ordered by submitted_at. Click row →
|
||
* drawer открывается с side-by-side current vs proposed JSON + Approve /
|
||
* Reject actions. Reject reason required.
|
||
*/
|
||
type BulkResult = {
|
||
approved: { id: string; bk: string }[]
|
||
rejected: { id: string; bk: string }[]
|
||
failed: { id: string; bk: string; reason: string }[]
|
||
}
|
||
|
||
type ReviewsTab = 'records' | 'schemas' | 'mine'
|
||
|
||
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.
|
||
const myDrafts = useMyDrafts(0, 50)
|
||
const mySchemaDrafts = useMySchemaDrafts(0, 50)
|
||
const recordsCount = queue.data?.totalElements ?? 0
|
||
const schemasCount = schemaQueue.data?.totalElements ?? 0
|
||
const myActiveCount = useMemo(() => {
|
||
const records = (myDrafts.data?.items ?? []).filter(
|
||
(r) => classifyRecordStatus(r.status) === 'pending',
|
||
).length
|
||
const schemas = (mySchemaDrafts.data?.items ?? []).filter((s) => {
|
||
const b = classifySchemaStatus(s.status)
|
||
return b === 'pending' || b === 'wip'
|
||
}).length
|
||
return records + schemas
|
||
}, [myDrafts.data, mySchemaDrafts.data])
|
||
// Tab дефолтит на records (старее, чаще). Если schema queue не пустой
|
||
// а record queue пустой — переключаемся на schemas чтобы reviewer'у не
|
||
// пришлось кликать дважды.
|
||
const [activeTab, setActiveTab] = useState<ReviewsTab>('records')
|
||
// Auto-switch один раз когда queries loaded и records=0/schemas>0.
|
||
useMemo(() => {
|
||
if (recordsCount === 0 && schemasCount > 0 && activeTab === 'records') {
|
||
setActiveTab('schemas')
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [recordsCount, schemasCount])
|
||
const [selectedId, setSelectedId] = useState<string | undefined>(undefined)
|
||
/** Phase 4: bulk approve/reject. Set<draftId> — стабильное id'шник. */
|
||
const [selection, setSelection] = useState<Set<string>>(new Set())
|
||
const [bulkRejectOpen, setBulkRejectOpen] = useState(false)
|
||
const [bulkRejectReason, setBulkRejectReason] = useState('')
|
||
const [bulkRunning, setBulkRunning] = useState(false)
|
||
const [bulkResult, setBulkResult] = useState<BulkResult | undefined>(undefined)
|
||
const approveMut = useApproveDraft()
|
||
const rejectMut = useRejectDraft()
|
||
|
||
const items = queue.data?.items ?? []
|
||
const visibleIds = useMemo(() => items.map((d) => d.id), [items])
|
||
const allVisibleSelected =
|
||
visibleIds.length > 0 && visibleIds.every((id) => selection.has(id))
|
||
const anySelected = selection.size > 0
|
||
|
||
const toggleSelect = (id: string) => {
|
||
setSelection((prev) => {
|
||
const next = new Set(prev)
|
||
if (next.has(id)) next.delete(id)
|
||
else next.add(id)
|
||
return next
|
||
})
|
||
}
|
||
const toggleSelectAll = () => {
|
||
if (allVisibleSelected) setSelection(new Set())
|
||
else setSelection(new Set(visibleIds))
|
||
}
|
||
|
||
/**
|
||
* Bulk-execute approve или reject параллельно. Каждый mutation independent
|
||
* — если один fail (e.g. 409 self_approve_forbidden, 409 draft_not_pending
|
||
* race), остальные продолжают. Result summary показывает кто прошёл и кто
|
||
* нет с reason'ом.
|
||
*/
|
||
const runBulk = async (
|
||
op: 'approve' | 'reject',
|
||
targets: DraftResponse[],
|
||
sharedReason: string,
|
||
) => {
|
||
setBulkRunning(true)
|
||
const result: BulkResult = { approved: [], rejected: [], failed: [] }
|
||
await Promise.all(
|
||
targets.map(async (d) => {
|
||
try {
|
||
if (op === 'approve') {
|
||
await approveMut.mutateAsync({ id: d.id, comment: undefined })
|
||
result.approved.push({ id: d.id, bk: d.businessKey })
|
||
} else {
|
||
await rejectMut.mutateAsync({ id: d.id, comment: sharedReason })
|
||
result.rejected.push({ id: d.id, bk: d.businessKey })
|
||
}
|
||
} catch (e: unknown) {
|
||
const msg =
|
||
(e as { response?: { data?: { code?: string; message?: string } } })
|
||
?.response?.data?.code ??
|
||
(e as Error)?.message ??
|
||
'unknown'
|
||
result.failed.push({ id: d.id, bk: d.businessKey, reason: msg })
|
||
}
|
||
}),
|
||
)
|
||
setBulkResult(result)
|
||
setBulkRunning(false)
|
||
setSelection(new Set())
|
||
setBulkRejectOpen(false)
|
||
setBulkRejectReason('')
|
||
}
|
||
|
||
const handleBulkApprove = () => {
|
||
const targets = items.filter((d) => selection.has(d.id))
|
||
if (targets.length === 0) return
|
||
if (!confirm(t('reviews.bulk.confirmApprove', { count: targets.length }))) return
|
||
runBulk('approve', targets, '')
|
||
}
|
||
|
||
const handleBulkReject = () => {
|
||
if (!bulkRejectReason.trim()) return
|
||
const targets = items.filter((d) => selection.has(d.id))
|
||
if (targets.length === 0) return
|
||
runBulk('reject', targets, bulkRejectReason.trim())
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<PageHeader
|
||
title={t('reviews.title')}
|
||
description={t('reviews.description')}
|
||
/>
|
||
|
||
<Tabs
|
||
value={activeTab}
|
||
onValueChange={(v) => setActiveTab(v as ReviewsTab)}
|
||
items={[
|
||
{
|
||
id: 'records',
|
||
label: t('reviews.tab.records', { defaultValue: 'Записи' }),
|
||
count:
|
||
recordsCount > 0 ? (
|
||
<Badge variant="info">{recordsCount}</Badge>
|
||
) : undefined,
|
||
},
|
||
{
|
||
id: 'schemas',
|
||
label: t('reviews.tab.schemas', { defaultValue: 'Схемы' }),
|
||
count:
|
||
schemasCount > 0 ? (
|
||
<Badge variant="info">{schemasCount}</Badge>
|
||
) : undefined,
|
||
},
|
||
{
|
||
id: 'mine',
|
||
label: t('reviews.tab.mine', { defaultValue: 'Мои' }),
|
||
count:
|
||
myActiveCount > 0 ? (
|
||
<Badge variant="info">{myActiveCount}</Badge>
|
||
) : undefined,
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{activeTab === 'mine' && (
|
||
<MyDraftsPanel onRecordClick={(id) => setSelectedId(id)} />
|
||
)}
|
||
|
||
{activeTab === 'schemas' && (
|
||
<>
|
||
{schemaQueue.isLoading && <LoadingBlock size="md" label={t('loading')} />}
|
||
<SchemaReviewQueuePanel />
|
||
{schemasCount === 0 && !schemaQueue.isLoading && (
|
||
<EmptyState
|
||
title={t('reviews.schema.empty', {
|
||
defaultValue: 'Очередь пуста',
|
||
})}
|
||
description={t('reviews.schema.emptyDescription', {
|
||
defaultValue: 'Схемы на ревью появятся здесь.',
|
||
})}
|
||
/>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{activeTab === 'records' && queue.isLoading && (
|
||
<LoadingBlock size="md" label={t('loading')} />
|
||
)}
|
||
|
||
{activeTab === 'records' && queue.error && (
|
||
<QueryErrorState error={queue.error} onRetry={() => queue.refetch()} />
|
||
)}
|
||
|
||
{activeTab === 'records' && bulkResult && (
|
||
<Alert
|
||
variant={bulkResult.failed.length === 0 ? 'success' : 'warning'}
|
||
title={t('reviews.bulk.resultTitle')}
|
||
action={
|
||
<Button variant="ghost" size="sm" onClick={() => setBulkResult(undefined)}>
|
||
{t('reviews.bulk.cancel')}
|
||
</Button>
|
||
}
|
||
>
|
||
<ul className="space-y-1 text-cell">
|
||
{bulkResult.approved.length > 0 && (
|
||
<li>
|
||
{t('reviews.bulk.approvedCount', { count: bulkResult.approved.length })}
|
||
: {bulkResult.approved.map((r) => r.bk).join(', ')}
|
||
</li>
|
||
)}
|
||
{bulkResult.rejected.length > 0 && (
|
||
<li>
|
||
{t('reviews.bulk.rejectedCount', { count: bulkResult.rejected.length })}
|
||
: {bulkResult.rejected.map((r) => r.bk).join(', ')}
|
||
</li>
|
||
)}
|
||
{bulkResult.failed.length > 0 && (
|
||
<li className="text-error">
|
||
{t('reviews.bulk.failedCount', { count: bulkResult.failed.length })}:
|
||
<ul className="ml-4 mt-1 list-disc">
|
||
{bulkResult.failed.map((f) => (
|
||
<li key={f.id}>
|
||
<span className="font-mono">{f.bk}</span>: {humanizeBulkReason(f.reason)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</li>
|
||
)}
|
||
</ul>
|
||
</Alert>
|
||
)}
|
||
|
||
{activeTab === 'records' && queue.data && queue.data.totalElements === 0 && (
|
||
<EmptyState
|
||
icon={<CheckCircleIcon weight="duotone" size={32} />}
|
||
title={t('reviews.empty')}
|
||
description={t('reviews.emptyDescription', {
|
||
defaultValue:
|
||
'Очередь чистая. Прошлые решения можно посмотреть в журнале аудита.',
|
||
})}
|
||
action={
|
||
<Link to="/audit" className="text-accent hover:underline text-cell">
|
||
{t('reviews.emptyAuditLink', { defaultValue: 'Открыть /audit' })} →
|
||
</Link>
|
||
}
|
||
/>
|
||
)}
|
||
|
||
{activeTab === 'records' && queue.data && queue.data.totalElements > 0 && (
|
||
<Panel>
|
||
<div className="flex items-center justify-between mb-3 gap-3">
|
||
<p className="text-cell text-mute">
|
||
{t('reviews.queueTotal', { count: queue.data.totalElements })}
|
||
{anySelected ? (
|
||
<span className="ml-2 text-accent font-medium">
|
||
· {t('reviews.bulk.selectedCount', { count: selection.size })}
|
||
</span>
|
||
) : null}
|
||
</p>
|
||
{anySelected && (
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="primary"
|
||
size="sm"
|
||
disabled={bulkRunning}
|
||
onClick={handleBulkApprove}
|
||
>
|
||
{t('reviews.bulk.approveSelected')}
|
||
</Button>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
disabled={bulkRunning}
|
||
onClick={() => setBulkRejectOpen(true)}
|
||
>
|
||
{t('reviews.bulk.rejectSelected')}
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setSelection(new Set())}
|
||
>
|
||
{t('reviews.bulk.clear')}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Table>
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableHeaderCell>
|
||
<Checkbox
|
||
aria-label={t('reviews.bulk.selectAll')}
|
||
checked={allVisibleSelected}
|
||
onChange={toggleSelectAll}
|
||
/>
|
||
</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.dict')}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.bk')}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.op')}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.maker')}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.submitted')}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.col.actions')}</TableHeaderCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{items.map((d) => (
|
||
<TableRow key={d.id} data-selected={selection.has(d.id)}>
|
||
<TableCell>
|
||
<Checkbox
|
||
aria-label={`${t('reviews.bulk.selectRow')} ${d.businessKey}`}
|
||
checked={selection.has(d.id)}
|
||
onChange={() => toggleSelect(d.id)}
|
||
/>
|
||
</TableCell>
|
||
<TableCell>
|
||
{(() => {
|
||
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>
|
||
<Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
|
||
</TableCell>
|
||
<TableCell><UserCell uuid={d.makerId} /></TableCell>
|
||
<TableCell className="text-cell text-ink-2">
|
||
{new Date(d.submittedAt).toLocaleString()}
|
||
</TableCell>
|
||
<TableCell>
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={() => setSelectedId(d.id)}
|
||
>
|
||
{t('reviews.action.review')}
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</Panel>
|
||
)}
|
||
|
||
<ReviewDrawer
|
||
draftId={selectedId}
|
||
onClose={() => setSelectedId(undefined)}
|
||
/>
|
||
|
||
<Modal
|
||
isOpen={bulkRejectOpen}
|
||
onClose={() => setBulkRejectOpen(false)}
|
||
title={t('reviews.bulk.rejectModalTitle', { count: selection.size })}
|
||
>
|
||
<div className="space-y-3">
|
||
<p className="text-cell text-ink-2">
|
||
{t('reviews.bulk.rejectModalDescription')}
|
||
</p>
|
||
<TextArea
|
||
label={t('reviews.bulk.rejectReasonLabel')}
|
||
value={bulkRejectReason}
|
||
onChange={(e) => setBulkRejectReason(e.target.value)}
|
||
rows={3}
|
||
placeholder={t('reviews.bulk.rejectReasonPlaceholder')}
|
||
/>
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => {
|
||
setBulkRejectOpen(false)
|
||
setBulkRejectReason('')
|
||
}}
|
||
>
|
||
{t('reviews.bulk.cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="primary"
|
||
disabled={!bulkRejectReason.trim() || bulkRunning}
|
||
onClick={handleBulkReject}
|
||
>
|
||
{t('reviews.bulk.confirmReject', { count: selection.size })}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
type DrawerProps = {
|
||
draftId: string | undefined
|
||
onClose: () => void
|
||
}
|
||
|
||
/**
|
||
* Превращает Axios error в human-readable title + body. Mapping для
|
||
* известных backend кодов (см. {@code OrdinisException.conflict}):
|
||
* - self_approve_forbidden — maker = reviewer (D3 maker-checker invariant)
|
||
* - draft_not_pending — кто-то уже approve/reject'нул этот draft
|
||
* - forbidden_role — у actor'а нет нужной workflow роли (Phase 1d enforcement)
|
||
*
|
||
* Default fallback — backend message + статус код. Сырой "AxiosError ... 409"
|
||
* больше не показывается.
|
||
*/
|
||
function extractReviewError(err: unknown): { title: string; body: string } {
|
||
if (!err) return { title: 'Ошибка', body: '' }
|
||
if (axios.isAxiosError(err)) {
|
||
const status = err.response?.status
|
||
const data = err.response?.data as
|
||
| { code?: string; message?: string; error?: string }
|
||
| undefined
|
||
const code = data?.code
|
||
const msg = data?.message ?? data?.error ?? err.message
|
||
|
||
if (code === 'self_approve_forbidden') {
|
||
return {
|
||
title: 'Нельзя одобрить свой собственный черновик',
|
||
body:
|
||
'Maker-checker invariant: тот, кто создал draft, не может его approve. Попроси другого reviewer\'а из пула.',
|
||
}
|
||
}
|
||
if (code === 'self_reject_forbidden') {
|
||
return {
|
||
title: 'Нельзя отклонить свой собственный черновик',
|
||
body:
|
||
'Тот, кто создал draft, не может его reject. Если передумал — используй Отозвать (withdraw).',
|
||
}
|
||
}
|
||
if (code === 'draft_not_pending') {
|
||
return {
|
||
title: 'Draft уже не pending',
|
||
body: 'Кто-то уже принял решение по этому draft\'у. Обнови очередь.',
|
||
}
|
||
}
|
||
if (code === 'forbidden_role') {
|
||
return {
|
||
title: 'Недостаточно прав',
|
||
body: msg || 'У вас нет нужной workflow role для этого действия.',
|
||
}
|
||
}
|
||
if (code === 'reject_reason_required') {
|
||
return {
|
||
title: 'Укажите причину отклонения',
|
||
body: 'Поле «Комментарий ревьюера» обязательно для reject (для compliance).',
|
||
}
|
||
}
|
||
return {
|
||
title: `Ошибка ${status ?? ''}`.trim(),
|
||
body: msg,
|
||
}
|
||
}
|
||
return {
|
||
title: 'Ошибка',
|
||
body: err instanceof Error ? err.message : String(err),
|
||
}
|
||
}
|
||
|
||
function ReviewDrawer({ draftId, onClose }: DrawerProps) {
|
||
const { t } = useTranslation()
|
||
const auth = useAuth()
|
||
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/{name}/records/{key} → 404, красный шум в
|
||
// консоли на каждый CREATE-draft). Для UPDATE/CLOSE — грузим как раньше.
|
||
const isCreateDraft = draft?.operation === 'CREATE'
|
||
const liveQ = useLiveRecord(
|
||
draft && !isCreateDraft ? dictName : undefined,
|
||
draft && !isCreateDraft ? draft.businessKey : undefined,
|
||
)
|
||
const approveMut = useApproveDraft()
|
||
const rejectMut = useRejectDraft()
|
||
const withdrawMut = useWithdrawDraft()
|
||
const [comment, setComment] = useState('')
|
||
/** Inline error для reject reason — show when reviewer кликнул Reject с
|
||
* пустым comment'ом. Реально cleared автоматически когда user печатает. */
|
||
const [rejectError, setRejectError] = useState<string | null>(null)
|
||
/** Brief success affordance после approve/reject mutation — drawer
|
||
* остаётся 600ms с зелёной/красной полосой, чтобы reviewer почувствовал
|
||
* что click registered. Без этого drawer закрывается мгновенно, click
|
||
* feedback теряется. */
|
||
const [decisionFlash, setDecisionFlash] = useState<'approve' | 'reject' | null>(null)
|
||
|
||
// Reset state когда reviewer переключается на другой draft без закрытия
|
||
// drawer'а (click row → open new draft в already-open drawer). Раньше
|
||
// {comment, rejectError} оставались от previous draft, и mutation .error
|
||
// объекты от approveMut/rejectMut/withdrawMut held conflict banners
|
||
// ('реверсное состояние draft', '409', etc.) из predыдущей попытки —
|
||
// показывались на форме нового draft (observed bug).
|
||
useEffect(() => {
|
||
setComment('')
|
||
setRejectError(null)
|
||
setDecisionFlash(null)
|
||
approveMut.reset()
|
||
rejectMut.reset()
|
||
withdrawMut.reset()
|
||
// approveMut/rejectMut/withdrawMut references stable между renders
|
||
// (TanStack mutation hook), но lint требует exhaustive deps. .reset
|
||
// — stable function, безопасно включить.
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [draftId])
|
||
|
||
// Identity gates — определяют что показать в footer'е drawer'а.
|
||
//
|
||
// 1. `isPending` = false: terminal draft (APPROVED/REJECTED/WITHDRAWN).
|
||
// Никаких actions — read-only diff + decision banner.
|
||
// 2. `isMineAndPending`: maker открыл свой собственный pending draft из
|
||
// "Мои" таба. Для regular maker'а Approve self запрещён backend'ом
|
||
// (self_approve_forbidden), показываем Withdraw. Admin override
|
||
// (MR !280): backend разрешает self-approve если у actor'а admin
|
||
// роль → frontend тоже снимает блокировку, иначе UI скрывает кнопку
|
||
// которую backend бы пропустил.
|
||
// 3. Иначе — reviewer flow: approve/reject как было.
|
||
const isAdmin = useIsAdmin()
|
||
const isPending = draft?.status === 'PENDING'
|
||
const isMineAndPending =
|
||
isPending && Boolean(currentSub) && draft?.makerId === currentSub && !isAdmin
|
||
|
||
const handleApprove = () => {
|
||
if (!draftId) return
|
||
approveMut.mutate(
|
||
{ id: draftId, comment: comment.trim() || undefined },
|
||
{
|
||
onSuccess: () => {
|
||
setDecisionFlash('approve')
|
||
// Hold drawer 600ms так чтобы reviewer увидел зелёную полосу;
|
||
// потом reset state и close. Без флэша approve было instant.
|
||
setTimeout(() => {
|
||
setComment('')
|
||
setDecisionFlash(null)
|
||
onClose()
|
||
}, 600)
|
||
},
|
||
},
|
||
)
|
||
}
|
||
|
||
const handleReject = () => {
|
||
if (!draftId) return
|
||
if (!comment.trim()) {
|
||
// Раньше return был silent — reviewer кликал Reject и ничего не
|
||
// происходило. Backend всё равно вернёт 400 missing_reject_reason,
|
||
// но user-friendly inline error лучше.
|
||
setRejectError(
|
||
t('reviews.drawer.rejectReasonRequired', {
|
||
defaultValue:
|
||
'Укажите причину отклонения — comment обязателен для reject (compliance).',
|
||
}),
|
||
)
|
||
return
|
||
}
|
||
setRejectError(null)
|
||
rejectMut.mutate(
|
||
{ id: draftId, comment: comment.trim() },
|
||
{
|
||
onSuccess: () => {
|
||
setDecisionFlash('reject')
|
||
setTimeout(() => {
|
||
setComment('')
|
||
setDecisionFlash(null)
|
||
onClose()
|
||
}, 600)
|
||
},
|
||
},
|
||
)
|
||
}
|
||
|
||
const handleWithdraw = () => {
|
||
if (!draftId) return
|
||
if (!confirm(t('reviews.action.withdrawConfirm', {
|
||
defaultValue: 'Отозвать свой черновик? После этого он попадёт в Decided.',
|
||
}))) return
|
||
withdrawMut.mutate(draftId, {
|
||
onSuccess: () => {
|
||
setComment('')
|
||
onClose()
|
||
},
|
||
})
|
||
}
|
||
|
||
return (
|
||
<Drawer
|
||
isOpen={Boolean(draftId)}
|
||
onClose={onClose}
|
||
title={t('reviews.drawer.title')}
|
||
side="right"
|
||
widthClassName="w-full max-w-3xl"
|
||
>
|
||
<div className="space-y-4">
|
||
{draftQ.isLoading && <LoadingBlock size="md" label={t('loading')} />}
|
||
{draftQ.error && (
|
||
<QueryErrorState error={draftQ.error} onRetry={() => draftQ.refetch()} />
|
||
)}
|
||
|
||
{draft && (
|
||
<>
|
||
{/* Tightened header: top row is identity (op + bk), bottom row is
|
||
provenance (who/when). Was a single flex-wrap line with four
|
||
spans — visually busy, hard to scan. */}
|
||
<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>
|
||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-mute">
|
||
<span className="inline-flex items-center gap-1">
|
||
{t('reviews.drawer.maker')}: <UserCell uuid={draft.makerId} />
|
||
</span>
|
||
<span>
|
||
{t('reviews.drawer.submitted')}:{' '}
|
||
{new Date(draft.submittedAt).toLocaleString()}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Read-only decision banner — для всех terminal статусов. Показывает
|
||
reviewer'а + decision time + reviewer comment чтобы maker'у не
|
||
пришлось гадать "что произошло". */}
|
||
{!isPending && (
|
||
<div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-cell space-y-1">
|
||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-mute">
|
||
{draft.reviewerId && (
|
||
<span className="inline-flex items-center gap-1">
|
||
{t('reviews.drawer.reviewer', { defaultValue: 'Ревьюер' })}:{' '}
|
||
<UserCell uuid={draft.reviewerId} />
|
||
</span>
|
||
)}
|
||
{draft.reviewedAt && (
|
||
<span>
|
||
{t('reviews.drawer.reviewedAt', { defaultValue: 'Решение' })}:{' '}
|
||
{new Date(draft.reviewedAt).toLocaleString()}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{draft.reviewComment && (
|
||
<div>
|
||
<span className="text-mute uppercase tracking-[0.10em] font-display">
|
||
{t('reviews.drawer.reviewComment', { defaultValue: 'Комментарий' })}:
|
||
</span>{' '}
|
||
{draft.reviewComment}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{draft.makerComment && (
|
||
<div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-cell">
|
||
<span className="text-mute uppercase tracking-[0.10em] font-display">
|
||
{t('reviews.drawer.makerComment')}:
|
||
</span>{' '}
|
||
{draft.makerComment}
|
||
</div>
|
||
)}
|
||
|
||
<DraftDiffSummary
|
||
live={liveQ.data?.data as Record<string, unknown> | null | undefined}
|
||
proposed={draft.data as Record<string, unknown> | null | undefined}
|
||
operation={draft.operation}
|
||
/>
|
||
|
||
{(() => {
|
||
// Считаем 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
|
||
const info = extractReviewError(err)
|
||
return (
|
||
<Alert variant="error" title={info.title}>
|
||
{info.body}
|
||
</Alert>
|
||
)
|
||
})()}
|
||
|
||
{/* Action footer split на три режима:
|
||
- terminal (не pending) — только Close, нет input/actions
|
||
- own pending — Withdraw, без comment input (maker не reviewer'ит)
|
||
- peer pending — approve/reject (existing reviewer flow) */}
|
||
{!isPending && (
|
||
<div className="border-t border-line pt-3 flex items-center justify-end">
|
||
<Button variant="secondary" onClick={onClose}>
|
||
{t('reviews.action.close', { defaultValue: 'Закрыть' })}
|
||
</Button>
|
||
</div>
|
||
)}
|
||
|
||
{isMineAndPending && (
|
||
<div className="border-t border-line pt-3 space-y-2">
|
||
<p className="text-cell text-mute">
|
||
{t('reviews.drawer.ownPendingHint', {
|
||
defaultValue: 'Это ваш черновик на ревью. Approve/reject запрещены — можно отозвать.',
|
||
})}
|
||
</p>
|
||
<div className="flex items-center justify-end gap-2 pt-2">
|
||
<Button
|
||
variant="secondary"
|
||
onClick={onClose}
|
||
disabled={withdrawMut.isPending}
|
||
>
|
||
{t('reviews.action.cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
leftIcon={<ArrowCounterClockwiseIcon weight="bold" size={14} />}
|
||
onClick={handleWithdraw}
|
||
disabled={withdrawMut.isPending}
|
||
loading={withdrawMut.isPending}
|
||
>
|
||
{t('reviews.action.withdraw', { defaultValue: 'Отозвать' })}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isPending && !isMineAndPending && (
|
||
<div
|
||
className={
|
||
'border-t pt-3 space-y-2 transition-colors duration-300 -mx-4 px-4 ' +
|
||
(decisionFlash === 'approve'
|
||
? 'border-green bg-green-bg/30'
|
||
: decisionFlash === 'reject'
|
||
? 'border-pink bg-pink-bg/30'
|
||
: 'border-line')
|
||
}
|
||
>
|
||
<label
|
||
htmlFor="review-comment"
|
||
className="text-cap text-ink-2"
|
||
>
|
||
{t('reviews.drawer.comment')}
|
||
</label>
|
||
<TextInput
|
||
id="review-comment"
|
||
value={comment}
|
||
onChange={(e) => {
|
||
setComment(e.target.value)
|
||
// Stale validation error gone как только user печатает.
|
||
if (rejectError && e.target.value.trim()) setRejectError(null)
|
||
}}
|
||
placeholder={t('reviews.drawer.commentPlaceholder')}
|
||
aria-invalid={Boolean(rejectError)}
|
||
aria-describedby={rejectError ? 'review-comment-error' : undefined}
|
||
/>
|
||
{rejectError && (
|
||
<p
|
||
id="review-comment-error"
|
||
role="alert"
|
||
className="text-cell text-pink"
|
||
>
|
||
{rejectError}
|
||
</p>
|
||
)}
|
||
<div className="flex items-center justify-end gap-2 pt-2">
|
||
<Button
|
||
variant="secondary"
|
||
onClick={onClose}
|
||
disabled={approveMut.isPending || rejectMut.isPending}
|
||
>
|
||
{t('reviews.action.cancel')}
|
||
</Button>
|
||
<Button
|
||
variant="danger"
|
||
leftIcon={<XCircleIcon weight="bold" size={14} />}
|
||
onClick={handleReject}
|
||
disabled={rejectMut.isPending || approveMut.isPending}
|
||
loading={rejectMut.isPending}
|
||
>
|
||
{t('reviews.action.reject')}
|
||
</Button>
|
||
<Button
|
||
variant="primary"
|
||
leftIcon={<CheckCircleIcon weight="bold" size={14} />}
|
||
onClick={handleApprove}
|
||
disabled={approveMut.isPending || rejectMut.isPending}
|
||
loading={approveMut.isPending}
|
||
>
|
||
{t('reviews.action.approve')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</Drawer>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Schema review pool queue — global view всех \`review_pending\` schema
|
||
* draft'ов через {@code GET /admin/schema-reviews/pending}. Reviewer
|
||
* жмёт «Открыть» → переходит на dict detail page, banner+drawer
|
||
* автоматически подхватятся через {@code useDictActiveSchemaDraft}.
|
||
*
|
||
* <p>Скрывается если pool пуст — экономит вертикальное место на странице
|
||
* для основного record-review queue.
|
||
*/
|
||
function SchemaReviewQueuePanel() {
|
||
const { t } = useTranslation()
|
||
const queue = useSchemaReviewQueue(0, 20)
|
||
const items = queue.data?.items ?? []
|
||
if (queue.isLoading || items.length === 0) return null
|
||
|
||
return (
|
||
<Panel>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div>
|
||
<h2 className="text-title-md font-semibold">
|
||
{t('reviews.schema.title', { defaultValue: 'Изменения схем' })}
|
||
</h2>
|
||
<p className="text-cell text-mute mt-0.5">
|
||
{t('reviews.schema.queueTotal', {
|
||
count: queue.data?.totalElements ?? items.length,
|
||
defaultValue: `${queue.data?.totalElements ?? items.length} draft(s) ждут ревью`,
|
||
})}
|
||
</p>
|
||
</div>
|
||
<Badge variant="info">
|
||
{t('reviews.schema.label', { defaultValue: 'Schema workflow' })}
|
||
</Badge>
|
||
</div>
|
||
<Table>
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableHeaderCell>{t('reviews.schema.dictionary', { defaultValue: 'Словарь' })}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.schema.fromVersion', { defaultValue: 'От версии' })}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.schema.maker', { defaultValue: 'Автор' })}</TableHeaderCell>
|
||
<TableHeaderCell>{t('reviews.schema.submittedAt', { defaultValue: 'Отправлен' })}</TableHeaderCell>
|
||
<TableHeaderCell align="right">{t('reviews.schema.action', { defaultValue: 'Действие' })}</TableHeaderCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{items.map((d) => (
|
||
<TableRow key={d.draftId}>
|
||
<TableCell>
|
||
<Link
|
||
to="/dictionaries/$name"
|
||
params={{ name: d.dictionaryName }}
|
||
className="text-accent hover:underline font-mono"
|
||
>
|
||
{d.dictionaryName}
|
||
</Link>
|
||
</TableCell>
|
||
<TableCell className="font-mono tabular-nums">v{d.branchedFromVersion}</TableCell>
|
||
<TableCell><UserCell uuid={d.makerId} /></TableCell>
|
||
<TableCell className="tabular-nums">
|
||
{d.submittedAt ? new Date(d.submittedAt).toLocaleString() : '—'}
|
||
</TableCell>
|
||
<TableCell align="right">
|
||
<Link
|
||
to="/dictionaries/$name"
|
||
params={{ name: d.dictionaryName }}
|
||
className="text-accent hover:underline"
|
||
>
|
||
{t('reviews.schema.open', { defaultValue: 'Открыть' })} →
|
||
</Link>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</Panel>
|
||
)
|
||
}
|