perf(studio): defer optional panels and trim validator imports

e2e/ui/studio.spec.ts

@@ -0,0 +1,164 @@
+import { expect, test } from "@playwright/test";
+
+const items = [
+	{
+		id: 1,
+		classname: "fixture_chair",
+		name: "Fixture chair",
+		description: "Synthetic chair",
+		type: "flooritem",
+		revision: 1,
+		category: "other",
+		alreadyImported: true,
+		nitroExists: true,
+		iconUrl: "/fixture/cover.svg",
+	},
+	{
+		id: 2,
+		classname: "fixture_table",
+		name: "Fixture table",
+		description: "Synthetic table",
+		type: "flooritem",
+		revision: 1,
+		category: "other",
+		alreadyImported: false,
+		nitroExists: false,
+		iconUrl: "/fixture/cover.svg",
+	},
+];
+
+test("Studio opens and dismisses detail, Nitro editor and import review", async ({
+	page,
+}) => {
+	const errors: string[] = [];
+	const mutations: string[] = [];
+	let metadataRequests = 0;
+	page.on("pageerror", (error) => errors.push(error.message));
+	await page.route("**/api/**", async (route) => {
+		const request = route.request();
+		const url = new URL(request.url());
+		if (url.pathname === "/api/admin/studio/inspect") {
+			const { classnames } = request.postDataJSON() as { classnames: string[] };
+			return route.fulfill({
+				json: {
+					items: classnames.map((classname) => ({
+						classname,
+						sql: [],
+						catalog: [],
+						furnidata: [],
+						furnidataReadable: true,
+						nitro: { exists: false, bytes: 0 },
+						icon: { exists: false, bytes: 0 },
+					})),
+				},
+			});
+		}
+		if (url.pathname === "/api/admin/studio/source-assets") {
+			const body = request.postDataJSON() as {
+				items: Array<{ classname: string }>;
+			};
+			return route.fulfill({
+				json: {
+					items: body.items.map(({ classname }) => ({
+						classname,
+						state: "available",
+						revision: 1,
+						alternatives: [],
+						attempts: [],
+					})),
+				},
+			});
+		}
+		if (request.method() !== "GET") {
+			mutations.push(`${request.method()} ${url.pathname}`);
+			return route.fulfill({
+				status: 405,
+				json: { error: "Fixture forbids mutations" },
+			});
+		}
+		if (url.pathname.endsWith("/nitro-editor")) {
+			metadataRequests++;
+			return route.fulfill({
+				json: {
+					metadata: {
+						name: "fixture_chair",
+						logicType: "furniture_basic",
+						visualizationType: "furniture_static",
+					},
+					flags: { canstandon: false, cansiton: false, canlayon: false },
+				},
+			});
+		}
+		if (url.pathname === "/api/admin/import/furni") {
+			return route.fulfill({
+				json:
+					url.searchParams.get("action") === "stats"
+						? { totalInDb: 1, inCatalog: 1, notInCatalog: 0, missingNitro: 0 }
+						: {
+								items,
+								meta: { currentPage: 1, lastPage: 1, total: 2, perPage: 20 },
+							},
+			});
+		}
+		if (url.pathname === "/api/admin/import/clone")
+			return route.fulfill({ json: { sources: [] } });
+		if (url.pathname === "/api/admin/studio/import-jobs")
+			return route.fulfill({ json: { ok: true, jobs: [], nextCursor: null } });
+		return route.fulfill({
+			status: 404,
+			json: { error: "Unknown fixture endpoint" },
+		});
+	});
+	await page.goto("/admin/studio-harness");
+	await expect(
+		page.getByRole("button", { name: "View Fixture chair", exact: true }),
+	).toBeVisible();
+	expect(metadataRequests).toBe(0);
+	await page
+		.getByRole("button", { name: "View Fixture chair", exact: true })
+		.click();
+	await expect(
+		page.getByRole("button", { name: "Close furniture details", exact: true }),
+	).toBeVisible();
+	await expect(
+		page.getByText("Synthetic chair", { exact: true }).first(),
+	).toBeVisible();
+	await page
+		.getByRole("button", { name: "Close furniture details", exact: true })
+		.click();
+	await expect(
+		page.getByRole("button", { name: "Close furniture details", exact: true }),
+	).toHaveCount(0);
+	await page
+		.getByRole("button", { name: "Edit nitro fixture_chair", exact: true })
+		.click();
+	const editor = page.getByRole("dialog", { name: "Edit Nitro", exact: true });
+	await expect(editor).toBeVisible();
+	await expect(
+		editor.getByRole("switch", { name: "Can Sit On", exact: true }),
+	).toBeVisible();
+	expect(metadataRequests).toBe(1);
+	await editor.getByRole("button", { name: "Cancel", exact: true }).click();
+	await expect(editor).toHaveCount(0);
+	await page
+		.getByRole("button", { name: "Import fixture_table", exact: true })
+		.click();
+	const review = page.getByRole("dialog", {
+		name: "Review furniture import",
+		exact: true,
+	});
+	await expect(review).toBeVisible();
+	await expect(
+		review.getByText("Fixture table", { exact: true }),
+	).toBeVisible();
+	await expect(
+		review.getByRole("button", {
+			name: "Continue to confirmation",
+			exact: true,
+		}),
+	).toBeEnabled();
+	await review.getByRole("button", { name: "Cancel", exact: true }).click();
+	await expect(review).toHaveCount(0);
+	expect(mutations).toEqual([]);
+	expect(errors).toEqual([]);
+});