fix(ui): перенести таблицы Firewall и проверить порядок правил

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,
   })

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,
   })