feat(ui): replace D3+Dagre attack path graph with React Flow

.github/workflows/ui-tests.yml

@@ -42,6 +42,8 @@ jobs:
             fonts.gstatic.com:443
             api.github.com:443
             release-assets.githubusercontent.com:443
+            cdn.playwright.dev:443
+            objects.githubusercontent.com:443
 
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
@@ -152,6 +154,24 @@ jobs:
           echo "Only test files changed - running ALL unit tests"
           pnpm run test:run
 
+      - name: Cache Playwright browsers
+        if: steps.check-changes.outputs.any_changed == 'true'
+        id: playwright-cache
+        uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5.0.4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-chromium-${{ hashFiles('ui/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-chromium-
+
+      - name: Install Playwright Chromium browser
+        if: steps.check-changes.outputs.any_changed == 'true' && steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium
+
+      - name: Run browser tests
+        if: steps.check-changes.outputs.any_changed == 'true'
+        run: pnpm run test:browser
+
       - name: Build application
         if: steps.check-changes.outputs.any_changed == 'true'
         run: pnpm run build

ui/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+__screenshots__/
 
 # next.js
 /.next/
@@ -28,6 +29,9 @@ yarn-error.log*
 .env*.local
 .env
 
+# Claude Code local settings
+.claude/
+
 # vercel
 .vercel
 

ui/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## Unreleased
+
+### 🚀 Added
+
+- Browser test mode using Vitest with the Playwright provider, with initial coverage of the Attack Paths page and a new `pnpm test:browser` script wired into CI
+
+### 🔄 Changed
+
+- Attack Paths graph: extract shared primitives across `FindingNode`, `ResourceNode`, and `InternetNode` (hidden handles, label truncation, fill/border resolution) without forcing a generic node renderer [(#10705)](https://github.com/prowler-cloud/prowler/pull/10705)
+
+---
+
 ## [1.25.2] (Prowler v5.25.2)
 
 ### 🔄 Changed

ui/__tests__/msw/handlers/attack-paths.ts

@@ -0,0 +1,106 @@
+import { http, HttpResponse } from "msw";
+
+import type { PageFixture } from "@/app/(prowler)/attack-paths/(workflow)/query-builder/attack-paths-page.fixtures";
+import type {
+  AttackPathQueriesResponse,
+  AttackPathQuery,
+  AttackPathQueryResult,
+  AttackPathScan,
+  AttackPathScansResponse,
+  QueryResultAttributes,
+} from "@/types/attack-paths";
+
+const API = process.env.NEXT_PUBLIC_API_BASE_URL!;
+
+type JsonApiErrorBody = {
+  errors: Array<{ detail: string; status: string }>;
+};
+
+const toScansApiResponse = (
+  scans: AttackPathScan[],
+): AttackPathScansResponse => ({
+  data: scans,
+  links: {
+    first: `${API}/attack-paths-scans?page=1`,
+    last: `${API}/attack-paths-scans?page=1`,
+    next: null,
+    prev: null,
+  },
+});
+
+const toQueriesApiResponse = (
+  queries: AttackPathQuery[],
+): AttackPathQueriesResponse => ({
+  data: queries,
+});
+
+const toQueryResultApiResponse = (
+  attrs: QueryResultAttributes,
+  queryId: string,
+): AttackPathQueryResult => ({
+  data: {
+    type: "attack-paths-query-run-requests",
+    id: queryId,
+    attributes: attrs,
+  },
+});
+
+const toErrorBody = (detail: string, status: number): JsonApiErrorBody => ({
+  errors: [{ detail, status: String(status) }],
+});
+
+export const handlersForFixture = (fx: PageFixture) => [
+  http.get(`${API}/attack-paths-scans`, () =>
+    HttpResponse.json<AttackPathScansResponse>(toScansApiResponse(fx.scans)),
+  ),
+
+  http.get<{ scanId: string }>(
+    `${API}/attack-paths-scans/:scanId/queries`,
+    () =>
+      HttpResponse.json<AttackPathQueriesResponse>(
+        toQueriesApiResponse(fx.queries),
+      ),
+  ),
+
+  http.post<{ scanId: string }>(
+    `${API}/attack-paths-scans/:scanId/queries/run`,
+    () => {
+      if (fx.queryError) {
+        return HttpResponse.json<JsonApiErrorBody>(
+          toErrorBody(fx.queryError.error, fx.queryError.status),
+          { status: fx.queryError.status },
+        );
+      }
+      if (!fx.queryResult) {
+        return HttpResponse.json<JsonApiErrorBody>(
+          toErrorBody("No data found", 404),
+          { status: 404 },
+        );
+      }
+      return HttpResponse.json<AttackPathQueryResult>(
+        toQueryResultApiResponse(fx.queryResult, fx.queryId),
+      );
+    },
+  ),
+
+  http.post<{ scanId: string }>(
+    `${API}/attack-paths-scans/:scanId/queries/custom`,
+    () => {
+      if (fx.queryError) {
+        return HttpResponse.json<JsonApiErrorBody>(
+          toErrorBody(fx.queryError.error, fx.queryError.status),
+          { status: fx.queryError.status },
+        );
+      }
+      if (!fx.queryResult) {
+        return HttpResponse.json<JsonApiErrorBody>(
+          toErrorBody("No data found", 404),
+          { status: 404 },
+        );
+      }
+      return HttpResponse.json<AttackPathQueryResult>(
+        toQueryResultApiResponse(fx.queryResult, fx.queryId),
+      );
+    },
+  ),
+];

ui/__tests__/msw/handlers/index.ts

@@ -0,0 +1,13 @@
+import type { HttpHandler } from "msw";
+
+/**
+ * Static handlers shared by every browser test — registered as defaults on
+ * the worker. Use this list for endpoints whose response doesn't change
+ * across tests (e.g. `/users/me`, `/tenants/current`, health checks).
+ *
+ * Per-domain dynamic handlers that depend on fixture data live in their own
+ * files alongside this index (e.g. `./attack-paths.ts`) and are imported
+ * directly by the tests that need them, then wired via
+ * `worker.use(...handlersForFixture(fx))`.
+ */
+export const handlers: HttpHandler[] = [];

ui/__tests__/msw/worker.ts

@@ -0,0 +1,5 @@
+import { setupWorker } from "msw/browser";
+
+import { handlers } from "./handlers";
+
+export const worker = setupWorker(...handlers);

ui/__tests__/render-browser.tsx

@@ -0,0 +1,25 @@
+import type { ComponentType, PropsWithChildren, ReactElement } from "react";
+import { render as vitestRender } from "vitest-browser-react";
+
+const TestProviders = ({ children }: PropsWithChildren) => <>{children}</>;
+
+type RenderOptions = Parameters<typeof vitestRender>[1];
+
+export function render(ui: ReactElement, options?: RenderOptions) {
+  const userWrapper = options?.wrapper as
+    | ComponentType<PropsWithChildren>
+    | undefined;
+
+  const Wrapper = userWrapper
+    ? ({ children }: PropsWithChildren) => {
+        const Inner = userWrapper;
+        return (
+          <TestProviders>
+            <Inner>{children}</Inner>
+          </TestProviders>
+        );
+      }
+    : TestProviders;
+
+  return vitestRender(ui, { ...options, wrapper: Wrapper });
+}

ui/actions/attack-paths/query-result.adapter.ts

@@ -131,27 +131,16 @@ export function adaptQueryResultToGraphData(
   // Populate findings and resources based on HAS_FINDING edges
   edges.forEach((edge) => {
     if (edge.type === "HAS_FINDING") {
-      const sourceId =
-        typeof edge.source === "string"
-          ? edge.source
-          : (edge.source as { id?: string })?.id;
-      const targetId =
-        typeof edge.target === "string"
-          ? edge.target
-          : (edge.target as { id?: string })?.id;
-
-      if (sourceId && targetId) {
-        // Add finding to source node (resource -> finding)
-        const sourceNode = normalizedNodes.find((n) => n.id === sourceId);
-        if (sourceNode) {
-          sourceNode.findings.push(targetId);
-        }
+      // Add finding to source node (resource -> finding)
+      const sourceNode = normalizedNodes.find((n) => n.id === edge.source);
+      if (sourceNode) {
+        sourceNode.findings.push(edge.target);
+      }
 
-        // Add resource to target node (finding <- resource)
-        const targetNode = normalizedNodes.find((n) => n.id === targetId);
-        if (targetNode) {
-          targetNode.resources.push(sourceId);
-        }
+      // Add resource to target node (finding <- resource)
+      const targetNode = normalizedNodes.find((n) => n.id === edge.target);
+      if (targetNode) {
+        targetNode.resources.push(edge.source);
       }
     }
   });