From f81b35308b95442ec87cb2c80e199418c628c280 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 14 Sep 2026 13:39:47 +0700
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20Firewall=20=D0=B8=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BF=D0=BE=D1=80=D1=8F=D0=B4=D0=BE=D0=BA?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-grids/firewall-rules-data-grid.tsx   |  29 ++---
 .../firewall-scenario-rules-data-grid.tsx     |  24 ++--
 docs/ux-ui-progress.md                        |  12 ++
 tests/e2e/firewall-tables.spec.ts             | 112 ++++++++++++++++++
 4 files changed, 154 insertions(+), 23 deletions(-)
 create mode 100644 tests/e2e/firewall-tables.spec.ts

diff --git a/components/data-grids/firewall-rules-data-grid.tsx b/components/data-grids/firewall-rules-data-grid.tsx
index 45a266c5..4d3b0f43 100644
--- a/components/data-grids/firewall-rules-data-grid.tsx
+++ b/components/data-grids/firewall-rules-data-grid.tsx
@@ -1,12 +1,12 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { FirewallRule } from "@/lib/data"
 import { FormToggle } from "@/components/form-kit"
 import { cn } from "@/lib/utils"
@@ -18,15 +18,15 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
   DATA_GRID_CONTAINER_CLASS,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
-import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/legacy-data-grid"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/data-grid"
 import type { DragEndEvent } from "@dnd-kit/core"
 import { EmptyState } from "@/components/empty-state"
 import {
@@ -112,7 +112,7 @@ function FirewallRulesDataGrid({
   const reorderable = Boolean(onReorder)
   const indexPad = reorderable ? DATA_GRID_CELL_PAD : DATA_GRID_CELL_PAD_FIRST
 
-  const columns = useMemo<ColumnDef<FirewallRule & { _index: number }>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FirewallRule & { _index: number }>[]>(
     () => [
       ...(reorderable
         ? [{
@@ -125,7 +125,7 @@ function FirewallRulesDataGrid({
               headerClassName: DATA_GRID_CELL_PAD_FIRST,
               cellClassName: DATA_GRID_CELL_PAD_FIRST,
             },
-          } satisfies ColumnDef<FirewallRule & { _index: number }>]
+          } satisfies ColumnDef<DataGridFeatures, FirewallRule & { _index: number }>]
         : []),
       {
         id: "index",
@@ -157,7 +157,7 @@ function FirewallRulesDataGrid({
               </span>
             ),
             meta: { headerTitle: "Сервер", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
-          } satisfies ColumnDef<FirewallRule & { _index: number }>]
+          } satisfies ColumnDef<DataGridFeatures, FirewallRule & { _index: number }>]
         : []),
       {
         id: "chain",
@@ -318,11 +318,12 @@ function FirewallRulesDataGrid({
     [onEdit, onToggle, onDelete, showServer, reorderable, indexPad],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: indexedRules,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    ...(reorderable ? {} : { getSortedRowModel: getSortedRowModel() }),
+    manualSorting: reorderable,
     enableSorting: !reorderable,
     getRowId: (row) => row.id,
   })
diff --git a/components/data-grids/firewall-scenario-rules-data-grid.tsx b/components/data-grids/firewall-scenario-rules-data-grid.tsx
index a45f26ce..a83a4c8c 100644
--- a/components/data-grids/firewall-scenario-rules-data-grid.tsx
+++ b/components/data-grids/firewall-scenario-rules-data-grid.tsx
@@ -1,18 +1,19 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import { ActionBadge, ChainBadge } from "@/components/data-grids/firewall-rules-data-grid"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
+} from "@/components/data-grids/shared/data-grid-layout"
 import { cn } from "@/lib/utils"
 import { PowerIcon, Trash2Icon } from "lucide-react"
 
@@ -53,7 +54,7 @@ function FirewallScenarioRulesDataGrid({
     [rules],
   )
 
-  const columns = useMemo<ColumnDef<ScenarioRuleRow & { _index: number }>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, ScenarioRuleRow & { _index: number }>[]>(
     () => [
       {
         id: "index",
@@ -154,7 +155,7 @@ function FirewallScenarioRulesDataGrid({
         cell: ({ row }) => {
           const index = row.original._index - 1
           return (
-            <div className="flex items-center gap-0.5 justify-end opacity-0 group-hover/row:opacity-100 transition-opacity">
+            <div className="flex items-center gap-0.5 justify-end opacity-0 group-hover/row:opacity-100 focus-within:opacity-100 transition-opacity">
               <button
                 type="button"
                 onClick={() => onToggleEnabled(row.original.id)}
@@ -166,6 +167,7 @@ function FirewallScenarioRulesDataGrid({
               <button
                 type="button"
                 onClick={() => onMoveUp(row.original.id)}
+                aria-label={`Поднять правило ${index + 1}`}
                 disabled={index === 0}
                 className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
               >
@@ -174,6 +176,7 @@ function FirewallScenarioRulesDataGrid({
               <button
                 type="button"
                 onClick={() => onMoveDown(row.original.id)}
+                aria-label={`Опустить правило ${index + 1}`}
                 disabled={index === rules.length - 1}
                 className="p-0.5 text-muted-foreground/40 hover:text-foreground disabled:opacity-20 transition-colors"
               >
@@ -182,6 +185,7 @@ function FirewallScenarioRulesDataGrid({
               <button
                 type="button"
                 onClick={() => onRemove(row.original.id)}
+                aria-label={`Удалить правило ${index + 1}`}
                 className="p-0.5 ml-0.5 text-muted-foreground/40 hover:text-red-500 transition-colors"
               >
                 <Trash2Icon className="size-3.5" />
@@ -195,10 +199,12 @@ function FirewallScenarioRulesDataGrid({
     [onMoveDown, onMoveUp, onRemove, onToggleEnabled, rules.length],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: indexedRules,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => row.id,
   })
 
diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md
index e5dac91f..1084ecd3 100644
--- a/docs/ux-ui-progress.md
+++ b/docs/ux-ui-progress.md
@@ -268,6 +268,18 @@ TypeScript и целевой ESLint прошли. Браузерный сцен
 
 Квота: на старте использовано 64%, после статических проверок — 78% (остаток 22%). Новые блоки не начинать в резерве. Firewall не переносился: `firewall-rules-data-grid` использует DnD и требует чтения нового API и профильного браузерного теста перетаскивания с проверкой порядка. Следующий блок после проверки квоты — обе Firewall-таблицы; далее восемь таблиц диагностики/сборщика, общие legacy-потребители, старые Filters и удаление v8. Этап 4 остаётся открытым, ветку не выпускать. Сохранить локальный коммит без push.
 
+## Этап 4 — блок 7: Firewall и DnD
+
+Перенесены `firewall-rules-data-grid` и `firewall-scenario-rules-data-grid`. Общая основа — установленный ReUI v9; полный список сохранён через `manualPagination: true`. В режиме DnD применён `manualSorting: reorderable`, в локальном сценарии — `manualSorting: true`. Сохранены row ID, обработчики, формат запросов и правила допустимости перемещения. Props `DataGridTableDndRows` сверены с установленным исходником: `dataIds`, `handleDragEnd`. Примитивы ReUI не менялись. Действия сценария получили подписи поднятия/опускания/удаления и видимость при фокусе.
+
+Пять браузерных сценариев `tests/e2e/firewall-tables.spec.ts` прошли: клавиатурное и мышиное перемещение среди 12 правил, правильные rosId/destinationRosId в API, откат при ошибке 500, Escape без запроса, 12 правил локального сценария с перестановкой и удалением выбранной строки. Начальные падения объяснялись преждевременным завершением переноса в тесте; добавлено ожидание фактической смены цели DnD через live-region. Тесты используют HTTP-моки, не подтверждают применение RouterOS. Перенос между серверами/таблицами, touch, сортируемый режим общего списка и поведение на больших наборах остаются профильной и общей регрессии.
+
+TypeScript и целевой ESLint прошли. ReUI checklist получен: сохранены композиция и публичный API; проверены мышь/клавиатура и отмена переноса. Служебные объявления DnD пока английские — локализовать при профильной доступности, не считать её полностью принятой. Остальные ограничения предыдущих блоков сохраняются.
+
+Квота: использовано 0% на старте обновлённого окна, 34% после профильных тестов (общая квота аккаунта). Следующий блок — `data-collection-scheduler-data-grid`, `probes-schedule-data-grid`, `probes-speed-probes-data-grid`; затем `recursive-routes-data-grid` и четыре `route-optimizer-*-data-grid`. После них остаются общая legacy-основа/`data-table`, старые Filters и удаление v8 с полной регрессией. Этап 4 ещё не завершён; локальный коммит без push, ветку не выпускать.
+
+Production build блока 7: `npm run build` прошёл, 34 статические страницы. Это проверка сборки, не замена общей регрессии этапа 4.
+
 ## Карта миграции (исходная инвентаризация этапа 0)
 
 Текущая связка: @tanstack/react-table ^8.21.3, @tanstack/react-virtual ^3.14.4, base-nova. Актуальный ReUI MCP ранее подтвердил useTable/dataGridFeatures для Data Grid и дерево FilterQuery вместо filters/onChange для Filters. Перед установкой перепроверить совместимые версии, сохранить семантику существующих фильтров (простые условия → AND) и закрепить lockfile.
diff --git a/tests/e2e/firewall-tables.spec.ts b/tests/e2e/firewall-tables.spec.ts
new file mode 100644
index 00000000..177f6cbf
--- /dev/null
+++ b/tests/e2e/firewall-tables.spec.ts
@@ -0,0 +1,112 @@
+import { test, expect, type Page } from "@playwright/test"
+import type { FirewallRule } from "../../lib/data"
+
+async function setup(page: Page, failMove = false) {
+  let rules: FirewallRule[] = Array.from({ length: 12 }, (_, i) => ({
+    id: `rule-${i + 1}`, rosId: `*${i + 1}`, serverId: "1", serverName: "Тестовый роутер",
+    family: "ip", table: "filter", chain: "forward", action: "accept", proto: "tcp",
+    src: `192.0.2.${i + 1}`, dst: "", port: "443", iface: "", comment: `Правило ${i + 1}`,
+    enabled: true, hits: i + 1,
+  }))
+  const moves: Record<string, unknown>[] = []
+  await page.route("**/health", route => route.fulfill({ json: { ok: true } }))
+  await page.route("**/api/**", route => {
+    const path = new URL(route.request().url()).pathname
+    if (path === "/api/firewall/rules/move") {
+      const body = route.request().postDataJSON()
+      moves.push(body)
+      if (failMove) return route.fulfill({ status: 500, json: { message: "Ошибка перемещения" } })
+      const active = rules.find(r => r.rosId === body.rosId)!
+      rules = rules.filter(r => r !== active)
+      const destination = rules.findIndex(r => r.rosId === body.destinationRosId)
+      rules.splice(destination < 0 ? rules.length : destination, 0, active)
+      return route.fulfill({ json: { ok: true } })
+    }
+    return route.fulfill({ json: path === "/api/firewall/all" ? { rules, addressLists: [] }
+      : path === "/api/auth/config" ? { required: false }
+      : path === "/api/servers" ? [{ id: 1, name: "Тестовый роутер", host: "192.0.2.100", type: "exit-node", site: "TEST", country: "RU", asn: "", enabled: true, status: "online", latency: 1 }] : {} })
+  })
+  await page.goto("/firewall?server=1")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(12)
+  return moves
+}
+
+async function moveFirstDown(page: Page) {
+  const handle = page.locator('tr[data-row-id="rule-1"]').getByRole("button", { name: "Перетащите для изменения порядка строк", exact: true })
+  await handle.focus()
+  await page.keyboard.press("Space")
+  await expect(handle).toHaveAttribute("aria-pressed", "true")
+  await page.keyboard.press("ArrowDown")
+  await expect(page.locator('[role="status"]')).toContainText("over droppable area rule-2")
+  await page.keyboard.press("Space")
+}
+
+test("Firewall: клавиатурное перемещение подтверждается API и сохраняет все строки", async ({ page }) => {
+  const moves = await setup(page)
+  await moveFirstDown(page)
+  await expect.poll(() => moves.length).toBe(1)
+  expect(moves[0]).toMatchObject({ serverId: "1", family: "ip", table: "filter", rosId: "*1", destinationRosId: "*3" })
+  await expect(page.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id", "rule-2")
+  await expect(page.locator("tr[data-row-id]").nth(1)).toHaveAttribute("data-row-id", "rule-1")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(12)
+})
+
+test("Firewall: ошибка перемещения возвращает исходный порядок", async ({ page }) => {
+  const moves = await setup(page, true)
+  await moveFirstDown(page)
+  await expect.poll(() => moves.length).toBe(1)
+  await expect(page.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id", "rule-1")
+  await expect(page.locator("tr[data-row-id]")).toHaveCount(12)
+})
+
+test("Firewall: Escape отменяет перенос без API-запроса", async ({ page }) => {
+  const moves = await setup(page)
+  await page.locator('tr[data-row-id="rule-1"]').getByRole("button", { name: "Перетащите для изменения порядка строк", exact: true }).focus()
+  await page.keyboard.press("Space")
+  await expect(page.locator('tr[data-row-id="rule-1"]').getByRole("button", { name: "Перетащите для изменения порядка строк", exact: true })).toHaveAttribute("aria-pressed", "true")
+  await page.keyboard.press("ArrowDown")
+  await expect(page.locator('[role="status"]')).toContainText("over droppable area rule-2")
+  await page.keyboard.press("Escape")
+  await expect(page.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id", "rule-1")
+  expect(moves).toHaveLength(0)
+})
+
+test("Firewall: перенос мышью отправляет тот же запрос", async ({ page }) => {
+  const moves = await setup(page)
+  const handle = page.locator('tr[data-row-id="rule-1"]').getByRole("button", { name: "Перетащите для изменения порядка строк", exact: true })
+  await handle.scrollIntoViewIfNeeded()
+  const start = await handle.boundingBox()
+  const target = await page.locator('tr[data-row-id="rule-2"]').boundingBox()
+  if (!start || !target) throw new Error("Строки недоступны для переноса")
+  const x = start.x + start.width / 2
+  await page.mouse.move(x, start.y + start.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(x, target.y + target.height / 2, { steps: 10 })
+  await expect(page.locator('[role="status"]')).toContainText("over droppable area rule-2")
+  await page.mouse.up()
+  await expect.poll(() => moves.length).toBe(1)
+  expect(moves[0]).toMatchObject({ rosId: "*1", destinationRosId: "*3" })
+  await expect(page.locator("tr[data-row-id]").first()).toHaveAttribute("data-row-id", "rule-2")
+})
+
+test("Сценарий Firewall: 12 правил, перемещение и удаление в черновике", async ({ page }) => {
+  await setup(page)
+  await page.getByRole("button", { name: "Симулятор", exact: true }).click()
+  await page.getByRole("button", { name: "Новый сценарий", exact: true }).click()
+  const dialog = page.getByRole("dialog")
+  for (let i = 0; i < 12; i++) {
+    await dialog.getByRole("button", { name: "Добавить правило", exact: true }).click()
+    await dialog.getByRole("button", { name: "Добавить", exact: true }).click()
+  }
+  const rows = dialog.locator("tr[data-row-id]")
+  await expect(rows).toHaveCount(12)
+  const firstId = await rows.first().getAttribute("data-row-id")
+  await expect(dialog.getByRole("button", { name: "Поднять правило 1", exact: true })).toBeDisabled()
+  await expect(dialog.getByRole("button", { name: "Опустить правило 12", exact: true })).toBeDisabled()
+  await dialog.getByRole("button", { name: "Опустить правило 1", exact: true }).click()
+  await expect(rows.nth(1)).toHaveAttribute("data-row-id", firstId!)
+  await dialog.getByRole("button", { name: "Удалить правило 2", exact: true }).click()
+  await expect(rows).toHaveCount(11)
+  await expect(dialog.locator(`tr[data-row-id="${firstId}"]`)).toHaveCount(0)
+  await dialog.getByRole("button", { name: "Отмена", exact: true }).click()
+})