diff --git a/app/(main)/filters/page.tsx b/app/(main)/filters/page.tsx index 080f1b61..9a8817a8 100644 --- a/app/(main)/filters/page.tsx +++ b/app/(main)/filters/page.tsx @@ -1,6 +1,6 @@ "use client" -import { useMemo, useState, useCallback, useEffect, useRef } from "react" +import { useMemo, useState, useCallback, useEffect, useRef, useId } from "react" import { PageHeader } from "@/components/page-header" import { EmptyState } from "@/components/empty-state" import { StatusDot } from "@/components/status-dot" @@ -12,6 +12,7 @@ import { import { DataPageCard } from "@/components/data-page-card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" +import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty } from "@/components/ui/combobox" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { filtersResponseSchema, filtersMutationSchema, filtersGreResponseSchema, filtersRecursiveResponseSchema } from "@/lib/filters-response" @@ -407,40 +408,21 @@ function RecursiveGatewayCards({ // ── community autocomplete ───────────────────────────────────────────────────── -function CommunityInput({ - value, - onChange, - suggestions, - nameMap, -}: { - value: string - onChange: (v: string) => void - suggestions: string[] - nameMap: Record +function CommunityInput({ value, onChange, suggestions, nameMap, inputId, disabled }: { + value: string; onChange: (v: string) => void; suggestions: string[]; nameMap: Record + inputId: string; disabled: boolean }) { - const [open, setOpen] = useState(false) - const filtered = suggestions.filter(c => - c.toLowerCase().includes(value.toLowerCase()) || - (nameMap[c] ?? "").toLowerCase().includes(value.toLowerCase()) - ) - return ( -
- { onChange(e.target.value); setOpen(true) }} - onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} - placeholder="65001:100" className="font-mono h-9" /> - {open && filtered.length > 0 && ( -
- {filtered.map(c => ( - - ))} -
- )} -
- ) + return { if (v !== null) onChange(v) }} + filter={(item, query) => item.toLowerCase().includes(query.toLowerCase()) || (nameMap[item] ?? "").toLowerCase().includes(query.toLowerCase())}> + + + Нет подсказок — можно ввести Community вручную + {(community: string) => + {community}{nameMap[community]} + } + + } // ── rule sheet ───────────────────────────────────────────────────────────────── @@ -480,6 +462,7 @@ function RuleSheet({ evoHint?: string | null recursiveRoutes: RecursiveRouteLite[] }) { + const communityInputId = useId() const [form, setForm] = useState(initial) const [error, setError] = useState(null) const [touched, setTouched] = useState(false) @@ -566,11 +549,13 @@ function RuleSheet({ {/* ── BGP Community ── */}
-
{error && ( -
+
{error}
)} diff --git a/docs/ux-ui-plan.md b/docs/ux-ui-plan.md index 5636d5a6..d8c3a283 100644 --- a/docs/ux-ui-plan.md +++ b/docs/ux-ui-plan.md @@ -92,6 +92,15 @@ flowchart LR 2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения. 3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации. +## Проверенные экраны Filters — блок 9.46 + +| Референс плана | ПК | Телефон | +| --- | --- | --- | +| Data Grid Filtering 2: устройство → свежесть → таблица | [Экран](ux-ui/screens/filters-desktop.png) | [Экран](ux-ui/screens/filters-mobile.png) | +| Sheet 8: Community → действие → подтверждение API | [Форма](ux-ui/screens/filters-rule-desktop.png) | [Форма](ux-ui/screens/filters-rule-mobile.png) | + +Снимки HTTP-фикстур просмотрены; профильные проверки клавиатуры/адаптивности и сохранения прошли. Этап 9 остаётся в работе; следующие блоки — ограничения IPsec/VXLAN и общего GRE-каталога по журналу. + ## Порядок продолжения и журналирования Перед работой читать этот план, начало журнала, git status и последние коммиты; сохранять чужие изменения. Затем проверить квоту и выбрать завершённый по смыслу блок текущего этапа. diff --git a/docs/ux-ui-progress.md b/docs/ux-ui-progress.md index 1d299570..d19b5deb 100644 --- a/docs/ux-ui-progress.md +++ b/docs/ux-ui-progress.md @@ -25,12 +25,25 @@ | 6 | Навигация и дашборд | Завершён 2026-09-20 в границах локальной приёмки; ограничения ниже | | 7 | Серверы и мониторинг: детали, формы, URL-контекст, права | Завершён в границах локальной приёмки 2026-09-23; внешние ограничения ниже | | 8 | Трафик и статистика | Завершён 2026-09-28 в границах локальной приёмки; ограничения в блоке 8.13 | -| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.45 — IPsec/GRE/VXLAN, Firewall и операции Filters | +| 9 | VPN, Firewall и Filters | В работе: блоки 9.1–9.46 — IPsec/GRE/VXLAN, Firewall и операции Filters | | 10 | Маршрутизация, диагностика, карта и терминал | Не начат | | 11А | Пользователи, контейнеры, сертификаты и резервные копии | Не начат | | 11Б | Оповещения, сбор данных, интеграции, релизы и настройки | Не начат | | 12 | Итоговая доступность, адаптивность, производительность и регрессия | Не начат | +## Блок 9.46 — клавиатура и экраны Filters (2026-09-30) + +- Community использует установленный Base UI Combobox: фильтрация по коду/названию, выбор стрелками/Enter и свободный ввод. Поле связано с подписью, действие отмечено aria-pressed, ошибка объявляется alert; ввод блокируется при сохранении. Tab закрывает подсказки и возвращает доступ к остальным полям формы. При открытом popup Base UI временно ограничивает дерево доступности; тесты проверяют переход Tab, а не обходят его. +- Два новых E2E проверяют ПК 1440×1000 и телефон 390×844: отсутствие переполнения документа, выбор устройства на телефоне, валидацию, клавиатурный выбор/ручной ввод и единственный PUT в правильное устройство. Четыре PNG сохранены и просмотрены. Таблица на телефоне использует внутреннюю прокрутку; это не полная приёмка контраста, screen reader или всех форм шлюзов. +- 13 E2E прошли: layout/сохранение (4), копирование/актуальная цель/удаление/порядок/свежесть (9). TypeScript прошёл; lint 0 ошибок/13 прежних предупреждений страницы, тесты без замечаний. Build не повторялся, последние frontend/backend — 9.44. Моки HTTP проверяют live-путь; реальные RouterOS/JWT/БД не проверены. +- Далее — оставшиеся ограничения этапа 9: первоначальные/частичные сбои IPsec, свежесть VXLAN и ошибки общего GRE-каталога. Этап 9 открыт. Перед новым блоком проверить квоту и журнал; этапы 10–12 не начаты. +- Квота после профильных проверок: 96% пятичасовой/15% недельной. Пользователь разрешил работу до конца лимитов. Локальный коммит без push. + +| Образец | Проверенный экран | Применённая композиция | +| --- | --- | --- | +| ReUI Data Grid Filtering 2 | [Filters ПК](ux-ui/screens/filters-desktop.png), [телефон](ux-ui/screens/filters-mobile.png) | Устройство → свежесть → правила → действие | +| ReUI Sheet 8 | [Форма ПК](ux-ui/screens/filters-rule-desktop.png), [телефон](ux-ui/screens/filters-rule-mobile.png) | Community → действие → пояснение → подтверждение API | + ## Блок 9.45 — свежесть Filters (2026-09-30) - Экран показывает время успешного получения правил, GRE и recursive каталогов выбранного устройства. До первого успеха время неизвестно; ошибочное/устаревшее чтение не обновляет время, успешный пустой каталог обновляет. Подтверждённая запись подписана отдельно «Применение подтверждено API», не выдаётся за опрос RouterOS. Read/write время сохраняется по serverId, сбрасывается вместе с изолированным источником. diff --git a/docs/ux-ui-stage-9.md b/docs/ux-ui-stage-9.md index ae2d9f8e..a9a24790 100644 --- a/docs/ux-ui-stage-9.md +++ b/docs/ux-ui-stage-9.md @@ -221,3 +221,16 @@ Live-копирование читает актуальный целевой rul ## Блок 9.45 — свежесть Filters (2026-09-30) По устройству показано клиентское время получения правил/GRE/recursive и отдельное подтверждение записи. Ошибка сохраняет время; неизвестный первоначальный срез не получает ложную дату. Десять E2E и TypeScript прошли; новых lint замечаний нет. Далее — клавиатура/телефон и проверенные экраны Filters. Build frontend/backend — 9.44. + +## Блок 9.46 — клавиатура и экраны Filters (2026-09-30) + +- Community использует установленный Base UI Combobox: фильтрация по коду/названию, выбор стрелками/Enter и свободный ввод. Поле связано с подписью, действие отмечено aria-pressed, ошибка объявляется alert; ввод блокируется при сохранении. Tab закрывает подсказки и возвращает доступ к остальным полям формы. При открытом popup Base UI временно ограничивает дерево доступности; тесты проверяют переход Tab, а не обходят его. +- Два новых E2E проверяют ПК 1440×1000 и телефон 390×844: отсутствие переполнения документа, выбор устройства на телефоне, валидацию, клавиатурный выбор/ручной ввод и единственный PUT в правильное устройство. Четыре PNG сохранены и просмотрены. Таблица на телефоне использует внутреннюю прокрутку; это не полная приёмка контраста, screen reader или всех форм шлюзов. +- 13 E2E прошли: layout/сохранение (4), копирование/актуальная цель/удаление/порядок/свежесть (9). TypeScript прошёл; lint 0 ошибок/13 прежних предупреждений страницы, тесты без замечаний. Build не повторялся, последние frontend/backend — 9.44. Моки HTTP проверяют live-путь; реальные RouterOS/JWT/БД не проверены. +- Далее — оставшиеся ограничения этапа 9: первоначальные/частичные сбои IPsec, свежесть VXLAN и ошибки общего GRE-каталога. Этап 9 открыт. Перед новым блоком проверить квоту и журнал; этапы 10–12 не начаты. +- Квота после профильных проверок: 96% пятичасовой/15% недельной. Пользователь разрешил работу до конца лимитов. Локальный коммит без push. + +| Образец | Проверенный экран | Применённая композиция | +| --- | --- | --- | +| ReUI Data Grid Filtering 2 | [Filters ПК](ux-ui/screens/filters-desktop.png), [телефон](ux-ui/screens/filters-mobile.png) | Устройство → свежесть → правила → действие | +| ReUI Sheet 8 | [Форма ПК](ux-ui/screens/filters-rule-desktop.png), [телефон](ux-ui/screens/filters-rule-mobile.png) | Community → действие → пояснение → подтверждение API | diff --git a/docs/ux-ui/screens/filters-desktop.png b/docs/ux-ui/screens/filters-desktop.png new file mode 100644 index 00000000..4a0cb02f Binary files /dev/null and b/docs/ux-ui/screens/filters-desktop.png differ diff --git a/docs/ux-ui/screens/filters-mobile.png b/docs/ux-ui/screens/filters-mobile.png new file mode 100644 index 00000000..c827aafa Binary files /dev/null and b/docs/ux-ui/screens/filters-mobile.png differ diff --git a/docs/ux-ui/screens/filters-rule-desktop.png b/docs/ux-ui/screens/filters-rule-desktop.png new file mode 100644 index 00000000..15a8b9d3 Binary files /dev/null and b/docs/ux-ui/screens/filters-rule-desktop.png differ diff --git a/docs/ux-ui/screens/filters-rule-mobile.png b/docs/ux-ui/screens/filters-rule-mobile.png new file mode 100644 index 00000000..252b814e Binary files /dev/null and b/docs/ux-ui/screens/filters-rule-mobile.png differ diff --git a/tests/e2e/filters-layout.spec.ts b/tests/e2e/filters-layout.spec.ts new file mode 100644 index 00000000..c78750ca --- /dev/null +++ b/tests/e2e/filters-layout.spec.ts @@ -0,0 +1,71 @@ +import { test, expect } from "@playwright/test" +import { mkdirSync } from "node:fs" + +for (const device of ["desktop", "mobile"] as const) { + test(`Filters: клавиатурный ввод и layout ${device}`, async ({ page }) => { + await page.setViewportSize(device === "desktop" ? { width: 1440, height: 1000 } : { width: 390, height: 844 }) + await page.clock.install({ time: new Date("2026-09-30T01:00:00Z") }) + const rulesFor = (id: string) => [ + { id: id + "-youtube", community: "65001:100", gateway: "10.0.0.2", gatewayTunnelId: "t" + id, action: "route", description: "Видеосервисы через основной шлюз" }, + { id: id + "-streaming", community: "65001:200", gateway: "10.0.0.2", gatewayTunnelId: "t" + id, action: "route", description: "Потоковые сервисы" }, + { id: id + "-blackhole", community: "65535:666", gateway: "", gatewayTunnelId: "", action: "blackhole", description: "RTBH — защита от DDoS" }, + ] + const rulesets = [{ serverId: "1", rules: rulesFor("1") }, { serverId: "2", rules: rulesFor("2") }] + const tunnel = (id: string) => ({ id: "t" + id, serverId: id, name: "gre-core-edge", localAddress: "192.0.2." + id, remoteAddress: "198.51.100.1", localInnerIp: "10.0.0.1/30", remoteInnerIp: "10.0.0.2/30", poolId: "", ipsec: null, mtu: 1476, keepaliveInterval: 10, keepaliveRetries: 3, dscp: "inherit", clampTcpMss: true, allowFastPath: true, comment: "", enabled: true, status: "up" }) + let writes = 0 + await page.route("**/health", route => route.fulfill({ json: { ok: true } })) + await page.route("**/api/**", route => { + const url = new URL(route.request().url()), path = url.pathname, id = url.searchParams.get("serverId") + if (path === "/api/filters/rules" && route.request().method() === "PUT") { + writes++ + const body = route.request().postDataJSON() + expect(body.serverId).toBe(device === "mobile" ? "2" : "1") + expect(body.rules.at(-1)).toMatchObject({ community: "65001:777", action: "blackhole", description: "Новый фильтр", gateway: "", gatewayTunnelId: "" }) + rulesets.find(rs => rs.serverId === body.serverId)!.rules = body.rules + return route.fulfill({ json: { ok: true, rules: body.rules } }) + } + return route.fulfill({ json: path === "/api/filters/rules" ? { rulesets: id ? rulesets.filter(rs => rs.serverId === id) : rulesets, greTunnels: [], live: true } + : path === "/api/servers" ? [1, 2].map(i => ({ id: i, name: i === 1 ? "Основной роутер" : "Резервный роутер", host: "192.0.2." + i, type: "exit-node", enabled: true, country: "RU", site: "CORE", asn: "65001", status: "online", latency: 3 })) + : path === "/api/filters/gre-tunnels" ? { tunnels: [tunnel(id ?? "1")] } + : path === "/api/recursive-routes" ? { routes: [], stale: false } + : path === "/api/auth/config" ? { required: false } : {} }) + }) + await page.goto("/filters") + await expect(page.getByRole("button", { name: "Новое правило", exact: true })).toBeEnabled() + await expect(page.locator("tr[data-row-id]")).toHaveCount(3) + await expect(page.getByRole("group", { name: "Свежесть данных устройства" }).locator("time")).toHaveCount(3) + expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true) + await page.addStyleTag({ content: "nextjs-portal { display: none !important; }" }) + mkdirSync("docs/ux-ui/screens", { recursive: true }) + await page.screenshot({ path: `docs/ux-ui/screens/filters-${device}.png` }) + if (device === "mobile") { + await page.getByRole("button", { name: "Серверы", exact: true }).click() + const rail = page.getByRole("dialog") + await rail.getByRole("option", { name: /Резервный роутер/ }).click() + await expect(rail).toHaveCount(0) + await expect(page.getByRole("button", { name: "Новое правило", exact: true })).toBeEnabled() + } + const create = page.getByRole("button", { name: "Новое правило", exact: true }) + await create.focus() + await page.keyboard.press("Enter") + const dialog = page.getByRole("dialog") + await dialog.getByRole("button", { name: "Добавить", exact: true }).click() + await expect(dialog.getByRole("alert")).toContainText("BGP Community обязательно") + const community = dialog.getByRole("combobox", { name: /BGP Community/ }) + await community.fill("65535") + await page.keyboard.press("ArrowDown") + await page.keyboard.press("Enter") + await expect(community).toHaveValue("65535:666") + await expect(dialog.getByRole("button", { name: /⊘ Blackhole/ })).toHaveAttribute("aria-pressed", "true") + await community.fill("65001:777") + await page.keyboard.press("Tab") + await dialog.getByRole("textbox", { name: "Описание правила" }).fill("Новый фильтр") + expect(await dialog.evaluate(el => el.getBoundingClientRect().right <= window.innerWidth && el.getBoundingClientRect().left >= 0)).toBe(true) + await page.screenshot({ path: `docs/ux-ui/screens/filters-rule-${device}.png` }) + await dialog.getByRole("button", { name: "Добавить", exact: true }).focus() + await page.keyboard.press("Enter") + await expect(dialog).toHaveCount(0) + await expect(page.locator("tr[data-row-id]")).toHaveCount(4) + expect(writes).toBe(1) + }) +} diff --git a/tests/e2e/filters-save.spec.ts b/tests/e2e/filters-save.spec.ts index 4f8d7524..e2c1f8b0 100644 --- a/tests/e2e/filters-save.spec.ts +++ b/tests/e2e/filters-save.spec.ts @@ -42,6 +42,7 @@ for (const editing of [false, true]) { const dialog = page.getByRole("dialog") if (!editing) { await dialog.getByPlaceholder("65001:100").fill("65001:999") + await page.keyboard.press("Tab") await dialog.getByRole("button", { name: /⊘ Blackhole/ }).click() } const description = dialog.getByRole("textbox", { name: "Описание правила" })