From 2f1f5311ad034bd159d9e1175c5a81150c1d487d Mon Sep 17 00:00:00 2001 From: Vassiliy Yegorov Date: Sun, 5 Jul 2026 15:20:09 +0700 Subject: [PATCH] feat(web): per-record apply checkboxes with select-all; prune opt-in Co-Authored-By: Claude Opus 4.8 (1M context) --- web/src/api/client.test.ts | 7 +- web/src/api/types.ts | 3 +- web/src/components/DiffView.test.tsx | 81 ++++++++++++++++++++-- web/src/components/DiffView.tsx | 98 ++++++++++++++++++++++++--- web/src/pages/DomainDiffPage.test.tsx | 47 ++++++++++--- web/src/pages/DomainDiffPage.tsx | 95 ++++++++++++++------------ 6 files changed, 259 insertions(+), 72 deletions(-) diff --git a/web/src/api/client.test.ts b/web/src/api/client.test.ts index ced6d5d..2eedff8 100644 --- a/web/src/api/client.test.ts +++ b/web/src/api/client.test.ts @@ -99,12 +99,13 @@ describe("api client", () => { await expect(api.listDomains(PROJECT_ID)).rejects.toThrow(UnauthorizedError) }) - it("applies with prune flag using projectId, id, body order", async () => { + it("applies with selected record keys using projectId, id, body order", async () => { const spy = mockFetch({ updates: [], prunes: [], readOnly: [], inSyncCount: 0 }) - await api.applyDomain(PROJECT_ID, "d1", { applyUpdates: true, applyPrunes: true }) + await api.applyDomain(PROJECT_ID, "d1", { updates: ["A a."], prunes: ["A b."] }) const [url, opts] = spy.mock.calls[0] expect(url).toBe(`/api/v1/projects/${PROJECT_ID}/domains/d1/apply`) - expect(String((opts as RequestInit).body)).toContain("applyPrunes") + expect(String((opts as RequestInit).body)).toContain("prunes") + expect(JSON.parse(String((opts as RequestInit).body))).toEqual({ updates: ["A a."], prunes: ["A b."] }) }) it("checkDomain(projectId, id) hits project-scoped check path", async () => { diff --git a/web/src/api/types.ts b/web/src/api/types.ts index 4c8c540..97c0ece 100644 --- a/web/src/api/types.ts +++ b/web/src/api/types.ts @@ -38,6 +38,7 @@ export interface CreateChannelInput { type: string; config: object; secret: stri export interface CheckRun { id?: string; createdAt: string; result: object } export interface RecordView { + key: string // stable "TYPE name." identifier — used to select this record for Apply kind: string // add | update | delete | in_sync type: string name: string @@ -51,4 +52,4 @@ export interface ChangesetResponse { readOnly: RecordView[] inSyncCount: number } -export interface ApplyRequest { applyUpdates: boolean; applyPrunes: boolean } +export interface ApplyRequest { updates: string[]; prunes: string[] } diff --git a/web/src/components/DiffView.test.tsx b/web/src/components/DiffView.test.tsx index 5bfce43..b5e5a6a 100644 --- a/web/src/components/DiffView.test.tsx +++ b/web/src/components/DiffView.test.tsx @@ -1,16 +1,34 @@ import { render, screen } from "@testing-library/react" +import userEvent from "@testing-library/user-event" import { DiffView } from "./DiffView" import type { ChangesetResponse } from "@/api/types" const cs: ChangesetResponse = { - updates: [{ kind: "update", type: "A", name: "www.example.com.", desired: ["1.1.1.1"], actual: ["9.9.9.9"], readOnly: false }], - prunes: [{ kind: "delete", type: "A", name: "old.example.com.", actual: ["2.2.2.2"], readOnly: false }], - readOnly: [{ kind: "update", type: "NS", name: "example.com.", desired: ["ns1."], actual: ["ns2."], readOnly: true }], + updates: [{ key: "A www.example.com.", kind: "update", type: "A", name: "www.example.com.", desired: ["1.1.1.1"], actual: ["9.9.9.9"], readOnly: false }], + prunes: [{ key: "A old.example.com.", kind: "delete", type: "A", name: "old.example.com.", actual: ["2.2.2.2"], readOnly: false }], + readOnly: [{ key: "NS example.com.", kind: "update", type: "NS", name: "example.com.", desired: ["ns1."], actual: ["ns2."], readOnly: true }], inSyncCount: 3, } +function noop() { /* unused in most tests */ } + +function renderDiff(overrides: Partial[0]> = {}) { + return render( + , + ) +} + test("renders all sections with counts", () => { - render() + renderDiff() expect(screen.getByText(/www\.example\.com\./)).toBeInTheDocument() expect(screen.getByText(/old\.example\.com\./)).toBeInTheDocument() // Anchored (vs. the brief's bare /example\.com\./) — "www.example.com." and @@ -23,7 +41,7 @@ test("renders all sections with counts", () => { }) test("marks read-only records", () => { - render() + renderDiff() expect(screen.getByText(/NS/)).toBeInTheDocument() }) @@ -35,6 +53,7 @@ test("renders a very long unbreakable value (DKIM key) without crashing", () => const csWithDkim: ChangesetResponse = { updates: [ { + key: "TXT default._domainkey.example.com.", kind: "update", type: "TXT", name: "default._domainkey.example.com.", @@ -47,7 +66,7 @@ test("renders a very long unbreakable value (DKIM key) without crashing", () => readOnly: [], inSyncCount: 0, } - render() + renderDiff({ changeset: csWithDkim, selectedUpdates: new Set() }) expect(screen.getByText(new RegExp(longValue))).toBeInTheDocument() }) @@ -60,7 +79,55 @@ test("does not crash when changeset fields are null", () => { readOnly: null, inSyncCount: 5, } as unknown as ChangesetResponse - render() + renderDiff({ changeset: nullish, selectedUpdates: new Set() }) expect(screen.getByText(/5/)).toBeInTheDocument() expect(screen.getByText(/in sync/)).toBeInTheDocument() }) + +test("renders a checkbox for update and prune rows but not for read-only rows", () => { + renderDiff() + // 2 select-all (update + prune headers) + 2 row checkboxes (one update, one prune). + // Read-only section contributes none: no select-all, no row checkbox. + const checkboxes = screen.getAllByRole("checkbox") + expect(checkboxes).toHaveLength(4) + + const updateRowCheckbox = screen.getByRole("checkbox", { name: /www\.example\.com\./ }) + expect(updateRowCheckbox).toBeInTheDocument() + const pruneRowCheckbox = screen.getByRole("checkbox", { name: /old\.example\.com\./ }) + expect(pruneRowCheckbox).toBeInTheDocument() + + expect(screen.queryByRole("checkbox", { name: /example\.com\..*NS|NS.*example\.com\./ })).not.toBeInTheDocument() +}) + +test("clicking an update row checkbox calls onToggleUpdate with the record key", async () => { + const onToggleUpdate = vi.fn() + const user = userEvent.setup() + renderDiff({ onToggleUpdate }) + + await user.click(screen.getByRole("checkbox", { name: /www\.example\.com\./ })) + expect(onToggleUpdate).toHaveBeenCalledWith("A www.example.com.") +}) + +test("clicking a prune row checkbox calls onTogglePrune with the record key", async () => { + const onTogglePrune = vi.fn() + const user = userEvent.setup() + renderDiff({ onTogglePrune }) + + await user.click(screen.getByRole("checkbox", { name: /old\.example\.com\./ })) + expect(onTogglePrune).toHaveBeenCalledWith("A old.example.com.") +}) + +test("select-all header checkbox is checked when all rows in the section are selected", () => { + renderDiff({ selectedUpdates: new Set(["A www.example.com."]) }) + const selectAll = screen.getByRole("checkbox", { name: /выбрать все.*updates/i }) + expect(selectAll).toHaveAttribute("aria-checked", "true") +}) + +test("select-all header checkbox calls onToggleAllUpdates(true) when clicked while none selected", async () => { + const onToggleAllUpdates = vi.fn() + const user = userEvent.setup() + renderDiff({ selectedUpdates: new Set(), onToggleAllUpdates }) + + await user.click(screen.getByRole("checkbox", { name: /выбрать все.*updates/i })) + expect(onToggleAllUpdates).toHaveBeenCalledWith(true) +}) diff --git a/web/src/components/DiffView.tsx b/web/src/components/DiffView.tsx index 185344a..463fa51 100644 --- a/web/src/components/DiffView.tsx +++ b/web/src/components/DiffView.tsx @@ -1,6 +1,7 @@ import type { ReactNode } from "react" import { ArrowRight, CircleCheck, Lock, Pencil, Trash2 } from "lucide-react" import { Badge } from "@/components/ui/badge" +import { Checkbox } from "@/components/ui/checkbox" import { cn } from "@/lib/utils" import type { ChangesetResponse, RecordView } from "@/api/types" @@ -40,9 +41,23 @@ function Values({ values }: { values?: string[] }) { return <>{values.join(", ")} } -function RecordRow({ record, tone }: { record: RecordView; tone: Tone }) { +function RecordRow({ + record, + tone, + checked, + onToggle, +}: { + record: RecordView + tone: Tone + checked?: boolean + onToggle?: (key: string) => void +}) { const meta = TONE_META[tone] const showArrow = tone !== "delete" + // Read-only records aren't selectable — onToggle is only passed for + // update/delete sections. Presence of onToggle is the selectability flag, + // not the tone, so this stays correct if a tone's selectability ever changes. + const selectable = onToggle !== undefined return (
- {/* Top line: type badge, name, read-only flag — always single-line, - never affected by how long the record values are. */} + {/* Top line: (optional) checkbox, type badge, name, read-only flag — + always single-line, never affected by how long the record values are. */}
+ {selectable && ( + onToggle!(record.key)} + aria-label={`${tone === "delete" ? "Удалить" : "Применить"} ${record.type} ${record.name}`} + className="shrink-0" + /> + )} + + to align under the name (badge width + gap, plus checkbox width + + gap when this row is selectable). */} + )} @@ -145,17 +201,41 @@ function Section({ export function DiffView({ changeset, + selectedUpdates, + selectedPrunes, + onToggleUpdate, + onTogglePrune, + onToggleAllUpdates, + onToggleAllPrunes, footerExtra, }: { changeset: ChangesetResponse + selectedUpdates: Set + selectedPrunes: Set + onToggleUpdate: (key: string) => void + onTogglePrune: (key: string) => void + onToggleAllUpdates: (checked: boolean) => void + onToggleAllPrunes: (checked: boolean) => void footerExtra?: ReactNode }) { // Defensive: a field may arrive as null (e.g. a nil slice from an older // backend) — normalise to [] so Section never calls .length/.map on null. return (
-
-
+
+
diff --git a/web/src/pages/DomainDiffPage.test.tsx b/web/src/pages/DomainDiffPage.test.tsx index ba9e758..708cd3d 100644 --- a/web/src/pages/DomainDiffPage.test.tsx +++ b/web/src/pages/DomainDiffPage.test.tsx @@ -41,10 +41,10 @@ beforeEach(() => { vi.spyOn(api, "listDomains").mockResolvedValue([domainWithTemplate]) }) -test("apply sends applyPrunes=false by default, true only after opting in", async () => { +test("default selection: updates checked, prunes unchecked; apply sends only selected keys", async () => { vi.spyOn(api, "checkDomain").mockResolvedValue({ - updates: [{ kind: "update", type: "A", name: "a.", desired: ["1"], actual: ["2"], readOnly: false }], - prunes: [{ kind: "delete", type: "A", name: "b.", actual: ["3"], readOnly: false }], + updates: [{ key: "A a.", kind: "update", type: "A", name: "a.", desired: ["1"], actual: ["2"], readOnly: false }], + prunes: [{ key: "A b.", kind: "delete", type: "A", name: "b.", actual: ["3"], readOnly: false }], readOnly: [], inSyncCount: 0, }) const applySpy = vi.spyOn(api, "applyDomain").mockResolvedValue({ updates: [], prunes: [], readOnly: [], inSyncCount: 0 }) @@ -52,22 +52,51 @@ test("apply sends applyPrunes=false by default, true only after opting in", asyn const user = userEvent.setup() renderPage() - const applyBtn = await screen.findByRole("button", { name: /apply/i }) + const updateRowCheckbox = await screen.findByRole("checkbox", { name: /a\.$/ }) + const pruneRowCheckbox = screen.getByRole("checkbox", { name: /b\.$/ }) + expect(updateRowCheckbox).toHaveAttribute("aria-checked", "true") + expect(pruneRowCheckbox).toHaveAttribute("aria-checked", "false") + expect(screen.queryByText(/будет удалено записей/i)).not.toBeInTheDocument() + + const applyBtn = screen.getByRole("button", { name: /apply/i }) await user.click(applyBtn) await waitFor(() => expect(applySpy).toHaveBeenCalled()) - expect(applySpy.mock.calls[0]).toEqual([PROJECT_ID, "d1", { applyUpdates: true, applyPrunes: false }]) + expect(applySpy.mock.calls[0]).toEqual([PROJECT_ID, "d1", { updates: ["A a."], prunes: [] }]) + + // отметить prune → появляется предупреждение с количеством, и Apply шлёт его ключ тоже + await user.click(pruneRowCheckbox) + const warning = screen.getByRole("alert") + expect(warning).toHaveTextContent(/будет удалено записей:\s*1/i) - // включить prune и применить снова - const pruneToggle = screen.getByRole("checkbox", { name: /prune|удал/i }) - await user.click(pruneToggle) await user.click(screen.getByRole("button", { name: /apply/i })) await waitFor(() => expect(applySpy).toHaveBeenCalledTimes(2)) - expect(applySpy.mock.calls[1]).toEqual([PROJECT_ID, "d1", { applyUpdates: true, applyPrunes: true }]) + expect(applySpy.mock.calls[1]).toEqual([PROJECT_ID, "d1", { updates: ["A a."], prunes: ["A b."] }]) // домен с шаблоном: записи зоны не нужны для диффа — запрос не должен уходить к провайдеру expect(zoneRecordsSpy).not.toHaveBeenCalled() }) +test("deselecting all records disables Apply", async () => { + vi.spyOn(api, "checkDomain").mockResolvedValue({ + updates: [{ key: "A a.", kind: "update", type: "A", name: "a.", desired: ["1"], actual: ["2"], readOnly: false }], + prunes: [], + readOnly: [], inSyncCount: 0, + }) + vi.spyOn(api, "applyDomain").mockResolvedValue({ updates: [], prunes: [], readOnly: [], inSyncCount: 0 }) + const user = userEvent.setup() + renderPage() + + const applyBtn = await screen.findByRole("button", { name: /apply/i }) + expect(applyBtn).not.toBeDisabled() + expect(screen.getByText(/готово к применению/i)).toBeInTheDocument() + + const updateRowCheckbox = screen.getByRole("checkbox", { name: /a\.$/ }) + await user.click(updateRowCheckbox) + + expect(applyBtn).toBeDisabled() + expect(screen.getByText(/изменений для применения нет/i)).toBeInTheDocument() +}) + test("пока список доменов грузится — показан общий лоадер, а не баннер об отсутствии шаблона", async () => { let resolveListDomains: (domains: Domain[]) => void vi.spyOn(api, "listDomains").mockReturnValue( diff --git a/web/src/pages/DomainDiffPage.tsx b/web/src/pages/DomainDiffPage.tsx index aaccd1b..eac410f 100644 --- a/web/src/pages/DomainDiffPage.tsx +++ b/web/src/pages/DomainDiffPage.tsx @@ -1,11 +1,9 @@ -import { useId, useState } from "react" +import { useEffect, useState } from "react" import { useParams } from "react-router-dom" import { AlertTriangle, Loader2, Play, RefreshCw, TriangleAlert } from "lucide-react" import { DiffView } from "@/components/DiffView" import { DomainHistory } from "@/components/DomainHistory" import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { Label } from "@/components/ui/label" import { Table, TableBody, @@ -37,17 +35,48 @@ export function DomainDiffPage() { // (успешный ответ), что шаблона нет. const zoneRecords = useZoneRecords(id, !domains.isPending && !domains.isError && !hasTemplate) const createTemplateFromZone = useCreateTemplateFromZone() - const [applyPrunes, setApplyPrunes] = useState(false) - const pruneCheckboxId = useId() + const [selectedUpdates, setSelectedUpdates] = useState>(new Set()) + const [selectedPrunes, setSelectedPrunes] = useState>(new Set()) const changeset = check.data - const hasPrunes = (changeset?.prunes?.length ?? 0) > 0 - const hasUpdates = (changeset?.updates?.length ?? 0) > 0 - const pruneWarning = applyPrunes && hasPrunes + + // Re-derive the selection whenever the changeset changes (initial load, + // recheck, or apply's own invalidation): updates default to fully selected + // (safe — they only bring the zone in line with the template), prunes + // default to empty (deletion is opt-in and irreversible). + useEffect(() => { + setSelectedUpdates(new Set((changeset?.updates ?? []).map((r) => r.key))) + setSelectedPrunes(new Set()) + }, [changeset]) + const recordList = zoneRecords.data ?? [] + const hasSelection = selectedUpdates.size + selectedPrunes.size > 0 + + function toggleUpdate(key: string) { + setSelectedUpdates((prev) => { + const next = new Set(prev) + if (next.has(key)) next.delete(key) + else next.add(key) + return next + }) + } + function togglePrune(key: string) { + setSelectedPrunes((prev) => { + const next = new Set(prev) + if (next.has(key)) next.delete(key) + else next.add(key) + return next + }) + } + function toggleAllUpdates(checked: boolean) { + setSelectedUpdates(checked ? new Set((changeset?.updates ?? []).map((r) => r.key)) : new Set()) + } + function toggleAllPrunes(checked: boolean) { + setSelectedPrunes(checked ? new Set((changeset?.prunes ?? []).map((r) => r.key)) : new Set()) + } function onApply() { - apply.mutate({ applyUpdates: true, applyPrunes }) + apply.mutate({ updates: [...selectedUpdates], prunes: [...selectedPrunes] }) } function onCreateTemplateFromZone() { @@ -197,36 +226,18 @@ export function DomainDiffPage() { {hasTemplate && changeset && ( <> - +
- - - {pruneWarning && ( + {selectedPrunes.size > 0 && (
- Будет безвозвратно удалено записей:{" "} - {changeset.prunes.length}. Действие необратимо. + Будет удалено записей:{" "} + {selectedPrunes.size}. Действие необратимо.
)} @@ -252,12 +263,10 @@ export function DomainDiffPage() { ) : ( - {hasUpdates || (applyPrunes && hasPrunes) - ? "Готово к применению" - : "Изменений для применения нет"} + {hasSelection ? "Готово к применению" : "Изменений для применения нет"} )} -