feat(frontend): slice 5 — migrate Settings + Actions to shadcn/Tailwind

Web UI rework. Form-heavy pair (controlled useState parity, no form lib): - pages/Settings.tsx off @mui: monitoring-machine CRUD, SSH-key mgmt, SSH test/validation feedback, danger-zone reset (ConfirmDialog), tabs - pages/Actions.tsx off @mui: saved-task editor, machine selection, run history, tabs - Both reuse migrated shared components (SectionCard/SelectionRailCard/ TabbedCard/HoverEditButton/ConfirmDialog/DialogFooter) as before - Behavioral tests added (mocked hooks; no live SSH) Gate: build + lint + test green (19 files / 39 tests).
2026-06-17 13:47:57 +00:00
parent c721f0dece
commit b6da7df7f9
6 changed files with 1490 additions and 1349 deletions
@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Actions } from "../Actions";
+import type { MonitoringMachine, SavedTask } from "../../types";
+
+const saveTaskMutate = vi.fn().mockResolvedValue({
+	id: "t1",
+	name: "Restart svc",
+	task_type: "shell",
+	content: "",
+	enabled: true,
+	default_machine_id: "",
+	notes: "",
+});
+const deleteTaskMutate = vi.fn();
+const runTaskMutate = vi.fn().mockResolvedValue({});
+
+let machines: MonitoringMachine[] = [];
+let tasks: SavedTask[] = [];
+
+vi.mock("../../hooks/useSettings", () => ({
+	useMonitoringSettings: () => ({ data: machines }),
+	useTasks: () => ({ data: tasks }),
+	useSaveTask: () => ({ mutateAsync: saveTaskMutate, isPending: false }),
+	useDeleteTask: () => ({ mutate: deleteTaskMutate }),
+	useRunTask: () => ({ mutateAsync: runTaskMutate, isPending: false }),
+	useTaskRuns: () => ({ data: { items: [] } }),
+}));
+
+function machine(
+	overrides: Partial<MonitoringMachine> = {},
+): MonitoringMachine {
+	return {
+		id: "m1",
+		name: "This machine",
+		mode: "local",
+		enabled: true,
+		services: ["monitoring", "files"],
+		host: "",
+		port: 22,
+		username: "",
+		key_directory: "",
+		key_name: "",
+		ssh_key_id: "",
+		ssh_private_key_set: false,
+		ssh_private_key_passphrase_set: false,
+		password_set: false,
+		media_root: "",
+		path_prefix: "",
+		jellyfin_url: "",
+		jellyfin_user_id: "",
+		jellyfin_api_key_set: false,
+		jellyseerr_url: "",
+		jellyseerr_api_key_set: false,
+		notes: "",
+		...overrides,
+	} as MonitoringMachine;
+}
+
+function task(overrides: Partial<SavedTask> = {}): SavedTask {
+	return {
+		id: "t1",
+		name: "Restart svc",
+		task_type: "shell",
+		content: "systemctl restart foo",
+		enabled: true,
+		default_machine_id: "",
+		notes: "",
+		created_at: 0,
+		updated_at: 0,
+		...overrides,
+	} as SavedTask;
+}
+
+beforeEach(() => {
+	saveTaskMutate.mockClear();
+	deleteTaskMutate.mockClear();
+	runTaskMutate.mockClear();
+	machines = [];
+	tasks = [];
+});
+
+describe("Actions", () => {
+	it("shows the empty state and creates a task via the editor dialog", async () => {
+		render(<Actions />);
+
+		expect(screen.getByText("No action selected")).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "Add action" }),
+		).toBeInTheDocument();
+
+		await userEvent.click(screen.getByRole("button", { name: "Add action" }));
+		// Editor dialog opened (Name field is unique to the editor).
+		expect(screen.getByLabelText("Name")).toBeInTheDocument();
+
+		// Controlled input parity: name + default shell type flow through.
+		await userEvent.type(screen.getByLabelText("Name"), "Restart svc");
+		await userEvent.click(screen.getByRole("button", { name: "Save action" }));
+
+		expect(saveTaskMutate).toHaveBeenCalledTimes(1);
+		const saved = saveTaskMutate.mock.calls[0][0];
+		expect(saved.name).toBe("Restart svc");
+		expect(saved.task_type).toBe("shell");
+	});
+
+	it("disables the Run button until a run machine is selected", async () => {
+		machines = [machine()];
+		tasks = [task()];
+		render(<Actions />);
+
+		// Selecting a saved task tab exposes the detail + Run control.
+		await userEvent.click(screen.getByRole("tab", { name: "Restart svc" }));
+
+		const runButton = screen.getByRole("button", { name: "Run action" });
+		expect(runButton).toBeDisabled();
+	});
+});