Frontend: backups Jobs tab (Slice 7)

Replace the JobsTab stub with a real implementation on the backups service page, lifted from components/BackupsPage.tsx. Renders the Jobs/Runs/Alerts sub-tabs with their existing tables (BackupJobsTable, BackupRunsTable, BackupAlertsTable) and the acknowledge-alert mutation. The backup hooks (useBackupJobs/Runs/Alerts) currently query globally -- the backend gained service_id attribution in slice 3, but the hooks don't yet accept a serviceId param. This tab shows all backups data for now; per-instance scoping by instance.id is a documented follow-up once the hooks gain the parameter. The page heading from BackupsPage is dropped (the service page header already shows the instance name + 'Backups' binding). stubs.tsx loses the JobsTab stub; index.ts wires the real component. Tests: JobsTab renders sub-tabs + job-name rows with mocked hooks. 96 tests pass (+2); lint/build green. Refs openspec/changes/services-as-hub-ia/ (spec R2.4, tasks slice 7).
2026-06-26 19:34:05 +00:00
parent b2e1acd257
commit 6a1f8bbd59
4 changed files with 146 additions and 5 deletions
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { JobsTab } from "../JobsTab";
+import type { ServiceInstance } from "../../../types";
+
+const instance: ServiceInstance = {
+	id: "bkp-1",
+	service_type: "backups",
+	name: "Main Backups",
+	config: { ingestion_label: "default" },
+	secrets_set: {},
+	enabled: true,
+	created_at: 1_700_000_000,
+	updated_at: 1_700_000_000,
+};
+
+vi.mock("../../../hooks/useBackups", () => ({
+	useBackupJobs: () => ({
+		data: [
+			{
+				id: "job-1",
+				name: "nightly",
+				source: "/data",
+				target: "s3://bucket",
+				schedule_interval_seconds: 86400,
+				created_at: 1_700_000_000,
+			},
+		],
+		isLoading: false,
+	}),
+	useBackupRuns: () => ({
+		data: [],
+		isLoading: false,
+	}),
+	useBackupAlerts: () => ({
+		data: [],
+		isLoading: false,
+	}),
+	useAcknowledgeAlert: () => ({ mutate: vi.fn() }),
+}));
+
+function renderTab() {
+	return render(<JobsTab instance={instance} />);
+}
+
+describe("JobsTab", () => {
+	it("renders the Jobs, Runs, and Alerts sub-tabs", () => {
+		renderTab();
+		expect(screen.getByRole("tab", { name: "Jobs" })).toBeInTheDocument();
+		expect(screen.getByRole("tab", { name: "Runs" })).toBeInTheDocument();
+		expect(screen.getByRole("tab", { name: /Alerts/ })).toBeInTheDocument();
+	});
+
+	it("renders the backup job name in the Jobs tab", () => {
+		renderTab();
+		expect(screen.getByText("nightly")).toBeInTheDocument();
+	});
+});