feat(web): TemplatesPage + RecordEditor — CRUD шаблонов с редактором записей

web/src/App.tsx

@@ -3,10 +3,7 @@ import { Layout } from "@/components/Layout"
 import { AccountsPage } from "@/pages/AccountsPage"
 import { DomainDiffPage } from "@/pages/DomainDiffPage"
 import { DomainsPage } from "@/pages/DomainsPage"
-
+import { TemplatesPage } from "@/pages/TemplatesPage"
-function Placeholder({ name }: { name: string }) {
-  return <div className="p-8 text-2xl">{name}</div>
-}
 
 export function App() {
   return (
@@ -16,7 +13,7 @@ export function App() {
         <Route path="/domains" element={<DomainsPage />} />
         <Route path="/domains/:id" element={<DomainDiffPage />} />
         <Route path="/accounts" element={<AccountsPage />} />
-        <Route path="/templates" element={<Placeholder name="Templates" />} />
+        <Route path="/templates" element={<TemplatesPage />} />
       </Routes>
     </Layout>
   )

web/src/components/RecordEditor.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { useState } from "react"
+import { test, expect, vi } from "vitest"
+import { RecordEditor } from "./RecordEditor"
+import type { RecordDTO } from "@/api/types"
+
+function Harness({
+  initial,
+  onChange,
+}: {
+  initial: RecordDTO[]
+  onChange: (records: RecordDTO[]) => void
+}) {
+  const [value, setValue] = useState<RecordDTO[]>(initial)
+  return (
+    <RecordEditor
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onChange(next)
+      }}
+    />
+  )
+}
+
+test("добавление записи вызывает onChange с новой пустой записью типа A", async () => {
+  const onChange = vi.fn()
+  const user = userEvent.setup()
+  render(<Harness initial={[]} onChange={onChange} />)
+
+  await user.click(screen.getByRole("button", { name: /добавить запись/i }))
+
+  expect(onChange).toHaveBeenCalledWith([{ type: "A", name: "", ttl: 3600, values: [""] }])
+})
+
+test("изменение полей записи вызывает onChange с корректным массивом", async () => {
+  const onChange = vi.fn()
+  render(
+    <Harness
+      initial={[{ type: "A", name: "", ttl: 3600, values: [""] }]}
+      onChange={onChange}
+    />,
+  )
+
+  fireEvent.change(screen.getByLabelText(/имя записи 1/i), { target: { value: "www" } })
+  fireEvent.change(screen.getByLabelText(/ttl записи 1/i), { target: { value: "300" } })
+  fireEvent.change(screen.getByLabelText(/значения записи 1/i), {
+    target: { value: "192.0.2.1" },
+  })
+
+  await waitFor(() =>
+    expect(onChange).toHaveBeenLastCalledWith([
+      { type: "A", name: "www", ttl: 300, values: ["192.0.2.1"] },
+    ]),
+  )
+})
+
+test("несколько значений в textarea дают несколько элементов values", async () => {
+  const onChange = vi.fn()
+  render(
+    <Harness
+      initial={[{ type: "NS", name: "@", ttl: 3600, values: [""] }]}
+      onChange={onChange}
+    />,
+  )
+
+  fireEvent.change(screen.getByLabelText(/значения записи 1/i), {
+    target: { value: "ns1.example.com.\nns2.example.com." },
+  })
+
+  await waitFor(() =>
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        type: "NS",
+        name: "@",
+        ttl: 3600,
+        values: ["ns1.example.com.", "ns2.example.com."],
+      },
+    ]),
+  )
+})
+
+test("выбор типа SRV и составное значение prio weight port target", async () => {
+  const onChange = vi.fn()
+  const user = userEvent.setup()
+  render(
+    <Harness
+      initial={[{ type: "A", name: "_sip._tcp", ttl: 3600, values: [""] }]}
+      onChange={onChange}
+    />,
+  )
+
+  await user.click(screen.getByRole("combobox", { name: /тип записи 1/i }))
+  await user.click(await screen.findByRole("option", { name: /^srv$/i }))
+
+  fireEvent.change(screen.getByLabelText(/значения записи 1/i), {
+    target: { value: "10 5 5060 sipserver.example.com." },
+  })
+
+  await waitFor(() =>
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        type: "SRV",
+        name: "_sip._tcp",
+        ttl: 3600,
+        values: ["10 5 5060 sipserver.example.com."],
+      },
+    ]),
+  )
+})
+
+test("удаление записи вызывает onChange без удалённой записи", async () => {
+  const onChange = vi.fn()
+  const user = userEvent.setup()
+  const initial: RecordDTO[] = [
+    { type: "A", name: "a", ttl: 3600, values: ["1.1.1.1"] },
+    { type: "A", name: "b", ttl: 3600, values: ["2.2.2.2"] },
+  ]
+  render(<Harness initial={initial} onChange={onChange} />)
+
+  await user.click(screen.getByRole("button", { name: /удалить запись 1/i }))
+
+  expect(onChange).toHaveBeenLastCalledWith([
+    { type: "A", name: "b", ttl: 3600, values: ["2.2.2.2"] },
+  ])
+})
+
+test("mono-шрифт применён к полям name и values", () => {
+  render(
+    <Harness
+      initial={[{ type: "A", name: "www", ttl: 3600, values: ["1.2.3.4"] }]}
+      onChange={vi.fn()}
+    />,
+  )
+
+  expect(screen.getByLabelText(/имя записи 1/i)).toHaveClass("font-dns")
+  expect(screen.getByLabelText(/значения записи 1/i)).toHaveClass("font-dns")
+})

web/src/components/RecordEditor.tsx

@@ -0,0 +1,111 @@
+import { Plus, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import type { RecordDTO } from "@/api/types"
+
+const RECORD_TYPES = ["A", "AAAA", "CNAME", "MX", "TXT", "SRV", "NS", "SOA"] as const
+
+const typeItems = RECORD_TYPES.map((t) => ({ value: t, label: t }))
+
+const DEFAULT_TTL = 3600
+
+function emptyRecord(): RecordDTO {
+  return { type: "A", name: "", ttl: DEFAULT_TTL, values: [""] }
+}
+
+export function RecordEditor({
+  value,
+  onChange,
+}: {
+  value: RecordDTO[]
+  onChange: (records: RecordDTO[]) => void
+}) {
+  function updateRecord(index: number, patch: Partial<RecordDTO>) {
+    onChange(value.map((r, i) => (i === index ? { ...r, ...patch } : r)))
+  }
+
+  function addRecord() {
+    onChange([...value, emptyRecord()])
+  }
+
+  function removeRecord(index: number) {
+    onChange(value.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {value.map((record, index) => (
+        <div
+          key={index}
+          className="flex flex-col gap-2 rounded-lg border border-border bg-background/40 p-2.5 sm:flex-row sm:items-start"
+        >
+          <Select
+            items={typeItems}
+            value={record.type}
+            onValueChange={(v) => updateRecord(index, { type: v as string })}
+          >
+            <SelectTrigger aria-label={`Тип записи ${index + 1}`} size="sm" className="font-dns sm:w-24">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {typeItems.map((item) => (
+                <SelectItem key={item.value} value={item.value} className="font-dns">
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Input
+            aria-label={`Имя записи ${index + 1}`}
+            className="font-dns sm:flex-1"
+            placeholder="www"
+            value={record.name}
+            onChange={(e) => updateRecord(index, { name: e.target.value })}
+          />
+
+          <Input
+            aria-label={`TTL записи ${index + 1}`}
+            type="number"
+            min={0}
+            className="font-dns sm:w-24"
+            value={record.ttl}
+            onChange={(e) => updateRecord(index, { ttl: Number(e.target.value) })}
+          />
+
+          <Textarea
+            aria-label={`Значения записи ${index + 1}`}
+            className="font-dns sm:flex-1"
+            placeholder="192.0.2.1"
+            rows={1}
+            value={record.values.join("\n")}
+            onChange={(e) => updateRecord(index, { values: e.target.value.split("\n") })}
+          />
+
+          <Button
+            type="button"
+            variant="destructive"
+            size="icon-sm"
+            aria-label={`Удалить запись ${index + 1}`}
+            onClick={() => removeRecord(index)}
+          >
+            <Trash2 className="size-3.5" strokeWidth={1.75} />
+          </Button>
+        </div>
+      ))}
+
+      <Button type="button" variant="outline" size="sm" onClick={addRecord} className="self-start">
+        <Plus className="size-3.5" strokeWidth={1.75} />
+        Добавить запись
+      </Button>
+    </div>
+  )
+}

web/src/pages/TemplatesPage.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen, waitFor, within, fireEvent } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { TemplatesPage } from "./TemplatesPage"
+import { api } from "@/api/client"
+import { vi, beforeEach, test, expect } from "vitest"
+import type { Template } from "@/api/types"
+
+const templates: Template[] = [
+  {
+    id: "t1",
+    name: "Standard",
+    records: [{ type: "A", name: "@", ttl: 3600, values: ["1.2.3.4"] }],
+    version: 1,
+  },
+  { id: "t2", name: "Minimal", records: [], version: 1 },
+]
+
+function renderPage() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={["/templates"]}>
+        <TemplatesPage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+beforeEach(() => {
+  vi.spyOn(api, "listTemplates").mockResolvedValue(templates)
+})
+
+test("отрисовывает список шаблонов с числом записей", async () => {
+  renderPage()
+
+  await screen.findByText("Standard")
+
+  const standardRow = screen.getByRole("row", { name: /standard/i })
+  expect(within(standardRow).getByText("1")).toBeInTheDocument()
+
+  const minimalRow = screen.getByRole("row", { name: /minimal/i })
+  expect(within(minimalRow).getByText("0")).toBeInTheDocument()
+})
+
+test("создание шаблона с записью вызывает api.createTemplate с {name, records}", async () => {
+  const createSpy = vi.spyOn(api, "createTemplate").mockResolvedValue({
+    id: "t3",
+    name: "New",
+    records: [],
+    version: 1,
+  })
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Standard")
+
+  await user.type(screen.getByLabelText(/имя шаблона/i), "New")
+  await user.click(screen.getByRole("button", { name: /добавить запись/i }))
+
+  fireEvent.change(screen.getByLabelText(/имя записи 1/i), { target: { value: "www" } })
+  fireEvent.change(screen.getByLabelText(/значения записи 1/i), { target: { value: "1.1.1.1" } })
+
+  await user.click(screen.getByRole("button", { name: /сохранить шаблон/i }))
+
+  await waitFor(() =>
+    expect(createSpy).toHaveBeenCalledWith({
+      name: "New",
+      records: [{ type: "A", name: "www", ttl: 3600, values: ["1.1.1.1"] }],
+    }),
+  )
+})
+
+test("редактирование шаблона вызывает api.updateTemplate с обновлённым именем", async () => {
+  const updateSpy = vi.spyOn(api, "updateTemplate").mockResolvedValue(templates[0])
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Standard")
+
+  await user.click(screen.getByRole("button", { name: /редактировать standard/i }))
+
+  const nameInput = screen.getByLabelText(/имя шаблона/i)
+  await user.clear(nameInput)
+  await user.type(nameInput, "Standard v2")
+
+  await user.click(screen.getByRole("button", { name: /сохранить шаблон/i }))
+
+  await waitFor(() =>
+    expect(updateSpy).toHaveBeenCalledWith("t1", {
+      name: "Standard v2",
+      records: [{ type: "A", name: "@", ttl: 3600, values: ["1.2.3.4"] }],
+    }),
+  )
+})
+
+test("удаление шаблона вызывает api.deleteTemplate", async () => {
+  const deleteSpy = vi.spyOn(api, "deleteTemplate").mockResolvedValue(undefined)
+  vi.spyOn(window, "confirm").mockReturnValue(true)
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Standard")
+
+  await user.click(screen.getByRole("button", { name: /удалить шаблон standard/i }))
+
+  await waitFor(() => expect(deleteSpy).toHaveBeenCalledWith("t1"))
+})
+
+test("ошибка создания шаблона отображается пользователю", async () => {
+  vi.spyOn(api, "createTemplate").mockRejectedValue(new Error("Не удалось создать шаблон"))
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Standard")
+
+  await user.type(screen.getByLabelText(/имя шаблона/i), "Broken")
+  await user.click(screen.getByRole("button", { name: /сохранить шаблон/i }))
+
+  expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось создать шаблон")
+})
+
+test("пустое состояние при отсутствии шаблонов", async () => {
+  vi.spyOn(api, "listTemplates").mockResolvedValue([])
+  renderPage()
+
+  expect(await screen.findByText(/шаблонов пока нет/i)).toBeInTheDocument()
+})

web/src/pages/TemplatesPage.tsx

@@ -0,0 +1,227 @@
+import { useId, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Inbox, Loader2, Pencil, Save, Trash2, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+} from "@/components/ui/field"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { RecordEditor } from "@/components/RecordEditor"
+import { useCreateTemplate, useDeleteTemplate, useTemplates, useUpdateTemplate } from "@/hooks/useApi"
+import type { Template } from "@/api/types"
+
+const recordSchema = z.object({
+  type: z.string().min(1),
+  name: z.string().min(1, "Укажите имя записи"),
+  ttl: z.number().int("TTL — целое число").nonnegative("TTL не может быть отрицательным"),
+  values: z.array(z.string()),
+})
+
+const templateFormSchema = z.object({
+  name: z.string().min(1, "Укажите имя шаблона"),
+  records: z.array(recordSchema),
+})
+
+type TemplateForm = z.infer<typeof templateFormSchema>
+
+const EMPTY_FORM: TemplateForm = { name: "", records: [] }
+
+export function TemplatesPage() {
+  const templates = useTemplates()
+  const createTemplate = useCreateTemplate()
+  const updateTemplate = useUpdateTemplate()
+  const deleteTemplate = useDeleteTemplate()
+  const nameFieldId = useId()
+
+  const [editingId, setEditingId] = useState<string | null>(null)
+
+  const templateList = templates.data ?? []
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<TemplateForm>({
+    resolver: zodResolver(templateFormSchema),
+    defaultValues: EMPTY_FORM,
+  })
+
+  function onEdit(template: Template) {
+    setEditingId(template.id)
+    reset({ name: template.name, records: template.records })
+  }
+
+  function onCancelEdit() {
+    setEditingId(null)
+    reset(EMPTY_FORM)
+  }
+
+  function onSubmit(values: TemplateForm) {
+    if (editingId) {
+      updateTemplate.mutate(
+        { id: editingId, input: values },
+        {
+          onSuccess: () => {
+            setEditingId(null)
+            reset(EMPTY_FORM)
+          },
+        },
+      )
+    } else {
+      createTemplate.mutate(values, { onSuccess: () => reset(EMPTY_FORM) })
+    }
+  }
+
+  function onDelete(id: string, name: string) {
+    if (window.confirm(`Удалить шаблон «${name}»? Действие необратимо.`)) {
+      if (editingId === id) onCancelEdit()
+      deleteTemplate.mutate(id)
+    }
+  }
+
+  const saveMutation = editingId ? updateTemplate : createTemplate
+
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col gap-6 px-6 py-8">
+      <header className="flex flex-col gap-1">
+        <span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
+          templates
+        </span>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">Шаблоны</h1>
+      </header>
+
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
+      >
+        <FieldSet className="gap-3">
+          <FieldGroup className="gap-3">
+            <Field className="sm:max-w-72">
+              <FieldLabel htmlFor={nameFieldId}>Имя шаблона</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="name"
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      id={nameFieldId}
+                      placeholder="Например, standard"
+                      aria-invalid={!!errors.name}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.name]} />
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel>Записи</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="records"
+                  render={({ field }) => (
+                    <RecordEditor value={field.value} onChange={field.onChange} />
+                  )}
+                />
+              </FieldContent>
+            </Field>
+          </FieldGroup>
+        </FieldSet>
+
+        <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+          {saveMutation.isError && (
+            <span role="alert" className="font-dns text-xs text-destructive">
+              {saveMutation.error.message}
+            </span>
+          )}
+          <div className="ml-auto flex items-center gap-2">
+            {editingId && (
+              <Button type="button" variant="ghost" onClick={onCancelEdit}>
+                <X className="size-4" strokeWidth={1.75} />
+                Отменить
+              </Button>
+            )}
+            <Button type="submit" disabled={saveMutation.isPending}>
+              {saveMutation.isPending ? (
+                <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+              ) : (
+                <Save className="size-4" strokeWidth={1.75} />
+              )}
+              Сохранить шаблон
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {deleteTemplate.isError && (
+        <span role="alert" className="font-dns text-xs text-destructive">
+          {deleteTemplate.error.message}
+        </span>
+      )}
+
+      {templateList.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border px-4 py-12 text-center text-sm text-muted-foreground">
+          <Inbox className="size-6" strokeWidth={1.5} />
+          Шаблонов пока нет — создайте первый выше.
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Имя</TableHead>
+              <TableHead>Записей</TableHead>
+              <TableHead className="text-right">Действия</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {templateList.map((t) => (
+              <TableRow key={t.id}>
+                <TableCell className="font-dns">{t.name}</TableCell>
+                <TableCell>{t.records.length}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="icon-sm"
+                      aria-label={`Редактировать ${t.name}`}
+                      onClick={() => onEdit(t)}
+                    >
+                      <Pencil className="size-3.5" strokeWidth={1.75} />
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="icon-sm"
+                      aria-label={`Удалить шаблон ${t.name}`}
+                      onClick={() => onDelete(t.id, t.name)}
+                      disabled={deleteTemplate.isPending}
+                    >
+                      <Trash2 className="size-3.5" strokeWidth={1.75} />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  )
+}