From 45530cdb992c26e1a88df7cf97cf14615c232286 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 14 Sep 2026 08:43:08 +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=83?=
 =?UTF-8?q?=20=D1=81=D0=B5=D1=82=D0=B5=D0=B2=D1=8B=D1=85=20=D1=84=D0=B8?=
 =?UTF-8?q?=D0=BB=D1=8C=D1=82=D1=80=D0=BE=D0=B2=20=D0=BD=D0=B0=20ReUI=20v9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/data-grids/filters-data-grid.tsx | 23 +++++++-------
 docs/ux-ui-progress.md                      |  8 +++++
 tests/e2e/network-filters-table.spec.ts     | 35 +++++++++++++++++++++
 3 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 tests/e2e/network-filters-table.spec.ts

diff --git a/components/data-grids/filters-data-grid.tsx b/components/data-grids/filters-data-grid.tsx
index 71ef3318..e0b6d23b 100644
--- a/components/data-grids/filters-data-grid.tsx
+++ b/components/data-grids/filters-data-grid.tsx
@@ -1,23 +1,22 @@
 "use client"
 
 import { useMemo, useState } from "react"
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { FilterRule, GreTunnel, Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-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"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   AlertCircleIcon,
@@ -210,7 +209,7 @@ function FiltersDataGrid({
   onMoveUp,
   onMoveDown,
 }: FiltersDataGridProps) {
-  const columns = useMemo<ColumnDef<FilterRule>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FilterRule>[]>(
     () => [
       {
         id: "priority",
@@ -242,6 +241,7 @@ function FiltersDataGrid({
               <button
                 type="button"
                 onClick={() => onMoveUp(row.original.id)}
+                aria-label={`Поднять правило ${row.original.community}`}
                 disabled={row.index === 0}
                 className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
               >
@@ -250,6 +250,7 @@ function FiltersDataGrid({
               <button
                 type="button"
                 onClick={() => onMoveDown(row.original.id)}
+                aria-label={`Опустить правило ${row.original.community}`}
                 disabled={isLast}
                 className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
               >
@@ -349,11 +350,11 @@ function FiltersDataGrid({
     ],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: rules,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 
diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md
index 2672976a..e5dac91f 100644
--- a/docs/ux-ui-progress.md
+++ b/docs/ux-ui-progress.md
@@ -260,6 +260,14 @@ ReUI checklist получен; сохранены публичный API, ком
 
 Статические проверки блока 5: TypeScript прошёл; lint четырёх таблиц, фикстур и доменной модели — без замечаний. Расширенный lint `app/(main)/backups/page.tsx` обнаружил исходную ошибку `react-hooks/set-state-in-effect` на `void loadLive()` в эффекте (подтверждено в HEAD до правок). Эта ошибка не исправлялась в миграции; устранить при работе над состояниями данных на этапе 5. Не считать lint всей страницы успешным.
 
+## Этап 4 — блок 6: таблица сетевых Filters (2026-09-14)
+
+`filters-data-grid` перенесён на установленную ReUI v9-основу с полным списком (`manualPagination: true`). Сохранены props, ID, обработчики и действующее отключение сортировки в live-режиме. Кнопки поднятия/опускания правила получили доступные подписи с community. Это миграция таблицы сетевых правил; старый компонент построения Filters/FilterQuery этим блоком не затронут.
+
+TypeScript и целевой ESLint прошли. Браузерный сценарий `tests/e2e/network-filters-table.spec.ts` подтвердил 12 строк, исходный порядок и отсутствие кнопки сортировки в live-режиме, блокировку перемещения за границы, поиск/пустой результат/сброс. Первый вариант теста ошибочно ожидал доступную сортировку; ожидание исправлено под существующий контракт страницы. HTTP-моки не подтверждают перестановку и применение правил к RouterOS. Применён ранее полученный ReUI checklist; профильная приёмка операций и доступности остаётся этапу 9.
+
+Квота: на старте использовано 64%, после статических проверок — 78% (остаток 22%). Новые блоки не начинать в резерве. Firewall не переносился: `firewall-rules-data-grid` использует DnD и требует чтения нового API и профильного браузерного теста перетаскивания с проверкой порядка. Следующий блок после проверки квоты — обе Firewall-таблицы; далее восемь таблиц диагностики/сборщика, общие legacy-потребители, старые Filters и удаление v8. Этап 4 остаётся открытым, ветку не выпускать. Сохранить локальный коммит без push.
+
 ## Карта миграции (исходная инвентаризация этапа 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/network-filters-table.spec.ts b/tests/e2e/network-filters-table.spec.ts
new file mode 100644
index 00000000..b6701c4d
--- /dev/null
+++ b/tests/e2e/network-filters-table.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from "@playwright/test"
+import type { FilterRule } from "../../lib/data"
+
+test("Сетевые Filters: 12 правил, сохранение порядка, поиск и сброс", async ({ page }) => {
+  const rules: FilterRule[] = Array.from({ length: 12 }, (_, i) => ({
+    id: String(i + 1), community: `65001:${i + 1}`, gateway: "", gatewayTunnelId: "",
+    action: "blackhole", description: `Правило ${i + 1}`,
+  }))
+  const errors: string[] = []
+  page.on("pageerror", e => errors.push(e.message))
+  await page.route("**/health", route => route.fulfill({ json: { ok: true } }))
+  await page.route("**/api/**", route => {
+    const path = new URL(route.request().url()).pathname
+    return route.fulfill({ json: path === "/api/filters/rules" ? { rulesets: [{ serverId: "1", rules }], greTunnels: [], live: true }
+      : path === "/api/servers" ? [{ id: 1, name: "Тестовый роутер", host: "192.0.2.1", type: "exit-node", site: "TEST", country: "RU", asn: "", enabled: true, status: "online", latency: 1 }]
+      : path === "/api/auth/config" ? { required: false }
+      : path === "/api/filters/gre-tunnels" ? { tunnels: [] }
+      : path === "/api/recursive-routes" ? { routes: [] } : {} })
+  })
+  await page.goto("/filters")
+  const rows = page.locator("tr[data-row-id]")
+  await expect(rows).toHaveCount(12)
+  await expect(page.getByRole("button", { name: "Поднять правило 65001:1", exact: true })).toBeDisabled()
+  await expect(page.getByRole("button", { name: "Опустить правило 65001:12", exact: true })).toBeDisabled()
+  await expect(page.getByRole("button", { name: "Community", exact: true })).toHaveCount(0)
+  await expect(rows.first()).toContainText("65001:1")
+  await expect(rows.last()).toContainText("65001:12")
+  await page.getByPlaceholder("Community, gateway, описание…").fill("Правило 12")
+  await expect(rows).toHaveCount(1)
+  await page.getByPlaceholder("Community, gateway, описание…").fill("нет совпадений")
+  await expect(page.getByText("Ничего не найдено", { exact: true })).toBeVisible()
+  await page.getByPlaceholder("Community, gateway, описание…").fill("")
+  await expect(rows).toHaveCount(12)
+  expect(errors).toEqual([])
+})