@seedgrid/fe-backup 2026.7.0

package/scaffold/src/app/backup/exports/(create)/new/page.test.tsx

@@ -0,0 +1,182 @@
+// seedgrid:managed
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { backupService } from "@/modules/backup/services/backup-service";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("@/modules/backup/services/backup-service", () => ({
+  backupService: {
+    createExportJob: vi.fn(),
+  },
+}));
+
+vi.mock("@/modules/security", () => ({
+  RouteGuard: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PageFrame: ({ children, actions }: { children: React.ReactNode; actions?: React.ReactNode }) => (
+    <div>
+      {actions}
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock("@/i18n", () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock("@seedgrid/fe-components", () => ({
+  SgButton: ({ label, onClick, loading, disabled }: any) => (
+    <button onClick={onClick} disabled={disabled || loading}>
+      {label}
+    </button>
+  ),
+  SgRadioGroup: ({ title, source, value, onChange }: any) => (
+    <fieldset>
+      <legend>{title}</legend>
+      {source.map((opt: any) => (
+        <label key={opt.value}>
+          <input
+            type="radio"
+            name={title}
+            value={opt.value}
+            checked={value === opt.value}
+            onChange={() => onChange(opt.value)}
+          />
+          {opt.label}
+        </label>
+      ))}
+    </fieldset>
+  ),
+  SgStack: ({ children }: any) => <div>{children}</div>,
+  SgToggleSwitch: ({ id, label, checked, onChange }: any) => (
+    <label htmlFor={id}>
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      {label}
+    </label>
+  ),
+  sgWhistle: { success: vi.fn(), error: vi.fn() },
+}));
+
+const mockCreateExportJob = vi.mocked(backupService.createExportJob);
+
+describe("NewExportPage", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("renders format and scope radio groups", async () => {
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    expect(
+      screen.getByText("backup.exports.create.format_label")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("backup.exports.create.scope_label")
+    ).toBeInTheDocument();
+  });
+
+  it("submits with CSV_ZIP and DOMAIN by default", async () => {
+    mockCreateExportJob.mockResolvedValue({
+      jobId: "new-job",
+      status: "REQUESTED",
+      format: "CSV_ZIP",
+      scope: "DOMAIN",
+      createdAt: "2026-01-01T00:00:00Z",
+    });
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    const submitBtn = screen.getByText("backup.exports.create.submit");
+    await userEvent.click(submitBtn);
+
+    await waitFor(() =>
+      expect(mockCreateExportJob).toHaveBeenCalledWith(
+        expect.objectContaining({ format: "CSV_ZIP", scope: "DOMAIN" })
+      )
+    );
+  });
+
+  it("submits with SQL_DUMP_ZIP when that format is selected", async () => {
+    mockCreateExportJob.mockResolvedValue({
+      jobId: "new-job",
+      status: "REQUESTED",
+      format: "SQL_DUMP_ZIP",
+      scope: "DOMAIN",
+      createdAt: "2026-01-01T00:00:00Z",
+    });
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    const sqlDumpRadio = screen.getByDisplayValue("SQL_DUMP_ZIP");
+    await userEvent.click(sqlDumpRadio);
+
+    const submitBtn = screen.getByText("backup.exports.create.submit");
+    await userEvent.click(submitBtn);
+
+    await waitFor(() =>
+      expect(mockCreateExportJob).toHaveBeenCalledWith(
+        expect.objectContaining({ format: "SQL_DUMP_ZIP" })
+      )
+    );
+  });
+
+  it("includes attachments when the toggle is checked", async () => {
+    mockCreateExportJob.mockResolvedValue({
+      jobId: "new-job",
+      status: "REQUESTED",
+      format: "CSV_ZIP",
+      scope: "DOMAIN",
+      createdAt: "2026-01-01T00:00:00Z",
+    });
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    const toggle = screen.getByRole("checkbox");
+    await userEvent.click(toggle);
+
+    const submitBtn = screen.getByText("backup.exports.create.submit");
+    await userEvent.click(submitBtn);
+
+    await waitFor(() =>
+      expect(mockCreateExportJob).toHaveBeenCalledWith(
+        expect.objectContaining({ includeAttachments: true })
+      )
+    );
+  });
+
+  it("disables the submit button while submitting", async () => {
+    let resolveCreate!: () => void;
+    mockCreateExportJob.mockReturnValue(
+      new Promise((res) => {
+        resolveCreate = () => res({
+          jobId: "x", status: "REQUESTED", format: "CSV_ZIP", scope: "DOMAIN",
+          createdAt: "2026-01-01T00:00:00Z",
+        });
+      })
+    );
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    const submitBtn = screen.getByText("backup.exports.create.submit");
+    await userEvent.click(submitBtn);
+
+    expect(submitBtn).toBeDisabled();
+
+    resolveCreate();
+    await waitFor(() => expect(submitBtn).not.toBeDisabled());
+  });
+});

package/scaffold/src/app/backup/exports/(create)/new/page.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  SgButton,
+  SgRadioGroup,
+  SgStack,
+  SgToggleSwitch,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+import { useRouter } from "next/navigation";
+
+import { useI18n } from "@/i18n";
+import { PageFrame, RouteGuard } from "@/modules/security";
+
+import { backupConfig } from "@/modules/backup/config";
+import { extractBackupApiMessage } from "@/modules/backup/services/backup-api";
+import { backupService } from "@/modules/backup/services/backup-service";
+import type { BackupFormat, ExportRequest, ExportScope } from "@/modules/backup/types";
+
+// `as const` (em vez de `: Array<{ labelKey: string }>`): mantem labelKey/hintKey
+// como literais, que sao chaves validas de i18n — t() so aceita a uniao de
+// chaves conhecidas, entao um `string` alargado seria recusado (TS2345).
+const FORMAT_OPTIONS = [
+  {
+    value: "CSV_ZIP",
+    labelKey: "backup.exports.create.format_csv_zip",
+    hintKey: "backup.exports.create.format_csv_zip_hint",
+  },
+  {
+    value: "SQL_DUMP_ZIP",
+    labelKey: "backup.exports.create.format_sql_dump_zip",
+    hintKey: "backup.exports.create.format_sql_dump_zip_hint",
+  },
+] as const;
+
+const SCOPE_OPTIONS = [
+  {
+    value: "DOMAIN",
+    labelKey: "backup.exports.create.scope_domain",
+    hintKey: "backup.exports.create.scope_domain_hint",
+  },
+  {
+    value: "RAW",
+    labelKey: "backup.exports.create.scope_raw",
+    hintKey: "backup.exports.create.scope_raw_hint",
+  },
+  {
+    value: "CUSTOM",
+    labelKey: "backup.exports.create.scope_custom",
+    hintKey: "backup.exports.create.scope_custom_hint",
+  },
+] as const;
+
+export default function NewExportPage() {
+  return (
+    <RouteGuard permissions={["JOB_CREATE"]}>
+      <NewExportScreen />
+    </RouteGuard>
+  );
+}
+
+function NewExportScreen() {
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const [format, setFormat] = useState<BackupFormat>("CSV_ZIP");
+  const [scope, setScope] = useState<ExportScope>("DOMAIN");
+  const [includeAttachments, setIncludeAttachments] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const formatRadioSource = FORMAT_OPTIONS.map((opt) => ({
+    label: t(opt.labelKey),
+    value: opt.value,
+    description: t(opt.hintKey),
+  }));
+
+  const scopeRadioSource = SCOPE_OPTIONS.map((opt) => ({
+    label: t(opt.labelKey),
+    value: opt.value,
+    description: t(opt.hintKey),
+  }));
+
+  async function handleSubmit() {
+    setSubmitting(true);
+
+    const request: ExportRequest = {
+      format,
+      scope,
+      includeAttachments,
+    };
+
+    try {
+      await backupService.createExportJob(request);
+      sgWhistle.success({ message: t("backup.exports.create.success") });
+      router.push(backupConfig.routes.exports);
+    } catch (error) {
+      sgWhistle.error({
+        message:
+          extractBackupApiMessage(error) ?? t("backup.exports.create.error"),
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("backup.exports.create.title")}
+      description={t("backup.exports.create.description")}
+      actions={
+        <SgStack direction="row" gap={12}>
+          <SgButton
+            appearance="ghost"
+            severity="secondary"
+            label={t("backup.common.cancel")}
+            onClick={() => router.push(backupConfig.routes.exports)}
+            disabled={submitting}
+          />
+          <SgButton
+            appearance="solid"
+            severity="primary"
+            shape="rounded"
+            label={t("backup.exports.create.submit")}
+            loading={submitting}
+            onClick={() => void handleSubmit()}
+          />
+        </SgStack>
+      }
+    >
+      <div className="max-w-2xl">
+        <div className="rounded-lg border border-slate-200 bg-white p-6">
+          <SgStack gap={24}>
+            <SgRadioGroup
+              title={t("backup.exports.create.format_label")}
+              source={formatRadioSource}
+              value={format}
+              orientation="vertical"
+              selectionStyle="highlight"
+              onChange={(val) => setFormat(val as BackupFormat)}
+            />
+
+            <hr className="border-slate-100" />
+
+            <SgRadioGroup
+              title={t("backup.exports.create.scope_label")}
+              source={scopeRadioSource}
+              value={scope}
+              orientation="vertical"
+              selectionStyle="highlight"
+              onChange={(val) => setScope(val as ExportScope)}
+            />
+
+            <hr className="border-slate-100" />
+
+            <SgToggleSwitch
+              id="backup-include-attachments"
+              label={t("backup.exports.create.attachments_label")}
+              checked={includeAttachments}
+              onChange={setIncludeAttachments}
+            />
+          </SgStack>
+        </div>
+      </div>
+    </PageFrame>
+  );
+}

package/scaffold/src/app/backup/exports/(list)/page.test.tsx

@@ -0,0 +1,166 @@
+// seedgrid:managed
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { backupService } from "@/modules/backup/services/backup-service";
+import type { ExportResponse } from "@/modules/backup/types";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+vi.mock("@/modules/backup/services/backup-service", () => ({
+  backupService: {
+    listExportJobs: vi.fn(),
+    deleteExportJob: vi.fn(),
+  },
+}));
+
+vi.mock("@/modules/security", () => ({
+  RouteGuard: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PageFrame: ({ children, actions }: { children: React.ReactNode; actions?: React.ReactNode }) => (
+    <div>
+      {actions}
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock("@/i18n", () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock("@seedgrid/fe-components", () => ({
+  SgButton: ({ label, onClick, children, "aria-label": ariaLabel }: any) => (
+    <button onClick={onClick} aria-label={ariaLabel}>
+      {label ?? children}
+    </button>
+  ),
+  // ExportStatusBadge (renderizado numa coluna do datatable) usa SgBadge; sem
+  // ele no mock, <SgBadge> fica undefined e o componente quebra no render.
+  SgBadge: ({ value }: any) => <span>{value}</span>,
+  SgConfirmationDialog: ({ open, onConfirm, onCancel }: any) =>
+    open ? (
+      <div>
+        <button onClick={onConfirm}>confirm</button>
+        <button onClick={onCancel}>cancel</button>
+      </div>
+    ) : null,
+  SgDatatable: ({ value, columns, emptyMessage }: any) =>
+    value.length === 0 ? (
+      <div>{emptyMessage}</div>
+    ) : (
+      <table>
+        <tbody>
+          {value.map((row: any, i: number) => (
+            <tr key={i}>
+              {columns.map((col: any, j: number) => (
+                <td key={j}>{col.body ? col.body(row) : row[col.field]}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    ),
+  SgStack: ({ children }: any) => <div>{children}</div>,
+  sgWhistle: { success: vi.fn(), error: vi.fn() },
+}));
+
+const mockListExportJobs = vi.mocked(backupService.listExportJobs);
+const mockDeleteExportJob = vi.mocked(backupService.deleteExportJob);
+
+function makeJob(overrides: Partial<ExportResponse> = {}): ExportResponse {
+  return {
+    jobId: "job-abc-123",
+    status: "DONE",
+    format: "CSV_ZIP",
+    scope: "DOMAIN",
+    progress: 100,
+    downloadable: true,
+    createdAt: "2024-01-15T10:30:00",
+    ...overrides,
+  };
+}
+
+describe("ExportsListPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockListExportJobs.mockResolvedValue([]);
+  });
+
+  it("shows the empty message when there are no export jobs", async () => {
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("backup.exports.list.empty")
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("renders export rows when the service returns data", async () => {
+    const jobs = [
+      makeJob({ jobId: "job-abc-123", status: "DONE" }),
+      makeJob({ jobId: "job-def-456", status: "RUNNING" }),
+    ];
+    mockListExportJobs.mockResolvedValue(jobs);
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/job-abc/)).toBeInTheDocument();
+    });
+  });
+
+  it("calls deleteExportJob when the confirmation dialog is confirmed", async () => {
+    const job = makeJob({ jobId: "job-to-delete" });
+    mockListExportJobs.mockResolvedValue([job]);
+    mockDeleteExportJob.mockResolvedValue(undefined);
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    await waitFor(() =>
+      expect(screen.getByText(/job-to-d/)).toBeInTheDocument()
+    );
+
+    const deleteBtn = screen.getByRole("button", { name: "backup.exports.list.action.delete" });
+    await userEvent.click(deleteBtn);
+
+    const confirmBtn = screen.getByText("confirm");
+    await userEvent.click(confirmBtn);
+
+    await waitFor(() =>
+      expect(mockDeleteExportJob).toHaveBeenCalledWith("job-to-delete")
+    );
+  });
+
+  it("closes the confirmation dialog when cancelled", async () => {
+    const job = makeJob({ jobId: "job-cancel-test" });
+    mockListExportJobs.mockResolvedValue([job]);
+
+    const { default: Page } = await import("./page");
+    render(<Page />);
+
+    // A coluna do jobId exibe row.jobId.slice(0, 8) — "job-cancel-test" vira
+    // "job-canc" (8 chars). O regex tem que casar a forma truncada.
+    await waitFor(() =>
+      expect(screen.getByText(/job-canc/)).toBeInTheDocument()
+    );
+
+    const deleteBtn = screen.getByRole("button", { name: "backup.exports.list.action.delete" });
+    await userEvent.click(deleteBtn);
+
+    expect(screen.getByText("confirm")).toBeInTheDocument();
+
+    const cancelBtn = screen.getByText("cancel");
+    await userEvent.click(cancelBtn);
+
+    expect(screen.queryByText("confirm")).not.toBeInTheDocument();
+    expect(mockDeleteExportJob).not.toHaveBeenCalled();
+  });
+});