feat(workbench): align v2 GIS and SCADA API

tests/browser/button-system.e2e.ts

@@ -1,4 +1,5 @@
 import { expect, test, type Page } from "@playwright/test";
+import { mockScadaApi } from "./support/mock-scada-api";
 
 test.beforeEach(async ({ page }) => {
   await prepareWorkbench(page);
@@ -213,7 +214,8 @@ async function prepareWorkbench(page: Page) {
         TJWATER_AUTH_MODE: "disabled",
         TJWATER_MAPBOX_ACCESS_TOKEN: "",
         TJWATER_MAP_URL: "https://button-system.invalid/geoserver",
-        TJWATER_GEOSERVER_WORKSPACE: "tjwater",
+        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
+        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
         TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
         TJWATER_ENABLE_DEV_PANEL: "false",
         TJWATER_ENABLE_MSW: "false"
@@ -229,4 +231,5 @@ async function prepareWorkbench(page: Page) {
   await page.route("**/*.riv", async (route) => {
     await route.abort();
   });
+  await mockScadaApi(page);
 }

tests/browser/scada-api-source.e2e.ts

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+import { mockScadaApi } from "./support/mock-scada-api";
+
+test("loads SCADA from the backend API and aligns map features by device_id", async ({ page }) => {
+  await page.route("**/runtime-config.js", async (route) => {
+    await route.fulfill({
+      contentType: "application/javascript",
+      body: `globalThis.__TJWATER_CONFIG__ = {
+        TJWATER_AUTH_MODE: "disabled",
+        TJWATER_MAPBOX_ACCESS_TOKEN: "",
+        TJWATER_MAP_URL: "https://scada-map.invalid/geoserver",
+        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
+        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
+        TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
+        TJWATER_ENABLE_DEV_PANEL: "false",
+        TJWATER_ENABLE_MSW: "false"
+      };`
+    });
+  });
+  await page.route("https://scada-map.invalid/**", async (route) => {
+    await route.fulfill({ status: 204, body: "" });
+  });
+  await mockScadaApi(page, [{
+    device_id: "SCADA-1",
+    device_type: "pressure",
+    node_id: "J-1",
+    link_id: null,
+    api_query_id: "query-1",
+    transmission_mode: "realtime",
+    transmission_frequency: "2s",
+    reliability: 100,
+    x: 1,
+    y: 2,
+    longitude: 121.5,
+    latitude: 30.9
+  }]);
+  const deviceRequestPromise = page.waitForRequest((request) =>
+    request.url().includes("/api/v1/scada-devices")
+  );
+
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+
+  const deviceRequest = await deviceRequestPromise;
+  expect(deviceRequest.headers()["x-project-id"]).toBe("project-1");
+  await expect.poll(async () => page.evaluate(() => {
+    const map = globalThis.__waterNetworkMap;
+    if (!map) return [];
+    return map.querySourceFeatures("scada").map((feature) => ({
+      id: String(feature.id),
+      deviceId: String(feature.properties?.device_id)
+    }));
+  })).toContainEqual({ id: "SCADA-1", deviceId: "SCADA-1" });
+});

tests/browser/support/mock-scada-api.ts

@@ -0,0 +1,27 @@
+import type { Page } from "@playwright/test";
+
+export async function mockScadaApi(page: Page, devices: unknown[] = []) {
+  await page.route("https://tjwater-api.invalid/**", async (route) => {
+    const url = new URL(route.request().url());
+    if (url.pathname === "/api/v1/projects") {
+      await route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify({
+          items: [{ project_id: "project-1", gs_workspace: "tjwater_next", status: "active" }],
+          total: 1,
+          limit: 1000,
+          offset: 0
+        })
+      });
+      return;
+    }
+    if (url.pathname === "/api/v1/scada-devices") {
+      await route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify({ items: devices, total: devices.length, limit: 1000, offset: 0 })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: "application/json", body: "{}" });
+  });
+}

tests/browser/workbench-visual.e2e.ts

@@ -1,5 +1,6 @@
 import { expect, test, type Page } from "@playwright/test";
 import { mockAgentApi } from "./support/mock-agent-api";
+import { mockScadaApi } from "./support/mock-scada-api";
 
 const EMPTY_RASTER_TILE = Buffer.from(
   "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=",
@@ -120,7 +121,8 @@ async function prepareDeterministicWorkbench(page: Page) {
         TJWATER_AUTH_MODE: "disabled",
         TJWATER_MAPBOX_ACCESS_TOKEN: "visual-test-token",
         TJWATER_MAP_URL: "https://visual-map.invalid/geoserver",
-        TJWATER_GEOSERVER_WORKSPACE: "tjwater",
+        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
+        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
         TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
         TJWATER_ENABLE_DEV_PANEL: "false",
         TJWATER_ENABLE_MSW: "false"
@@ -142,6 +144,7 @@ async function prepareDeterministicWorkbench(page: Page) {
   await page.route("**/*.riv", async (route) => {
     await route.abort();
   });
+  await mockScadaApi(page);
 }
 
 async function openWorkbench(page: Page) {

tests/browser/workspace-main-frame.e2e.ts

@@ -1,5 +1,6 @@
 import { expect, test, type Page } from "@playwright/test";
 import { mockAgentApi } from "./support/mock-agent-api";
+import { mockScadaApi } from "./support/mock-scada-api";
 
 test("the default workspace docks Agent beside the persistent map", async ({ page }) => {
   await page.setViewportSize({ width: 1600, height: 900 });
@@ -138,7 +139,8 @@ async function prepareMainFrame(page: Page) {
         TJWATER_AUTH_MODE: "disabled",
         TJWATER_MAPBOX_ACCESS_TOKEN: "",
         TJWATER_MAP_URL: "https://workspace-map.invalid/geoserver",
-        TJWATER_GEOSERVER_WORKSPACE: "tjwater",
+        TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
+        TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
         TJWATER_AGENT_API_BASE_URL: "http://127.0.0.1:8787",
         TJWATER_ENABLE_DEV_PANEL: "true",
         TJWATER_ENABLE_MSW: "false"
@@ -148,4 +150,5 @@ async function prepareMainFrame(page: Page) {
   await page.route("https://workspace-map.invalid/**", async (route) => {
     await route.fulfill({ status: 204 });
   });
+  await mockScadaApi(page);
 }