feat(schema-workflow): Phase 1b — SchemaDraftDrawer with status-aware actions

2026-05-12 11:08:31 +00:00
parent 2a3f2099e5
commit dd3a2d97e5
6 changed files with 1065 additions and 3 deletions
@@ -1,8 +1,11 @@
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from '@tanstack/react-router'
-import { ClipboardList, FileText } from 'lucide-react'
-import type { DictionaryDetail } from '@/api/client'
+import { ClipboardList, FileText, GitBranch } from 'lucide-react'
+import type { DictionaryDetail, SchemaDraft, SchemaDraftStatus } from '@/api/client'
+import { useDictActiveSchemaDraft } from '@/api/queries'
 import { cn } from '@/lib/utils'
+import { SchemaDraftDrawer } from '@/components/workflow/SchemaDraftDrawer'

 /**
 * WorkflowBanner — status banner для editor (Screen 2 per handoff).
@@ -32,8 +35,18 @@ export type WorkflowBannerProps = {

 export function WorkflowBanner({ detail, pendingCount = 0 }: WorkflowBannerProps) {
  const { t } = useTranslation()
+  // Phase 1a: read-side active schema draft. Если на dict'е есть
+  // non-terminal schema draft — surface'им его state выше record-approval
+  // banner'а (schema draft = higher salience: меняет структуру всего dict'а,
+  // record approval — per-row).
+  const { data: schemaDraft } = useDictActiveSchemaDraft(detail.name)

-  // === Case 1: Live — no approval required ===
+  // === Case A: Active schema draft — highest priority ===
+  if (schemaDraft) {
+    return <SchemaDraftBanner draft={schemaDraft} detail={detail} />
+  }
+
+  // === Case 1: Live — no approval required (and no schema draft) ===
  // Постоянный "Опубликовано" banner = шум. Status уже виден в InfoPanel
  // (scope, version, updatedAt). Не показываем banner вообще.
  if (!detail.approvalRequired) {
@@ -102,6 +115,94 @@ const VARIANT_CLASS: Record<BannerProps['variant'], string> = {
  draft: 'bg-warn-bg border-l-warn text-ink',
 }

+/**
+ * Schema-level draft banner — surface'им active non-terminal draft каждому
+ * пользователю который заходит в editor словаря. Tone зависит от status'а:
+ *
+ * <ul>
+ *   <li>draft / changes_requested — warn (maker должен дойти и submit'нуть).</li>
+ *   <li>review_pending — info (approvers watching, maker waits).</li>
+ *   <li>approved — review (готов к publish, кто-то с publish_role нажмёт).</li>
+ * </ul>
+ *
+ * <p>Phase 1a: read-only banner. Кнопки «Отправить», «Approve», «Publish»
+ * проводным появятся в Phase 1b (модалки + RBAC role check). Сейчас просто
+ * link на draft detail (когда такая страница появится — placeholder).
+ */
+function SchemaDraftBanner({
+  draft,
+  detail,
+}: {
+  draft: SchemaDraft
+  detail: DictionaryDetail
+}) {
+  const { t } = useTranslation()
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const variant = schemaDraftVariant(draft.status)
+  const labelKey = `workflow.schemaDraft.${draft.status}`
+  const fallbackLabel: Record<SchemaDraftStatus, string> = {
+    draft: 'Черновик схемы создан',
+    review_pending: 'Черновик схемы на ревью',
+    approved: 'Черновик схемы одобрен',
+    changes_requested: 'По черновику запрошены правки',
+    rejected: 'Черновик схемы отклонён',
+    published: 'Черновик опубликован',
+    withdrawn: 'Черновик отозван',
+  }
+  return (
+    <>
+      <Banner
+        variant={variant}
+        icon={<GitBranch size={16} strokeWidth={2} className="shrink-0" />}
+        action={
+          <button
+            type="button"
+            onClick={() => setDrawerOpen(true)}
+            className="text-body font-medium text-accent hover:underline shrink-0 cursor-pointer"
+          >
+            {t('workflow.schemaDraft.open', { defaultValue: 'Открыть черновик' })} →
+          </button>
+        }
+      >
+        <span className="font-medium">
+          {t(labelKey, { defaultValue: fallbackLabel[draft.status] })}
+        </span>
+        <span className="text-cell opacity-70">
+          {t('workflow.schemaDraft.subtitle', {
+            fromVersion: draft.branchedFromVersion,
+            defaultValue: `от v${draft.branchedFromVersion}`,
+          })}
+        </span>
+      </Banner>
+      <SchemaDraftDrawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        dictionaryName={detail.name}
+        currentHeadVersion={detail.schemaVersion}
+      />
+    </>
+  )
+}
+
+function schemaDraftVariant(status: SchemaDraftStatus): BannerProps['variant'] {
+  switch (status) {
+    case 'draft':
+    case 'changes_requested':
+      return 'draft'
+    case 'review_pending':
+      return 'review'
+    case 'approved':
+      return 'live'
+    case 'rejected':
+    case 'withdrawn':
+    case 'published':
+      // Terminal states обычно не должны попасть сюда (useDictActiveSchemaDraft
+      // фильтрует non-terminal), но если backend пометил draft active'ом —
+      // показываем neutral info.
+      return 'info'
+  }
+}
+
 function Banner({ variant, icon, action, children }: BannerProps) {
  return (
    <div
@@ -0,0 +1,528 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import axios from 'axios'
+import { Alert, Badge, Button, Drawer, LoadingBlock, TextArea, toast } from '@/ui'
+import {
+  CheckIcon,
+  PaperPlaneTiltIcon,
+  XCircleIcon,
+  ArrowsCounterClockwiseIcon,
+  RocketIcon,
+  TrashIcon,
+} from '@phosphor-icons/react'
+import {
+  isActiveSchemaDraft,
+  type SchemaDraft,
+  type SchemaDraftStatus,
+  type SchemaDraftVerdict,
+} from '@/api/client'
+import { useDictActiveSchemaDraft } from '@/api/queries'
+import {
+  useDecideSchemaDraft,
+  usePublishSchemaDraft,
+  useSubmitSchemaDraftForReview,
+  useWithdrawSchemaDraft,
+} from '@/api/mutations'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  dictionaryName: string
+  /** Current live schemaVersion — passed для publish expectedHeadVersion check. */
+  currentHeadVersion: string | undefined
+}
+
+/**
+ * Right-side drawer для schema draft — full state + status-aware actions.
+ *
+ * <p>Загружает активный draft через {@link useDictActiveSchemaDraft}.
+ * Comment textarea используется как:
+ * <ul>
+ *   <li>{@code review_pending} — reviewer пишет decision comment (approve/
+ *       request_changes/reject).</li>
+ *   <li>{@code draft / changes_requested} — maker note при submit.</li>
+ *   <li>{@code approved} — publish release note.</li>
+ * </ul>
+ *
+ * <p>Все действия идут через mutations из {@code @/api/mutations}.
+ * Backend сам отрезает невалидные transitions (403 self_approve_forbidden,
+ * 409 invalid_transition, 409 version_mismatch) — мы показываем error
+ * toast с raw message.
+ *
+ * <p>Phase 1b: maker И reviewer actions показаны всем (backend гейтит).
+ * Phase 1c integration RBAC из Keycloak roles claim сузит видимость.
+ */
+export function SchemaDraftDrawer({
+  open,
+  onClose,
+  dictionaryName,
+  currentHeadVersion,
+}: Props) {
+  const { t } = useTranslation()
+  const [comment, setComment] = useState('')
+  const { data: draft, isLoading, error } = useDictActiveSchemaDraft(
+    open ? dictionaryName : undefined,
+  )
+
+  const submitMut = useSubmitSchemaDraftForReview(dictionaryName)
+  const decideMut = useDecideSchemaDraft(dictionaryName)
+  const publishMut = usePublishSchemaDraft(dictionaryName)
+  const withdrawMut = useWithdrawSchemaDraft(dictionaryName)
+
+  const handleError = (err: unknown, fallback: string) => {
+    let msg = fallback
+    if (axios.isAxiosError(err)) {
+      const body = err.response?.data
+      if (body && typeof body === 'object') {
+        const code = (body as { code?: string }).code
+        const message = (body as { message?: string }).message
+        msg = message ?? code ?? fallback
+      }
+    }
+    toast.error(msg)
+  }
+
+  const onSubmitReview = () => {
+    if (!draft) return
+    submitMut.mutate(
+      { draftId: draft.draftId, body: { note: comment || null } },
+      {
+        onSuccess: () => {
+          toast.success(
+            t('workflow.schemaDraft.toast.submitted', {
+              defaultValue: 'Отправлено на ревью',
+            }),
+          )
+          setComment('')
+        },
+        onError: (e) =>
+          handleError(e, t('workflow.schemaDraft.toast.submitFailed', {
+            defaultValue: 'Не удалось отправить на ревью',
+          })),
+      },
+    )
+  }
+
+  const onDecide = (verdict: SchemaDraftVerdict) => {
+    if (!draft) return
+    decideMut.mutate(
+      { draftId: draft.draftId, body: { decision: verdict, comment: comment || undefined } },
+      {
+        onSuccess: () => {
+          toast.success(
+            t(`workflow.schemaDraft.toast.${verdict.toLowerCase()}`, {
+              defaultValue: verdictSuccessFallback(verdict),
+            }),
+          )
+          setComment('')
+        },
+        onError: (e) =>
+          handleError(e, t('workflow.schemaDraft.toast.decideFailed', {
+            defaultValue: 'Не удалось зафиксировать решение',
+          })),
+      },
+    )
+  }
+
+  const onPublish = () => {
+    if (!draft || !currentHeadVersion) return
+    publishMut.mutate(
+      {
+        draftId: draft.draftId,
+        body: {
+          expectedHeadVersion: currentHeadVersion,
+          publishNote: comment || undefined,
+        },
+      },
+      {
+        onSuccess: (res) => {
+          toast.success(
+            t('workflow.schemaDraft.toast.published', {
+              version: res.newVersion,
+              defaultValue: `Опубликовано v${res.newVersion}`,
+            }),
+          )
+          setComment('')
+          onClose()
+        },
+        onError: (e) =>
+          handleError(e, t('workflow.schemaDraft.toast.publishFailed', {
+            defaultValue: 'Не удалось опубликовать',
+          })),
+      },
+    )
+  }
+
+  const onWithdraw = () => {
+    if (!draft) return
+    const ok = window.confirm(
+      t('workflow.schemaDraft.confirmWithdraw', {
+        defaultValue: 'Отозвать черновик? Действие нельзя отменить.',
+      }) as string,
+    )
+    if (!ok) return
+    withdrawMut.mutate(draft.draftId, {
+      onSuccess: () => {
+        toast.success(
+          t('workflow.schemaDraft.toast.withdrawn', {
+            defaultValue: 'Черновик отозван',
+          }),
+        )
+        onClose()
+      },
+      onError: (e) =>
+        handleError(e, t('workflow.schemaDraft.toast.withdrawFailed', {
+          defaultValue: 'Не удалось отозвать',
+        })),
+    })
+  }
+
+  const anyPending =
+    submitMut.isPending ||
+    decideMut.isPending ||
+    publishMut.isPending ||
+    withdrawMut.isPending
+
+  return (
+    <Drawer
+      isOpen={open}
+      onClose={onClose}
+      side="right"
+      widthClassName="w-full max-w-xl"
+      title={t('workflow.schemaDraft.drawerTitle', {
+        defaultValue: 'Черновик схемы',
+      })}
+    >
+      <div className="space-y-4">
+        {isLoading && <LoadingBlock size="md" label={t('loading')} />}
+        {error && (
+          <Alert variant="error" title={t('error.failed')}>
+            {String(error)}
+          </Alert>
+        )}
+        {!isLoading && !draft && (
+          <p className="text-body text-mute">
+            {t('workflow.schemaDraft.empty', {
+              defaultValue: 'Активного черновика схемы нет.',
+            })}
+          </p>
+        )}
+
+        {draft && (
+          <>
+            <DraftHeader draft={draft} />
+            <DraftMeta draft={draft} />
+
+            {/* Read-only proposed schema. Edit flow (CreateModal) — отдельный
+                cliff в Phase 1c. Здесь просто видим что предлагается. */}
+            <ProposedSchemaPane data={draft.proposedSchema} />
+
+            {/* Comment textarea. Один текстовое поле, semantics зависит от
+                status'а (см. drawer-level JSDoc). */}
+            <div>
+              <label className="block text-cap text-mute font-display uppercase tracking-wider mb-1">
+                {commentLabel(draft.status, t)}
+              </label>
+              <TextArea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                placeholder={commentPlaceholder(draft.status, t)}
+                rows={3}
+                disabled={anyPending}
+              />
+            </div>
+
+            {/* Action bar — status-aware. Bottom-sticky визуально, но рендерим
+                inline т.к. Drawer sheet flow-based. */}
+            <DraftActions
+              status={draft.status}
+              onSubmitReview={onSubmitReview}
+              onDecide={onDecide}
+              onPublish={onPublish}
+              onWithdraw={onWithdraw}
+              disabled={anyPending}
+              hasCurrentVersion={Boolean(currentHeadVersion)}
+            />
+          </>
+        )}
+      </div>
+    </Drawer>
+  )
+}
+
+function DraftHeader({ draft }: { draft: SchemaDraft }) {
+  const { t } = useTranslation()
+  return (
+    <div className="flex flex-wrap items-baseline gap-2">
+      <span className="text-mono text-cell text-mute">
+        {draft.draftId.slice(0, 8)}
+      </span>
+      <StatusBadge status={draft.status} />
+      {!isActiveSchemaDraft(draft.status) && (
+        <Badge variant="outline">
+          {t('workflow.schemaDraft.terminal', { defaultValue: 'terminal' })}
+        </Badge>
+      )}
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: SchemaDraftStatus }) {
+  const { t } = useTranslation()
+  const variant: 'default' | 'success' | 'warning' | 'danger' | 'info' | 'primary' = (() => {
+    switch (status) {
+      case 'draft':
+      case 'changes_requested':
+        return 'warning'
+      case 'review_pending':
+        return 'info'
+      case 'approved':
+        return 'success'
+      case 'rejected':
+      case 'withdrawn':
+        return 'danger'
+      case 'published':
+        return 'primary'
+    }
+  })()
+  const fallback: Record<SchemaDraftStatus, string> = {
+    draft: 'Черновик',
+    review_pending: 'На ревью',
+    approved: 'Одобрено',
+    changes_requested: 'Запрошены правки',
+    rejected: 'Отклонён',
+    published: 'Опубликован',
+    withdrawn: 'Отозван',
+  }
+  return (
+    <Badge variant={variant}>
+      {t(`workflow.schemaDraft.statusBadge.${status}`, {
+        defaultValue: fallback[status],
+      })}
+    </Badge>
+  )
+}
+
+function DraftMeta({ draft }: { draft: SchemaDraft }) {
+  const { t } = useTranslation()
+  return (
+    <dl className="grid grid-cols-[120px_1fr] gap-y-1 gap-x-3 text-cell">
+      <Row label={t('workflow.schemaDraft.maker', { defaultValue: 'Автор' })}>
+        <span className="font-mono">{draft.makerId}</span>
+      </Row>
+      <Row label={t('workflow.schemaDraft.from', { defaultValue: 'От версии' })}>
+        v{draft.branchedFromVersion}
+      </Row>
+      <Row label={t('workflow.schemaDraft.createdAt', { defaultValue: 'Создан' })}>
+        <span className="tabular-nums">
+          {new Date(draft.createdAt).toLocaleString()}
+        </span>
+      </Row>
+      {draft.submittedAt && (
+        <Row label={t('workflow.schemaDraft.submittedAt', { defaultValue: 'На ревью с' })}>
+          <span className="tabular-nums">
+            {new Date(draft.submittedAt).toLocaleString()}
+          </span>
+        </Row>
+      )}
+      {draft.decisionAt && (
+        <Row label={t('workflow.schemaDraft.decisionAt', { defaultValue: 'Решение' })}>
+          <span className="tabular-nums">
+            {new Date(draft.decisionAt).toLocaleString()}
+          </span>
+        </Row>
+      )}
+      {draft.reason && (
+        <Row label={t('workflow.schemaDraft.reason', { defaultValue: 'Причина' })}>
+          <span className="italic">{draft.reason}</span>
+        </Row>
+      )}
+      {draft.decisionComment && (
+        <Row label={t('workflow.schemaDraft.decisionComment', {
+          defaultValue: 'Комментарий',
+        })}>
+          <span className="italic">{draft.decisionComment}</span>
+        </Row>
+      )}
+    </dl>
+  )
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <>
+      <dt className="text-mute font-display uppercase tracking-wider text-cap">{label}</dt>
+      <dd className="text-ink">{children}</dd>
+    </>
+  )
+}
+
+function ProposedSchemaPane({ data }: { data: unknown }) {
+  const { t } = useTranslation()
+  return (
+    <div className="rounded-lg border border-line bg-surface overflow-hidden">
+      <div className="px-3 py-2 border-b border-line text-cap font-semibold uppercase tracking-wider text-mute">
+        {t('workflow.schemaDraft.proposed', {
+          defaultValue: 'Предложенная схема',
+        })}
+      </div>
+      <pre className="text-mono text-cell p-3 overflow-auto max-h-[40vh] bg-[#0c0a23] text-[#f0eaff]">
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </div>
+  )
+}
+
+function DraftActions({
+  status,
+  onSubmitReview,
+  onDecide,
+  onPublish,
+  onWithdraw,
+  disabled,
+  hasCurrentVersion,
+}: {
+  status: SchemaDraftStatus
+  onSubmitReview: () => void
+  onDecide: (v: SchemaDraftVerdict) => void
+  onPublish: () => void
+  onWithdraw: () => void
+  disabled: boolean
+  hasCurrentVersion: boolean
+}) {
+  const { t } = useTranslation()
+
+  if (!isActiveSchemaDraft(status)) {
+    return (
+      <p className="text-cell text-mute italic">
+        {t('workflow.schemaDraft.terminalHint', {
+          defaultValue: 'Терминальный статус — действия недоступны.',
+        })}
+      </p>
+    )
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-line">
+      {(status === 'draft' || status === 'changes_requested') && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={onSubmitReview}
+          disabled={disabled}
+          leftIcon={<PaperPlaneTiltIcon weight="regular" size={14} />}
+        >
+          {status === 'draft'
+            ? t('workflow.schemaDraft.actions.submit', {
+                defaultValue: 'Отправить на ревью',
+              })
+            : t('workflow.schemaDraft.actions.resubmit', {
+                defaultValue: 'Доработать и отправить',
+              })}
+        </Button>
+      )}
+      {status === 'review_pending' && (
+        <>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => onDecide('APPROVE')}
+            disabled={disabled}
+            leftIcon={<CheckIcon weight="regular" size={14} />}
+          >
+            {t('workflow.schemaDraft.actions.approve', { defaultValue: 'Approve' })}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onDecide('REQUEST_CHANGES')}
+            disabled={disabled}
+            leftIcon={<ArrowsCounterClockwiseIcon weight="regular" size={14} />}
+          >
+            {t('workflow.schemaDraft.actions.requestChanges', {
+              defaultValue: 'Запросить правки',
+            })}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onDecide('REJECT')}
+            disabled={disabled}
+            leftIcon={<XCircleIcon weight="regular" size={14} />}
+          >
+            {t('workflow.schemaDraft.actions.reject', { defaultValue: 'Отклонить' })}
+          </Button>
+        </>
+      )}
+      {status === 'approved' && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={onPublish}
+          disabled={disabled || !hasCurrentVersion}
+          leftIcon={<RocketIcon weight="regular" size={14} />}
+        >
+          {t('workflow.schemaDraft.actions.publish', { defaultValue: 'Опубликовать' })}
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onWithdraw}
+        disabled={disabled}
+        className="ml-auto text-danger hover:text-danger"
+        leftIcon={<TrashIcon weight="regular" size={14} />}
+      >
+        {t('workflow.schemaDraft.actions.withdraw', { defaultValue: 'Отозвать' })}
+      </Button>
+    </div>
+  )
+}
+
+function commentLabel(status: SchemaDraftStatus, t: (k: string, o?: { defaultValue?: string }) => string): string {
+  switch (status) {
+    case 'review_pending':
+      return t('workflow.schemaDraft.comment.decision', {
+        defaultValue: 'Комментарий ревьюера',
+      })
+    case 'approved':
+      return t('workflow.schemaDraft.comment.publish', {
+        defaultValue: 'Release note',
+      })
+    case 'draft':
+    case 'changes_requested':
+      return t('workflow.schemaDraft.comment.note', {
+        defaultValue: 'Комментарий автора',
+      })
+    default:
+      return t('workflow.schemaDraft.comment.note', { defaultValue: 'Комментарий' })
+  }
+}
+
+function commentPlaceholder(status: SchemaDraftStatus, t: (k: string, o?: { defaultValue?: string }) => string): string {
+  switch (status) {
+    case 'review_pending':
+      return t('workflow.schemaDraft.comment.decisionPlaceholder', {
+        defaultValue: 'Краткое обоснование решения (опционально)',
+      })
+    case 'approved':
+      return t('workflow.schemaDraft.comment.publishPlaceholder', {
+        defaultValue: 'Что меняется в этой версии (попадёт в changelog)',
+      })
+    default:
+      return t('workflow.schemaDraft.comment.notePlaceholder', {
+        defaultValue: 'На что обратить внимание ревьюеру',
+      })
+  }
+}
+
+function verdictSuccessFallback(v: SchemaDraftVerdict): string {
+  switch (v) {
+    case 'APPROVE':
+      return 'Черновик одобрен'
+    case 'REQUEST_CHANGES':
+      return 'Запрошены правки'
+    case 'REJECT':
+      return 'Черновик отклонён'
+  }
+}